diff --git a/.changeset/fresh-pens-study.md b/.changeset/fresh-pens-study.md new file mode 100644 index 0000000000..3f27256ce2 --- /dev/null +++ b/.changeset/fresh-pens-study.md @@ -0,0 +1,5 @@ +--- +'@commercetools-uikit/selectable-search-input': minor +--- + +Add isCondensed prop that when set to true, condenses the input height, icon size and font size. diff --git a/packages/components/inputs/selectable-search-input/README.md b/packages/components/inputs/selectable-search-input/README.md index 1d8cd4a7d0..fc6c87b4d4 100644 --- a/packages/components/inputs/selectable-search-input/README.md +++ b/packages/components/inputs/selectable-search-input/README.md @@ -77,6 +77,7 @@ export default Example; | `hasWarning` | `boolean` | | | Indicates if the input has warning values | | `placeholder` | `string` | | | Placeholder text for the input | | `isClearable` | `boolean` | | `true` | Indicates if the input should be cleared when the clear button is clicked. Defaults to true. | +| `isCondensed` | `boolean` | | | Use this property to reduce the paddings of the component for a ui compact variant | | `horizontalConstraint` | `union`
Possible values:
`10 , 11 , 12 , 13 , 14 , 15 , 16 , 'scale' , 'auto'` | | `'scale'` | Horizontal size limit of the input fields. | | `options` | `union`
Possible values:
`TOption[] , TOptionObject[]` | | `[]` | Array of options that populate the select menu | | `menuPortalZIndex` | `number` | | `1` | z-index value for the menu portal
Use in conjunction with `menuPortalTarget` | diff --git a/packages/components/inputs/selectable-search-input/src/selectable-search-input.story.js b/packages/components/inputs/selectable-search-input/src/selectable-search-input.story.js index cbaae086e2..c088a4959f 100644 --- a/packages/components/inputs/selectable-search-input/src/selectable-search-input.story.js +++ b/packages/components/inputs/selectable-search-input/src/selectable-search-input.story.js @@ -125,6 +125,7 @@ storiesOf('Components|Inputs', module) isDisabled={boolean('isDisabled', false)} isReadOnly={boolean('isReadOnly', false)} isClearable={boolean('isClearable', true)} + isCondensed={boolean('isCondensed', false)} showSubmitButton={boolean('showSubmitButton', true)} hasError={boolean('hasError', false)} hasWarning={boolean('hasWarning', false)} diff --git a/packages/components/inputs/selectable-search-input/src/selectable-search-input.styles.ts b/packages/components/inputs/selectable-search-input/src/selectable-search-input.styles.ts index 69d45a2bbf..87071dffad 100644 --- a/packages/components/inputs/selectable-search-input/src/selectable-search-input.styles.ts +++ b/packages/components/inputs/selectable-search-input/src/selectable-search-input.styles.ts @@ -5,6 +5,7 @@ import { designTokens } from '@commercetools-uikit/design-system'; import { createSelectStyles } from '@commercetools-uikit/select-utils'; type TInputProps = { + isCondensed?: boolean; isDisabled?: boolean; hasError?: boolean; hasWarning?: boolean; @@ -161,7 +162,9 @@ const getSelectableSearchInputContainerStyles = (props: TInputProps) => [ border: 1px solid ${getInputContainerBorderColor(props)}; border-radius: ${designTokens.borderRadiusForInput}; box-shadow: ${getInputBoxShadow(props)}; - height: ${designTokens.heightForInput}; + height: ${props.isCondensed + ? `${designTokens.heightForInputAsSmall}` + : `${designTokens.heightForInput}`}; box-sizing: border-box; border-top-left-radius: 0; border-bottom-left-radius: 0; @@ -206,6 +209,7 @@ type TBase = { }; type TCreateSelectableSelectStyles = { + isCondensed?: boolean; isDisabled?: boolean; hasError?: boolean; hasWarning?: boolean; @@ -234,6 +238,7 @@ type TCreateSelectableSelectStyles = { const createSelectableSelectStyles = ({ hasWarning, hasError, + isCondensed, isDisabled, isReadOnly, menuPortalZIndex, @@ -246,6 +251,7 @@ const createSelectableSelectStyles = ({ menuPortalZIndex, isDisabled, isReadOnly, + isCondensed, horizontalConstraint, }); @@ -258,6 +264,10 @@ const createSelectableSelectStyles = ({ borderBottomRightRadius: '0', borderRight: '0', height: '100%', + fontSize: isCondensed ? designTokens.fontSize20 : designTokens.fontSize30, + minHeight: isCondensed + ? designTokens.heightForInputAsSmall + : designTokens.heightForInput, borderColor: (() => { if (isDisabled) return `${designTokens.borderColorForInputWhenDisabled} !important`; diff --git a/packages/components/inputs/selectable-search-input/src/selectable-search-input.tsx b/packages/components/inputs/selectable-search-input/src/selectable-search-input.tsx index 19e846d89c..cb99122b8d 100644 --- a/packages/components/inputs/selectable-search-input/src/selectable-search-input.tsx +++ b/packages/components/inputs/selectable-search-input/src/selectable-search-input.tsx @@ -140,6 +140,10 @@ export type TSelectableSearchInputProps = { * */ isClearable?: boolean; + /** + * Use this property to reduce the paddings of the component for a ui compact variant + */ + isCondensed?: boolean; /** * Horizontal size limit of the input fields. */ @@ -415,6 +419,7 @@ const SelectableSearchInput = (props: TSelectableSearchInputProps) => { id={SelectableSearchInput.getDropdownId(selectablSearchInputId)} name={getDropdownName(props.name)} dropdownHasFocus={dropdownHasFocus} + isCondensed={props.isCondensed ?? false} handleDropdownFocus={handleDropdownFocus} handleDropdownBlur={handleDropdownBlur} textInputRef={textInputRef} @@ -470,7 +475,7 @@ const SelectableSearchInput = (props: TSelectableSearchInputProps) => { !props.isReadOnly && ( } - size="medium" + size={props.isCondensed ? 'small' : 'medium'} label={'clear-button'} onClick={handleClear} css={getClearIconButtonStyles(props)} @@ -479,6 +484,7 @@ const SelectableSearchInput = (props: TSelectableSearchInputProps) => { {props.showSubmitButton && ( } + size={props.isCondensed ? 'medium' : 'big'} label={'search-button'} onClick={handleSubmit} css={getSearchIconButtonStyles(props)} diff --git a/packages/components/inputs/selectable-search-input/src/selectable-search-input.visualroute.jsx b/packages/components/inputs/selectable-search-input/src/selectable-search-input.visualroute.jsx index b7a0fb9f59..6eaee13c9e 100644 --- a/packages/components/inputs/selectable-search-input/src/selectable-search-input.visualroute.jsx +++ b/packages/components/inputs/selectable-search-input/src/selectable-search-input.visualroute.jsx @@ -152,5 +152,16 @@ export const component = () => ( showSubmitButton={false} /> + + {}} + isCondensed={true} + horizontalConstraint={16} + onSubmit={() => {}} + onReset={() => {}} + options={options} + /> + ); diff --git a/packages/components/inputs/selectable-search-input/src/selectable-select.tsx b/packages/components/inputs/selectable-search-input/src/selectable-select.tsx index d1037666e6..79d4aa6a89 100644 --- a/packages/components/inputs/selectable-search-input/src/selectable-select.tsx +++ b/packages/components/inputs/selectable-search-input/src/selectable-select.tsx @@ -29,6 +29,7 @@ const SingleValue = ({ id, dataProps, ...props }: TSingleValue) => { }; type TSelectableSelect = { dropdownHasFocus: boolean; + isCondensed: boolean; handleDropdownFocus: () => void; handleDropdownBlur: () => void; textInputRef: React.RefObject; @@ -42,6 +43,7 @@ const SelectableSelect = (props: TSelectableSelect) => { const dropdownStyles = createSelectableSelectStyles({ hasWarning: props.hasWarning, hasError: props.hasError, + isCondensed: props.isCondensed, isDisabled: props.isDisabled, isReadOnly: props.isReadOnly, menuPortalZIndex: props.menuPortalZIndex,