feat(select-field): add isCondensed layout for SelectField component

commercetools · Apr 17, 2024 · 522e0ba · 522e0ba
1 parent a270209
commit 522e0ba
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 2 deletions.
diff --git a/.changeset/good-guests-peel.md b/.changeset/good-guests-peel.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/select-field': minor
+---
+
+Add support for isCondensed layout for SelectField
diff --git a/packages/components/fields/select-field/README.md b/packages/components/fields/select-field/README.md
@@ -71,6 +71,7 @@ export default Example;
 | `isClearable`              | `boolean`                                                                                          |          |           | Is the select value clearable                                                                                                                                                                                                                                                                                                                                                            |
 | `isDisabled`               | `boolean`                                                                                          |          |           | Is the select disabled                                                                                                                                                                                                                                                                                                                                                                   |
 | `isReadOnly`               | `boolean`                                                                                          |          |           | Is the select read-only                                                                                                                                                                                                                                                                                                                                                                  |
+| `isCondensed`              | `boolean`                                                                                          |          |           | Is the component is displayed in a condensed layout                                                                                                                                                                                                                                                                                                                                      |
 | `isOptionDisabled`         | `ReactSelectProps['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`                  | `boolean`                                                                                          |          |           | Support multiple selected options                                                                                                                                                                                                                                                                                                                                                        |
 | `isSearchable`             | `boolean`                                                                                          |          |           | Whether to enable search functionality                                                                                                                                                                                                                                                                                                                                                   |

diff --git a/packages/components/fields/select-field/src/select-field.story.js b/packages/components/fields/select-field/src/select-field.story.js
@@ -153,6 +153,7 @@ storiesOf('Components|Fields/SelectFields', module)
                 isAutofocussed={boolean('isAutofocussed', false)}
                 isDisabled={boolean('isDisabled', false)}
                 isReadOnly={boolean('isReadOnly', false)}
+                isCondensed={boolean('isCondensed', false)}
                 isMulti={isMulti}
                 placeholder={text('placeholder', 'Select...')}
                 title={text('title', 'Favourite animal')}

diff --git a/packages/components/fields/select-field/src/select-field.tsx b/packages/components/fields/select-field/src/select-field.tsx
@@ -157,9 +157,13 @@ export type TSelectFieldProps = {
    */
   isDisabled?: boolean;
   /**
-   * Is the select read-only
-   */
+   Is the select read-only
+  */
   isReadOnly?: boolean;
+  /**
+   * Is the select displayed in a condensed layout
+   */
+  isCondensed?: boolean;
   /**
    * Override the built-in logic to detect whether an option is disabled
    * <br/>
@@ -405,6 +409,7 @@ export default class SelectField extends Component<TSelectFieldProps> {
             isClearable={this.props.isClearable}
             isDisabled={this.props.isDisabled}
             isReadOnly={this.props.isReadOnly}
+            isCondensed={this.props.isCondensed}
             isOptionDisabled={this.props.isOptionDisabled}
             isMulti={this.props.isMulti}
             isSearchable={this.props.isSearchable}

diff --git a/packages/components/fields/select-field/src/select-field.visualroute.jsx b/packages/components/fields/select-field/src/select-field.visualroute.jsx
@@ -75,6 +75,17 @@ export const component = () => (
         isReadOnly={true}
       />
     </Spec>
+    <Spec label="when is condensed">
+      <SelectField
+        title="State"
+        name="form-field-name"
+        value={value}
+        onChange={() => {}}
+        options={options}
+        horizontalConstraint={7}
+        isCondensed={true}
+      />
+    </Spec>
     <Spec label="when has warning">
       <SelectField
         title="State"