
components
Input Search
v.1.0.0 | SaturnUsage
The name of the object of tokens to style input search is INPUT_SEARCH_STYLES.
You can not change the name of the object of tokens.
The variant prop allows to modify different aspects of the component.
Variants
Variants can modify the styles for each inner state of the inputSearch. The inner states are the same as the InputState.
The tokens extends those associated to the input basic, InputBasicStateProps, and adds:
- InputBasicStateProps;
- inputVariant?: string; (It should go a valid variant from the Input component)
- popoverVariant?: { [key in DeviceBreakpointsType]?: string };
- useActionBottomSheet?: { [key in DeviceBreakpointsType]?: boolean };
- actionBottomSheetVariant?: string;
- loaderExpandedContainer?: CommonStyleType;
- loaderContractedContainer?: CommonStyleType;
- searchListContainer?: CommonStyleType;
- searchListSubContainer?: CommonStyleType;
- inputInPopoverContainer?: CommonStyleType;
- noResultsTextContainer?: CommonStyleType;
- noResultsText?: TypographyTypes;
- loader?: { variant?: string; width?: string; };
- loadingText?: TypographyTypes;
The listOptions prop allow to modify the styles for the options of the list for each variant.
- listOptions?: { variant?: string; optionVariant?: string; hightlightedOptionVariant?: string; };
12345678910
const INPUT_SEARCH_STYLES = { [VARIANT]: { listOptions?: { variant?: string; optionVariant?: string; hightlightedOptionVariant?: string; }; [STATE]: { inputVariant?: string; popoverVariant?: { [key in DeviceBreakpointsType]?: string };
Example
inputSearch theme object example:
12345678910
const INPUT_SEARCH_STYLES = { [VARIANT]: { listOptions?: { variant?: 'list-options-variant'; optionVariant?: 'option-variant'; hightlightedOptionVariant?: 'highlighted-option-variant'; }, [STATE]: { inputVariant: 'input-variant', label: {