Support for iconLeft in Search Select Input (#2636)

* build: passing iconLeft prop to searchSelectInput * chore: adding changeset * chore: adding iconLeft to searchSelectField component
commercetools · Nov 7, 2023 · 7b354d8 · 7b354d8 · vercel · Nov 7, 2023
1 parent b488e2b
commit 7b354d8
Show file tree

Hide file tree

Showing 8 changed files with 38 additions and 3 deletions.
diff --git a/.changeset/proud-weeks-nail.md b/.changeset/proud-weeks-nail.md
@@ -0,0 +1,6 @@
+---
+'@commercetools-uikit/search-select-field': minor
+'@commercetools-uikit/search-select-input': minor
+---
+
+Making iconLeft prop available for SearchSelectInput and SearchSelectField component.
diff --git a/packages/components/fields/search-select-field/README.md b/packages/components/fields/search-select-field/README.md
@@ -131,6 +131,7 @@ export default Example;
 | `onInfoButtonClick`        | `Function`<br/>[See signature.](#signature-onInfoButtonClick)                                         |          |         | Function called when info button is pressed.&#xA;<br />&#xA;Info button will only be visible when this prop is passed.                                                                                                                                                                                                                                                      |
 | `hintIcon`                 | `ReactElement`                                                                                        |          |         | Icon to be displayed beside the hint text.&#xA;<br />&#xA;Will only get rendered when `hint` is passed as well.                                                                                                                                                                                                                                                             |
 | `badge`                    | `ReactNode`                                                                                           |          |         | Badge to be displayed beside the label.&#xA;<br />&#xA;Might be used to display additional information about the content of the field (E.g verified email)                                                                                                                                                                                                                  |
+| `iconLeft`                 | `ReactNode`                                                                                           |          |         | Icon to display on the left of the placeholder text and selected value. Has no effect when `isMulti` is enabled.                                                                                                                                                                                                                                                            |
 
 ## Signatures
 

diff --git a/packages/components/fields/search-select-field/src/search-select-field.story.js b/packages/components/fields/search-select-field/src/search-select-field.story.js
@@ -76,6 +76,7 @@ storiesOf('Components|Fields/SelectFields', module)
     // hintIcon will only render when hint exists
     const iconNames = Object.keys(icons);
     const icon = select('hintIcon', ['', ...iconNames], '');
+    const iconLeft = icons[select('iconLeft', ['', ...iconNames])];
     const hintIcon = icon ? createElement(icons[icon]) : undefined;
     const name = text('name', 'color');
     const id = text('id', '');
@@ -150,6 +151,7 @@ storiesOf('Components|Fields/SelectFields', module)
                 }
                 hintIcon={hintIcon}
                 badge={text('badge', '')}
+                iconLeft={iconLeft ? createElement(iconLeft) : undefined}
                 {...addMenuPortalProps()}
               />
               <NeighbouringStackingContext />

diff --git a/packages/components/fields/search-select-field/src/search-select-field.tsx b/packages/components/fields/search-select-field/src/search-select-field.tsx
@@ -302,6 +302,10 @@ export type TSearchSelectFieldProps = {
    * Might be used to display additional information about the content of the field (E.g verified email)
    */
   badge?: ReactNode;
+  /**
+   * Icon to display on the left of the placeholder text and selected value. Has no effect when `isMulti` is enabled.
+   */
+  iconLeft?: ReactNode;
 };
 
 const defaultProps: Pick<TSearchSelectFieldProps, 'controlShouldRenderValue'> =
@@ -393,6 +397,7 @@ const SearchSelectField = (props: TSearchSelectFieldProps) => {
           showOptionGroupDivider={props.showOptionGroupDivider}
           optionType={props.optionType}
           controlShouldRenderValue={props.controlShouldRenderValue}
+          iconLeft={props.iconLeft}
         />
         <FieldErrors
           id={sequentialErrorsId}

diff --git a/packages/components/fields/search-select-field/src/search-select-field.visualroute.jsx b/packages/components/fields/search-select-field/src/search-select-field.visualroute.jsx
@@ -1,5 +1,6 @@
 import { SearchSelectField } from '@commercetools-frontend/ui-kit';
 import { Suite, Spec } from '../../../../../test/percy';
+import { WorldIcon } from '../../../icons';
 
 const loadOptions = (input) =>
   input
@@ -25,6 +26,17 @@ export const component = () => (
         horizontalConstraint={7}
       />
     </Spec>
+    <Spec label="with iconLeft">
+      <SearchSelectField
+        title="State"
+        name="form-field-name"
+        value={value}
+        onChange={() => {}}
+        loadOptions={loadOptions}
+        horizontalConstraint={7}
+        iconLeft={<WorldIcon />}
+      />
+    </Spec>
     <Spec label="when disabled">
       <SearchSelectField
         title="State"

diff --git a/packages/components/inputs/search-select-input/README.md b/packages/components/inputs/search-select-input/README.md
@@ -102,6 +102,7 @@ export default Example;
 | `cacheOptions`             | `AsyncProps['cacheOptions']`                                                                          |          |         | If cacheOptions is truthy, then the loaded data will be cached. The cache will remain until cacheOptions changes value.&#xA;<br>&#xA;[Props from React select was used](https://react-select.com/props)                                                                                                                                                                     |
 | `filterOption`             | `AsyncProps['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)                                                                                                                                                                                                                   |
 | `optionType`               | `union`<br/>Possible values:<br/>`'single-property' , 'double-property' , 'multiple-properties'`      |          |         | The style of the an option in the dropdown menu. It could be single lined option or an option with more and custom info                                                                                                                                                                                                                                                     |
+| `iconLeft`                 | `ReactNode`                                                                                           |          |         | Icon to display on the left of the placeholder text and selected value. Has no effect when `isMulti` is enabled.                                                                                                                                                                                                                                                            |
 
 ## Signatures
 

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
@@ -1,4 +1,4 @@
-import { Component } from 'react';
+import { Component, createElement } from 'react';
 import { Value } from 'react-value';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
@@ -16,6 +16,7 @@ import Section from '../../../../../docs/.storybook/decorators/section';
 import NeighbouringStackingContext from '../../../../../docs/.storybook/decorators/neighbouring-stacking-context';
 import { addMenuPortalProps } from '../../../../../docs/.storybook/utils';
 import SearchSelectInput from './search-select-input';
+import * as icons from '../../../icons';
 import Readme from '../README.md';
 
 const colourOptions = [
@@ -64,6 +65,8 @@ class SearchSelectInputStory extends Component {
       Object.values(SELECT_DROPDOWN_OPTION_TYPES),
       SELECT_DROPDOWN_OPTION_TYPES.SINGLE_PROPERTY
     );
+    const iconNames = Object.keys(icons);
+    const iconLeft = icons[select('iconLeft', ['', ...iconNames])];
     return (
       <>
         <Section>
@@ -114,6 +117,7 @@ class SearchSelectInputStory extends Component {
                   // Async props
                   loadOptions={loadOptions}
                   cacheOptions={boolean('cacheOptions', false)}
+                  iconLeft={iconLeft ? createElement(iconLeft) : undefined}
                   {...addMenuPortalProps()}
                 />
                 <NeighbouringStackingContext />

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
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import { ReactNode, useMemo } from 'react';
 import { useIntl } from 'react-intl';
 import type { ActionMeta, GroupBase, OptionProps } from 'react-select';
 import type { AsyncProps } from 'react-select/async';
@@ -258,6 +258,10 @@ export type TSearchSelectInputProps = {
    * The style of the an option in the dropdown menu. It could be single lined option or an option with more and custom info
    */
   optionType?: 'single-property' | 'double-property' | 'multiple-properties';
+  /**
+   * Icon to display on the left of the placeholder text and selected value. Has no effect when `isMulti` is enabled.
+   */
+  iconLeft?: ReactNode;
 };
 
 type TOptionInnerPropsData = {
@@ -332,7 +336,7 @@ const SearchSelectInput = (props: TSearchSelectInputProps) => {
         {...props}
         components={components as ReactSelectAsyncProps['components']}
         placeholder={placeholder}
-        iconLeft={undefined}
+        iconLeft={props.iconLeft}
         loadingMessage={loadingMessage}
         noOptionsMessage={noOptionsMessage}
         isSearchable={true}