v0.135.0

Csx multi-token resolve

You can now resolve multiple tokens at once. This is useful to compound properties like margin, padding, box-shadow, border, etc. For example:

const container = csx({
  margin: '$space-10 $space-20',
  padding: '$space-10',
  border: '4px dotted $blue40',
})

Tokens

Space

Codemod: npx @vtex/admin-ui-codemod space-tokens-review ./

The current tokens are:

token	value
space-0	0rem
space-05	0.125rem
space-1	0.25rem
space-2	0.5rem
space-3	0.75rem
space-4	1rem
space-5	1.25rem
space-6	1.5rem
space-7	1.75rem
space-8	2rem
space-10	2.5rem
space-12	3rem
space-16	4rem
space-20	5rem
space-24	6rem
space-28	7rem
space-32	8rem

Multi-token csx resolve

Border Radius

Codemod: npx @vtex/admin-ui-codemod radius-tokens-review ./

token	value
none	0
base	0.25rem
pill	100%

zIndices

Created tokens for elevation:

token	value
z-1	0
z-2	100
z-3	200
z-4	300
z-5	400
z-6	500
z-7	600
z-8	700
z-9	800
z-10	900

useCollapsible

Implemented the discussion: https://github.com/vtex/admin-ui/discussions/438#discussion-4527541.

Before

We use the collapsible component with a state hook.

import {
  useCollapsibleState,
  Collapsible,
  CollapsibleHeader,
  CollapsibleContent,
} from '@vtex/admin-ui'

function Example() {
  const state = useCollapsibleState()

  return (
    <Collapsible state={state}>
      <CollapsibleHeader label="your label" />
      <CollapsibleContent> your content </CollapsibleContent>
    </Collapsible>
  )
}

After

Replace the collpasible with the useCollapsible hook, which returns the props (using the prop-getters pattern).

function Example() {
  const { getToggleProps, getCollapseProps } = useCollapsible()

  return (
    <Card>
      <CardHeader {...getToggleProps()}>
        <CardTitle>Your title</CardTitle>
      </CardHeader>
      <CardContent {...getCollapseProps()}>Your content</CardContent>
    </Card>
  )
}

Abstracting

The developer can abstract the component into a stateful accordion, or whatever makes sense for the application.

// accordion.tsx
interface Props {
  title: ReactNode
  content: ReactNode
}

export function Accordion (props: Props) {
  const { title, content } = props
  const { getToggleProps, getCollapseProps } = useCollapsible()

  return (
    <Card>
      <CardHeader {...getToggleProps()}>
        <CardTitle>{title}</CardTitle>
      </CardHeader>
      <CardContent {...getCollapseProps()}>{content}</CardContent>
    </Card>
  )
}

// usage.tsx
import { Accordion } from './accordion.tsx'

<Accordion title="Your title" content="your content" />

Modal

The Modal component was reviewed to the latest design specs. The API also changed a composable and flexible approach, allowing users to take advantage of our components to create custom, but consistent, Modals.

Before

function ModalDialog() {
  const modal = useModalState()

  return (
    <Box>
      <ModalDisclosure state={modal}>
        <Button>Publish</Button>
      </ModalDisclosure>
      <Modal aria-label="Publish modal" state={modal} size="small">
        <ModalHeader title="Publish content" />
        <ModalContent>
          <Text>
            Are you sure you want to publish this content? This action cannot be
            undone.
          </Text>
        </ModalContent>
        <ModalFooter>
          <Button variant="secondary">Cancel</Button>
          <Button>Confirm</Button>
        </ModalFooter>
      </Modal>
    </Box>
  )
}

After

• ModalDisclosure is deprecated. You can use any button (or effect) to act as disclosure.
• ModalHeader is composed of the new ModalTitle and ModalDismiss components.

function ModalDialog() {
  const modal = useModalState()

  return (
    <Box>
      <Button onClick={() => modal.open()}>Publish</Button>
      <Modal aria-label="Publish modal" state={modal} size="small">
        <ModalHeader>
          <ModalTitle>Publish content</ModalTitle>
          <ModalDismiss />
        </ModalHeader>
        <ModalContent>
          <Text>
            Are you sure you want to publish this content? This action cannot be
            undone.
          </Text>
        </ModalContent>
        <ModalFooter>
          <ModalButton variant="secondary">Cancel</ModalButton>
          <ModalButton>Confirm</ModalButton>
        </ModalFooter>
      </Modal>
    </Box>
  )
}

Search

Now you are able to customize the Search placeholder when necessary by using the placeholder property.

<Search value={value} onChange={onChange} placeholder="Search for..." />