@itwin/itwinui-react
Version:
A react component library for iTwinUI
139 lines (138 loc) • 4.21 kB
TypeScript
import * as React from 'react';
import type { AnyString } from '../../utils/types.js';
import type { PolymorphicForwardRefComponent } from '../../utils/props.js';
declare const sizeTokens: readonly ["3xs", "2xs", "xs", "s", "m", "l", "xl", "2xl", "3xl"];
/**
* String literal shorthands that correspond to the size tokens in [itwinui-variables](https://github.com/iTwin/iTwinUI/blob/main/packages/itwinui-variables/src/sizes.scss).
*/
type SizeToken = (typeof sizeTokens)[number];
type FlexOwnProps = {
/**
* Value of the `display` property.
* @default 'flex'
*/
display?: 'flex' | 'inline-flex';
/**
* Value of the `justify-content` property.
* @default 'flex-start'
*/
justifyContent?: React.CSSProperties['justifyContent'];
/**
* Value of the `align-items` property. Defaults to 'center' but you
* might want to use 'flex-start' in some cases.
* @default 'center'
*/
alignItems?: React.CSSProperties['alignItems'];
/**
* Value of the `gap` property.
*
* Supports aliases for iTwinUI size tokens:
* 3xs, 2xs, xs, s, m, l, xl, 2xl, 3xl
*
* Also accepts any valid css value (e.g. "1rem" or "2px")
*
* @default 'xs'
*/
gap?: SizeToken | AnyString;
/**
* Value of the `direction` property.
* @default 'row'
*/
flexDirection?: React.CSSProperties['flexDirection'];
/**
* Value of the `flex-wrap` property.
* @default 'nowrap'
*/
flexWrap?: React.CSSProperties['flexWrap'];
};
type FlexSpacerOwnProps = {
/**
* Value of the `flex` css property.
*
* This may need to be adjusted if you're also setting `flex` on
* other `Flex.Item`s.
*
* @default 999
*/
flex?: React.CSSProperties['flex'];
};
type FlexItemOwnProps = {
/**
* Gap before the flex item, if different from the `gap` set on `Flex` component.
*/
gapBefore?: SizeToken | AnyString;
/**
* Gap after the flex item, if different from the `gap` set on `Flex` component.
*/
gapAfter?: SizeToken | AnyString;
/**
* Value of the `flex` css property.
* @default 'auto'
*/
flex?: React.CSSProperties['flex'];
/**
* Value of the `align-self` css property.
* @default 'auto'
*/
alignSelf?: React.CSSProperties['alignSelf'];
};
/**
* A utility component that makes it easier to work with CSS flexbox
* and iTwinUI design tokens. Supports all flex properties.
* Can be used with or without `Flex.Item` and `Flex.Spacer` subcomponents.
*
* @example
* <Flex>
* <Icon>...</Icon>
* <Text>...</Text>
* <Flex.Spacer />
* <IconButton>...</IconButton>
* </Flex>
*
* @example
* <Flex gap='m' flexWrap='wrap'>
* <Flex.Item>...</Flex.Item>
* <Flex.Item>...</Flex.Item>
* ...
* </Flex>
*
* @example
* <Flex gap='l'>
* <Flex.Item>...</Flex.Item>
* <Flex.Item>...</Flex.Item>
* <Flex.Item gapBefore='s'>...</Flex.Item>
* <Flex.Item>...</Flex.Item>
* </Flex>
*/
export declare const Flex: PolymorphicForwardRefComponent<"div", FlexOwnProps> & {
/**
* Subcomponent that allows customizing flex items through the
* `flex`, `alignSelf` and `gapBefore`/`gapAfter` props.
*
* The `gapBefore`/`gapAfter` props can used to override the gap at an
* individual level, for when you need a different gap than the one
* set in the parent `Flex`.
*
* @example
* <Flex gap='l'>
* <Flex.Item>...</Flex.Item>
* <Flex.Item>...</Flex.Item>
* <Flex.Item gapBefore='s'>...</Flex.Item>
* <Flex.Item>...</Flex.Item>
* </Flex>
*/
Item: PolymorphicForwardRefComponent<"div", FlexItemOwnProps>;
/**
* Subcomponent that fills up the available space using a really large `flex` value.
* Useful when you want to push certain items to one edge.
*
* @example
* <Flex>
* <div>this stays on the left</div>
* <Flex.Spacer /> // this fills up the available empty space
* <div>this gets pushed all the way to the end</div>
* </Flex>
*/
Spacer: PolymorphicForwardRefComponent<"div", FlexSpacerOwnProps>;
};
export {};