Skip to content

v2.10.0
Compare
Choose a tag to compare
@blvdmitry blvdmitry released this 14 Apr 22:47
· 3 commits to main since this release
v2.10.0
03307a1

Full web changelog · Documentation

npm install reshaped

Pagination component

We've added a new component to help users navigate across multiple pages of content.
It automatically truncates the pages, handles accessility including focus management and provides controlled as well as uncontrolled behavior to make sure you can connect it to your custom application logic.

<Pagination total={10} previousAriaLabel="Back" nextAriaLabel="Forward" />

Theme sync with Figma

While we have aligned components and design tokens implementations in Figma and in React, syncing custom themes across both platforms was always a manual process.
With the introduction of theming generation, we've automated a part of the theming process and in this release we're adding the missing piece.

We've released a new version of our Figma plugin that now lets you upload the json output from your theme in code and generate a Figma style and variables library automatically.
We're planning to keep evolving this functionality with the upcoming improvements for the Figma variables support and general announcements that will happen during the Figma Config this summer.

Blog starter package

Ever wanted to start your own development blog but then you find yourself spending weeks to build a front-end application for that?
We've created a new blog example using Reshaped but this time we've also published it as an NPM package and open-sourced it.

Besides checking how Reshaped can be used in your own project, you can use it for your own MDX and Next.js powered blog.
It gives you an amazing layout inspired by Brian Lovin's personal website, which is built using Reshaped, supports light and dark mode, completely accessible and responsive.

Other improvements

  • With the last few components css changes, we were able to switch Reshaped NPM package to use sideEffects: false by default which improves tree-shaking for the bundlers relying on this flag.
    This means that you will get full tree-shaking support for even more frameworks, including the CSS tree-shaking for components you don't use in your application.
  • Updated all internal dependencies for the source code setup
  • Updated Create React App guidelines with more details on how to enable custom media queries support
  • Added json file output during theme generation
  • Actionable: Moved css reset to a css @layer with lower priority, making sure that css order gets resolved correctly during tree-shaking
  • Accordion: Fixed an error which caused product code calling Accordion to inlcude use client directive in RSC supporting frameworks
  • Accordion: Migrated height animation to CSS transitions without and JS calculations involved
  • BadgeContainer: Added pointer-events: none to the Badge used in BadgeContainer to avoid it blocking the trigger clicks
  • Button, Figma: Added min-width support for the text buttons
  • Button: Added as property support for nesting multiple clickable elements within each other
  • FormControl: Fixed an error which caused product code calling Accordion to inlcude use client directive in RSC supporting frameworks
  • MenuItem: Added as property support for nesting multiple clickable elements within each other
  • ScrollArea: Added overflow hidden to root element to prevent scrollbar thumb travelling outside the scrollable area in Safari
  • Slider: Added dynamic Tooltip positioning to always keep it inside the viewport and avoid causing page to scroll horizontally for tooltips with long labels
  • Table: Added cell verticalAlign support
  • Table: Removed border-radius in borderless tables for better composition with other components
  • Table: Fixed duplicated cell padding in borderless tables
  • Text: Added balance wrap support
Assets 2
Loading