Releases

0.15.0

November 14, 2021

After 3 months of design work we're finalising our Figma library with all the components moving into testing phase. All components are designed with variants, auto-layout and paying incredible attention to handling composition of components the same way you would do that in code. Both React and Figma libraries are perfectly aligned so anything you can design with Arcade Figma library - you can immediately implement in code with no problems.

Design tokens documentation

We have revamped our design tokens documentation and added visual examples for all Arcade tokens. Every token type now has a separate page, going through their values and guidelines on how to use them.

Other improvements

  • Added Vite starter project to the installation guide
  • Backdrop: Overlay component was renamed to Backdrop utility
  • Divider: Added blank property support for easier composition with Tabs
  • FormControl: Updated label color for the disabled form fields
  • Modal: Merged with Drawer to support position property
  • Modal: Added support for custom and responsive padding values
  • Modal: Added support for custom width values
  • Overlay: Scrim was renamed to Overlay
  • Overlay: Added easing to the scrim gradient value
  • Popover: Added custom padding support
  • Progress: Added small size and white color support
  • Select: Added icon support
  • Tabs: Merged SegmentedControl with tabs. Tabs support pills-elevated now and all variants can work as a form control
  • Text field: Added icon support

0.14.0

October 30, 2021

Documentation updates

We've made an major update to our documentation layout to let you discover the information you're looking for faster. Some of the highlights are:

  • Previews and highlights for all components and utilities
  • Navigation to similar components
  • Navigation to previous and next articles
  • Search to the side menu to filter the components, including filtering by keywords
  • Outline of the article highlighting section that are currently on the screen
  • Anchor links for specific parts of the article

Other improvements

  • Card: Add elevated card support
  • Card: Added support for custom bleed values and responsive bleed behaviour
  • Container: Added support for custom padding values and responsive padding
  • Checkbox: Updated styles for disabled checked state
  • Hidden: Update format of the function arguments when used with render props
  • Icon: Added dynamic size support. Any unit token multiplier can now be used to define the icon size
  • MenuItem: Moved from fullWidth property to roundedCorners to simplify its API
  • Radio: Updated styles for disabled checked state
  • Switch: Added built-in integration with FormControl utility

0.13.0

October 17, 2021

Framework integrations

During the past two weeks we have been improving the Arcade onboarding experience for some of the most popular front-end frameworks and bundles. So far we have prepared 4 starter examples for Parcel, Webpack, NextJS and Create React App as well as few demos with more advanced examples.

As a way to support NextJS users, we've also published an Arcade Next CSS plugin to enable CSS setup out of the box.

Figma progress

We have passed 50% of our Figma library progress with 12 components and design token library ready. Everything is already built with theming/dark mode support, using auto-layout and providing variants for every component.

If you want to track the progress, you can do that in our Github project board.

Other improvements

  • Actionable: Improved event handling logic
  • Avatar: Fixed icon alignment for auto width icons
  • Documentation: Added navigation for previous and next articles

v0.12.0

October 3, 2021

RGB color tokens support

When using colors as variables in CSS, you would usually hit a wall when you want to apply custom opacity values to them. The only way to combine a color variable with opacity is to use it with rgba() color function in CSS.

In order to support this case, we've added auto-generation for rgb values of the background color tokens. They use similar names to background token names with an additional rgb prefix:

Note that the variable stores only the rgb values themselves but doesn't wrap it with a function. This means you can now use it together with rgba() color function in your css:

Other improvements

  • Avatar: Adjusted icon size in larger Avatar size, added faded colors support.
  • Button: Updated neutral Button to use inherit Loader color, added white and black colors support for rendering on media content.
  • Card: Add custom padding value support.
  • Frame: Added maxWidth and maxHeight properties.
  • Icon: Added smallest size value, added inherit size support.
  • Link: Added critical color, added icon support.
  • Select: Aligned Select height with Button height on mobile viewports.
  • Stack: Stack.Item split flag migrated to gap="auto".
  • Switch: Updated the disabled checked background color to use primary color.
  • TextField: Aligned TextField height with Button height on mobile viewports.

v0.11.0

September 19, 2021

Arcade video demo

On the hompage, we now have a video demo for those who want to take a look of how the development process looks like. In the demo we are building a social media card with some common layouts and interactive behavior that you would usually see in your day-to-day job. Additionally, we show how theming and dark mode work with no extra effort or requirements to write custom styling logic on your side.

Chained trap focus

While building interfaces we have to implement complex behaviors like modal being opened from a dropdown. Both of these components should trap the focus and return it back to the trigger element when closed. Starting with this release with support chained trap focus. It will return the focus back to the correct trigger even if some of the trigger elements are no longer rendered on the screen.

For example, try going through the whole flow using your keyboard in the following example. Once you close the modal, focus will return to the "Open menu" button.

Hint: Click near the button first and press Tab, to focus on the button using keyboard.

