22 September 2023

We're adding a new Table component that provides common compound components for rendering individual table elements and gives you a lot of flexibility through composition. This approach allows teams to build both, simple table with text content and rich tables with interactive content that are integrated with libraries like TanStack Table.

With the recent theming improvements, we're adding a new website page for previewing theme values on a real component examples. This is a first step towards making it easier to create new themes. In the upcoming releases, we're planning to expand its functionality with user interface for the runtime theme editing and theme values auto-generation.

  • Documentation: Updated website performance
  • Documentation: Added examples of working with theming settings based on user preferences and local storage before the React hydration

Button

  • Fixed margin value for the Button.Aligner used with ghost buttons

Card

  • Added selection transition

Checkbox

  • Added transition for the indeterminate state

Tabs

  • Added auto-scrolling when selecting items if Tabs.List is scrollable

View

  • Added space-between value for the justify property
11 September 2023

We have added a new way to work with themes without building them using our CLI ahead of time. With the new runtime theming feature, you can create new themes directly in the browser and insert them as a style tag, or create themes dynamically in Node.js and return css file contents.

We're adding a new compound component for ButtonButton.Group, which lets you wrap any number of buttons to colocate multiple actions together. It leverages the composition approach, which means you can combine items with other components like DropdownMenu.

  • Figma: Updated component style relations to improve the experience of switching color modes. Original issue is reported to the Figma team but let us know if you see any styles left that might be not respecting the mode without refreshing the page so we can patch those individual components.

Actionable

  • Fixed cases when onClick was triggered multiple times on Enter key press

Autocomplete

  • Added correct positioning support inside scrollable areas
  • Added trapFocus support for the dynamically rendered content

Checkbox

  • Removed default browser tap highlight on mobile devices

DropdownMenu

  • Added correct positioning support inside scrollable areas
  • Added trapFocus support for the dynamically rendered content

Popover

  • Added correct positioning support inside scrollable areas
  • Added trapFocus support for the dynamically rendered content

Radio

  • Removed default browser tap highlight on mobile devices

Select

  • Fixed the color of the chevron icon when using the disabled state

Switch

  • Removed default browser tap highlight on mobile devices

Tabs

  • Added support for wrapping Tabs.Item with framework router link components and other custom wrappers
  • Added href support for Tabs.Item
  • Added attributes support for Tabs.Item

Toast

  • Fixed an edge case when toast.hide is called immediately after toast was triggered
28 August 2023

Haven't used Reshaped before and interested in trying out our NPM package for the first time? Check our standalone release announcement covering core Reshaped principles.

Don't forget to resync the theme in Figma in case you're using the default theme or copy line-height variables into your custom theme from the Reshaped theme file.

Since the very beginning of Reshaped, we wanted to find more ways to give back to the community and it was very challenging to do without sacrificing our whole business model and keeping the development sustainable. In the past few months, we've started switching the focus of our paid assets and services more towards companies creating their design systems and we can finally start giving more of our content for free to let individual developers try our Reshaped.

In v2.2 we've published our React package to npm and it's now available to everyone for free. We hope this could help more indie hackers in building their new projects, as well as for everyone who has been asking us about how to use Reshaped in their open-source projects – you finally can.

For teams considering buying the Pro version with the library source code, free npm access could help with making the decision without having to pay for the individual licenses.

We're very excited to see more people using Reshaped and get more feedback to see what we can improve further on 🚀

We're extending our form fields collection with a new Autocomplete component that comes with full accessibility support and keyboard navigation. Like in many other components, we're following our composition approach here so you would see its primitives are built using TextField and DropdownMenu and let you control its internal composition and state based on your own requirements.

One of the requests we had was a component to pick a range of values, so we're adding support for the Slider component. It comes with built-in accessibility and keybord navigation, works for individual values and value ranges, as well as it supports all typical form states and can be combined with the FormControl utility.

  • Theming: Increased body-1 line-height to work better when used in multiline paragraphs
  • Theming: Removed Segoe UI fallback font from the default theme definition
  • Documentation website: Migrated to the Next.js app directory and has improved web vitals

