feat(async creatable select): add isCondensed prop to input and field…

… components (#2799) * feat(async-creatable-select): add isCondensed prop to field and input * refactor(async-creatable-select-input): move vrt --------- Co-authored-by: Jonathan Creasman <[email protected]> Co-authored-by: Carlos Cortizas <[email protected]> Co-authored-by: Carlos Cortizas <[email protected]>
commercetools · Apr 29, 2024 · 52e5c72 · 52e5c72
1 parent 0798b97
commit 52e5c72
Show file tree

Hide file tree

Showing 9 changed files with 42 additions and 0 deletions.
diff --git a/.changeset/afraid-toes-join.md b/.changeset/afraid-toes-join.md
@@ -0,0 +1,6 @@
+---
+'@commercetools-uikit/async-creatable-select-field': minor
+'@commercetools-uikit/async-creatable-select-input': minor
+---
+
+Add isCondensed prop that when set to true, condenses the input height, icon size and font size.
diff --git a/packages/components/fields/async-creatable-select-field/README.md b/packages/components/fields/async-creatable-select-field/README.md
@@ -70,6 +70,7 @@ export default Example;
 | `filterOption`            | `AsyncCreatableProps['filterOption']`                                                                 |          |           | Custom method to filter whether an option should be displayed in the menu&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props)                                                                                                                                                                                                                                 |
 | `containerId`             | `AsyncCreatableProps['id']`                                                                           |          |           | The id to set on the SelectContainer component&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props)                                                                                                                                                                                                                                                            |
 | `isClearable`             | `AsyncCreatableProps['isClearable']`                                                                  |          |           | Is the select value clearable&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props)                                                                                                                                                                                                                                                                             |
