@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
72 lines (71 loc) • 1.81 kB
JavaScript
import { buildStyleFns, buildStylePropFn } from './buildStyleFns';
/** @deprecated */
export const flexStyleFnConfigs = [
{
name: 'alignContent',
properties: ['alignContent'],
system: 'none',
},
{
name: 'alignItems',
properties: ['alignItems'],
system: 'none',
},
{
name: 'display',
properties: ['display'],
system: 'none',
},
{
name: 'flexDirection',
properties: ['flexDirection'],
system: 'none',
},
{
name: 'flexWrap',
properties: ['flexWrap'],
system: 'none',
},
{
name: 'justifyContent',
properties: ['justifyContent'],
system: 'none',
},
{
name: 'justifyItems',
properties: ['justifyItems'],
system: 'none',
},
{
name: 'gap',
properties: ['gap'],
system: 'space',
},
{
name: 'columnGap',
properties: ['columnGap'],
system: 'space',
},
{
name: 'rowGap',
properties: ['rowGap'],
system: 'space',
},
];
/** @deprecated */
export const flexStyleFns = buildStyleFns(flexStyleFnConfigs);
/**
* A style prop function that takes component props and returns flexbox styles.
* If no `FlexStyleProps` are found, it returns an empty object.
*
* @example
* ```tsx
* const FlexExample = () => (
* <Flex justifyContent="center" alignItems="center">
* Hello, flex!
* </Flex>
* );
* ```
* @deprecated ⚠️ `flex` is deprecated and will be removed in a future major version. Please reference our new way of styling components [here](https://workday.github.io/canvas-kit/?path=/docs/styling-getting-started-overview--docs
*/
export const flex = buildStylePropFn(flexStyleFns);