Button

  • Updated xlarge size to use body-2 font to better align with the form fields

Checkbox

  • Added css transition for the selection state change

DropdownMenu

  • Added new selection-menu value for the trapFocusMode property
  • Added new focus value for the triggerType property
  • Added new disableHideAnimation property
  • Added attributes support for the DropdownMenu.Content

MenuItem

  • Added box-shadow css transition to align its focus state with the Button component

Popover

  • Added new selection-menu value for the trapFocusMode property
  • Added new focus value for the triggerType property
  • Added new disableHideAnimation property

Radio

  • Added css transition for the selection state change
12 July 2023

Don't forget to resync the theme in Figma in case you're using the default theme or copy line-height variables into your custom theme from the Reshaped theme file.

In this release, we are introducing two new themes. One of the themes is called Slate, which features a color palette inspired by productivity applications and developer tools. It primarily utilizes shades of gray that are closer to monochrome values.

Second theme is a theme based on the Figma interface and can help with building Figma plugins with a familiar set of components.

Badge has been enhanced with the following additional properties, expanding its versatility and usage in various scenarios:

  • large size: Make badges more prominent on the page, ideal for marketing pages where emphasis is important.
  • icon support: Illustrate the badge text with icons to enhance content recognition and visual appeal.
  • onDismiss and dismissAriaLabel: Utilize badges for displaying selected items, such as filters, and easily subscribe to their dismiss events.
  • onClick and href: Transform badges into actionable elements, allowing user navigation or general user interaction. Clicking or tapping on the badge triggers the defined action or navigation.

These additional properties empower you to leverage badges creatively in new scenarios, providing flexibility and enhancing the user experience.

  • Figma: Updated the color pallete preview layout with built-in contrast ratio checking for background color
  • Figma: Added new line-height variables that can be applied as elements width and height balues. This lets you create themes with different typography sizes and make components size scale alongside your typography.
  • Updated Button, TextField, Select, Checkbox and Radio to calculate their dimensions based on the typography values.
  • Theming config: Added support for semibold weight.
  • Theming: Added typography styles for scoped theming.

Button

  • Fixed black and white button colors not applying border color changes on hover

Card

  • Figma: Fixed theming of the border-radius variables

FormControl

  • Reduced the font-size for helper and error to better align with the typography theming

MenuItem

  • Figma: Exposed icon props to the main component

View

  • Fixed the divider visibility when one of the items has background color applied
3 July 2023

We're excited to announce our v2.0 release today 🎉

For the past 6 months, we've been working hard rethinking every single piece of Reshaped and what should be our next steps. It led us to rebuilding our Figma library from ground-up, increasing all components reliability, helping you compose them together without unexpected layout issues and adopting the latest features features, like Figma Variables.

With more teams purchasing Reshaped Pro license, we've spent additional time making sure we can provide the best experience for those teams starting with their design systems. What they value the most is how fast they can start building their custom features without spending any time on the setup. To support them, we have completely revamped our Pro license development environment to cover all technical requirements for a modern design system.

Look for ⚡ emoji in the changelog. These changes update the API of components and features and might require attention on your product.

Don't forget to regenerate themes in React and Figma after updating to v2.

We've updated our source code structured and moved it away from an internal monorepo. This way we can ensure that our development environment works without any manual adjustments for other teams and dependency resolutions. At the same time you can still include it into your own monorepo and store all components right next to your product.

While working on this, we've also improved the overall setup of the source code. We've switched from Webpack to vite for bundling the library and storybook, added stylelint and git hooks for running automatic linting on commit. With all the changes in place – making a full library build now takes ~10-15 seconds.

⚡ Figma gives us a lot of new features to improve the quality of design system assets. We've been using component variants and properties in Reshaped for quite some time, but there were parts of the library we could only change after the major release.

