June 8, 2021

Rethinking Stack utility


We've completely rebuilt our Stack component from ground up to cover a huge number of new edge cases. Most of our focus went into improving nested stacks, edge cases for specific components and reducing the number of elements rendered per every stack:

  • Refactored the usage of children removing all unnecessary item wrappers
  • Aligned gap property naming with token names.
  • Added item grow support to divided stack.
  • Improved support for button elements rendered as direct Stack children.
  • Added support for nested Stacks with flex-wrap: nowrap.
  • Added responsive property support for Stack.Item grow.
  • Improved AspectRatio and Card default layout calculations when used in Stack.

We've also tried using the new gap API for flexbox which turned out not so well, due to the limited Safari support and some webkit bugs that have to be fixed first. Once the state of the API becomes more stable, we will immediately migrate to it.

Other improvements

  • Actionable: Added custom tag support with as property.
  • ActionBar: Added large size support.
  • Button: Removed min-width from the text button variant.
  • Container: Added size presets for its max-width.
  • DropdownMenu: Added small gaps between menu items.
  • DropdownMenu: Fixed a bug which sometimes caused dropdown menu stay open after its close was triggerred.
  • Frame: Added support for any padding value as a unit design token multiplier.
  • Link: Added color and underline properties.
  • Switch: Improved keyboard navigation support when used inside Popover and Modal.
  • Tabs: Replaced navigation arrows with fade-out for scrolling tabs on mobile.
  • Tabs: Improved the navigation arrows toggle throttling.


May 21, 2021

Drawer component

We're adding a new Drawer component to cover the cases Modal and Popover don't support. It works great with 3 different positions support and we ourselves started using it for the documentation navigation on mobile.

Tabs: New variants

Tabs get 2 new variants to support new UI scenarios. borderless is helpful when it's used with parent component that provides its own border already. pills variant is used for less prominent secondary navigation.

Other improvements

  • Dismissible got min-height defined in case it has no content provided.
  • Popover got its keyboard navigation improved when it has no focusable elements in it.
  • Modal and Drawer now support title and subtitle elements to handle accessibility.
  • Overlay now won't close when user tries to close any type of dropdown menu.


May 9, 2021

Progress component

We release Progress component to the progress status for a task that takes a long time or consists of several steps. In some cases it can be used for other types of context, like displaying the score values etc.

Scrim component

Freshly baked muffins

We're adding Scrim component to let you build nice-looking media cards and display text content on top of them. You can find which position values it supports in the documentation.

Other improvements

  • Added HiddenVisually utility to render test applicable only for screen readers.
  • Removed Menu component in favor of MenuItem composition with existing layout components like Grid or Stack.
  • Added Button text variant that have padding around the text.
  • Removed Link icon support since that can be achieved with Button component now.
  • Add inherit color support for the TextField to use them on any background.
  • Added backgroundColor, borderColor, borderRadius and overflow for the Frame utility.
  • Improved focus trap functionality for components like Modal and Popover.
  • Added a color property for Icon when you want to override a color coming from the parent element.
  • Added an internal Portal utility that helps with managing z-index values of the components.


April 24, 2021

Tabs component

Utilities tab

We release Tabs component to let you organise navigation between multiple pages or content sections. Its compound components approach lets you easily build custom tab panels or add animation to them, and it's responsive out-of-the-box. Read more about it in its documentation.

Dropdown menu component

We're adding a DropdownMenu component built on top of Popover to simplify the process of building action menus. It works with a similar API as Popover does, however it encapsulates some of its logic, which means you don't have to pass all the right props and aria attributes to Popover manually. Read more about it in its documentation.

Other improvements

  • Popover, Tooltip: Improved the usage of accessibility attributes on their trigger and content components
  • Popover: Separated trapFocusMode and navigationMode into separate properties
  • Menu: Adjusted the gap size between an icon and content in the small Menu.Item
  • Actionable: Added a flag to apply the focus ring inside the element boundaries to make it work better with overflow: hidden parents
  • Dismissible: Simplified properties API
  • AspectRatio: Added default size styles for the img elements used inside it
  • Color design tokens: Simplified the usage of color tokens that include state


April 8, 2021

Arcade hooks

We have published and documented 6 hooks provided by the library. Together with our utility components they should close the gaps and let you build custom components using the Arcade context data:

  • useElementId to generate ids for DOM elements.
  • useFormControl to inherit values from the FormControl utility in your custom-built form fields.
  • useRTL to control the direction of the content flow
  • useScrollLock to lock and unlock page scrolling.
  • useThemeMode to switch between light and dark mode of the used theme.
  • useToggle for toggling states on and off.

Other improvements

  • Frame utility is now exposed from the library
  • Badge component received an additional wrapper support for handling Badge position and display


March 30, 2021

After a year in the making, the first release of the Arcade is now available for everyone to use. We're starting by releasing v0.1.0 with 31 components, utilities and their documentation. If you're just starting with the library, start with the Overview page from the menu on the left. We hope you enjoy using Arcade and are already looking forward to get the next release out of the door! 🕹️