feat(selectable-search-input): multiple adjustments (#2842)

* feat(selectable-search-input): multiple adjustments change visual order of buttons + allow rightButton
commercetools · Jun 19, 2024 · 48dc716 · 48dc716
1 parent f09213e
commit 48dc716
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 3 deletions.
diff --git a/.changeset/late-bees-kiss.md b/.changeset/late-bees-kiss.md
@@ -0,0 +1,5 @@
+---
+'@commercetools-uikit/selectable-search-input': minor
+---
+
+Support for an optional custom action icon to be displayed on the right side of the selectable search input.
diff --git a/packages/components/inputs/selectable-search-input/README.md b/packages/components/inputs/selectable-search-input/README.md
@@ -94,6 +94,8 @@ export default Example;
 | `selectDataProps`          | `Record`                                                                               |          |           | used to pass data-\* props to the select component.&#xA;eg: selectDataProps={\[{ 'prop-1': 'value-1' }, { 'prop-2': 'value-2' }]}                                                                                                                                                                                                                                                        |
 | `inputDataProps`           | `Record`                                                                               |          |           | used to pass data-\* props to the input element.&#xA;eg: inputDataProps={\[{ 'prop-1': 'value-1' }, { 'prop-2': 'value-2' }]}                                                                                                                                                                                                                                                            |
 | `selectCustomComponents`   | `ReactSelectProps['components']`                                                       |          |           | Map of components to overwrite the default ones, see what components you can override&#xA;<br/>&#xA;[Props from React select was used](https://react-select.com/props)                                                                                                                                                                                                                   |
+| `rightActionIcon`          | `ReactElement`                                                                         |          |           | Custom action icon to be displayed on the right side of the input.                                                                                                                                                                                                                                                                                                                       |
+| `rightActionProps`         | `TIconButtonProps`                                                                     |          |           | Props for the right-action icon-button. Required when rightActionIcon is provided.&#xA;At least a `label` and an `onClick` prop/function need to be provided.                                                                                                                                                                                                                            |
 
 ## Signatures
 

diff --git a/packages/components/inputs/selectable-search-input/package.json b/packages/components/inputs/selectable-search-input/package.json
@@ -24,6 +24,7 @@
     "@commercetools-uikit/constraints": "19.5.0",
     "@commercetools-uikit/design-system": "19.5.0",
     "@commercetools-uikit/hooks": "19.5.0",
+    "@commercetools-uikit/icon-button": "19.5.0",
     "@commercetools-uikit/icons": "19.5.0",
     "@commercetools-uikit/input-utils": "19.5.0",
     "@commercetools-uikit/secondary-icon-button": "19.5.0",

diff --git a/packages/components/inputs/selectable-search-input/src/selectable-search-input.story.js b/packages/components/inputs/selectable-search-input/src/selectable-search-input.story.js
@@ -1,3 +1,4 @@
+import { createElement } from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { withKnobs, boolean, text, select } from '@storybook/addon-knobs/react';
@@ -8,6 +9,9 @@ import NeighbouringStackingContext from '../../../../../docs/.storybook/decorato
 import { addMenuPortalProps } from '../../../../../docs/.storybook/utils';
 import Readme from '../README.md';
 import SelectableSearchInput from './selectable-search-input';
+import * as icons from '@commercetools-uikit/icons';
+
+const iconNames = Object.keys(icons);
 
 storiesOf('Components|Inputs', module)
   .addDecorator(withKnobs)
@@ -119,6 +123,16 @@ storiesOf('Components|Inputs', module)
             isCondensed={boolean('isCondensed', false)}
             showSubmitButton={boolean('showSubmitButton', true)}
             hasError={boolean('hasError', false)}
+            rightActionIcon={
+              boolean('hasRightAction') &&
+              createElement(
+                icons[select('rightActionIcon', iconNames, iconNames[0])]
+              )
+            }
+            rightActionProps={{
+              label: 'Right action',
+              onClick: action('rightAction onClick'),
+            }}
             hasWarning={boolean('hasWarning', false)}
             placeholder={text('placeholder', 'Placeholder')}
             horizontalConstraint={select(

diff --git a/packages/components/inputs/selectable-search-input/src/selectable-search-input.styles.ts b/packages/components/inputs/selectable-search-input/src/selectable-search-input.styles.ts
@@ -91,6 +91,10 @@ const getSelectableSearchInputStyles = (props: TInputProps) => [
     }
     width: 100%;
     color: ${getInputFontColor(props)};
+    order: 2;
+    margin-left: ${designTokens.spacing10};
+    padding-left: 0;
+    padding-right: 0;
   `,
 ];
 
@@ -106,7 +110,6 @@ const getButtonStyles = () => css`
     background-color ${designTokens.transitionStandard};
   transition: border-color ${designTokens.transitionStandard},
     box-shadow ${designTokens.transitionStandard};
-  margin-right: ${designTokens.spacing20};
 `;
 
 const getIconColor = (props: TInputProps, defaultColor: string) => {
@@ -126,18 +129,22 @@ const getClearIconButtonStyles = (props: TInputProps) => [
     &:hover {
       fill: ${getIconColor(props, designTokens.colorError)};
     }
+    order: 3;
+    margin-left: ${designTokens.spacing10};
   `,
 ];
 
 const getSearchIconButtonStyles = (props: TInputProps) => [
   getButtonStyles(),
   css`
-    margin-right: ${designTokens.spacing25};
     fill: ${getIconColor(props, designTokens.colorNeutral60)};
     cursor: ${props.isReadOnly ? 'default' : 'pointer'};
     &:hover {
       fill: ${getIconColor(props, designTokens.colorPrimary)};
     }
+
+    border-radius: 0;
+    order: 1;
   `,
 ];
 
@@ -168,10 +175,11 @@ const getSelectableSearchInputContainerStyles = (props: TInputProps) => [
     box-sizing: border-box;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
-    margin-left: 0;
     width: ${props.horizontalConstraint === 'auto' ? 'auto' : '100%'};
     transition: border-color ${designTokens.transitionStandard},
       background-color ${designTokens.transitionStandard};
+    padding-left: ${designTokens.spacing30};
+    padding-right: ${designTokens.spacing30};
 
     &::placeholder {
       color: ${designTokens.colorNeutral60};

diff --git a/packages/components/inputs/selectable-search-input/src/selectable-search-input.tsx b/packages/components/inputs/selectable-search-input/src/selectable-search-input.tsx
@@ -6,8 +6,12 @@ import {
   useState,
   useCallback,
   useRef,
+  ReactElement,
 } from 'react';
 import SecondaryIconButton from '@commercetools-uikit/secondary-icon-button';
+import IconButton, {
+  type TIconButtonProps,
+} from '@commercetools-uikit/icon-button';
 import Constraints from '@commercetools-uikit/constraints';
 import { SearchIcon, CloseIcon } from '@commercetools-uikit/icons';
 import {
@@ -227,6 +231,16 @@ export type TSelectableSearchInputProps = {
    * [Props from React select was used](https://react-select.com/props)
    */
   selectCustomComponents?: ReactSelectProps['components'];
+
+  /**
+   * Custom action icon to be displayed on the right side of the input.
+   */
+  rightActionIcon?: ReactElement;
+  /**
+   * Props for the right-action icon-button. Required when rightActionIcon is provided.
+   * At least a `label` and an `onClick` prop/function need to be provided.
+   */
+  rightActionProps?: TIconButtonProps;
 };
 
 const defaultProps: Pick<
@@ -286,6 +300,12 @@ const SelectableSearchInput = (props: TSelectableSearchInputProps) => {
     (option) => option.value === searchInputOption
   );
 
+  if (props.rightActionIcon && !props.rightActionProps) {
+    warning(
+      false,
+      'SelectableSearchInput: `rightActionIcon` is provided but `rightActionProps` is missing. Provide an object with a `label` and `onClick` property.'
+    );
+  }
   const selectablSearchInputId = useFieldId(
     props.id,
     selectableSearchInputSequentialId
@@ -520,6 +540,23 @@ const SelectableSearchInput = (props: TSelectableSearchInputProps) => {
               isDisabled={props.isDisabled}
             />
           )}
+
+          {props.rightActionIcon && props.rightActionProps && (
+            <div
+              css={css`
+                order: 4;
+                margin-left: ${designTokens.spacing30};
+              `}
+            >
+              <IconButton
+                theme="primary"
+                isDisabled={props.isDisabled || props.isReadOnly}
+                size={props.isCondensed ? '10' : '20'}
+                icon={props.rightActionIcon}
+                {...props.rightActionProps}
+              />
+            </div>
+          )}
         </div>
       </Container>
     </Constraints.Horizontal>

diff --git a/...ges/components/inputs/selectable-search-input/src/selectable-search-input.visualroute.jsx b/...ges/components/inputs/selectable-search-input/src/selectable-search-input.visualroute.jsx
@@ -1,5 +1,6 @@
 import { SelectableSearchInput } from '@commercetools-frontend/ui-kit';
 import { Suite, Spec } from '../../../../../test/percy';
+import { CodeViewIcon } from '@commercetools-uikit/icons';
 
 export const routePath = '/selectable-search-input';
 
@@ -163,5 +164,36 @@ export const component = () => (
         options={options}
       />
     </Spec>
+    <Spec label="with right action">
+      <SelectableSearchInput
+        value={value}
+        onChange={() => {}}
+        horizontalConstraint={16}
+        onSubmit={() => {}}
+        onReset={() => {}}
+        options={options}
+        rightActionIcon={<CodeViewIcon />}
+        rightActionProps={{
+          label: 'Click me',
+          onClick: () => {},
+        }}
+      />
+    </Spec>
+    <Spec label="with right action + condensed">
+      <SelectableSearchInput
+        value={value}
+        onChange={() => {}}
+        isCondensed={true}
+        horizontalConstraint={16}
+        onSubmit={() => {}}
+        onReset={() => {}}
+        options={options}
+        rightActionIcon={<CodeViewIcon />}
+        rightActionProps={{
+          label: 'Click me',
+          onClick: () => {},
+        }}
+      />
+    </Spec>
   </Suite>
 );
diff --git a/yarn.lock b/yarn.lock
@@ -4284,6 +4284,7 @@ __metadata:
     "@commercetools-uikit/constraints": 19.5.0
     "@commercetools-uikit/design-system": 19.5.0
     "@commercetools-uikit/hooks": 19.5.0
+    "@commercetools-uikit/icon-button": 19.5.0
     "@commercetools-uikit/icons": 19.5.0
     "@commercetools-uikit/input-utils": 19.5.0
     "@commercetools-uikit/secondary-icon-button": 19.5.0