3.2.1

Full web changelog · Documentation

npm install reshaped

Grid utility

<View width="400px" maxWidth="100%">
  <Grid columns={3} gap={3}>
    <Grid.Item rowSpan={2}>
      <View backgroundColor="neutral-faded" borderRadius="medium" height="100%" />
    </Grid.Item>
    <Grid.Item colSpan={2}>
      <View backgroundColor="neutral-faded" borderRadius="medium" height={10} />
    </Grid.Item>
    <View backgroundColor="neutral-faded" borderRadius="medium" height={10} />
    <View backgroundColor="neutral-faded" borderRadius="medium" height={10} />
  </Grid>
</View>

We're introducing a new Grid utility to enhance your experience when working with CSS Grid.
It supports all standard grid properties, such as row and column templates, template areas, individual column sizes, and auto-flow values.
All these properties natively support responsive value syntax.

More Flyout improvements

function Demo() {
  const [left, setLeft] = React.useState(50);
	const flyoutRef = React.useRef();
  const containerRef = React.useRef(null);

	React.useEffect(() => {
		flyoutRef.current?.updatePosition();
	}, [left]);

	return (
		<>
			<View direction="row" gap={2} position="absolute" insetTop={2} insetStart={2} zIndex={10} align="center">
				<Button onClick={() => setLeft((prev) => prev - 10)}>Left</Button>
				<Button onClick={() => setLeft((prev) => prev + 10)}>Right</Button>
        <Text variant="caption-1" weight="medium" color="neutral-faded">Try mobile viewport size<br />to see position fallbacks</Text>
			</View>
      <View height={50} width={100} attributes={{ ref: containerRef }}>
        <Popover
          position="bottom"
          disableCloseOnOutsideClick
          instanceRef={flyoutRef}
          containerRef={containerRef}
        >
          <Popover.Trigger>
            {(attributes) => (
              <div style={{ position: "absolute", left: `${left}%`, top: '50%', whiteSpace: 'nowrap' }}>
                <div style={{ transform: 'translate(-50%, -50%)' }}>
                  <Button color="primary" attributes={attributes}>
                    Show content
                  </Button>
                </div>
              </div>
            )}
          </Popover.Trigger>
          <Popover.Content>
            <Placeholder />
          </Popover.Content>
        </Popover>
      </View>
		</>
	);
}

In our previous release, we introduced numerous improvements to the Tooltip, Popover, Autocomplete, and DropdownMenu components.
This time, we're adding even more enhancements, focusing on their dynamic behavior, shadow DOM support, and performance.
All changes listed under Flyout apply to all four components:

• Flyout: Improved position calculation for triggers that transform on click.
• Flyout: Switched to using vanilla event listeners for triggers, allowing you to pass additional custom event handlers without needing to manually merge them.
• Flyout: Fixed the blur event for content-menu hover flyouts that contain no focusable elements.
• Flyout: Added automatic shadow DOM detection instead of relying on containerRef.
• Flyout, trapFocus: Added shadow DOM support for keyboard navigation.
• Flyout: Improved position fallback order when content doesn't fit into the viewport, based on the position default value.
• Flyout: Added a fallbackPositions property to manually select available fallback positions. The forcePosition property is now deprecated.
• Flyout: Introduced a history for the last used fallback to prevent content from reverting to the default position when none of the fallbacks fit the viewport.
• Flyout: Fixed an edge case where controlled flyouts were blocked from closing after being set to inactive.
• Flyout: Optimized the internal resize observer to be active only when rendered.
• Popover: Added initialFocusRef to focus an element when the popover content is opened.

New components variants

We have added new functionality to existing components.
Here are a few highlights, with more improvements listed in the next section.

<Loader size="large" />

Added a large size option for the Loader component, intended for use in larger page areas instead of the Skeleton.

<View width="280px">
  <TextField
    name="food"
    placeholder="Pick your favorite food"
    startSlot={[
      <Badge>Cinnamon bun</Badge>,
      <Badge>Pasta</Badge>,
      <Badge>Ice-cream</Badge>,
      <Badge>Pizza</Badge>
    ]}
    defaultValue="Pineapple"
    multiline
  />
