Chakra Ui Versions Save

⚡️ Simple, Modular & Accessible UI Components for your React Applications

@chakra-ui/[email protected]

2 weeks ago

Major Changes

  • #8153 7b6e66a Thanks @segunadebayo! - Prepares the ground for the next version Chakra that leverages Ark UI.

    User Facing

    • Consolidate all component packages into a single package
    • Remove all deprecated components and APIs
    • Simplify the Changelogs for all v2 releases

    Infrastructure

    • Simplify the repo infrastructure and release process
    • Migrate from jest to vitest
    • Migrate from tsup to custom rollup setup for better bundling strategy

Minor Changes

  • #8121 170198f Thanks @kkieninger! - ### Fixed

    • Fix hard-coded z-index for Menu in favor of one defined from the theme
    • Fix problem with leading and trailing spaces when getting initials for the Avatar component
    • Suppress unnecessary re-renders of Checkbox and Radio component

    Added

    • Add CSS accentColor property to style props
    • Add support for asChild in chakra factory
    • Export toastStore from toast component
    • Upgrade framer-motion to allow for skipAnimations
    • Add component namespace to reduce imports and provide better composition
    • Modal, Drawer: Add default preserveScrollBarGap

    Changed

    Redesign the component themes and anatomy

  • #8393 623e558 Thanks @segunadebayo! - - Integrate Ark UI components to reduce maintenance surface.

    • Add FileUpload component
    • Remove trigger=hover in favor of HoverCard
    • Replace Tooltip, Popover and HoverCard with those from Ark UI

  • #8218 a89c598 Thanks @segunadebayo! - Add support for custom theme conditions or pseudo props via theme.conditions

    // theme.ts

const theme = extendTheme({
  conditions: {
    _closed: "[data-state='closed']", // pseudo prop
  },
})

    This allows you to use the pseudo prop in your components

    <Box data-state="closed" _closed={{ bg: "red.200" }}>
  This box is closed
</Box>

    For TypeScript users, you need to use the Chakra CLI to generate the types for your custom conditions.

    pnpm chakra-cli tokens src/theme/index.ts

  • #8218 a89c598 Thanks @segunadebayo! - Add support for _open and _closed pseudo props for styling their respective selectors.

    • _open: &[data-state=open], &[open]
    • _closed: &[data-state=closed]
    • _groupOpen: [data-group][data-state=open] &
    • _groupClosed: [data-group][data-state=closed] &

    Extend the existing pseudo props to support new selectors`

    • _placeholder now supports &[data-placeholder]
    • _placeholderShow now supports &[data-placeholder-shown]
    • _fullscreen now supports &[data-fullscreen]
    • _empty now supports &[data-empty]
    • _expanded now supports &[data-state=expanded]
    • _checked now supports &[data-state-checked]

Patch Changes

@chakra-ui/[email protected]

2 weeks ago

@chakra-ui/[email protected]

2 weeks ago

Patch Changes

@chakra-ui/[email protected]

2 weeks ago

Patch Changes

@chakra-ui/[email protected]

7 months ago

Patch Changes

@chakra-ui/[email protected]

7 months ago

Patch Changes

@chakra-ui/[email protected]

7 months ago

Minor Changes

  • #8109 4340dbda4 Thanks @TylerAPfledderer! - Bumps Storybook deps to latest (7.5.3) and updates the tooling

    • Toggling state for color mode originally used Storybook's useAddonState api hook. However, this hook is not reliable to persistent allow toggling of boolean state. Replaces this hook with React's useState as this state is a primitive.
    • Makes use of the makeDecorator function to make this addon more like an official Storybook addon.
    • Removes unneeded props from the button components that were originally part of a Type error bug.

@chakra-ui/[email protected]

7 months ago

Patch Changes

@chakra-ui/[email protected]

7 months ago

Minor Changes

@chakra-ui/[email protected]

7 months ago

Patch Changes