From 87e57cab075184ca6c5417a65be9674f351f2690 Mon Sep 17 00:00:00 2001
From: Marcin Sawicki <m.sawicki@livechatinc.com>
Date: Wed, 17 May 2023 16:10:48 +0200
Subject: [PATCH] #535 - Picker - Added possibility to hide clear button, docs
 improvements (#545)

* added possibility to hide clear button, docs improvements

* missed change
---
 .../src/components/Picker/Picker.stories.tsx  | 242 ++++++++++++------
 .../src/components/Picker/Picker.tsx          |  51 ++++
 .../src/components/Picker/Trigger.tsx         |   7 +-
 3 files changed, 217 insertions(+), 83 deletions(-)

diff --git a/packages/react-components/src/components/Picker/Picker.stories.tsx b/packages/react-components/src/components/Picker/Picker.stories.tsx
index 8ff2c0e15..0ec5bcc21 100644
--- a/packages/react-components/src/components/Picker/Picker.stories.tsx
+++ b/packages/react-components/src/components/Picker/Picker.stories.tsx
@@ -7,6 +7,7 @@ import { IPickerListItem } from './PickerList';
 
 import './Picker.stories.css';
 import { StoryDescriptor } from '../../stories/components/StoryDescriptor';
+import noop from '../../utils/noop';
 
 export default {
   title: 'Components/Picker',
@@ -15,6 +16,12 @@ export default {
     componentSubtitle: `TBD`,
   },
   argTypes: {
+    options: {
+      control: false,
+    },
+    selected: {
+      control: false,
+    },
     onSelect: { action: 'changed' },
   },
 } as ComponentMeta<typeof Picker>;
@@ -48,33 +55,48 @@ Default.args = {
   options: defaultPickerOptions,
 };
 
-export const States = (args: IPickerProps): React.ReactElement => (
+export const States = (): React.ReactElement => (
   <div style={{ ...commonWidth, marginBottom: 100 }}>
     <StoryDescriptor title="Basic">
-      <PickerComponent {...args} />
+      <PickerComponent options={defaultPickerOptions} onSelect={noop} />
     </StoryDescriptor>
     <StoryDescriptor title="Multi select + Basic">
-      <PickerComponent {...args} type="multi" />
+      <PickerComponent
+        options={defaultPickerOptions}
+        onSelect={noop}
+        type="multi"
+      />
     </StoryDescriptor>
     <StoryDescriptor title="Disabled">
-      <PickerComponent {...args} disabled />
+      <PickerComponent
+        options={defaultPickerOptions}
+        onSelect={noop}
+        disabled
+      />
     </StoryDescriptor>
     <StoryDescriptor title="Error">
-      <PickerComponent {...args} error />
+      <PickerComponent options={defaultPickerOptions} onSelect={noop} error />
     </StoryDescriptor>
     <StoryDescriptor title="Error + Disabled">
-      <PickerComponent {...args} disabled error />
+      <PickerComponent
+        options={defaultPickerOptions}
+        onSelect={noop}
+        disabled
+        error
+      />
     </StoryDescriptor>
     <StoryDescriptor title="Disabled + Selected option">
       <PickerComponent
-        {...args}
+        options={defaultPickerOptions}
+        onSelect={noop}
         disabled
         selected={[{ key: 'two', name: 'Option two' }]}
       />
     </StoryDescriptor>
     <StoryDescriptor title="Multi select + Disabled + Selected option">
       <PickerComponent
-        {...args}
+        options={defaultPickerOptions}
+        onSelect={noop}
         type="multi"
         disabled
         selected={[
@@ -85,93 +107,149 @@ export const States = (args: IPickerProps): React.ReactElement => (
     </StoryDescriptor>
   </div>
 );
-States.args = {
-  options: defaultPickerOptions,
-  label: 'Example label',
-};
 
-export const PickerWithGroupedOptions = (
-  args: IPickerProps
-): React.ReactElement => (
+export const PickerWithGroupedOptions = (): React.ReactElement => (
   <div style={{ ...commonWidth, marginBottom: 320 }}>
-    <PickerComponent {...args} />
+    <PickerComponent options={defaultExtendedOptions} onSelect={noop} />
   </div>
 );
-PickerWithGroupedOptions.args = {
-  options: defaultExtendedOptions,
-};
 
 const CustomPickerOption: React.FC = ({ children }) => (
   <div className="custom-picker-option">{children}</div>
 );
 
-export const PickerWithOptionsAsCustomElements = (
-  args: IPickerProps
-): React.ReactElement => (
+export const PickerWithOptionsAsCustomElements = (): React.ReactElement => (
   <div style={{ ...commonWidth, marginBottom: 320 }}>
     <StoryDescriptor title="Single select">
-      <PickerComponent {...args} />
+      <PickerComponent
+        options={[
+          {
+            key: 'one',
+            name: 'Example custom element one',
+            customElement: {
+              listItemBody: (
+                <CustomPickerOption>
+                  <img
+                    className="image"
+                    src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
+                  />
+                  <div>
+                    <div className="title">Example custom element one</div>
+                    <div className="description">Example custom element</div>
+                  </div>
+                </CustomPickerOption>
+              ),
+              selectedItemBody: (
+                <CustomPickerOption>
+                  <img
+                    className="image selected"
+                    src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
+                  />
+                  <div className="title selected">
+                    Example custom element one
+                  </div>
+                </CustomPickerOption>
+              ),
+            },
+          },
+          {
+            key: 'two',
+            name: 'Example custom element two',
+            customElement: {
+              listItemBody: (
+                <CustomPickerOption>
+                  <img
+                    className="image"
+                    src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
+                  />
+                  <div>
+                    <div className="title">Example custom element two</div>
+                    <div className="description">Example custom element</div>
+                  </div>
+                </CustomPickerOption>
+              ),
+              selectedItemBody: (
+                <CustomPickerOption>
+                  <img
+                    className="image selected"
+                    src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
+                  />
+                  <div className="title selected">
+                    Example custom element two
+                  </div>
+                </CustomPickerOption>
+              ),
+            },
+          },
+        ]}
+        onSelect={noop}
+      />
     </StoryDescriptor>
     <StoryDescriptor title="Multi select">
-      <PickerComponent {...args} type="multi" />
+      <PickerComponent
+        options={[
+          {
+            key: 'one',
+            name: 'Example custom element one',
+            customElement: {
+              listItemBody: (
+                <CustomPickerOption>
+                  <img
+                    className="image"
+                    src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
+                  />
+                  <div>
+                    <div className="title">Example custom element one</div>
+                    <div className="description">Example custom element</div>
+                  </div>
+                </CustomPickerOption>
+              ),
+              selectedItemBody: (
+                <CustomPickerOption>
+                  <img
+                    className="image selected"
+                    src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
+                  />
+                  <div className="title selected">
+                    Example custom element one
+                  </div>
+                </CustomPickerOption>
+              ),
+            },
+          },
+          {
+            key: 'two',
+            name: 'Example custom element two',
+            customElement: {
+              listItemBody: (
+                <CustomPickerOption>
+                  <img
+                    className="image"
+                    src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
+                  />
+                  <div>
+                    <div className="title">Example custom element two</div>
+                    <div className="description">Example custom element</div>
+                  </div>
+                </CustomPickerOption>
+              ),
+              selectedItemBody: (
+                <CustomPickerOption>
+                  <img
+                    className="image selected"
+                    src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
+                  />
+                  <div className="title selected">
+                    Example custom element two
+                  </div>
+                </CustomPickerOption>
+              ),
+            },
+          },
+        ]}
+        type="multi"
+        onSelect={noop}
+      />
     </StoryDescriptor>
   </div>
 );
-PickerWithOptionsAsCustomElements.args = {
-  options: [
-    {
-      key: 'one',
-      name: 'Example custom element one',
-      customElement: {
-        listItemBody: (
-          <CustomPickerOption>
-            <img
-              className="image"
-              src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
-            />
-            <div>
-              <div className="title">Example custom element one</div>
-              <div className="description">Example custom element</div>
-            </div>
-          </CustomPickerOption>
-        ),
-        selectedItemBody: (
-          <CustomPickerOption>
-            <img
-              className="image selected"
-              src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
-            />
-            <div className="title selected">Example custom element one</div>
-          </CustomPickerOption>
-        ),
-      },
-    },
-    {
-      key: 'two',
-      name: 'Example custom element two',
-      customElement: {
-        listItemBody: (
-          <CustomPickerOption>
-            <img
-              className="image"
-              src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
-            />
-            <div>
-              <div className="title">Example custom element two</div>
-              <div className="description">Example custom element</div>
-            </div>
-          </CustomPickerOption>
-        ),
-        selectedItemBody: (
-          <CustomPickerOption>
-            <img
-              className="image selected"
-              src="https://avatars2.githubusercontent.com/u/29309941?s=88&v=4"
-            />
-            <div className="title selected">Example custom element two</div>
-          </CustomPickerOption>
-        ),
-      },
-    },
-  ],
-};
diff --git a/packages/react-components/src/components/Picker/Picker.tsx b/packages/react-components/src/components/Picker/Picker.tsx
index aee68fb39..eefc10c15 100644
--- a/packages/react-components/src/components/Picker/Picker.tsx
+++ b/packages/react-components/src/components/Picker/Picker.tsx
@@ -16,20 +16,69 @@ const baseClass = 'picker';
 export type PickerType = 'single' | 'multi';
 
 export interface IPickerProps {
+  /**
+   * Specify the custom id
+   */
   id?: string;
+  /**
+   * The CSS class for picker container
+   */
   className?: string;
+  /**
+   * Specify whether the picker should be disabled
+   */
   disabled?: boolean;
+  /**
+   * Specify whether the picker should be in error state
+   */
   error?: boolean;
+  /**
+   * Array of picker options
+   */
   options: IPickerListItem[];
+  /**
+   * Array of picker selected options
+   */
   selected?: IPickerListItem[] | null;
+  /**
+   * Specify the picker size
+   */
   size?: Size;
+  /**
+   * Set the dismiss icon size in tags when `multi` type is enabled
+   */
   tagIconSize?: IconSize;
+  /**
+   * Specify the placeholder for search input
+   */
   placeholder?: string;
+  /**
+   * Specify whether the option select is required
+   */
   isRequired?: boolean;
+  /**
+   * Text if no search result were found
+   */
   noSearchResultText?: string;
+  /**
+   * Text for `select all` option which will be visible if defined in multi select mode
+   */
   selectAllOptionText?: string;
+  /**
+   * Set `multi` to specify whether the picker should allow to multi selection
+   */
   type?: PickerType;
+  /**
+   * Set to disable search input
+   */
   searchDisabled?: boolean;
+  /**
+   * Set to hide clear selection button
+   */
+  hideClearButton?: boolean;
+  /**
+   * Callback called after item selection
+   */
   onSelect: (selectedItems: IPickerListItem[] | null) => void;
 }
 
@@ -47,6 +96,7 @@ export const Picker: React.FC<IPickerProps> = ({
   selectAllOptionText,
   type = 'single',
   searchDisabled = false,
+  hideClearButton,
   onSelect,
   ...props
 }) => {
@@ -192,6 +242,7 @@ export const Picker: React.FC<IPickerProps> = ({
           isRequired={isRequired}
           isMultiSelect={type === 'multi'}
           size={size}
+          hideClearButton={hideClearButton}
           onTrigger={handleTrigger}
           onClear={handleClear}
         >
diff --git a/packages/react-components/src/components/Picker/Trigger.tsx b/packages/react-components/src/components/Picker/Trigger.tsx
index 9e18c3fb0..2eac452ca 100644
--- a/packages/react-components/src/components/Picker/Trigger.tsx
+++ b/packages/react-components/src/components/Picker/Trigger.tsx
@@ -21,6 +21,7 @@ export interface ITriggerProps {
   isRequired?: boolean;
   isMultiSelect?: boolean;
   size?: Size;
+  hideClearButton?: boolean;
   onTrigger: (e: React.MouseEvent | KeyboardEvent) => void;
   onClear: () => void;
 }
@@ -35,6 +36,7 @@ export const Trigger: React.FC<React.PropsWithChildren<ITriggerProps>> = ({
   isRequired,
   isMultiSelect,
   size = 'medium',
+  hideClearButton,
   onTrigger,
   onClear,
 }) => {
@@ -80,6 +82,9 @@ export const Trigger: React.FC<React.PropsWithChildren<ITriggerProps>> = ({
     onClear();
   };
 
+  const shouldShowClearButton =
+    !hideClearButton && isItemSelected && !isDisabled && !isRequired;
+
   return (
     <div
       ref={triggerRef}
@@ -94,7 +99,7 @@ export const Trigger: React.FC<React.PropsWithChildren<ITriggerProps>> = ({
           styles[`${baseClass}__controls--${size}`]
         )}
       >
-        {isItemSelected && !isDisabled && !isRequired && (
+        {shouldShowClearButton && (
           <div
             data-testid={`${baseClass}__clear-icon`}
             className={styles[`${baseClass}__clear-icon`]}