Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(deps): update dependency @chakra-ui/react to v3 - autoclosed #55

Closed
wants to merge 1 commit into from

Conversation

renovate[bot]
Copy link
Contributor

@renovate renovate bot commented Nov 4, 2024

This PR contains the following updates:

Package Change Age Adoption Passing Confidence
@chakra-ui/react (source) ^2.8.2 -> ^3.0.0 age adoption passing confidence

Release Notes

chakra-ui/chakra-ui (@​chakra-ui/react)

v3.0.2

Compare Source

Patch Changes
  • 20b91bd
    Thanks @​segunadebayo! - - InputAddon:
    Fix issue with input addon not stretched correctly.
    • Snippets / Toaster: Improve toaster styling by adding
      width={{ md: "sm" }} to the toast root.

v3.0.1

Compare Source

Patch Changes
  • c0020c9
    Thanks @​segunadebayo! - Fix issue where
    using keyframe interpolation in animation prop doesn't work

  • 7d4f898
    Thanks @​segunadebayo! - Fix issue where
    scrollBehavior=outside doesn't allow scrolling outside the dialog content

v3.0.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
  • #​8815
    806be96
    Thanks @​isBatak! - Remove the @chakra-ui/hooks
    package in favour of using dedicated, robust libraries like react-use and
    usehooks-ts

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

  • 192c6b1
    Thanks @​segunadebayo! - Add new fieldset
    component

  • 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

  • 3fc49ca
    Thanks @​segunadebayo! - Add support for
    FormatNumber and FormatByte components

  • 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>
  • de9c0a0
    Thanks @​segunadebayo! - Add DataList
    component

  • 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
  • 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.
  • 925cfd9
    Thanks @​segunadebayo! - Add ActionBar,
    Status, Rating, Pagination components

  • 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" })
  • 3908155
    Thanks @​segunadebayo! - Rename
    createStyleContext to createSlotRecipeContext

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

  • edec8f7
    Thanks @​segunadebayo! - Add clipboard
    composition

  • 5093e18
    Thanks @​segunadebayo! - Add cursor pointer
    to button

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

    • Add support for thumbLabel prop for rendering an icon within thumb
  • #​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
  • 945a777
    Thanks @​segunadebayo! - BREAKING: Integrate
    Ark v4. This mostly affects the custom select component that requires the use
    of createListCollection now.

  • c26acf0
    Thanks @​segunadebayo! - Add support for
    cursor token type

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

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

  • 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)
  • #​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
  • c2f45ca
    Thanks @​segunadebayo! - Rename
    Fieldset.Control to Fieldset.Content

  • 1738b90
    Thanks @​segunadebayo! - - Icon: Set
    asChild to true by default to reduce repetition

    • All components

      • Ensure consistent sizing convention (units of 4px). Smaller elements start
        at 20px, larger elements start at 40px
      • Ensure focus ring matches the colorPalette
    • Input, Textarea: Rename filled variant to subtle

    • Tags: Add new Tag.StartElement and Tag.EndElement components to allow
      for easier styling of the start and end elements

  • 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
  • 548470d
    Thanks @​segunadebayo! - Add custom select
    from Ark UI and design recipe

  • 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.

  • 05793a2
    Thanks @​segunadebayo! - - Make gray the
    default color palette.

    • Change avatar sm size to 36px for consistency.
    • Move bg for outline component variants.
  • 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>
  • e119ae9
    Thanks @​segunadebayo! - Rename
    motionStyle to animationStyle for better intuitiveness

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

  • 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>
  • 4ff153f
    Thanks @​segunadebayo! - Speed up
    intellisence for style props, and add support for strictTokens in the CLI.

  • 47a8a9e
    Thanks @​segunadebayo! - - Add inherit to
    Spinner recipe size

    • Refactor button and link button snippets
  • 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
  • #​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]
  • #​8569
    eb26857
    Thanks @​isBatak! - Fix the boxSize type to
    allow number values.

  • 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.

  • e4f2df0
    Thanks @​segunadebayo! - Add Prose
    component to help style markdown content.

  • c243698
    Thanks @​segunadebayo! - - Add
    referrerPolicy to Avatar component.

    • Add CheckboxDescription, CheckboxCardDescription and RadioCardDescription
    • Swap muted and subtle color tokens
Patch Changes

Configuration

📅 Schedule: Branch creation - "every 2 weeks on Monday" in timezone Europe/London, Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

Rebasing: Never, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.


  • If you want to rebase/retry this PR, check this box

This PR was generated by Mend Renovate. View the repository job log.

Copy link

vercel bot commented Nov 4, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
dapp ❌ Failed (Inspect) Nov 4, 2024 1:40am

@renovate renovate bot changed the title fix(deps): update dependency @chakra-ui/react to v3 fix(deps): update dependency @chakra-ui/react to v3 - autoclosed Dec 8, 2024
@renovate renovate bot closed this Dec 8, 2024
@renovate renovate bot deleted the renovate/major-chakra-ui-monorepo branch December 8, 2024 18:44
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

0 participants