chakra-ui/panda @pandacss/generator@0.15.4

on GitHub

Patch Changes

• bf0e6a3: Fix issues with class merging in the styled factory fn for Qwik, Solid and Vue.

• 69699ba: Improved styled factory by adding a 3rd (optional) argument:

  interface FactoryOptions<TProps extends Dict> {
    dataAttr?: boolean
    defaultProps?: TProps
    shouldForwardProp?(prop: string, variantKeys: string[]): boolean
  }

  • Setting dataAttr to true will add a data-recipe="{recipeName}" attribute to the element with the recipe name.
    This is useful for testing and debugging.

  import { styled } from '../styled-system/jsx'
  import { button } from '../styled-system/recipes'
  
  const Button = styled('button', button, { dataAttr: true })
  
  const App = () => (
    <Button variant="secondary" mt="10px">
      Button
    </Button>
  )
  // Will render something like <button data-recipe="button" class="btn btn--variant_purple mt_10px">Button</button>

  • defaultProps allows you to skip writing wrapper components just to set a few props. It also allows you to locally
    override the default variants or base styles of a recipe.

  import { styled } from '../styled-system/jsx'
  import { button } from '../styled-system/recipes'
  
  const Button = styled('button', button, {
    defaultProps: {
      variant: 'secondary',
      px: '10px',
    },
  })
  
  const App = () => <Button>Button</Button>
  // Will render something like <button class="btn btn--variant_secondary px_10px">Button</button>

  • shouldForwardProp allows you to customize which props are forwarded to the underlying element. By default, all
    props except recipe variants and style props are forwarded.

  import { styled } from '../styled-system/jsx'
  import { button } from '../styled-system/recipes'
  import { isCssProperty } from '../styled-system/jsx'
  import { motion, isValidMotionProp } from 'framer-motion'
  
  const StyledMotion = styled(
    motion.div,
    {},
    {
      shouldForwardProp: (prop, variantKeys) =>
        isValidMotionProp(prop) || (!variantKeys.includes(prop) && !isCssProperty(prop)),
    },
  )

  • @pandacss/types@0.15.4
  • @pandacss/core@0.15.4
  • @pandacss/is-valid-prop@0.15.4
  • @pandacss/logger@0.15.4
  • @pandacss/shared@0.15.4
  • @pandacss/token-dictionary@0.15.4