</View>

Introduced a multiline flag for the TextField and Autocomplete components to display selected values.

<View width="300px">
  <Divider>or use one of these options</Divider>
</View>

The Divider component now supports children and contentPosition properties for displaying contextual labels or components.

function Demo() {
	const containerRef = React.useRef<HTMLDivElement>(null);
  const toggle = useToggle(true);

	return (
    <View
      attributes={{ ref: containerRef }}
      borderRadius="medium"
      height="300px"
      width="400px"
      maxWidth="100%"
      overflow="auto"
      backgroundColor="neutral-faded"
      borderColor="neutral-faded"
      padding={4}
    >
      <Button onClick={toggle.activate}>Open modal</Button>
      <Modal
        containerRef={containerRef}
        active={toggle.active}
        onClose={toggle.deactivate}
        position="end"
        size="260px"
      >
        <Placeholder />
      </Modal>
    </View>
	);
};

The Modal and Overlay components can now be rendered within a specified containerRef, enabling scroll lock specifically for the container element.

Other improvements

• Added a types field to package.json for the old module resolution.
• Added documentation pages with examples of integrating with recharts and @tanstack/react-table
• Switched back to handling focus ring styles based on the data-rs-keyboard attribute to address Safari :focus-visible edge cases.
• Source code: Updated all package dependencies and devDependencies.
• Theming: Typography rem values are now based on a 16px base value to better align with browser and Tailwind defaults.
• Theming: Updated the generated background-neutral-faded color to be slightly lighter.
• Accordion: Fixed animation edge cases.
• Actionable: Added a disableFocusRing property.
• Autocomplete: Added an onBackspace handler for easier deletion of selected values.
• Autocomplete: Added an instanceRef property to programmatically open and close the autocomplete value list.
• Badge: Added neutral color to the typings.
• Button: Fixed Safari edge cases causing icons to glitch on hover.
• FileUpload: Added support for the height property.
• Icon: Fixed width and height overrides.
• Image: Added support for passing attributes.style.
• Modal: Added a visible value for the overflow property.
• Modal, Overlay: Added a reason argument for the onClose handler.
• Pagination: Fixed truncation edge cases for a total number of pages less than 8.
• Reshaped provider: Added a scoped flag to apply all global styles only inside the provider.
• Switch: Fixed the disabled label color.
• Table: Aligned the highlighted row background color with other components.
• Table: Added className and attributes support for Table.Body, Table.Head, and Table.Cell.
• Tabs: Fixed selection indicator transition when caused by DOM event subscriptions.
• Tabs: Slightly increased spacing between buttons for better visual balance in tabs with icons.
• TextField: Added a focused property.
• Toast: Added warning color support.
• View: Added responsive value support for the textAlign property.
• View: Removed the content wrapper when it has only a single child.
• useHotkeys: Fixed the supported codes for modified keys on Windows/Linux.
• useOnClickOutside: Added support for shadow DOM.
• useResponsiveClientValue: Added support for boolean values.
• useResponsiveClientValue: Added support for custom theme viewport values.
• useScrollLock: Improved scroll lock behavior for iOS Safari.

v3.1.2

Full web changelog · Documentation

npm install reshaped

Resizable utility

We've introduced a new Resizable utility for managing layouts with dynamically sized panels.
It supports both row and column orientations, accommodates any number of panels and nested layouts, and allows you to customize drag handles to fit your product's requirements.

Flyout improvements

In response to numerous requests, we've expanded our handling of additional edge cases and composition scenarios for all flyout components: Popover, Tooltip, Autocomplete, and DropdownMenu.
These enhancements also apply to any custom components you've built on top of these primitives.

