Johnny 2x4

New Features

– TextArea: add autoFocus prop (#988)

Fixes

– Hint: add size restriction (#992)
– Chip: fix a11y (#991)

beanbeencleandeangenegleangreenjeanjeannekeenleanlienmeanmesnemienpeenpreenqueenscenescreenseensheenspleenteentweenweanfifteen

Breaking Changes

• Breaking: (literally!) Break words in Cards #975
• Breaking: More flexible drag & drop on Tree #972
• Breaking: Make Progress fixed on top and remove error prop #970
• Breaking: Make error message inline instead of floating #959
• Breaking: Remove deprecated constants #929
• Breaking: Migrate to emotion 10 #926
• Breaking: Add columns param to CardColumns and remove flexColumn param from CardColumn #949

New Features

• Feature: Guided Tour #973
• Feature: New QuestionFill icon #964
• Feature: Hotkey hook #956
• Feature: GO HARD on a11y #922
• Feature: Add support for SSR #931
• Feature: Splash hooks & useInterval #940
• Feature: TopbarSelect hooks #943
• Add clearMessages to OperationalContext #962

Fixes

• Fix: Docs #948
• Fix: it was not possible to disable Tree component inside CardSection #953
• Fix: Toggle: decreased the label font size to 12px/fineprint #951
• Fix: Improve tree component #950
• Fix autocomplete z-index #935
• Fix docs #933
• Adjust context menu's overlay z-index to cover everything #927
• Fix: Avatar stretch #978
• Add border to CardHeader #980
• always trigger latest callback #981
• [Table] Remove hover if no click action #977
• [SidenavHeader] Hide cursor pointer if no onClick #979
• Add a margin to Title #974
• Pass props down to the Checkbox #963
• Remove prevent default from Action cell #961
• Add padding to td and th #947
• Add placeholder for textarea #939
• Fix click event on Tree #925

Hooks Migration

• Tabs hooks #941
• Modal hooks #942

Infra

• Add initial E2E setup #976
• cypress nav labels #967
• Timestamps, new label #966
• Remove danger-plugin-jest to resolve security issue #957
• Remove useless comments #932
• Update react-beautiful-dnd (correctly) d3e118a
• Adjust registry URL b4d838a
• Update beautiful-dnd 78fc1d0

HOOKS, I did it again 🎶

This release introduces a few new features and our first ever utility hooks WOOOOOO

• Feature: OperationalContext hook useOperationalContext (#911) – thanks, @adeelibr! 🎉
• Feature: component to React hook (#916) – thanks, @adeelibr! 🎉
• Feature: useSyncToPathState hook (#918)
• Feature: Add custom padding prop to PageContent (#917)

FIX IT FURIOUSLY

This release comes with the following fixes:

• Fixed width of fullWidth Textareas (#913)
• Fixed PageArea Grid (#914)
• Fixed Button Spacing (#915)

Unbreaking Unicorn

WOOOO NEW RELEASE TIME

New Features

• Page

  • supports a fullSize prop now that fills an entire page, omitting a header. (#894)
  • you can now have tabs, even without a title prop.

• CardColumn now has tabs (#896)

• Table supports setting a width inside a cells prop handler. (#902)

• Cards now support onClick for fully clickable cards.

• Select now supports a maxOptions prop to truncate long lists. (#904)

• Buttons now look a little different. (#893)

• ActionMenu is now more compact. (#897)

• ContextMenuItem now has a stronger font-weight. (#903)

• Tree got a significant facelift. (#907)

Bug Fixes

• Sidenav had a weird children prop definition that we fixed in (#901)
• Select got an improvement with coercion. (#905)
• Form and its associated groups look better. (#906)

Loopy Lumber

NEW RELEASE TIME

Breaking Changes

• We removed the Breakdown component. (#882)

New Features

• Card
  • tabs now support spinners. (#877)
  • tabs now support icons leftOfTabs. (#889)
  • CardSections are now foldable. (#888)
• Confirm is more flexible. (#864)
• Topbar is improved. (#860)
• Toggle component that behaves like a switch. (#873)
• Message component that shows a message to a user. (#876)
• Tables are now sortable. (#878)
• Icon now has new icons: up/down chevrons. (#885)
• Modals now have full-width support. (#890)
• DatePicker now has a "day of week" mark. (#886)

Bug Fixes

• HeaderMenu
  • had an incorrect line-height. (#859)
  • had incorrect width. (#866)
• Group improvements (#862)
• Toggler improvements (#861)
• Code had an incorrectly placed copy icon. (#864)
• TopbarSelect was incorrectly exported. (#867)
• CardSection was collapsed incorrectly. (#868)
• confirm now has a higher z-index than a modal. (#879)
• modals now have a better full screen height. (#881)

Foldable Fern

This release comes with a lot of exciting new functionality! 🚀

New Features

• Contact: a component that we use internally to display a user's name along with some metadata (usually an email address) (#850)
• Foldable a UI-less state-container component that manages isFolded state and passes it down to children, allowing them to fold themselves. (#809)
• Group for grouping contents together in a card. This component is also foldable. (#855)

Minor Improvements

• CardSection's title is a little bit easier on the eyes (#846)
• ContextMenus now have better "modal" behavior: clicking anywhere outside closes them. (#848)
• Table now has an optional header that can be disabled via a headless prop. (#808)
• Code now has a copyable prop that allows its contents to be copied to the clipboard. (#856)

Infrastructure

We now use a serverless Lambda (powered by Netlify) to improve our communication via Slack webhooks and let us know when a PR preview becomes available. We also hook into our internal deployment pipelines to let us know when a new @next version becomes available via Slack as well.

We use node-fetch for this, which adds about 0.2kb to the bundle un-gzipped. This cost is defeated by the benefit of more transparent previews and version availability throughout our whole team.

Happy coding!

Curious George

This release improves the type-safety of the Paginator component, and adds focus and blur handlers to Textarea.

LN Page

This release comes from the great work of @eugengarkusha (thanks!) and breaks the public API by making the page prop on <Paginator /> mandatory. We find this explicitness to help developers in the future.

Bob the Builder

💡 New Features

• TopBar: a new component that serves as a toolbar for pages. (#818)
  • TopBar comes with button and select components.
• Markdown: a component that renders Markdown styled by Operational UI. (#831)

🐛 Bug Fixes

• TextAreas received some visual fine tuning. (#826)
• ContextMenu got a fix with event bubbling. (#842)
• Select's height is now the same as Input and DatePicker. (#838)
• Select's filter is now case-insensitive. (#836)
• Pages look fine in a Layout now, even without a title. (#834) (#839)

🛠 Refactoring

• Input's internals were rewritten.