feat(search-select-field): add support for isCondensed prop to Search…

…SelectField (#2808)
commercetools · May 3, 2024 · 3c06060 · 3c06060
1 parent 91a86d8
commit 3c06060
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 0 deletions.
diff --git a/.changeset/rude-emus-battle.md b/.changeset/rude-emus-battle.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/search-select-field': minor
+---
+
+Add support for isCondensed layout for SearchSelectField
diff --git a/packages/components/fields/search-select-field/README.md b/packages/components/fields/search-select-field/README.md
@@ -102,6 +102,7 @@ export default Example;
 | `isReadOnly`               | `boolean`                                                                                             |          |         | Is the select read-only                                                                                                                                                                                                                                                                                                                                                     |
 | `isDisabled`               | `boolean`                                                                                             |          |         | Is the select disabled                                                                                                                                                                                                                                                                                                                                                      |
 | `isClearable`              | `boolean`                                                                                             |          |         | Is the select value clearable                                                                                                                                                                                                                                                                                                                                               |
+| `isCondensed`              | `boolean`                                                                                             |          |         | Whether the input and its options are rendered with condensed paddings                                                                                                                                                                                                                                                                                                      |
 | `isOptionDisabled`         | `AsyncProps['isOptionDisabled']`                                                                      |          |         | Override the built-in logic to detect whether an option is disabled&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props)                                                                                                                                                                                                                         |
 | `isMulti`                  | `AsyncProps['isMulti']`                                                                               |          |         | Support multiple selected options&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props)                                                                                                                                                                                                                                                           |
 | `isAutofocussed`           | `boolean`                                                                                             |          |         | Focus the control when it is mounted. Renamed autoFocus of react-select                                                                                                                                                                                                                                                                                                     |

diff --git a/packages/components/fields/search-select-field/src/search-select-field.story.js b/packages/components/fields/search-select-field/src/search-select-field.story.js
@@ -146,6 +146,7 @@ storiesOf('Components|Fields/SelectFields', module)
                 maxMenuHeight={number('maxMenuHeight', 220)}
                 isSearchable={boolean('isSearchable', true)}
                 isClearable={boolean('isClearable', false)}
+                isCondensed={boolean('isCondensed', false)}
                 tabIndex={text('tabIndex', '0')}
                 tabSelectsValue={boolean('tabSelectsValue', true)}
                 // Async props

diff --git a/packages/components/fields/search-select-field/src/search-select-field.tsx b/packages/components/fields/search-select-field/src/search-select-field.tsx
@@ -157,6 +157,10 @@ export type TSearchSelectFieldProps = {
    * Is the select value clearable
    */
   isClearable?: boolean;
+  /**
+   * Whether the input and its options are rendered with condensed paddings
+   */
+  isCondensed?: boolean;
   /**
    * Override the built-in logic to detect whether an option is disabled
    * <br>
@@ -393,6 +397,7 @@ const SearchSelectField = (props: TSearchSelectFieldProps) => {
           id={id}
           containerId={props.containerId}
           isClearable={props.isClearable}
+          isCondensed={props.isCondensed}
           isDisabled={props.isDisabled}
           isReadOnly={props.isReadOnly}
           isOptionDisabled={props.isOptionDisabled}

diff --git a/packages/components/fields/search-select-field/src/search-select-field.visualroute.jsx b/packages/components/fields/search-select-field/src/search-select-field.visualroute.jsx
@@ -48,6 +48,17 @@ export const component = () => (
         isDisabled={true}
       />
     </Spec>
+    <Spec label="when condensed">
+      <SearchSelectField
+        title="State"
+        name="form-field-name"
+        value={value}
+        onChange={() => {}}
+        loadOptions={loadOptions}
+        horizontalConstraint={7}
+        isCondensed={true}
+      />
+    </Spec>
     <Spec label='with "missing" error when not touched'>
       <SearchSelectField
         title="State"