Skip to content

v2.5.0
Compare
Choose a tag to compare
@blvdmitry blvdmitry released this 25 Oct 22:01
· 3 commits to master since this release
v2.5.0
3bcd5bb

Full web changelog · Documentation

npm install reshaped

Theme generation

Last time, we've introduced support for the runtime theming to let you create new themes right in your browser environment.
However, creating themes manually would mean that you still have to go through a long process of manually picking the values for all design tokens.

Finding right colors is definitely the hardest step in the process, so in v2.5 we're adding a new theme generation feature.
Now you can pass just your primary brand color and we'll generate a full set of color tokens required for theming, including dark mode values.
In case you want more granular control over certain colors, you still can pick different base colors for the critical, positive and neutral hues or even override individual token values.

To make sure your generated themes don't stay aligned with our default theme, we've updated some of the Reshaped theme values.
In case you're relying on the default Reshaped theme value, make sure to re-sync it in Figma.

Stepper component

<View width="500px" maxWidth="100%" gap={2}>
  <Stepper labelDisplay={{ s: "hidden", m: "inline" }} activeId={1}>
    <Stepper.Item completed title="Pick your plan" subtitle="Pro or hobby" />
    <Stepper.Item title="Contact info" />
    <Stepper.Item title="Payment" />
  </Stepper>
  <Hidden hide={{ s: false, m: true }}>
    <View direction="row" gap={4} justify="space-between">
      <Text weight="medium">Contact info</Text>
      <Text weight="medium">Step 2 of 3</Text>
    </View>
  </Hidden>
</View>

One of the requests we had was a component to control a multi-step process navigation, so we're introducing a new Stepper component in this release.
It includes support for row and column direction, as well as responsive visibility of the labels.
With all supported properties, you can easily compose and control the Stepper component according to the unique business logic of your product.

Other improvements

  • Figma: Fixed foreground-critical color style reference used in the colors preview
  • Theming: Added 0 value support for the shadow attributes
  • Theming: Fixed transitions staying disabled after setting the color mode to an already applied one

Accordion

  • Improved overflow handling on the accordion state change

Button

  • Renamed Button.Aligner position property to side. position is deprecated now but both properties will work until the next major release.

DropdownMenu

  • Added support for opening nested submenus with Enter and Space keys
  • Updated open and close transition effects

MenuItem

  • Added side support for the MenuItem.Aligner

Popover

  • Updated open and close transition effects

TextArea

  • Added TextField.Aligner utility for aligning the field value with other content on the page #180

TextField

  • Fixed width calculation bug in Safari that was causing field to grow on focus when it was centered #178
  • Fixed positioning of the native Chrome autocomplete #183
  • Added TextField.Aligner utility for aligning the field value with other content on the page #180

Tooltip

  • Updated open and close transition effects

View

  • Added static position support
  • Added automatic switching to the flexbox layout if any of the direct children are using grow property #185
Assets 2
Loading