Skip to main content

v0.136.0

· 2 min read
Anita

Breaking changes​

  • csx prop no longer accepted by any component
  • Box, FilterBar, Collapsible, CollapsibleGroup and List components deprecated
  • Input object for useSwitchState changed format

Codemod​

to use the codemod that removes Box component (and replaces it) and replaces csx prop run the command:

npx @vtex/admin-ui-codemod remove-csx ./

remember to lint after running the codemod, to maintain your linting specifications.

Switch​

before​

const props = useSwitchState({ state: { defaultValue: [] }})

return  <Switch
     state={props}
     aria-label="label1"
     label="label"
     value="switch1"
/>

after​

  • input for useSwitchState changed from { state: { ... }} to { ... }
const props = useSwitchState({ defaultValue: [] })

return  <Switch
     state={props}
     aria-label="label1"
     label="label"
     value="switch1"
/>

Styling model review​

The styling paradigm for all components has been changed. Components no longer accept the csx prop, they instead accept a className prop. You can use the csx function exported by admin-ui to generate classNames from style objects.

before​


<Button csx={ marginRight: '$m' } />

after​


<Button className={csx({ marginRight: '$m' })} />

Motivation for the change​

  • Improve rendering performance for all components
  • Compatibility with any css library, as long as you use className

ATTENTION POINT 🚨

Some components utilize data attribute selectors to handle styling when there's multiple styling options for the same component. To change styles that are under a data attribute selector, you must use data selectors too. For more details check our documentation.

Box​

Box has been deprecated and can be replaced by divs or other components with a className.

before​


<Box csx={ marginRight: '$m' } />
<Box as="span" csx={ marginRight: '$m' } />

after​


<div className={csx({ marginRight: '$m' })} />
<span className={csx({ marginRight: '$m' })} />

Fixes​

  • Zindex overlap issues
  • Divider a11y (aria-direction)

Features​

  • usePaginationState now accepts optional onNextPage and onPrevPage callbacks