Other improvements

  • Button: Elevated flag support.
  • Container: Fixed layout issues when used inside other flexbox elements.
  • DropdownMenu: Added custom width support.
  • Frame: Added support for separating vertical and horizontal padding values.
  • Stack: Stack.Item split flag support to pull an item away from the rest of the items.
  • Stack: Added automatic wrap handling for Stack.Item using grow and split with responsive values.
  • Backdrop: Darkened the background to improve the contrast ratio of the backdrop content with the page.
  • useElementId: Fixed id generation for React.StrictMode development mode.
  • Arcade theme: Reduced the line-height of caption1 font token.

v0.10.0

August 16, 2021

New homepage

Our homepage has been completely revamped to put emphasize on the newly released features, including our recent theming engine. You can try applying one of the 3 demo themes to our whole website, including their light and dark modes.

More stack improvements

  • Stack.Item now has gap support. This comes handy when you need a list of elements with different gaps and lets you achieve that without nesting multiple Stacks in each other.
  • Stack got improved nested responsive properties support, including bug fixes for the edge cases found that were not supported before.
  • Inline and reversed flags got merged into a single direction property for better responsive properties support.
  • Vertical stack now automatically take full height of its parent to make controlling its children alignment easier.

Other improvements

  • ThemeMode: Renamed to ColorMode.
  • ColorMode: Added default foreground color reset for ColorMode scopes instead of using the global text color.
  • Hidden: Migrated to from and till properties to provide better support of responsive values.
  • Text: Added align property.
  • Text: Added text color transition for cases when parent is controlling the color value.
  • Card: Added selected flag.
  • Arcade Provider: Improved switching between root-level themes

v0.9.0

July 28, 2021

Dynamic responsive properties

Stack is the core of any layout you build, and we want it to be as flexible as possible. Starting with 0.9.0 we are using CSS variables to work with responsive styles, and we've started with Stack component integration. Till now, we've only supported a limited number of values that you could use as gap property because its styles have been predefined in CSS. With the new responsive CSS variables, we're changing gap property to support any numerical value as a multiplier of the base unit token.

This change includes both, regular and responsive properties, which means you can pass any number you want for every viewport size:

With this new approach, we're shipping a couple more features for the Stack component:

  • Grid is finally merged with Stack. Stack.Item now supports size property while all other properties stay the same.
  • Stack now supports responsive wrap property to control flex-wrap manually.
  • Stack.Item now supports responsive order property to control the order of items rendering.

Logical properties for RTL

We've moved away from supporting RTL during build step with a PostCSS plugin and are using CSS logical properties now instead. This takes us one step closer to moving away from CSS build step and using completely native CSS. Additionally, this update helped us improve a handful components and how they render in RTL mode.

Bundle size

We have added size-limit integration to our merge requests which lets us track all the bundle size changes as one of our main metrics. For example, even after introducing all these new features and responsive styles, we have actually reduced our total bundle size by 2kb down to 41kb.

v0.8.0

July 17, 2021

Theming Engine

We're finally releasing out theming engine, including completely typed JS API and CLI to build themes using Arcade design tokens. Writing your theme definition once will build a React component for you that's ready to be imported into your application. Among other features its main highlights are:

  • All theming happens in build time and doesn't affect your runtime performance.
  • Dark mode is supported on the design tokens level. No need to write conditionals in your components.
  • Scoped theming support which makes it easy to use multiple themes in the same application.
  • Theme fragments which define only a part of a theme to save your bundle size

Other improvements

  • Added additional viewport boundaries checks for mobile viewports in Popover.
  • Fixed Popover with triggerType="hover" affecting how other Popovers on the page work.

v0.7.0

June 19, 2021

Arcade demo

For this release we've built our first demo of a page using Arcade. It's aiming to provide a publicly available example of a project setup as well as giving a hint about how building interfaces with Arcade looks like.

Responsive properties API update

We've started supporting more scenarios for responsive development. In this release we're adding another viewport support to differentiate between portrait and landscape tablet modes. This means that our viewport media queries names have been updated accordingly:

To make the components easier to use with 4 viewports available, we're also switching from array notation to an object notation for the responsive properties. Since we use mobile-first approach, you don't have to define values for every viewport manually. For example, you can set the Stack gap to be x2 by default and change to x4 starting with large viewport size.

Other improvements

  • Tabs: Fixed button animation blinking in iOS Safari
  • Popover: Improved keyboard navigation defaults for triggerType="hover"

v0.6.0

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.

v0.5.0

May 21, 2021

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 now supports title and subtitle elements to handle accessibility.
  • Backdrop now won't close when user tries to close any type of dropdown menu.

v0.4.0

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.

Overlay component

We're adding Overlay 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.

v0.3.0

April 24, 2021

Tabs component

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

v0.2.0

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.
  • useColorMode 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

v0.1.0

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! 🕹️