• Flyout: Enhanced attribute and event handler resolution for multiple flyout components using the same trigger.
• Flyout: Improved position calculations for fixed containers not rendered at top: 0.
• Flyout: Added automatic resolution for triggers rendered inside shadow DOM.
• Tooltip, Popover, DropdownMenu: Enhanced position calculations for composition edge cases.
• Tooltip: Tooltips now display instantly when moving between triggers within a global cooldown timeout.
• Tooltip: Introduced a disabled flag to hide the tooltip when a Popover on the same trigger becomes active.
• Tooltip, Popover, DropdownMenu: Added a containerRef property to control where content is rendered in the DOM.
• Popover, DropdownMenu: Added an updatePosition method to instanceRef to dynamically adjust content based on trigger position or size.
• Tooltip, Popover: Introduced a disableContentHover option to hide content when the mouse moves into the content area.
• Tooltip, Popover: Ensured focus events are triggered only when keyboard mode is active.
• Popover, DropdownMenu: Introduced new Popover.Dismissible and DropdownMenu.Dismissible compound components that automatically connect to component state.
• Popover: Fixed nesting edge cases when using Popover inside a Tooltip.
• Popover, DropdownMenu: Added a disableCloseOnOutsideClick flag.

Vertical slider

We have added a vertical orientation for the Slider component, enabling new use cases like volume controls.
It pairs well with the new renderValue={false} option, which disables the native value tooltips, allowing you to render the value elsewhere.

Other improvements

• Source code: Updated most dependencies to their latest versions.
• Source code: Updated and simplified the eslint configuration.
• Figma: Updated description links for all components.
• Figma: Fixed unlock icon to use fill instead of stroke
• CSS: Moved global reset styles to the rs.reset layer, reducing specificity when working with style overrides.
• CSS: Switched to :focus-visible where applicable instead of relying on the data-rs-keyboard attribute.
• Theming: Exported types for the full theme definition and individual token names.
• Theming: Added letterSpacing support for typography design tokens in code and Figma.
• Theming: Removed local color scoping for variables in Figma to reduce noise in the library file.
• Theming: Updated typography weight in Figma to use string variables and applied new weight scoping to weight variables.
• Theming: Added css variables syntax for Figma variables
• Autocomplete: Added as a component in Figma instead of just providing a copyable example.
• Button: Fixed CSS conflict for focused elevated buttons.
• Carousel: Renamed CarouselInstanceRef type to CarouselInstance. The old name remains available until the next major release.
• Modal: Added attributes.ref support, previously overridden by an internal ref.
• Modal: Added disableSwipeGesture flag to disable touch events for closing the modal on mobile.
• Modal: Improved swipe-to-close behavior for edge cases in scrollable modals.
• Modal: Fixed swipe-to-close issue when the user is in text selection mode on mobile devices.
• Modal: Added portal render support for shadow DOM.
• Modal: Added disableCloseOnOutsideClick property.
• Modal: Added blurredOverlay property support.
• Overlay: Added blurred property support.
• Overlay: Added portal render support for shadow DOM.
• Overlay: Added disableCloseOnClick property support.
• Slider: Fixed focus state not applying correctly in areas with trapped focus.
• Slider: Added support for false value in renderValue to disable tooltip rendering.
• Text: Added responsive syntax support for the weight property.
• View: Added responsive syntax support for the borderColor property.

v3.0.0

Full web changelog · Documentation

npm install reshaped

We're excited to release Reshaped v3.0 today! ✨

Over the past three months, we focused on adopting the latest Figma features in our design library.
We improved our theming workflows in both Figma and React.
Additionally, we made major overall improvements to the design system.

• Look for the ⚡ emoji in the changelog. These changes update the API of components and features and might require attention for your product.
• Don't forget to regenerate themes in React and Figma after updating to v3.

⚡ Theming with Figma Variables

With the latest release of Figma typography variables, we have completed our theming migration to Figma variables.
With the new approach to theming, we now distribute a single file with components, styles, and variables.
This means you no longer have to manually link theme and component libraries together after they are published in your team.
Everything is linked correctly within a single file right after you import it.

With the help of Figma variables, we support up to 4 themes for team licenses and up to 40 themes for enterprise licenses.
Each theme supports light and dark mode and allows dynamic mode switching using Figma variable modes.

With full native variables support, we are also deprecating our Figma plugin theming functionality.
If you are using more than 4 themes and don't have an enterprise Figma license, we suggest using plugins like Swap variables to apply additional modes to your product mockups.

You can learn more about our setup from our recent post, try it yourself in our Figma library, and read more in the documentation.

Theme structure and generation

