@wix/design-system
Version:
@wix/design-system
119 lines • 6.64 kB
TypeScript
import { AriaRole, CSSProperties, AriaAttributes } from 'react';
import { Spacing } from '../common';
import { ValuesOf } from '../utils/typeUtils';
import { DIRECTION, HORIZONTAL_ALIGNMENT, SPACING, VERTICAL_ALIGNMENT } from './Box.constants';
export type BoxPropsBase = {
/** Defines if the box behaves as an inline element */
inline?: boolean;
/** Defines how the children are ordered (horizontally or vertically) */
direction?: BoxDirection;
/** Allows to render any component as a child item */
children?: React.ReactNode;
/** Specifies a CSS class name to be appended to the component’s root element.
* @internal
*/
className?: string;
/** Defines how the children are aligned according to the X axis */
align?: BoxHorizontalAlignment;
/** Defines how the children are aligned according to the Y axis */
verticalAlign?: BoxVerticalAlignment;
/** Accepts HTML attributes that can be used in the tests */
dataHook?: string;
/**
* Accepts HTML attributes that can be used in the tests
* @deprecated use dataHook instead
*/
'data-hook'?: string;
/** Sets the gaps/gutters between flex items.
* Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
* a spacing token (SP1, SP2, etc.) */
gap?: BoxCssSizingProperty;
/** Enables a border and sets its width and style. This prop does not include WSR color variable keys. */
border?: string;
/** Sets object of CSS styles */
style?: CSSProperties;
/** Sets the WAI-ARIA role attribute for accessibility. When set to 'button' or 'link', the box automatically receives tabIndex=0 for keyboard navigation. */
role?: AriaRole;
/** Sets the WAI-ARIA label attribute, providing an accessible name for assistive technologies like screen readers. */
ariaLabel?: AriaAttributes['aria-label'];
} & BoxColorProperties & BoxSpacingProperties & BoxSizeProperties;
export type BoxColorProperties = {
/** Sets a text color by a key from the color palette or natively supported value (Hex, RGB, etc.) */
color?: string;
/** Sets a background color by a key from the color palette or natively supported value (Hex, RGB, etc.) */
backgroundColor?: string;
/** Sets a border color by a key from the color palette or natively supported value (Hex, RGB, etc.) */
borderColor?: string;
/** Sets a border top color by a key from the color palette or natively supported value (Hex, RGB, etc.) */
borderTopColor?: string;
/** Sets a border right color by a key from the color palette or natively supported value (Hex, RGB, etc.) */
borderRightColor?: string;
/** Sets a border bottom color by a key from the color palette or natively supported value (Hex, RGB, etc.) */
borderBottomColor?: string;
/** Sets a border left color by a key from the color palette or natively supported value (Hex, RGB, etc.) */
borderLeftColor?: string;
};
export type BoxSpacingProperties = {
/** Sets margin on all sides.
* Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
* a spacing token (SP1, SP2, etc.) or a string of space-separated values ("3px 3px") */
margin?: BoxCssSizingProperty;
/** Sets margin on the top.
* Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
* a spacing token (SP1, SP2, etc.) or a value in pixels */
marginTop?: BoxCssSizingProperty;
/** Sets margin on the right.
* Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
* a spacing token (SP1, SP2, etc.) or a value in pixels */
marginRight?: BoxCssSizingProperty;
/** Sets margin on the bottom.
* Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
* a spacing token (SP1, SP2, etc.) or a value in pixels */
marginBottom?: BoxCssSizingProperty;
/** Sets margin on the left.
* Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
* a spacing token (SP1, SP2, etc.) or a value in pixels */
marginLeft?: BoxCssSizingProperty;
/** Sets padding on all sides.
* Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
* a spacing token (SP1, SP2, etc.) or a string of space-separated values ("3px 3px") */
padding?: BoxCssSizingProperty;
/** Sets padding on the top.
* Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
* a spacing token (SP1, SP2, etc.) or a value in pixels */
paddingTop?: BoxCssSizingProperty;
/** Sets padding on the right.
* Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
* a spacing token (SP1, SP2, etc.) or a value in pixels */
paddingRight?: BoxCssSizingProperty;
/** Sets padding on the bottom.
* Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
* a spacing token (SP1, SP2, etc.) or a value in pixels */
paddingBottom?: BoxCssSizingProperty;
/** Sets padding on the left.
* Accepts a numeric value (multiplied by spacing unit), predefined spacing value (tiny, small, etc.)
* a spacing token (SP1, SP2, etc.) or a value in pixels */
paddingLeft?: BoxCssSizingProperty;
};
export type BoxSizeProperties = {
/** Sets the minimum width of the box in pixels */
minWidth?: BoxCssSizingProperty;
/** Sets the maximum width of the box in pixels */
maxWidth?: BoxCssSizingProperty;
/** Sets the width of the box in pixels */
width?: BoxCssSizingProperty;
/** Sets the minimum height of the box in pixels */
minHeight?: BoxCssSizingProperty;
/** Sets the maximum height of the box in pixels */
maxHeight?: BoxCssSizingProperty;
/** Sets the height of the box in pixels */
height?: BoxCssSizingProperty;
};
export type BoxCSSProperties = Omit<CSSProperties, 'direction' | 'flexDirection' | 'justifyContent' | 'alignItems'>;
export type BoxProps = BoxPropsBase & BoxCSSProperties;
export type BoxDirection = ValuesOf<typeof DIRECTION>;
export type BoxHorizontalAlignment = ValuesOf<typeof HORIZONTAL_ALIGNMENT>;
export type BoxVerticalAlignment = ValuesOf<typeof VERTICAL_ALIGNMENT>;
export type BoxSpacing = ValuesOf<typeof SPACING>;
export type BoxCssSizingProperty = BoxSpacing | Spacing | string | number;
//# sourceMappingURL=Box.types.d.ts.map