Skip to content

Latest commit

 

History

History
866 lines (623 loc) · 27.3 KB

CHANGELOG.md

File metadata and controls

866 lines (623 loc) · 27.3 KB
Raw

@chakra-ui/react

3.0.0-next.29

Minor Changes

Patch Changes

3.0.0-next.28

Minor Changes

  • 47b3b5a Thanks @segunadebayo! - Support array in conditions object. This matches the API in Panda CSS and allow users to define complex selectors like media hover queries.

3.0.0-next.27

Minor Changes

Patch Changes

3.0.0-next.26

Patch Changes

  • 6d4cbbe Thanks @segunadebayo! - Fix ES module interop for @emotion/is-prop-value that makes Jest throw error.

3.0.0-next.25

Patch Changes

3.0.0-next.24

Major Changes

  • #8815 806be96 Thanks @isBatak! - Remove the @chakra-ui/hooks package in favour of using dedicated, robust libraries like react-use and usehooks-ts

3.0.0-next.23

Minor Changes

Patch Changes

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

3.0.0-next.22

Minor Changes

  • 55c0839 Thanks @segunadebayo! - Move the Prose component to snippets so it can be customized by the user.

Patch Changes

  • be98566 Thanks @segunadebayo! - Fix checkbox and toast on mobile

  • Updated dependencies []:

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

3.0.0-next.21

Minor Changes

Patch Changes

  • #8795 4408573 Thanks @TylerAPfledderer! - Adds style prop names to LayerStyleProperty union type

  • #8792 4dd77ec Thanks @TylerAPfledderer! - Updates the exposed list of slot anatomy to ensure all anatomy is included for use in type-checking extend recipe configs.

  • Updated dependencies []:

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

3.0.0-next.20

Patch Changes

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

3.0.0-next.19

Minor Changes

  • 4c6838c Thanks @segunadebayo! - - Rename onLabel and offLabel to trackLabel

    • Add support for thumbLabel prop for rendering an icon within thumb

  • f4762bf Thanks @segunadebayo! - Add support for merging multiple system configs into one within createSystem

    Before:

    const config = mergeConfigs(defaultConfig, customConfig)
export const system = createSystem(config)

    After:

    const system = createSystem(defaultConfig, customConfig)

Patch Changes

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

3.0.0-next.18

Patch Changes

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

3.0.0-next.17

Minor Changes

  • e9a1537 Thanks @segunadebayo! - BREAKING: Change signature of useRecipe, useSlotRecipe, createSlotRecipeContext

    createSlotRecipeContext

    Before:

    const { withProvider, withContext } = createSlotRecipeContext("accordion")

    After:

    const { withProvider, withContext } = createSlotRecipeContext({
  key: "accordion",
})

    useSlotRecipe

    Before:

    const recipe = useSlotRecipe("accordion")

    After:

    const recipe = useSlotRecipe({ key: "accordion" })

  • 8b110da Thanks @segunadebayo! - Support inlining recipe in createRecipeContext and createSlotRecipeContext for better DX when shipping libraries based on Chakra.

    This reduces the need for using the Chakra CLI to generate types for custom components.

Patch Changes

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

3.0.0-next.16

Patch Changes

3.0.0-next.15

Minor Changes

Patch Changes

  • 87cf70c Thanks @segunadebayo! - Revert text recipe to prevent color regressions

  • Updated dependencies []:

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

3.0.0-next.14

Minor Changes

  • 3908155 Thanks @segunadebayo! - Rename createStyleContext to createSlotRecipeContext

  • 952647a Thanks @segunadebayo! - Add CardTitle and CardDescription components

  • b6d1d0d Thanks @segunadebayo! - Simplify spinner component to use less custom props.

    • Removed emptyColor, prefer to use --spinner-track-color
    • Removed speed, prefer to use animationDuration
    • Removed thickness, prefer to use borderWidth

Patch Changes

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

3.0.0-next.13

Minor Changes

Patch Changes

  • bffb68f Thanks @segunadebayo! - - Pagination: Fix issue page props were not forwarded correctly.
    • PinInput: Fix issue mask props were not forwarded correctly.
  • Updated dependencies []:
    • @chakra-ui/hooks@3.0.0-next.13
    • @chakra-ui/utils@3.0.0-next.13

3.0.0-next.12

Patch Changes

  • 0ae054d Thanks @segunadebayo! - Fix issue where hideFrom and hideBelow doesn't show any autocompletions

  • Updated dependencies []:

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

3.0.0-next.11

Minor Changes

  • e77a9b8 Thanks @segunadebayo! - - Add new Timeline component to presenting chronological information or activities.

    • Trim generated className in the DOM.
    • Add neutral status to Alert component

Patch Changes

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

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.muted, fill.solid, fill.surface

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

    Border Layer Styles: outline.muted, outline.solid

    <Box layerStyle="outline.muted" colorPalette="red">
  This is a subtle outline 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.muted"
  _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