
components
Selector box file
v.1.0.0 | SaturnUsage
The name of the object of tokens to style selectorBoxFile is SELECTOR_BOX_FILE_STYLES.
You can not change the name of the object of tokens.
selectorBoxFile component has one way to modify the styles:
- Variant: modify the styles of the SelectorBoxFile.
The structure of the SELECTOR_BOX_FILE_STYLES object is:
Variants and States
Variants can modify the styles for each inner state of the selectorBoxFile. The inner states are:
1234567
enum SelectorBoxFileStateType { DEFAULT, LOADING, SUCCESS, ERROR, DISABLED, }
For each inner state the next tokens can be used:
- header?: CommonStyleType;
- titleSubtitleContainer?: CommonStyleType;
- title?: TypographyTypes;
- subtitle?: TypographyTypes;
- descriptionContainer?: CommonStyleType;
- description?: TypographyTypes;
- button?: { size?: string; iconPosition?: IconPositionType; variant?: string; };
- tooltipIconContainer?: CommonStyleType;
- tooltipIcon?: IconTypes;
- tooltip?: { variant?: string; };
- errorMessageContainer?: CommonStyleType;
- errorMessageIcon?: IconTypes;
- errorMessage?: TypographyTypes;
- states?: SelectorBoxVariableStatesType;
- actionIconAndActionTextContainer?: CommonStyleType;
12345678910
const SELECTOR_BOX_FILE_STYLES = { [VARIANT]: { [STATE]: { header?: CommonStyleType; titleSubtitleContainer?: CommonStyleType; title?: TypographyTypes; subtitle?: TypographyTypes; descriptionContainer?: CommonStyleType; description?: TypographyTypes; button?: {
Example
selectorBoxFile theme object example:
12345678910
const SELECTOR_BOX_FILE_STYLES = { [VARIANT]: { [STATE]: { containerBoxTextsContainer: { display: 'display', flex_direction: 'flex_direction', }, containerBoxActionText: { display: 'display', flex_direction: 'flex_direction',