While we were quite happy with our default theme, we decided that the Slate theme needed better alignment with the color palette of modern productivity tools.
In 3.0, we updated our theming generation algorithm and used it to generate the Slate theme.
You will notice that its colors are now smoother and more ambient in dark mode.
All generated themes are now also closer to the Slate theme since its neutral colors don't rely on additional hues.

Additionally, we have made multiple improvements to the overall design tokens structure and naming:

• Made raised shadows more subtle to better work for elevated cards.
• Neutral border and background faded colors are now semi-transparent by default to work better across all backgrounds.
• ⚡ rs-color-rgb-border tokens have been removed since they now include alpha by default.
  
  Migration: In case you have an edge case where you need to apply opacity to your border, you can use css color-mix, mixing the border color with transparent.
• The generateColors utility now supports passing dark mode values instead of always relying on them being automatically generated.
• ⚡ --rs-unit-radius variables were renamed to --rs-radius.
  
  Migration: Mass replace old variable names when migrating.
• ⚡ The unit.radius fields in the reshaped.config.js was renamed to radius.
  
  Migration: Move radius tokens tokens (e.g. unit.radiusSmall) in the config to the radius group (e.g. radius.small)
• ⚡ The heavy font weight in the theme configuration was renamed to extrabold.
  
  Migration: Rename the font in the theme cofiguration
• ⚡ highlighted color tokens were removed and are now resolved on the component level.
  Migration: In case you were using highlighted color tokens before, use css color-mix or apply opacity to a separate layer with black / white background.
• The useTheme hook now also exposes rootTheme and setRootTheme for more granular control of the app when using scoped theming.
• reshaped.config.js now supports manually passing onBackground colors.

Fluid typography

We have migrated our font-size and line-height CSS variables to rem.
This means that whenever users change browser font-size accessibility settings, all components will adjust accordingly.
All related decorative elements and icons will also align their size and position with the used typography sizes.

⚡ Figma Icon swapping

To improve the experience of working with iconography, we have switched from a single icon asset component with variants to individual components.
All component properties for picking an icon have been updated to swap instance properties.
This change makes it much easier to add custom icons to the library when building your product.
You will now also see visual previews when selecting an icon for your components.

Migration: In the Reshaped component instances using icons, pick the correct icon to be used using the new swap instance properties.
In case you have your own components exposing icons as a property, update them to also use instance swapping.

Other improvements

• Source code: Switched to using the exports field in package.json instead of moving the build output to the root repository folder.
• Types: Improved attributes typing to better work as a subset of React.HTMLAttributes
• Slot, Figma: Added new Slot components supporting auto layout wrapping.
• Actionable: Migrated the focus ring implementation to :focus-visible instead of a custom JS solution.
• Alert: Increased the gap before actions when using the inline layout.
• Autocomplete: Added onInput event handler support.
• Badge: Relaxed the types to support passing dismissAriaLabel while onDismiss is undefined.
• Badge: Added ref support for integration with routing libraries.
• Badge: Fixed onClick triggering together with onDismiss.
• ⚡ Button: Merged black and white colors into a single media color.
  
  Migration:: Rename black and white colors to media.
• ⚡ Button: neutral faded button design was moved to neutral outline for better design alignment.
  
  Migration:: Switch color="neutral" variant="faded" buttons to color="neutral variant="outline". If you need it to have a background, you can add an elevated` flag to it.
• Button: Improved the media color disabled state.
• Button: Updated highlighted style values.
• Card, Figma: Improved content clipping.
• Container: Added align, justify, height, and maxHeight property support from View for better control over its content.
• DropdownMenu: Added automatic position handling inside position: sticky.
• Icon, Figma: Added on-background variants to avoid manual color overrides.
• Icon, Figma: Fixed color overrides edge cases.
• ⚡ Hidden: Switched implementation to display: contents. Removed displayStyle property and render props children format since they're no longer required.
  
  Migration: Remove displayStyle properties used.
  Switch from render props to regular children approach.
