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

…nents (#2806) * feat(creatable-select): add isCondensed prop to input and field * feat(select input): remove ts-ignore --------- Co-authored-by: Jonathan Creasman <[email protected]> Co-authored-by: Carlos Cortizas <[email protected]> Co-authored-by: Ddouglasz <[email protected]> Co-authored-by: Douglas Egiemeh <[email protected]>
commercetools · May 3, 2024 · 71d83d0 · 71d83d0
1 parent 3c06060
commit 71d83d0
Show file tree

Hide file tree

Showing 9 changed files with 41 additions and 0 deletions.
diff --git a/.changeset/fresh-pots-shave.md b/.changeset/fresh-pots-shave.md
@@ -0,0 +1,6 @@
+---
+'@commercetools-uikit/creatable-select-field': minor
+'@commercetools-uikit/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/creatable-select-field/README.md b/packages/components/fields/creatable-select-field/README.md
@@ -85,6 +85,7 @@ export default Example;
 | `onInputChange`           | `CreatableProps['onInputChange']`                                                                     |          |           | Handle change events on the input&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props#creatable-props)                                                                                                                                                                                                                                                                        |
 | `options`                 | `union`<br/>Possible values:<br/>`TValue[] , { options: TValue[] }[]`                                 |          |           | Array of options that populate the select menu                                                                                                                                                                                                                                                                                                                                                           |
 | `placeholder`             | `CreatableProps['placeholder']`                                                                       |          |           | Placeholder text for the select value&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props#creatable-props)                                                                                                                                                                                                                                                                    |
+| `isCondensed`             | `boolean`                                                                                             |          |           | Use this property to reduce the paddings of the component for a ui compact variant                                                                                                                                                                                                                                                                                                                       |
 | `tabIndex`                | `CreatableProps['tabIndex']`                                                                          |          |           | Sets the tabIndex attribute on the input&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props#creatable-props)                                                                                                                                                                                                                                                                 |
 | `tabSelectsValue`         | `CreatableProps['tabSelectsValue']`                                                                   |          |           | Select the currently focused option when the user presses tab&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props#creatable-props)                                                                                                                                                                                                                                            |
 | `value`                   | `CreatableProps['value']`                                                                             |          |           | The value of the select; reflected by the selected option&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props#creatable-props)                                                                                                                                                                                                                                                |

diff --git a/packages/components/fields/creatable-select-field/src/creatable-select-field.story.js b/packages/components/fields/creatable-select-field/src/creatable-select-field.story.js
@@ -142,6 +142,7 @@ storiesOf('Components|Fields/SelectFields', module)
                 onFocus={action('onFocus')}
                 onInputChange={action('onInputChange')}
                 isAutofocussed={boolean('isAutofocussed', false)}
+                isCondensed={boolean('isCondensed', false)}
                 isDisabled={boolean('isDisabled', false)}
                 isReadOnly={boolean('isReadOnly', false)}
                 isMulti={isMulti}

diff --git a/packages/components/fields/creatable-select-field/src/creatable-select-field.tsx b/packages/components/fields/creatable-select-field/src/creatable-select-field.tsx
@@ -267,6 +267,10 @@ export type TCreatableSelectFieldProps = {
    * [Props from React select was used](https://react-select.com/props#creatable-props)
    */
   placeholder?: ReactSelectCreatableProps['placeholder'];
+  /**
+   * Use this property to reduce the paddings of the component for a ui compact variant
+   */
+  isCondensed?: boolean;
   /**
    * Sets the tabIndex attribute on the input
    * <br>
@@ -494,6 +498,7 @@ export default class CreatableSelectField 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/packages/components/fields/creatable-select-field/src/creatable-select-field.visualroute.jsx b/packages/components/fields/creatable-select-field/src/creatable-select-field.visualroute.jsx
@@ -108,5 +108,16 @@ export const component = () => (
         renderWarning={() => 'Custom warning'}
       />
     </Spec>
+    <Spec label="is condensed">
+      <CreatableSelectField
+        title="State"
+        name="form-field-name"
+        isCondensed={true}
+        value={value}
+        onChange={() => {}}
+        options={options}
+        horizontalConstraint={7}
+      />
+    </Spec>
   </Suite>
 );
diff --git a/packages/components/inputs/creatable-select-input/README.md b/packages/components/inputs/creatable-select-input/README.md
@@ -89,6 +89,7 @@ export default Example;
 | `options`                 | `union`<br/>Possible values:<br/>`TValue[] , { options: TValue[] }[]`                                 |          |         | Array of options that populate the select menu                                                                                                                                                                                                                                                                                                                                              |
 | `showOptionGroupDivider`  | `boolean`                                                                                             |          |         | Determines if option groups will be separated by a divider                                                                                                                                                                                                                                                                                                                                  |
 | `placeholder`             | `CreatableProps['placeholder']`                                                                       |          |         | Placeholder text for the select value&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props#creatable-props)                                                                                                                                                                                                                                                       |
+| `isCondensed`             | `boolean`                                                                                             |          |         | Use this property to reduce the paddings of the component for a ui compact variant                                                                                                                                                                                                                                                                                                          |
 | `tabIndex`                | `CreatableProps['tabIndex']`                                                                          |          |         | Sets the tabIndex attribute on the input&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props#creatable-props)                                                                                                                                                                                                                                                    |
 | `tabSelectsValue`         | `CreatableProps['tabSelectsValue']`                                                                   |          |         | Select the currently focused option when the user presses tab&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props#creatable-props)                                                                                                                                                                                                                               |
 | `value`                   | `CreatableProps['value']`                                                                             |          | `null`  | The value of the select; reflected by the selected option&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props#creatable-props)                                                                                                                                                                                                                                   |

diff --git a/packages/components/inputs/creatable-select-input/src/creatable-select-input.story.js b/packages/components/inputs/creatable-select-input/src/creatable-select-input.story.js
@@ -121,6 +121,7 @@ storiesOf('Components|Inputs/SelectInputs', module)
                   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/creatable-select-input/src/creatable-select-input.tsx b/packages/components/inputs/creatable-select-input/src/creatable-select-input.tsx
@@ -264,6 +264,10 @@ export type TCreatableSelectInputProps = {
    * [Props from React select was used](https://react-select.com/props#creatable-props)
    */
   placeholder?: ReactSelectCreatableProps['placeholder'];
+  /**
+   * Use this property to reduce the paddings of the component for a ui compact variant
+   */
+  isCondensed?: boolean;
   /**
    * Sets the tabIndex attribute on the input
    * <br>
@@ -389,6 +393,7 @@ const CreatableSelectInput = (props: TCreatableSelectInputProps) => {
               hasError: props.hasError,
               showOptionGroupDivider: props.showOptionGroupDivider,
               menuPortalZIndex: props.menuPortalZIndex,
+              isCondensed: props.isCondensed,
               isDisabled: props.isDisabled,
               isReadOnly: props.isReadOnly,
               iconLeft: props.iconLeft,
@@ -485,6 +490,7 @@ const CreatableSelectInput = (props: TCreatableSelectInputProps) => {
           createOptionPosition={props.createOptionPosition}
           //@ts-ignore
           iconLeft={props.iconLeft}
+          isCondensed={props.isCondensed}
         />
       </div>
     </Constraints.Horizontal>

diff --git a/packages/components/inputs/creatable-select-input/src/creatable-select-input.visualroute.jsx b/packages/components/inputs/creatable-select-input/src/creatable-select-input.visualroute.jsx
@@ -94,5 +94,14 @@ export const component = () => (
         iconLeft={<WorldIcon />}
       />
     </Spec>
+    <Spec label="is condensed">
+      <CreatableSelectInput
+        value={value}
+        onChange={() => {}}
+        isCondensed={true}
+        options={options}
+        horizontalConstraint={7}
+      />
+    </Spec>
   </Suite>
 );