feat(dropdown): single search

CHANGELOG.md

@@ -35,6 +35,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add `hasMention`, `isImportant`, `hasMentionColor` and `isImportantColor` in ChatMessage variables in Teams theme @mnajdova ([#841](https://github.com/stardust-ui/react/pull/841))
 - Add `actionMenu` prop to `ChatMessage` component @layershifter ([#811](https://github.com/stardust-ui/react/pull/811))
 - Add `rtl` field in the `SvgIconFuncArg`, and used it in Teams theme's number-list icon ([#851](https://github.com/stardust-ui/react/pull/851))
+- Add single search flavor for `Dropdown` component @Bugaa92 ([#839](https://github.com/stardust-ui/react/pull/839))
 
 ### Fixes
 - Fix `Dropdown` component styles regression @Bugaa92 ([#824](https://github.com/stardust-ui/react/pull/824))
@@ -96,7 +97,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Fixes
 - Make `headerMedia` visible for screen readers in `ListItem` @layershifter ([#772](https://github.com/stardust-ui/react/pull/772))
 - Cleanup for `Dropdown` examples' accessibility and added localisation example. @silviuavram ([#771](https://github.com/stardust-ui/react/pull/771))
-- Fix highlighted selected option in single selection `Dropdown` when opened @silviuavram ([#726](https://github.com/stardust-ui/react/pull/726)) 
+- Fix highlighted selected option in single selection `Dropdown` when opened @silviuavram ([#726](https://github.com/stardust-ui/react/pull/726))
 
 <!--------------------------------[ v0.18.0 ]------------------------------- -->
 ## [v0.18.0](https://github.com/stardust-ui/react/tree/v0.18.0) (2019-01-24)

docs/src/examples/components/Dropdown/State/DropdownExampleLoading.shorthand.tsx

@@ -8,9 +8,9 @@ const DropdownExampleLoading: React.FC<{ knobs: { loading: boolean } }> = ({ kno
     loading={knobs.loading}
     loadingMessage="Loading..."
     multiple
+    search
     items={inputItems}
     placeholder="Start typing a name"
-    search
   />
 )
 

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

@@ -0,0 +1,17 @@
+import { Dropdown } from '@stardust-ui/react'
+
+const selectors = {
+  triggerButton: `.${Dropdown.slotClassNames.triggerButton}`,
+  dropdownItem: (itemIndex = 1) =>
+    `.${Dropdown.slotClassNames.itemsList} li:nth-child(${itemIndex})`,
+}
+
+const steps = [
+  steps => steps.click(selectors.triggerButton).snapshot('Shows list'),
+  steps => steps.click(selectors.dropdownItem(3)).snapshot('Selects an item'),
+  steps => steps.click(selectors.triggerButton).snapshot('Opens with selected item highlighted'),
+  steps => steps.hover(selectors.dropdownItem(2)).snapshot('Highlights another item'),
+  steps => steps.click(selectors.triggerButton).snapshot('Closes the list'),
+]
+
+export default steps

docs/src/examples/components/Dropdown/Types/DropdownExampleSingleSelection.shorthand.tsx → docs/src/examples/components/Dropdown/Types/DropdownExample.shorthand.tsx

@@ -15,11 +15,9 @@ const inputItems = [
 
 const DropdownExample = () => (
   <Dropdown
-    getA11ySelectionMessage={{
-      onAdd: item => `${item} has been selected.`,
-    }}
-    placeholder="Select your hero"
     items={inputItems}
+    placeholder="Select your hero"
+    getA11ySelectionMessage={{ onAdd: item => `${item} has been selected.` }}
   />
 )
 

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

@@ -0,0 +1,36 @@
+import * as React from 'react'
+import { Dropdown, Header } from '@stardust-ui/react'
+
+const inputItems = [
+  'Bruce Wayne',
+  'Natasha Romanoff',
+  'Steven Strange',
+  'Alfred Pennyworth',
+  `Scarlett O'Hara`,
+  'Imperator Furiosa',
+  'Bruce Banner',
+  'Peter Parker',
+  'Selina Kyle',
+]
+
+const DropdownExampleSearch = () => (
+  <>
+    <Header as="h3">Single Search:</Header>
+    <Dropdown
+      search
+      items={inputItems}
+      placeholder="Start typing a name"
+      noResultsMessage="We couldn't find any matches."
+    />
+    <Header as="h3">Multiple Search:</Header>
+    <Dropdown
+      search
+      multiple
+      items={inputItems}
+      placeholder="Start typing a name"
+      noResultsMessage="We couldn't find any matches."
+    />
+  </>
+)
+
+export default DropdownExampleSearch

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

@@ -5,14 +5,14 @@ import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
 const Types = () => (
   <ExampleSection title="Types">
     <ComponentExample
-      title="Single Selection"
-      description="A dropdown with single selection."
-      examplePath="components/Dropdown/Types/DropdownExampleSingleSelection"
+      title="Default"
+      description="A dropdown can be used to select between choices in a form."
+      examplePath="components/Dropdown/Types/DropdownExample"
     />
     <ComponentExample
-      title="Multiple Search"
-      description="A dropdown with multiple selection and search."
-      examplePath="components/Dropdown/Types/DropdownExampleMultipleSearch"
+      title="Search"
+      description="A dropdown can be searchable."
+      examplePath="components/Dropdown/Types/DropdownExampleSearch"
     />
   </ExampleSection>
 )

docs/src/examples/components/Dropdown/Usage/DropdownExampleRender.shorthand.tsx

@@ -15,16 +15,16 @@ const inputItems = [
 
 const DropdownExampleRender: React.FC = () => (
   <Dropdown
-    items={inputItems}
     multiple
+    search
+    items={inputItems}
     placeholder="Start typing a name"
     renderItem={(Item: typeof Dropdown.Item, props) => (
       <Item {...props} header={`${props.header} (active)`} />
     )}
     renderSelectedItem={(SelectedItem: typeof Dropdown.SelectedItem, props) => (
       <SelectedItem {...props} header={`${props.header} (selected)`} />
     )}
-    search
   />
 )
 

docs/src/examples/components/Dropdown/Variations/DropdownExampleMultipleSearchFluid.shorthand.tsx

@@ -12,15 +12,16 @@ const inputItems = [
   'Peter Parker',
   'Selina Kyle',
 ]
-const DropdownExample = () => (
+
+const DropdownExampleMultipleSearchFluid = () => (
   <Dropdown
     multiple
-    getA11ySelectionMessage={getA11ySelectionMessage}
-    noResultsMessage="We couldn't find any matches."
     search
     fluid
-    placeholder="Start typing a name"
     items={inputItems}
+    placeholder="Start typing a name"
+    getA11ySelectionMessage={getA11ySelectionMessage}
+    noResultsMessage="We couldn't find any matches."
   />
 )
 
@@ -29,4 +30,4 @@ const getA11ySelectionMessage = {
   onRemove: item => `${item} has been removed.`,
 }
 
-export default DropdownExample
+export default DropdownExampleMultipleSearchFluid

docs/src/examples/components/Dropdown/Variations/DropdownExampleMultipleSearchFrenchLanguage.shorthand.tsx

@@ -19,15 +19,15 @@ const inputItems = [
   },
 }))
 
-const DropdownExample = () => (
+const DropdownExampleMultipleSearchFrenchLanguage = () => (
   <Dropdown
     multiple
     search
+    items={inputItems}
+    placeholder="Commencez à taper un nom"
     getA11yStatusMessage={getA11yStatusMessage}
     getA11ySelectionMessage={getA11ySelectionMessage}
     noResultsMessage="N'avons trouvé aucun résultat."
-    placeholder="Commencez à taper un nom"
-    items={inputItems}
   />
 )
 
@@ -56,4 +56,5 @@ const getA11ySelectionMessage = {
   onAdd: item => `${item.header} a été choisi.`,
   onRemove: item => `${item.header} a été éliminé.`,
 }
-export default DropdownExample
+
+export default DropdownExampleMultipleSearchFrenchLanguage

docs/src/examples/components/Dropdown/Variations/DropdownExampleMultipleSearchImageAndContent.shorthand.tsx

@@ -49,14 +49,14 @@ const inputItems = [
   },
 ]
 
-const DropdownExample = () => (
+const DropdownExampleMultipleSearchImageAndContent = () => (
   <Dropdown
     multiple
     search
+    items={inputItems}
+    placeholder="Start typing a name"
     getA11ySelectionMessage={getA11ySelectionMessage}
     noResultsMessage="We couldn't find any matches."
-    placeholder="Start typing a name"
-    items={inputItems}
   />
 )
 
@@ -65,4 +65,4 @@ const getA11ySelectionMessage = {
   onRemove: item => `${item.header} has been removed.`,
 }
 
-export default DropdownExample
+export default DropdownExampleMultipleSearchImageAndContent