From f29fd4489ab3e1db0e8a7ef2d57c15d98da5cfb4 Mon Sep 17 00:00:00 2001 From: Jonathan Creasman Date: Wed, 1 May 2024 09:32:03 -0400 Subject: [PATCH 1/6] feat(selectable-search): add isCondensed prop to input --- .../src/selectable-search-input.story.js | 1 + .../src/selectable-search-input.styles.ts | 12 +++++++++++- .../src/selectable-search-input.tsx | 8 +++++++- .../src/selectable-select.tsx | 2 ++ 4 files changed, 21 insertions(+), 2 deletions(-) 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..6efe9adc2e 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, @@ -258,6 +263,11 @@ const createSelectableSelectStyles = ({ borderBottomRightRadius: '0', borderRight: '0', height: '100%', + fontSize: `${ + isCondensed + ? `${designTokens.fontSize20}` + : `${designTokens.fontSize30}` + }`, 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-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, From cdff3060970dafe655dd4d727b5cd3ab39c5df66 Mon Sep 17 00:00:00 2001 From: Sarah Brolley Date: Thu, 2 May 2024 16:23:17 -0400 Subject: [PATCH 2/6] feat(selectable-search-input): set height of SelectableSelect when isCondensed for SelectableSearchInput --- .../src/selectable-search-input.styles.ts | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) 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 6efe9adc2e..a3e639ddbe 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 @@ -263,11 +263,10 @@ const createSelectableSelectStyles = ({ borderBottomRightRadius: '0', borderRight: '0', height: '100%', - fontSize: `${ - isCondensed - ? `${designTokens.fontSize20}` - : `${designTokens.fontSize30}` - }`, + fontSize: isCondensed ? designTokens.fontSize20 : designTokens.fontSize30, + minHeight: isCondensed + ? designTokens.heightForInputAsSmall + : designTokens.heightForInput, borderColor: (() => { if (isDisabled) return `${designTokens.borderColorForInputWhenDisabled} !important`; From d67698c9a920269dff4cb0b87b943ece5b832080 Mon Sep 17 00:00:00 2001 From: Jonathan Creasman Date: Fri, 3 May 2024 08:54:55 -0400 Subject: [PATCH 3/6] feat(selectable-search): add readme and changeset --- .changeset/fresh-pens-study.md | 5 +++++ .../inputs/selectable-search-input/README.md | 1 + .../src/selectable-search-input.visualroute.jsx | 11 +++++++++++ 3 files changed, 17 insertions(+) create mode 100644 .changeset/fresh-pens-study.md 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.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} + /> + ); From e60401e18bfb72f4aa58b3f70b04d13214ee1a36 Mon Sep 17 00:00:00 2001 From: Jonathan Creasman Date: Tue, 7 May 2024 10:22:37 -0400 Subject: [PATCH 4/6] feat(selectable-search): add isCondensed fontsize for select dropdown options --- .../src/selectable-search-input.styles.ts | 4 ++++ 1 file changed, 4 insertions(+) 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 a3e639ddbe..a09d0498ad 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 @@ -317,6 +317,10 @@ const createSelectableSelectStyles = ({ ? designTokens.fontColorForInputWhenDisabled : designTokens.colorNeutral60, }), + option: (base: TBase) => ({ + ...base, + fontSize: isCondensed ? designTokens.fontSize20 : designTokens.fontSize30, + }), }; }; From 06bfed640f1f73158b8e9f2a8de69f1be346a0aa Mon Sep 17 00:00:00 2001 From: Carlos Cortizas Date: Thu, 9 May 2024 09:49:43 +0200 Subject: [PATCH 5/6] fix(selectable-search-input): fix dropdown styles --- .../src/selectable-search-input.styles.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 a09d0498ad..3759fd48f9 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 @@ -317,8 +317,8 @@ const createSelectableSelectStyles = ({ ? designTokens.fontColorForInputWhenDisabled : designTokens.colorNeutral60, }), - option: (base: TBase) => ({ - ...base, + option: (base: TBase, state: ReactSelectProps) => ({ + ...selectStyles.option(base, state), fontSize: isCondensed ? designTokens.fontSize20 : designTokens.fontSize30, }), }; From 796bd2dd663e4236e518a7baab632a300e46442d Mon Sep 17 00:00:00 2001 From: Carlos Cortizas Date: Thu, 9 May 2024 10:11:10 +0200 Subject: [PATCH 6/6] refactor(selectable-search-input): simplify select styles --- .../src/selectable-search-input.styles.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) 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 3759fd48f9..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 @@ -251,6 +251,7 @@ const createSelectableSelectStyles = ({ menuPortalZIndex, isDisabled, isReadOnly, + isCondensed, horizontalConstraint, }); @@ -317,10 +318,6 @@ const createSelectableSelectStyles = ({ ? designTokens.fontColorForInputWhenDisabled : designTokens.colorNeutral60, }), - option: (base: TBase, state: ReactSelectProps) => ({ - ...selectStyles.option(base, state), - fontSize: isCondensed ? designTokens.fontSize20 : designTokens.fontSize30, - }), }; };