In 2.0, we've revamped the whole library to be even more aligned with code and use these features to their full potential, as well as be ready for the new features Figma will announce on Figma Config this year:

  • Moved theme library to Figma variables, which now allows for theming unit and radius tokens
  • Many component variants have been reviewed and switched to component properties. It means there is less room for mistakes when we're shipping new releases but also a better experience for you if you start customizing our components.
  • All components follow the same layer structure best practices now and won't break because of the auto-layout styles of their parent layers.
  • All components that allow content customization are now integrated with the new Slot utility, which lets you create custom layouts within components without detaching components.
  • Figma page structure has been updated with a new layout. In addition, every component and utility includes helpful tips and a playground to test how the component works.

⚡ We have updated our font design tokens structure to reduce the complexity of working with the design tokens in Figma and reduce the size of the theme CSS file by almost 60%.

  • Typography doesn't have responsiveness built-in now in favor of manually picking the correct token based on the product context. This change gives you more control over how typography is used across the product while keeping it consistent.
  • Weight is now a separate style modifier you can apply to the fonts below title to apply text formatting.
  • There are four new tokens that you can use directly now to improve the flexibly of the typography you can use.

Here is a mapping of the old typography values to the new ones:

// Before          After

display-1          title-1
...                title-2 [new]
display-2          title-3
...                title-4 [new]
display-3          title-5
...                title-6 [new]

title-1            featured-1, weight: bold
title-2            featured-2, weight: bold
title-3            featured-3, weight: bold

featured-1         featured-1
featured-2         featured-2
featured-3         featured-3

...                body-1 [new]
body-1             body-2
body-2             body-3
body-medium-1      body-2, weight: medium
body-medium-2      body-3, weight: medium
body-strong-1      body-2, weight: bold
body-strong-2      body-3, weight: bold

caption-1          caption-1
caption-2          caption-2

⚡ We've slightly updated our elevation system with the design token name changes and a new color token to align color and shadow tokens completely. This change is inspired by Atlassian Design System's work on its foundations.

// Before                     After

shadow-base                   shadow-raised
shadow-elevated               shadow-overlay

...                           color-background-elevation-base [new]
color-background-base         color-background-elevation-raised
color-background-elevated     color-background-elevation-overlay

We have reviewed our color palette to work better across various edge cases, especially in the dark mode:

  • Dark mode background-faded colors now stand out less than before and better align with other dark mode color tokens.
  • All neutral colors have been updated to ensure enough contrast ratio to keep them visible on top of each other. For example, you can now clearly see the elements using a neutral-faded background on top of elevation-overlay.

The button is the component every design system usually starts with, and there are so many different use cases we need them for in our products. In this release, we're adding a new faded variant to the Button component and have slightly updated the existing variants' styles to ensure we cover as many typical use cases as possible.

You can find more information about the available variants in the documentation:

We've added support for more complicated menus with nesting. To achieve that, we have introduced two new componenets inside DropdownMenu: DropdownMenu.SubMenu and DropdownMenu.SubTrigger. By using them together with previously available parts of the DropdownMenu, you will automatically get trap focus support for multiple levels of menus and new hotkeys for working with submenus.

  • ⚡ Dependencies: Minimum React version has been updated to 18.0.0
  • Figma: Added keywords to all components for better components discoverability
  • Theming: Added support for 8-digit hex colors
  • Theming: Increased the default motion duration values
  • Theming: Added themeOptions.generateOnColorsFor option to generate foreground colors for custom background color tokens
  • Theming: Updated on colors resolving based on your black and white color tokens
  • ⚡ PostCSS integration: Updated import path from reshaped/postcss to reshaped/config/postcss
  • Tailwind integration: Added support for black and white color tokens for text, bg and border
  • Tailwind integration: Added support for 0 spacing value
  • ⚡ Tailwind integration: Updated import path from reshaped/tailwind to reshaped/config/tailwind
  • Added a custom internal postcss plugin to simplify css source code and optimise the reponsive styles output

