feat(selectable search): add isCondensed prop to `SelectableSearchInp…

…ut` component (#2809) * feat(selectable-search): add isCondensed prop to input * feat(selectable-search-input): set height of SelectableSelect when isCondensed for SelectableSearchInput * feat(selectable-search): add readme and changeset * feat(selectable-search): add isCondensed fontsize for select dropdown options * fix(selectable-search-input): fix dropdown styles * refactor(selectable-search-input): simplify select styles --------- Co-authored-by: Jonathan Creasman <[email protected]> Co-authored-by: Sarah Brolley <[email protected]> Co-authored-by: Douglas Egiemeh <[email protected]> Co-authored-by: Carlos Cortizas <[email protected]> Co-authored-by: Carlos Cortizas <[email protected]>
commercetools · May 13, 2024 · adaa8dc · adaa8dc
1 parent f541656
commit adaa8dc
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 2 deletions.
diff --git a/.changeset/fresh-pens-study.md 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
@@ -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.&#xA;Defaults to true.                                                                                                                                                                                                                                                                                         |
+| `isCondensed`              | `boolean`                                                                              |          |           | Use this property to reduce the paddings of the component for a ui compact variant                                                                                                                                                                                                                                                                                                       |
 | `horizontalConstraint`     | `union`<br/>Possible values:<br/>`10 , 11 , 12 , 13 , 14 , 15 , 16 , 'scale' , 'auto'` |          | `'scale'` | Horizontal size limit of the input fields.                                                                                                                                                                                                                                                                                                                                               |
 | `options`                  | `union`<br/>Possible values:<br/>`TOption[] , TOptionObject[]`                         |          | `[]`      | Array of options that populate the select menu                                                                                                                                                                                                                                                                                                                                           |
 | `menuPortalZIndex`         | `number`                                                                               |          | `1`       | z-index value for the menu portal&#xA;<br>&#xA;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
@@ -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
@@ -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
@@ -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 && (
               <SecondaryIconButton
                 icon={<CloseIcon />}
-                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 && (
             <SecondaryIconButton
               icon={<SearchIcon />}
+              size={props.isCondensed ? 'medium' : 'big'}
               label={'search-button'}
               onClick={handleSubmit}
               css={getSearchIconButtonStyles(props)}

diff --git a/...ges/components/inputs/selectable-search-input/src/selectable-search-input.visualroute.jsx b/...ges/components/inputs/selectable-search-input/src/selectable-search-input.visualroute.jsx
@@ -152,5 +152,16 @@ export const component = () => (
         showSubmitButton={false}
       />
     </Spec>
+    <Spec label="is condensed">
+      <SelectableSearchInput
+        value={value}
+        onChange={() => {}}
+        isCondensed={true}
+        horizontalConstraint={16}
+        onSubmit={() => {}}
+        onReset={() => {}}
+        options={options}
+      />
+    </Spec>
   </Suite>
 );
diff --git 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<HTMLInputElement>;
@@ -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,