• Link: Added warning color support.
• MenuItem: Aligned the medium size border radius with other components.
• MenuItem: Updated highlighted and selected style values.
• Modal: Added full-screen position support.
• Modal: Added a way to disable auto-focusing on the first element inside the content area and focus on the whole modal instead.
• Modal: Added ariaLabel support.
• Modal: Added onOpen handler for custom focus management.
• Overlay: Added onOpen handler for custom focus management.
• PinField: Fixed the first interaction with the field when all values are pre-filled on mount.
• Popover: Added automatic position handling inside position: sticky.
• ⚡ Progress: Renamed white color to media.
  
  Migration: Replace white color with media
• ScrollArea: Fixed thumb opacity for hover display style.
• Slider: Updated thumbs positioning to not cause parent container overflow when there is no space on the sides.
• Slider: Fixed horizontal scrollbar appearing in Safari for sliders with long tooltip values.
• Text, Figma: Added white color variant.
• TextArea: Fixed the field stretching too wide when it has a multiline value without spaces.
• TextField: Removed focus ring in the headless variant.
• Tooltip: Text prop is now optional and tooltip won't be triggered if text is not passed.
• Tooltip: Added automatic position handling inside position: sticky.
• useHotkeys: Added support for triggering callbacks while holding the shortcut pressed.

v2.11.0

Full web changelog · Documentation

npm install reshaped

PinField component

<FormControl>
  <FormControl.Label>Pin code</FormControl.Label>
  <PinField name="pin" defaultValue="2543" />
</FormControl>

We've added a new PinField component for handling one-time passwords and other numeric or alphabetic codes.
It works based on a native input element, supports controlled/uncontrolled modes and has an extensive keyboard support for managing the input focus and selection.

Toast boundaries

Based on the community request, we have added Toast rendering boundaries.
Anywhere in your application, you can wrap an area with a separate ToastProvider to make notifications render based on that area boundaries.

function Boundary() {
  const ChildComponent = () => {
    const toast = useToast();

    return (
      <Button
        onClick={() => {
          toast.show({
            text: "Notification sent",
          });
        }}
      >
        Show notification
      </Button>
    );
  };

  return (
    <View backgroundColor="neutral-faded" padding={10} width="600px" maxWidth="100%" borderRadius="medium">
      <ToastProvider>
        <ChildComponent />
      </ToastProvider>
    </View>
  );
}

Other improvements

• Updated Commitlint, Storybook and Chromatic to the latest major versions
• Fixed a build error caused the FormControl files naming when working with Vite
• Updated Vite integration guide #238
• Actionable: improved the form submission logic for the submit type buttons with a custom onClick
• Breadcrumbs: added a disabledExpand property to render static breadcrumbs inside other clickable elements #227
• Calendar: fixed edge cases of assigning the correct tabIndex to the day cells
• Card: improved the padding logic to include the border width into its calculations
• DropdownMenu: simplified the handling of keyboard and mouse click events combination
• Modal: added overlayClassName property #229
• Modal: improved the scrollable content handling when using swipe-to-close functionality #242
• Pagination: added tabular number styles to avoid the page button size changes during navigation
• Slider: added tabular number styles to avoid the tooltip size changes
• Slider: added float values rounding #228
• Table: removed content wrapping for the cells using the auto width
• Tabs: added smooth transition for the Tab list fades whenever it doesn't fit into the viewport
• Tabs: improved the selection element transition
• Tabs: updated the triggers font-weight to medium to match other clickable elements
• TextField: removed focus-within styles from the root elements whenever a button is focused in one of its slots
• View: fixed dividers rendering incorrectly when nested inside React.Fragment #226
• View: improved the padding logic to include the border width into its calculations
• useHotkeys: added a disabled option to control the hotkeys availability based on your local state
• useHotkeys: added a preventDefault option to automatically prevent the default behavior of the binded hotkeys
• useHotkeys: improved the cleanup of the triggered hotkeys when pressing the meta key

v2.10.0

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

v2.9.0

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

v2.8.0

Full web changelog · Documentation

npm install reshaped

New color tokens

We are adding new color tokens: warning and brand.
Warning colors are used as a new role in between critical and positive colors, while brand colors can be used for brand assets as a standalone color different from primary colors.
With the new colors support we have introduced new colors for component like Badge and Progress.