+| `isCondensed`             | `boolean`                                                                                             |          |           | Use this property to reduce the paddings of the component for a ui compact variant                                                                                                                                                                                                                                                                                                        |
 | `isDisabled`              | `AsyncCreatableProps['isDisabled']`                                                                   |          |           | Is the select disabled&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props)                                                                                                                                                                                                                                                                                    |
 | `isReadOnly`              | `boolean`                                                                                             |          |           | Is the select read-only                                                                                                                                                                                                                                                                                                                                                                   |
 | `isOptionDisabled`        | `AsyncCreatableProps['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)                                                                                                                                                                                                                                       |

diff --git a/.../components/fields/async-creatable-select-field/src/async-creatable-select-field.story.js b/.../components/fields/async-creatable-select-field/src/async-creatable-select-field.story.js
@@ -192,6 +192,7 @@ storiesOf('Components|Fields/SelectFields', module)
                 hintIcon={hintIcon}
                 badge={text('badge', '')}
                 iconLeft={iconLeft ? createElement(iconLeft) : undefined}
+                isCondensed={boolean('isCondensed', false)}
                 {...addMenuPortalProps()}
               />
               <NeighbouringStackingContext />

diff --git a/packages/components/fields/async-creatable-select-field/src/async-creatable-select-field.tsx b/packages/components/fields/async-creatable-select-field/src/async-creatable-select-field.tsx
@@ -159,6 +159,10 @@ export type TAsyncCreatableSelectFieldProps = {
    * [Props from React select was used](https://react-select.com/props)
    */
   isClearable?: ReactSelectAsyncCreatableProps['isClearable'];
+  /**
+   * Use this property to reduce the paddings of the component for a ui compact variant
+   */
+  isCondensed?: boolean;
   /**
    * Is the select disabled
    * <br>
@@ -519,6 +523,7 @@ export default class AsyncCreatableSelectField extends Component<
             createOptionPosition={this.props.createOptionPosition}
             showOptionGroupDivider={this.props.showOptionGroupDivider}
             iconLeft={this.props.iconLeft}
+            isCondensed={this.props.isCondensed}
             {...filterDataAttributes(this.props)}
           />
           <FieldErrors

diff --git a/...ents/fields/async-creatable-select-field/src/async-creatable-select-field.visualroute.jsx b/...ents/fields/async-creatable-select-field/src/async-creatable-select-field.visualroute.jsx
@@ -111,6 +111,17 @@ const DefaultRoute = () => (
         renderWarning={() => 'Custom warning'}
       />
     </Spec>
+    <Spec label="is condensed">
+      <AsyncCreatableSelectField
+        title="State"
+        name="form-field-name"
+        value={value}
+        isCondensed={true}
+        onChange={() => {}}
+        loadOptions={loadOptions}
+        horizontalConstraint={7}
+      />
+    </Spec>
   </Suite>
 );
 

diff --git a/packages/components/inputs/async-creatable-select-input/README.md b/packages/components/inputs/async-creatable-select-input/README.md
@@ -70,6 +70,7 @@ export default Example;
 | `inputValue`              | `AsyncCreatableProps['inputValue']`                                                                   |          |         | The value of the search input&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props)                                                                                                                                                                                                                                                               |
 | `containerId`             | `AsyncCreatableProps['id']`                                                                           |          |         | The id to set on the SelectContainer component&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props)                                                                                                                                                                                                                                              |
 | `isClearable`             | `AsyncCreatableProps['isClearable']`                                                                  |          |         | Is the select value clearable&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props)                                                                                                                                                                                                                                                               |
+| `isCondensed`             | `boolean`                                                                                             |          |         | Use this property to reduce the paddings of the component for a ui compact variant                                                                                                                                                                                                                                                                                          |
 | `isDisabled`              | `AsyncCreatableProps['isDisabled']`                                                                   |          |         | Is the select disabled&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props)                                                                                                                                                                                                                                                                      |
 | `isOptionDisabled`        | `AsyncCreatableProps['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`                 | `AsyncCreatableProps['isMulti']`                                                                      |          |         | Support multiple selected options&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props)                                                                                                                                                                                                                                                           |

diff --git a/.../components/inputs/async-creatable-select-input/src/async-creatable-select-input.story.js b/.../components/inputs/async-creatable-select-input/src/async-creatable-select-input.story.js
@@ -89,6 +89,7 @@ class SelectStory extends Component {
                   id={text('id', '')}
                   containerId={text('containerId', '')}
                   isClearable={boolean('isClearable', false)}
+                  isCondensed={boolean('isCondensed', false)}
                   isDisabled={boolean('isDisabled', false)}
                   isReadOnly={boolean('isReadOnly', false)}
                   isMulti={isMulti}

diff --git a/packages/components/inputs/async-creatable-select-input/src/async-creatable-select-input.tsx b/packages/components/inputs/async-creatable-select-input/src/async-creatable-select-input.tsx
@@ -165,6 +165,10 @@ export type TAsyncCreatableSelectInputProps = {
    * [Props from React select was used](https://react-select.com/props)
    */
   isClearable?: ReactSelectAsyncCreatableProps['isClearable'];
+  /**
+   * Use this property to reduce the paddings of the component for a ui compact variant
+   */
+  isCondensed?: boolean;
   /**
    * Is the select disabled
    * <br>
@@ -411,6 +415,7 @@ const AsyncCreatableSelectInput = (props: TAsyncCreatableSelectInputProps) => {
               hasError: props.hasError,
               showOptionGroupDivider: props.showOptionGroupDivider,
               menuPortalZIndex: props.menuPortalZIndex,
+              isCondensed: props.isCondensed,
               isDisabled: props.isDisabled,
               isReadOnly: props.isReadOnly,
               iconLeft: props.iconLeft,
@@ -508,6 +513,7 @@ const AsyncCreatableSelectInput = (props: TAsyncCreatableSelectInputProps) => {
           createOptionPosition={props.createOptionPosition}
           // @ts-ignore
           iconLeft={props.iconLeft}
+          isCondensed={props.isCondensed}
         />
       </div>
     </Constraints.Horizontal>

diff --git a/...ents/inputs/async-creatable-select-input/src/async-creatable-select-input.visualroute.jsx b/...ents/inputs/async-creatable-select-input/src/async-creatable-select-input.visualroute.jsx
@@ -91,5 +91,15 @@ export const component = () => (
         iconLeft={<WorldIcon />}
       />
     </Spec>
+    <Spec label="is condensed">
+      <AsyncCreatableSelectInput
+        value={value}
+        onChange={() => {}}
+        isCondensed={true}
+        defaultOptions={true}
+        loadOptions={loadOptions}
+        horizontalConstraint={7}
+      />
+    </Spec>
   </Suite>
 );