feat(search-select-input): add isCondensed prop to SearchSelectInput …

…component (#2801)
commercetools · May 2, 2024 · 91a86d8 · 91a86d8
1 parent 4013cd3
commit 91a86d8
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 3 deletions.
diff --git a/.changeset/four-gifts-rescue.md b/.changeset/four-gifts-rescue.md
@@ -0,0 +1,6 @@
+---
+'@commercetools-uikit/search-select-input': minor
+'@commercetools-uikit/select-utils': minor
+---
+
+Add support for isCondensed prop on SearchSelectInput component
diff --git a/packages/components/inputs/search-select-input/README.md b/packages/components/inputs/search-select-input/README.md
@@ -81,6 +81,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 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/inputs/search-select-input/src/search-select-input.story.js b/packages/components/inputs/search-select-input/src/search-select-input.story.js
@@ -95,6 +95,7 @@ class SearchSelectInputStory 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/search-select-input/src/search-select-input.styles.ts b/packages/components/inputs/search-select-input/src/search-select-input.styles.ts
@@ -4,7 +4,7 @@ import { designTokens } from '@commercetools-uikit/design-system';
 import type { TSearchSelectInputProps } from './search-select-input';
 
 const SearchSelectInputWrapper = styled.div<
-  Pick<TSearchSelectInputProps, 'isDisabled' | 'isReadOnly'>
+  Pick<TSearchSelectInputProps, 'isDisabled' | 'isReadOnly' | 'isCondensed'>
 >`
   ${(props) =>
     !props.isDisabled && !props.isReadOnly

diff --git a/packages/components/inputs/search-select-input/src/search-select-input.tsx b/packages/components/inputs/search-select-input/src/search-select-input.tsx
@@ -142,6 +142,10 @@ export type TSearchSelectInputProps = {
    * Is the select value clearable
    */
   isClearable?: boolean;
+  /**
+   * Whether the input and options are rendered with condensed paddings
+   */
+  isCondensed?: boolean;
   /**
    * Override the built-in logic to detect whether an option is disabled
    * <br>
@@ -337,6 +341,7 @@ const SearchSelectInput = (props: TSearchSelectInputProps) => {
     <SearchSelectInputWrapper
       isDisabled={props.isDisabled}
       isReadOnly={props.isReadOnly}
+      isCondensed={props.isCondensed}
     >
       <AsyncSelectInput
         {...props}

diff --git a/packages/components/inputs/search-select-input/src/search-select-input.visualroute.jsx b/packages/components/inputs/search-select-input/src/search-select-input.visualroute.jsx
@@ -61,6 +61,15 @@ export const component = () => (
         isClearable={true}
       />
     </Spec>
+    <Spec label="when condensed">
+      <SearchSelectInput
+        value={value}
+        onChange={() => {}}
+        loadOptions={loadOptions}
+        horizontalConstraint={7}
+        isCondensed={true}
+      />
+    </Spec>
     <Spec label="when input has an error and a warning">
       <SearchSelectInput
         value={value}

diff --git a/...inputs/select-utils/src/search-icon-dropdown-indicator/search-icon-dropdown-indicator.tsx b/...inputs/select-utils/src/search-icon-dropdown-indicator/search-icon-dropdown-indicator.tsx
@@ -1,10 +1,17 @@
 import { components, DropdownIndicatorProps } from 'react-select';
 import { SearchIcon } from '@commercetools-uikit/icons';
+import { TSelectInputCustomComponentProps } from '../types';
 
-const SearchIconDropdownIndicator = (props: DropdownIndicatorProps) => {
+export type TDropdownIndicatorProps =
+  TSelectInputCustomComponentProps<DropdownIndicatorProps>;
+
+const SearchIconDropdownIndicator = (props: TDropdownIndicatorProps) => {
   return (
     <components.DropdownIndicator {...props}>
-      <SearchIcon color={'neutral60'} size="big" />
+      <SearchIcon
+        color={'neutral60'}
+        size={props.selectProps.isCondensed ? 'medium' : 'big'}
+      />
     </components.DropdownIndicator>
   );
 };