From 91a86d832c89984dd0af786c58d5db478f2f28e1 Mon Sep 17 00:00:00 2001
From: Sarah Brolley <sarah.brolley@commercetools.com>
Date: Thu, 2 May 2024 09:45:31 -0400
Subject: [PATCH] feat(search-select-input): add isCondensed prop to
 SearchSelectInput component (#2801)

---
 .changeset/four-gifts-rescue.md                       |  6 ++++++
 .../components/inputs/search-select-input/README.md   |  1 +
 .../src/search-select-input.story.js                  |  1 +
 .../src/search-select-input.styles.ts                 |  2 +-
 .../search-select-input/src/search-select-input.tsx   |  5 +++++
 .../src/search-select-input.visualroute.jsx           |  9 +++++++++
 .../search-icon-dropdown-indicator.tsx                | 11 +++++++++--
 7 files changed, 32 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/four-gifts-rescue.md

diff --git a/.changeset/four-gifts-rescue.md b/.changeset/four-gifts-rescue.md
new file mode 100644
index 0000000000..5ddc712dab
--- /dev/null
+++ 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
index 9ae958bc5d..751162cf9f 100644
--- 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
index a5b1bdec31..85f9fa9dd4 100644
--- 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
index 45569105b0..f7adeba562 100644
--- 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
index a2198caf34..78271728ac 100644
--- 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
index 4e5fe52a78..151eb87f56 100644
--- 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/packages/components/inputs/select-utils/src/search-icon-dropdown-indicator/search-icon-dropdown-indicator.tsx b/packages/components/inputs/select-utils/src/search-icon-dropdown-indicator/search-icon-dropdown-indicator.tsx
index 97a7d9e443..e0e2e78ef5 100644
--- a/packages/components/inputs/select-utils/src/search-icon-dropdown-indicator/search-icon-dropdown-indicator.tsx
+++ b/packages/components/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>
   );
 };