Skip to content

Latest commit

 

History

History
528 lines (393 loc) · 16.3 KB

CHANGELOG.md

File metadata and controls

528 lines (393 loc) · 16.3 KB
Raw

@chakra-ui/react

3.0.0-next.10

Patch Changes

  • Updated dependencies []:
    • @chakra-ui/hooks@3.0.0-next.10
    • @chakra-ui/utils@3.0.0-next.10

3.0.0-next.9

Minor Changes

  • 3ccbbdf Thanks @segunadebayo! - ### Motion Styles

    Add support for motionStyle props.

    The idea is to pair them with text styles and layer styles to create this three-part mixin that can make your styles a lot cleaner.

    Motion styles focus solely on animations, allowing you to orchestrate animation properties.

    import { defineMotionStyles } from "@chakra-ui/react"

export const motionStyles = defineMotionStyles({
  "slide-fade-in": {
    value: {
      transformOrigin: "var(--transform-origin)",
      animationDuration: "fast",
      "&[data-placement^=top]": {
        animationName: "slide-from-top, fade-in",
      },
      "&[data-placement^=bottom]": {
        animationName: "slide-from-bottom, fade-in",
      },
      "&[data-placement^=left]": {
        animationName: "slide-from-left, fade-in",
      },
      "&[data-placement^=right]": {
        animationName: "slide-from-right, fade-in",
      },
    },
  },
})

    Built-in Keyframe Animations

    Chakra new provides built-in keyframe animations that you can use to create your own motion styles.

    Slide: slide-from-top, slide-from-bottom, slide-from-left, slide-from-right, slide-to-top, slide-to-bottom, slide-to-left, slide-to-right

    Slide Full: slide-from-top-full, slide-from-bottom-full, slide-from-left-full, slide-from-right-full, slide-to-top-full, slide-to-bottom-full, slide-to-left-full, slide-to-right-full

    Fade: fade-in, fade-out

    Scale: scale-in, scale-out

    You can compose these animations using the animationName property in your motion styles to create really cool animations. No JS required.

    <Box animationName="slide-from-top, fade-in" animationDuration="fast">
  Slide from top and fade in
</Box>

  • 3ccbbdf Thanks @segunadebayo! - Add support for built-in layer styles to help prototype faster with automatic dark mode. Paired with colorPalette, you can create beautiful designs with little code that adapts to dark mode automatically.

    Fill Layer Styles: fill.subtle, fill.solid, fill.surface

    <Box layerStyle="fill.subtle" colorPalette="red">
  This is a subtle fill layer
</Box>

    Border Layer Styles: outline.subtle, outline.solid

    <Box layerStyle="outline.subtle" colorPalette="red">
  This is a subtle outline layer
</Box>

    Ghost: ghost.subtle, ghost.solid

    <Box layerStyle="ghost.subtle" colorPalette="red">
  This is a subtle ghost layer
</Box>

    Indicator Styles: indicator.top, indicator.end, indicator.bottom, indicator.start

    <Box layerStyle="indicator.top" colorPalette="red">
  This is a top indicator layer
</Box>

    Disabled Styles: disabled

    <Box _disabled={{ layerStyle: "disabled" }}>Disabled Button</Box>

    You can combine these layer styles to create very complex designs with little code.

    <Box
  layerStyle="fill.subtle"
  _hover={{ layerStyle: "outline.solid" }}
  colorPalette="red"
>
  This is a complex layer
</Box>

  • c654ee3 Thanks @segunadebayo! - Improve performance of styled components to avoid unneeded re-renders.

  • 3ccbbdf Thanks @segunadebayo! - Redesign Stepper component. It's now called Steps and manages the state internally, no need to use useSteps anymore.

    We've also improved the accessibility of the component by leveraging the tabs pattern and adding the required ARIA attributes.

    <Steps.Root defaultIndex={0} count={2}>
  <Steps.List>
    <Steps.Item index={0}>
      <Steps.Trigger>
        <Steps.Title>Step 1</Steps.Title>
      </Steps.Trigger>
      <Steps.Separator />
    </Steps.Item>

    <Steps.Item index={1}>
      <Steps.Trigger>
        <Steps.Title>Step 2</Steps.Title>
      </Steps.Trigger>
      <Steps.Separator />
    </Steps.Item>
  </Steps.List>

  <Steps.Content index={0}>Step 1</Steps.Content>
  <Steps.Content index={1}>Step 2</Steps.Content>
  <Steps.CompleteContent>Complete</Steps.CompleteContent>
</Steps.Root>

    Using the CLI, you can also scaffold an already composed stepper component

    chakra composition add steps

  • 3ccbbdf Thanks @segunadebayo! - Add support for focusRing and focusRingColor style props that allow to quickly style focus visible state of form controls.

    The focus ring values can be either extend or contain

    <Box asChild focusRing="extend" focusRingColor="pink.500">
  <input type="text" />
</Box>

