Primitives

Primitives are polymorphic components

Getting started

This package is already a part of admin-ui - so if you are using it, there is no need for installation.

For standalone usage, you can install it as an npm package (with its peer dependencies):

yarn add @vtex/admin-primitives @vtex/admin-core reakit @emotion/css @emotion/react

After that, you must add the admin-core's ThemeProvider on your app root - so that you can consume styles.

import { Flex } from '@vtex/admin-primitives'

function ApplicationRoot() {
  return <Flex>A flex container</Flex>
}

Engineering

csx prop

This prop is present in all components and is responsible for receiving a style-object. More info Styles

<Primitive csx={{ bg: 'blue', color: 'light.primary' }}>Blue box</Primitive>s

Polymorphism

All primitives are polymorphic, this means that you can assign different elements to them through the element property.

The default element is the div, this is true to every component:

<Primitive>renders a div</Primitive>

You can choose the element to render:

<Primitive element="a" href="#">
  renders an anchor
</Primitive>

You can also pass a valid React component (it must receive className so that styles are passed correctly):

import { Link } from 'gatsby'

function Example() {
  return <Primitive element={Link}>Gatsby link</Primitive>
}

Types

PrimitiveProps

| prop | type | required | description | | ------------- | ------------ | -------- | -------------------------------------- | | element | E | 🚫 | Element that will be rendered | | className | string | 🚫 | element className | | extends <E> | props of E | 🚫 | This component inherits all props of E |

FlexProps

| prop | type | required | description | | --------- | --------------------------------- | -------- | ------------------------------------------- | | E | PrimitiveProps<E> | 🚫 | Extends all props of Primitive | | align | ResponsiveValue<AlignContent> | 🚫 | Shorthand for CSS alignItems property | | basis | ResponsiveValue<FlexBasis> | 🚫 | Shorthand for CSS flexbasis property | | direction | ResponsiveValue<FlexDirection> | 🚫 | Shorthand for CSS flexDirection property | | grow | ResponsiveValue<FlexGrow> | 🚫 | Shorthand for CSS flexGrow property | | shrink | ResponsiveValue<FlexShrink> | 🚫 | Shorthand for CSS flexShrink property | | justify | ResponsiveValue<JustifyContent> | 🚫 | Shorthand for CSS justifyContent property | | wrap | ResponsiveValue<FlexWrap> | 🚫 | Shorthand for CSS flexWrap property | | order | ResponsiveValue<Order> | 🚫 | Shorthand for CSS order property |

FlexSpacerProps

| prop | type | required | description | | ---- | ------------------- | -------- | -------------------------------- | | E | PrimitiveProps<E> | 🚫 | Extends all props of Primitive |

GridProps

| prop | type | required | description | | --------------- | -------------------------------------- | -------- | ------------------------------------------------ | | E | PrimitiveProps<E> | 🚫 | Extends all props of Primitive | | gap | ResponsiveValue<GridGap> | 🚫 | Shorthand for CSS gridGap property | | rowGap | ResponsiveValue<GridRowGap> | 🚫 | Shorthand for CSS gridRowGap property | | columnGap | ResponsiveValue<GridColumnGap> | 🚫 | Shorthand for CSS gridColumnGap property | | templateAreas | string[] | 🚫 | Shorthand for CSS gridTemplateAreas property | | templateRows | ResponsiveValue<GridTemplateRows> | 🚫 | Shorthand for CSS gridTemplateRows property | | templateColumns | ResponsiveValue<GridTemplateColumns> | 🚫 | Shorthand for CSS gridTemplateColumns property |

GridItemProps

| prop | type | required | description | | ---- | --------------------------- | -------- | ------------------------------------- | | E | PrimitiveProps<E> | 🚫 | Extends all props of Primitive | | area | ResponsiveValue<GridArea> | 🚫 | Shorthand for CSS gridArea property |