feat(Dropdown): add clearable prop

docs/src/examples/components/Dropdown/Types/DropdownExampleClearable.shorthand.steps.ts

@@ -0,0 +1,16 @@
+import { Dropdown } from '@stardust-ui/react'
+
+const selectors = {
+  clearIndicator: `.${Dropdown.slotClassNames.clearIndicator}`,
+  triggerButton: `.${Dropdown.slotClassNames.triggerButton}`,
+  item: (itemIndex: number) => `.${Dropdown.slotClassNames.itemsList} li:nth-child(${itemIndex})`,
+}
+
+const steps = [
+  steps => steps.click(selectors.triggerButton).snapshot('Shows list'),
+  steps => steps.click(selectors.item(3)).snapshot('Selects an item'),
+  steps => steps.click(selectors.clearIndicator).snapshot('Clears the value'),
+  steps => steps.click(selectors.triggerButton).snapshot('Closes the list'),
+]
+
+export default steps

docs/src/examples/components/Dropdown/Types/DropdownExampleClearable.shorthand.tsx

@@ -0,0 +1,20 @@
+import { Dropdown } from '@stardust-ui/react'
+import * as React from 'react'
+
+const inputItems = [
+  'Bruce Wayne',
+  'Natasha Romanoff',
+  'Steven Strange',
+  'Alfred Pennyworth',
+  `Scarlett O'Hara`,
+  'Imperator Furiosa',
+  'Bruce Banner',
+  'Peter Parker',
+  'Selina Kyle',
+]
+
+const DropdownClearableExample = () => (
+  <Dropdown clearable items={inputItems} placeholder="Select your hero" />
+)
+
+export default DropdownClearableExample

docs/src/examples/components/Dropdown/Types/index.tsx

@@ -24,6 +24,11 @@ const Types = () => (
       description="A dropdown can be searchable and allow a multiple selection."
       examplePath="components/Dropdown/Types/DropdownExampleSearchMultiple"
     />
+    <ComponentExample
+      title="Clearable"
+      description="A dropdown can be clearable and let users remove their selection."
+      examplePath="components/Dropdown/Types/DropdownExampleClearable"
+    />
     <ComponentExample
       title="Inline"
       description="A dropdown can be used inline with text."

packages/react/src/components/Dropdown/Dropdown.tsx

@@ -38,9 +38,11 @@ import DropdownSearchInput, { DropdownSearchInputProps } from './DropdownSearchI
 import Button from '../Button/Button'
 import { screenReaderContainerStyles } from '../../lib/accessibility/Styles/accessibilityStyles'
 import ListItem from '../List/ListItem'
+import Icon from '../Icon/Icon'
 
 export interface DropdownSlotClassNames {
   container: string
+  clearIndicator: string
   triggerButton: string
   itemsList: string
   selectedItems: string
@@ -50,6 +52,12 @@ export interface DropdownProps extends UIComponentProps<DropdownProps, DropdownS
   /** The index of the currently active selected item, if dropdown has a multiple selection. */
   activeSelectedIndex?: number
 
+  /** A dropdown can be clearable and let users remove their selection. */
+  clearable?: boolean
+
+  /** A slot for a clearing indicator. */
+  clearIndicator?: ShorthandValue
+
   /** The initial value for the index of the currently active selected item, in a multiple selection. */
   defaultActiveSelectedIndex?: number
 
@@ -192,6 +200,8 @@ class Dropdown extends AutoControlledComponent<Extendable<DropdownProps>, Dropdo
       content: false,
     }),
     activeSelectedIndex: PropTypes.number,