Patch Changes

  • 0a03bcc Thanks @segunadebayo! - - Fix circular progress element types

    • Ensure consistent exports in components

  • #8617 7e9fbf0 Thanks @isBatak! - Refactor text-styles to use tokens instead of raw values.

  • #8601 1867d66 Thanks @isBatak! - Fix blur property token conversion to CSS variable.

  • Updated dependencies []:

    • @chakra-ui/hooks@3.0.0-next.9
    • @chakra-ui/utils@3.0.0-next.9

3.0.0-next.8

Patch Changes

  • 32a454d Thanks @segunadebayo! - Add missing use client directives to several components

  • Updated dependencies []:

    • @chakra-ui/hooks@3.0.0-next.8
    • @chakra-ui/utils@3.0.0-next.8

3.0.0-next.7

Minor Changes

  • 4ff153f Thanks @segunadebayo! - Speed up intellisence for style props, and add support for strictTokens in the CLI.

Patch Changes

  • Updated dependencies []:
    • @chakra-ui/hooks@3.0.0-next.7
    • @chakra-ui/utils@3.0.0-next.7

3.0.0-next.6

Minor Changes

Patch Changes

  • Updated dependencies []:
    • @chakra-ui/hooks@3.0.0-next.6
    • @chakra-ui/utils@3.0.0-next.6

3.0.0-next.5

Minor Changes

  • 07b04b1 Thanks @segunadebayo! - - [NEW]: Add RatingGroup, SegmentControl

    • [NEW]: Add EmptyState component for empty states
    • [NEW]: Add RadioCard and CheckboxCard components for card-based selection

  • #8568 5fd993b Thanks @isBatak! - Add Collapsible recipe with default open/close animation

  • 43f2c7d Thanks @segunadebayo! - - CheckboxCard [New]

    Add support for a new CheckboxCard component that can be used to render a card with a checkbox.

    <CheckboxCard.Root>
  <CheckboxCard.Control>
    <Stack gap="0" flex="1">
      <CheckboxCard.Label>Checkbox</CheckboxCard.Label>
      <Text>Some description</Text>
    </Stack>

    <CheckboxCard.HiddenInput />
    <CheckboxCard.Indicator />
  </CheckboxCard.Control>
</CheckboxCard.Root>

    • Checkmark [New]

      Add new checkmark component for rendering a static checkmark icon with the checked, disabled, and indeterminate state baked in.

    <Stack>
  <Checkmark />
  <Checkmark checked />
  <Checkmark indeterminate />
  <Checkmark disabled />
  <Checkmark checked disabled />
  <Checkmark indeterminate disabled />
</Stack>

    • EmptyState [New]

      Add new EmptyState component for rendering an empty state message with a title, description, and optional action button.

    <EmptyState.Root>
  <EmptyState.Content>
    <EmptyState.Indicator>
      <HiTemplate />
    </EmptyState.Indicator>

    <VStack textAlign="center">
      <Text fontWeight="medium">No template found</Text>
      <Text fontSize="sm" color="fg.muted">
        Try creating a new template with the button below
      </Text>
    </VStack>

    <Button variant="outline">
      <HiPlus /> Create Template
    </Button>
  </EmptyState.Content>
</EmptyState.Root>

  • #8575 d4522d9 Thanks @isBatak! - Align theme recipe name with panda

  • #8569 eb26857 Thanks @isBatak! - Fix the boxSize type to allow number values.

Patch Changes

  • Updated dependencies []:
    • @chakra-ui/hooks@3.0.0-next.5
    • @chakra-ui/utils@3.0.0-next.5

3.0.0-next.4

Minor Changes

Patch Changes

  • #8475 9224f4e Thanks @ryo-manba! - Add aria-current attribute to stepper

  • Updated dependencies []:

    • @chakra-ui/hooks@3.0.0-next.4
    • @chakra-ui/utils@3.0.0-next.4

3.0.0-next.3

Minor Changes

  • de9c0a0 Thanks @segunadebayo! - Add DataList component

  • 763329e Thanks @segunadebayo! - Add preset and preset-base entrypoints.

    • The preset entrypoint exposes the default theme and recipes for Chakra.
    • The preset-base entrypoint exposes the base utilities and conditions used internally.

Patch Changes

  • Updated dependencies []:
    • @chakra-ui/hooks@3.0.0-next.3
    • @chakra-ui/utils@3.0.0-next.3

3.0.0-next.2

Patch Changes

  • 83366c4 Thanks @segunadebayo! - - Fix regression in mergeConfigs
    • Decompose Field component
    • Refactor Avatar to use Ark UI
    • Refactor Progress to use Ark UI
  • Updated dependencies []:
    • @chakra-ui/hooks@3.0.0-next.2
    • @chakra-ui/utils@3.0.0-next.2

3.0.0-next.1

Minor Changes

Patch Changes

  • c941971 Thanks @segunadebayo! - Convert Tabs component to use Ark UI

  • Updated dependencies []:

    • @chakra-ui/hooks@3.0.0-next.1
    • @chakra-ui/utils@3.0.0-next.1

3.0.0-next.0

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

  • Updated dependencies []:
    • @chakra-ui/hooks@3.0.0-next.0
    • @chakra-ui/utils@3.0.0-next.0