Skip to content

v3.1.2
Compare
Choose a tag to compare
@blvdmitry blvdmitry released this 11 Aug 21:24
v3.1.2
40764c2

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.
Assets 2
Loading