Utilities

  • ⚡ Deleted deprecated utilities: Stack, Frame and AspectRatio. View can be used instead to achieve the same functionality.
  • ⚡ Deleted useElementId hook in favor of React.useId which can guarantee more stable identifier generation.

useHotkeys

  • Improved support for edge cases when using multi-key shortcuts using Meta key
  • Added support for passing an existing ref to the hook options
  • Added support for a cross-platform mod key

Actionable

  • Added support for passing both onClick and attributes.onClick simultaneously

Dismissible

  • Added as a utility in Figma

Icon

  • Added disabled color

Reshaped provider

  • ⚡ Moved all global attributes from <body> to <html> to ensure dark mode affects native elements, like the page scrollbar color
  • ⚡ Split data-rs-theme="reshaped-light" into data-rs-theme="reshaped" and data-rs-color-mode="light". It gives us more granular access to the theming updates.

Text

  • Figma: Updated available variants based on the new tokens structure
  • Figma: Added fill property to control the text max-width
  • Figma: Added color property for easier usage of color design tokens

Theme provider

  • ⚡ Renamed to Theme from ThemeProvider
  • theme property has been renamed to name

View

  • ⚡ Replaced padding tuple value [y, x] with paddingBlock={y} paddingInline={x}
  • Added support for passing custom inline styles to View.Item
  • Added grow property support directly on View for nested Views

Components

ActionBar

  • ⚡ Removed size property in favor of padding which gives you more control over the content spacing

Alert

  • Figma: Updated links in the positive Alert to positive color
  • Figma: Added support for slot composition

Avatar

  • Figma: Added additional sizes to align with other components dimensions
  • ⚡ Moved faded colors to a variant property to align API across components
  • Added correct color definitions for the neutral and faded avatars for the cases when color is defined by its parent

Badge

  • Updated spacing in the small Badge size

Card

  • Added height property support
  • Figma: Added bleed support for elevated cards
  • Figma: Added support for changing the container padding with auto layout

Carousel

  • Figma: Added slots support
  • Figma: Improved mobile scaling

Checkbox

  • Figma: Added missing variants
  • Figma: Added support for preserving property values when swapping with Radio and Switch

Divider

  • ⚡ Figma: Renamed direction property to a vertical boolean

DropdownMenu

  • Added contentGap property to control distance between the trigger and the content
  • Added instanceRef property to access imperative methods: open, close
  • Added support for trigger width to align popover width with the trigger width

Overlay

  • Added as a utility in Figma

Radio

  • Figma: Added missing variants
  • Figma: Added support for preserving property values when swapping with Checkbox and Switch

Link

  • Added positive color support

MenuItem

  • Aligned MenuItem size and icon size values with the Button sizes
  • Added neutral color support
  • Figma: Aligned selection styles with React
  • ⚡ Figma: Removed built-in child component variants in favor of composition

Modal

  • ⚡ Renamed transparentBackdrop to transparentOverlay for the component naming alignment

Popover

  • Added start-top, start-bottom, end-top and end-bottom position support
  • Added contentGap property to control distance between the trigger and the content
  • Added instanceRef property to access imperative methods: open, close
  • Added support for trigger width to align popover width with the trigger width

Scrim

  • ⚡ Renamed Overlay to Scrim
  • Figma: Aligned gradient styles
  • Figma: Added background slot support

Select

  • Figma: Aligned placeholder color value with React
  • Added faded and unstyled variant
  • Updated the chevron icon
  • Added support for using Select as a custom trigger without passing options

Switch

  • Added new small size
  • Added text label support
  • Added new reversed flag to control the display of the label
  • Updated disabled variant styles
  • Figma: Added support for preserving property values when swapping with Radio and Checkbox

Tabs

  • Added new large size

TextField

  • ⚡ Figma: Removed success state
  • Figma: Aligned placeholder color value with React
  • Added faded and unstyled variant
  • Added prefix and suffix properties for rendering text affixes

TextArea

  • Figma: Aligned the default field height with the code implementation
  • Figma: Aligned placeholder color value with React
  • Added faded and unstyled variant