+    clearable: PropTypes.bool,
+    clearIndicator: customPropTypes.itemShorthand,
     defaultActiveSelectedIndex: PropTypes.number,
     defaultSearchQuery: PropTypes.string,
     defaultValue: PropTypes.oneOfType([
@@ -226,6 +236,7 @@ class Dropdown extends AutoControlledComponent<Extendable<DropdownProps>, Dropdo
 
   static defaultProps: DropdownProps = {
     as: 'div',
+    clearIndicator: 'close',
     itemToString: item => {
       if (!item || React.isValidElement(item)) {
         return ''
@@ -263,8 +274,16 @@ class Dropdown extends AutoControlledComponent<Extendable<DropdownProps>, Dropdo
     unhandledProps,
     rtl,
   }: RenderResultConfig<DropdownProps>) {
-    const { search, multiple, getA11yStatusMessage, itemToString, toggleIndicator } = this.props
-    const { defaultHighlightedIndex, searchQuery } = this.state
+    const {
+      clearable,
+      clearIndicator,
+      search,
+      multiple,
+      getA11yStatusMessage,
+      itemToString,
+      toggleIndicator,
+    } = this.props
+    const { defaultHighlightedIndex, searchQuery, value } = this.state
 
     return (
       <ElementType className={classes.root} {...unhandledProps}>
@@ -293,6 +312,8 @@ class Dropdown extends AutoControlledComponent<Extendable<DropdownProps>, Dropdo
               { refKey: 'innerRef' },
               { suppressRefError: true },
             )
+            const showClearIndicator = clearable && !this.isValueEmpty(value)
+
             return (
               <Ref innerRef={innerRef}>
                 <div
@@ -315,13 +336,22 @@ class Dropdown extends AutoControlledComponent<Extendable<DropdownProps>, Dropdo
                         )
                       : this.renderTriggerButton(styles, rtl, getToggleButtonProps)}
                   </div>
-                  {Indicator.create(toggleIndicator, {
-                    defaultProps: {
-                      direction: isOpen ? 'top' : 'bottom',
-                      onClick: getToggleButtonProps().onClick,
-                      styles: styles.toggleIndicator,
-                    },
-                  })}
+                  {showClearIndicator
+                    ? Icon.create(clearIndicator, {
+                        defaultProps: {
+                          className: Dropdown.slotClassNames.clearIndicator,
+                          onClick: this.handleClear,
+                          styles: styles.clearIndicator,
+                          xSpacing: 'none',
+                        },
+                      })
+                    : Indicator.create(toggleIndicator, {
+                        defaultProps: {
+                          direction: isOpen ? 'top' : 'bottom',
+                          onClick: getToggleButtonProps().onClick,
+                          styles: styles.toggleIndicator,
+                        },
+                      })}
                   {this.renderItemsList(
                     styles,
                     variables,
@@ -748,6 +778,12 @@ class Dropdown extends AutoControlledComponent<Extendable<DropdownProps>, Dropdo
     }
   }
 
+  private handleClear = () => {
+    const { multiple } = this.props
+
+    this.setState({ value: multiple ? [] : '' })
+  }
+
   private handleContainerClick = () => {
     this.tryFocusSearchInput()
   }
@@ -932,9 +968,8 @@ class Dropdown extends AutoControlledComponent<Extendable<DropdownProps>, Dropdo
    */
   private getSelectedItemAsString = (value: ShorthandValue): string => {
     const { itemToString, multiple, placeholder } = this.props
-    const isValueEmpty = _.isArray(value) ? value.length < 1 : !value
 
-    if (isValueEmpty) {
+    if (this.isValueEmpty(value)) {
       return placeholder
     }
 
@@ -944,10 +979,15 @@ class Dropdown extends AutoControlledComponent<Extendable<DropdownProps>, Dropdo
 
     return itemToString(value)
   }
+
+  private isValueEmpty = (value: ShorthandValue | ShorthandValue[]) => {
+    return _.isArray(value) ? value.length < 1 : !value
+  }
 }
 
 Dropdown.slotClassNames = {
   container: `${Dropdown.className}__container`,
+  clearIndicator: `${Dropdown.className}__clear-indicator`,
   triggerButton: `${Dropdown.className}__trigger-button`,
   itemsList: `${Dropdown.className}__items-list`,
   selectedItems: `${Dropdown.className}__selected-items`,

packages/react/src/themes/teams/components/Dropdown/dropdownStyles.ts

@@ -40,6 +40,22 @@ const dropdownStyles: ComponentSlotStylesInput<DropdownPropsAndState, DropdownVa
     }),
   }),
 
+  clearIndicator: ({ variables: v }): ICSSInJSStyle => ({
+    alignItems: 'center',
+    display: 'flex',
+    justifyContent: 'center',
+
+    backgroundColor: 'transparent',
+    cursor: 'pointer',
+    userSelect: 'none',
+
+    margin: 0,
+    position: 'absolute',
+    right: pxToRem(5),
+    height: v.toggleIndicatorSize,
+    width: v.toggleIndicatorSize,
+  }),
+
   container: ({ props: p, variables: v }): ICSSInJSStyle => ({
     display: 'flex',
     flexWrap: 'wrap',