Skip to content

v2.9.0
Compare
Choose a tag to compare
@blvdmitry blvdmitry released this 02 Feb 16:33
· 9 commits to main since this release
v2.9.0
2b8000d

Full web changelog · Documentation

npm install reshaped

ScrollArea utility

We're introducing a new ScrollArea utility which aligns the scrollbar styling across all platforms, while still relying on the native scrolling behavior.
It supports multiple display modes and supports both horizontal and vertical directions.

Besides the general style alignment, it can be useful for non-standard scrolling areas where displaying a native scrollbar can be too distractive on some platforms.
For example, it's perfect for navigation menus or smaller components with scrollable areas.

In this example, we're rendering it inside the Card with scrollbars shown on the area hover and scrolling in both directions:

<View width="300px">
  <Card height="200px" padding={0}>
    <ScrollArea scrollbarDisplay="hover">
      <View height="300px" width="150%" align="center" justify="center">
        Text content
      </View>
    </ScrollArea>
  </Card>
</View>

Improved Storybook setup

Based on the community request, we've improved out Storybook setup with the new addons:

  • Each story now display its source code with a storysource plugin
  • Most of the components now have an additional tab displaying auto-generated prop tables based on the current version of the source code you're using
  • In case you need more context about the component without leaving Storybook, we're also display each component latest documentation in an iframe

Together, these changes are aiming to improve the developer experience of teams working with our Storybook environment and provide additional contextual information about components in case they're staying on one of the previous versions of Reshaped.

Other improvements

  • Switched the TypeScript jsx build mode to react-jsx
  • Added support for radio inputs arrow navigation inside the areas with trapped focus
  • Added the page color background to <html> in addition to <body>
  • TextArea: Fixed placeholder color misalignment with TextFIeld
Assets 2
Loading