If you're using your own themes, make sure to generate them again to include
new color tokens in the builders. If you're using a custom theme in Figma,
update its definition in the theming plugin you're using.

Application screen example

We have added a new example of the whole application screen built with Reshaped and its design is included in our Design license.
It features the whole page layout relying completely on the Reshaped components utilities, including its responsive behaviour and interactive components, like DropdownMenu or Toast.

Other improvements

• PostCSS: Added getConfig() function to support viewport breakpoints theming
• Badge, Figma: Exposed icon properties in Figma
• Button: Added flex layout support for the button children
• Button: Reduced the vertical padding to work with larger slots without stretching the button
• Button, Figma: Extracted .button-content into a separate cmponent to improve the library performance and maintenance experience
• Button, Figma: Added slot support
• Icon: Fixed svg rendering error happening for icon components using prop-types
• Icon: Added linear logo to the iconset in Figma
• MenuItem: Fixed Tailwind CSS reset overriding button styles
• Overlay: Fixed Tailwind CSS cursor override
• Slot, Figma: Fixed slot overriding styles of the swapped components
• Timeline, Figma: Fixed the content slot auto layout
• View: added minWidth and minHeight support
• View: added overflow auto support

v2.7.0

Full web changelog · Documentation

npm install reshaped

Calendar component

<View width="320px">
  <Calendar />
</View>

We're adding a new Calendar component to work with single and range date selection.
It supports controlled / uncontrolled behavior, full keyboard navigation, localization, separate month selection and much more.

Like with every other component, we pay additional attention to how it can be composed with other components and we provide examples of how you can build a form input for the date selection.

Swipe events in Modal

We've introduced a new swipe behavior for Modal components on touch devices.
All Modals besides the center-positioned ones can now be closed with touch events and you can try it for yourself if you're on mobile device or simulate it in your dev tools:

function Example() {
  const { active, activate, deactivate } = useToggle(false);

  return (
    <>
      <Button onClick={activate}>Open modal</Button>
      <Modal active={active} onClose={deactivate} position="start">
        Modal content
      </Modal>
    </>
  );
}

Other improvements

• Source code: Added GitHub actions setup
• Themes: Updated on color generation algorithm to be more precise according to the wcag requirements
• Themes: Added rgb variants for the border color tokens
• Themes: Updated contrast edge cases to be handled based on the APCA formulas
• Autocomplete: Fixed inputAttributes not applying correctly
• Link: Fixed inherit color value for the iOS Safari edge cases
• Modal: Improved the open/close transition effect
• Overlay: Added number values support for the transparent property to manually control its progress
• Slider: Removed the touch highlighting on mobile devices
• Text: Updated maxLines to apply word-break when truncating a single line
• Toast: Added className support
• View: Updated documented to refer to the updated paddingInline and paddingBlock properties

v2.6.0

Full web changelog · Documentation

npm install reshaped

FileUpload component

The new FileUpload component we're introducing is a flexible and easy-to-use tool for handling file attachments in forms. It's designed to be lightweight, leveraging our standard composition approach and give you complete control over the component's layout and appearance.

One of the key aspects of the FileUpload component is its compatibility with third-party libraries. For instance, integrating with react-dropzone is straightforward, enabling you to tap into its advanced file upload capabilities. This ensures that while the component itself remains simple and unopinionated, it doesn't limit your ability to implement more complex functionalities.

The component supports both click and drag events for file selection, making it user-friendly and adaptable to various user interactions. This approach aligns with our goal of providing components that are both powerful and easy to use, without imposing strict design or functional constraints.

Other improvements

• Themes: added a way control individual "on" colors resolutions. Read more in the documentation.
• Themes: improved baseThemeDefiniion typings
• Breadcrumbs: fixed breadcrumbs rendering when used in React Server Components
• Popover: fixed default render styles and updated transition effect for trigger width
• Popover, DropdownMenu: added support for positioning inside the position: fixed parent
• Select: fixed custom trigger start padding when used without slots
• TextArea: added support for passing rows to inputAttributes
• TextArea, TextField: updated onFocus and onBlur typings to use correct html element reference

v2.5.0

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