Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

Commit 02d8f81

Browse files
silviuaavramsilviuaavram
authored
feat(Dropdown): Single selection (#584)
* crude implementation * fixed the toggle and added/refactored styles * fixed the filtering to work for all variants * made the toggleButton tabbable by default * fixed style case active+focus * fixed wrong import * fixed ariaLabel for trigger button * added list focus and accessibility handling for it * fixed toggle button bug that appeared after trigger fix * reverted change for filteredItems * refactored the renderComponent to pass conformance * fixed button focus at selection * merged ref code review improvement * removed unneeded code * removed ternary condition * replaced some heights to make toggle button appear centered * improvements on styles from code review * replaced Icon with unicode char for theme consistency * some more review comments handled * some more code improvements in Dropdown * replaced right margin with padding for combobox * used functional components in the examples * overriding downshift aria label for the toggle button * made the toggle button arrow non-selectable * used a lodash util instead of filter * used buttonNode for consistency * apply tabIndex only if dropdown is non-search * Revert "used buttonNode for consistency" This reverts commit 97758c2. * refactored the Refs use in Dropdown * crude implementation * fixed the toggle and added/refactored styles * fixed the filtering to work for all variants * made the toggleButton tabbable by default * fixed style case active+focus * fixed wrong import * fixed ariaLabel for trigger button * added list focus and accessibility handling for it * fixed toggle button bug that appeared after trigger fix * reverted change for filteredItems * refactored the renderComponent to pass conformance * fixed button focus at selection * merged ref code review improvement * removed unneeded code * removed ternary condition * replaced some heights to make toggle button appear centered * improvements on styles from code review * replaced Icon with unicode char for theme consistency * some more review comments handled * some more code improvements in Dropdown * replaced right margin with padding for combobox * used functional components in the examples * overriding downshift aria label for the toggle button * made the toggle button arrow non-selectable * used a lodash util instead of filter * used buttonNode for consistency * apply tabIndex only if dropdown is non-search * Revert "used buttonNode for consistency" This reverts commit 97758c2. * refactored the Refs use in Dropdown * updated changelog * -added white background on the list in the Dropdown for fixing transparent scrollbar * -fixed changelog * removed '.shorthand' from examplePath
1 parent d86bbf6 commit 02d8f81

15 files changed

+422
-250
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
1919

2020
### Features
2121
- Add `on` and `mouseLeaveDelay` props to `Popup` component @mnajdova ([#622](https://github.com/stardust-ui/react/pull/622))
22+
- Add Dropdown Single Selection variant @silviuavram ([#584](https://github.com/stardust-ui/react/pull/584))
2223

2324
### Fixes
2425
- Fix unicode arrow characters to be RTL aware ([#690](https://github.com/stardust-ui/react/pull/690))

‎docs/src/examples/components/Dropdown/Types/DropdownExampleMultipleSearch.shorthand.tsx

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -13,21 +13,17 @@ const inputItems = [
1313
'Selina Kyle',
1414
]
1515

16-
class DropdownExample extends React.Component {
17-
render() {
18-
return (
19-
<Dropdown
20-
multiple
21-
search
22-
getA11ySelectionMessage={getA11ySelectionMessage}
23-
getA11yStatusMessage={getA11yStatusMessage}
24-
noResultsMessage="We couldn't find any matches."
25-
placeholder="Start typing a name"
26-
items={inputItems}
27-
/>
28-
)
29-
}
30-
}
16+
const DropdownExample = () => (
17+
<Dropdown
18+
multiple
19+
search
20+
getA11ySelectionMessage={getA11ySelectionMessage}
21+
getA11yStatusMessage={getA11yStatusMessage}
22+
noResultsMessage="We couldn't find any matches."
23+
placeholder="Start typing a name"
24+
items={inputItems}
25+
/>
26+
)
3127

3228
const getA11ySelectionMessage = {
3329
onAdd: item => `${item} has been selected.`,

‎docs/src/examples/components/Dropdown/Types/DropdownExampleSingleSelection.shorthand.tsx

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import * as React from 'react'
2+
import { Dropdown } from '@stardust-ui/react'
3+
4+
const inputItems = [
5+
'Bruce Wayne',
6+
'Natasha Romanoff',
7+
'Steven Strange',
8+
'Alfred Pennyworth',
9+
`Scarlett O'Hara`,
10+
'Imperator Furiosa',
11+
'Bruce Banner',
12+
'Peter Parker',
13+
'Selina Kyle',
14+
]
15+
16+
const DropdownExample = () => (
17+
<Dropdown
18+
getA11yStatusMessage={getA11yStatusMessage}
19+
getA11ySelectionMessage={{
20+
onAdd: item => `${item} has been selected.`,
21+
}}
22+
placeholder="Select your hero"
23+
items={inputItems}
24+
/>
25+
)
26+
27+
const getA11yStatusMessage = ({
28+
isOpen,
29+
itemToString,
30+
previousResultCount,
31+
resultCount,
32+
selectedItem,
33+
}) => {
34+
if (!isOpen) {
35+
return selectedItem ? itemToString(selectedItem) : ''
36+
}
37+
if (!resultCount) {
38+
return 'No results are available.'
39+
}
40+
if (resultCount !== previousResultCount) {
41+
return `${resultCount} result${
42+
resultCount === 1 ? ' is' : 's are'
43+
} available, use up and down arrow keys to navigate. Press Enter key to select.`
44+
}
45+
return ''
46+
}
47+
48+
export default DropdownExample

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

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,15 @@ import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
44

55
const Types = () => (
66
<ExampleSection title="Types">
7+
<ComponentExample
8+
title="Single Selection"
9+
description="A dropdown with single selection."
10+
examplePath="components/Dropdown/Types/DropdownExampleSingleSelection"
11+
/>
712
<ComponentExample
813
title="Multiple Search"
914
description="A dropdown with multiple selection and search."
10-
examplePath="components/Dropdown/Types/DropdownExampleMultipleSearch.shorthand"
15+
examplePath="components/Dropdown/Types/DropdownExampleMultipleSearch"
1116
/>
1217
</ExampleSection>
1318
)

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

Lines changed: 12 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -12,23 +12,18 @@ const inputItems = [
1212
'Peter Parker',
1313
'Selina Kyle',
1414
]
15-
16-
class DropdownExample extends React.Component {
17-
render() {
18-
return (
19-
<Dropdown
20-
multiple
21-
getA11ySelectionMessage={getA11ySelectionMessage}
22-
getA11yStatusMessage={getA11yStatusMessage}
23-
noResultsMessage="We couldn't find any matches."
24-
search
25-
fluid
26-
placeholder="Start typing a name"
27-
items={inputItems}
28-
/>
29-
)
30-
}
31-
}
15+
const DropdownExample = () => (
16+
<Dropdown
17+
multiple
18+
getA11ySelectionMessage={getA11ySelectionMessage}
19+
getA11yStatusMessage={getA11yStatusMessage}
20+
noResultsMessage="We couldn't find any matches."
21+
search
22+
fluid
23+
placeholder="Start typing a name"
24+
items={inputItems}
25+
/>
26+
)
3227

3328
const getA11ySelectionMessage = {
3429
onAdd: item => `${item} has been selected.`,

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

Lines changed: 11 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -49,21 +49,17 @@ const inputItems = [
4949
},
5050
]
5151

52-
class DropdownExample extends React.Component {
53-
render() {
54-
return (
55-
<Dropdown
56-
multiple
57-
getA11yStatusMessage={getA11yStatusMessage}
58-
search
59-
getA11ySelectionMessage={getA11ySelectionMessage}
60-
noResultsMessage="We couldn't find any matches."
61-
placeholder="Start typing a name"
62-
items={inputItems}
63-
/>
64-
)
65-
}
66-
}
52+
const DropdownExample = () => (
53+
<Dropdown
54+
multiple
55+
getA11yStatusMessage={getA11yStatusMessage}
56+
search
57+
getA11ySelectionMessage={getA11ySelectionMessage}
58+
noResultsMessage="We couldn't find any matches."
59+
placeholder="Start typing a name"
60+
items={inputItems}
61+
/>
62+
)
6763

6864
const getA11ySelectionMessage = {
6965
onAdd: item => `${item.header} has been selected.`,

‎docs/src/examples/components/Dropdown/Variations/DropdownExampleMultipleSearchToggleButton.shorthand.tsx

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,22 +13,18 @@ const inputItems = [
1313
'Selina Kyle',
1414
]
1515

16-
class DropdownExample extends React.Component {
17-
render() {
18-
return (
19-
<Dropdown
20-
multiple
21-
getA11yStatusMessage={getA11yStatusMessage}
22-
getA11ySelectionMessage={getA11ySelectionMessage}
23-
noResultsMessage="We couldn't find any matches."
24-
search
25-
placeholder="Start typing a name"
26-
toggleButton
27-
items={inputItems}
28-
/>
29-
)
30-
}
31-
}
16+
const DropdownExample = () => (
17+
<Dropdown
18+
multiple
19+
getA11yStatusMessage={getA11yStatusMessage}
20+
getA11ySelectionMessage={getA11ySelectionMessage}
21+
noResultsMessage="We couldn't find any matches."
22+
search
23+
placeholder="Start typing a name"
24+
toggleButton
25+
items={inputItems}
26+
/>
27+
)
3228

3329
const getA11ySelectionMessage = {
3430
onAdd: item => `${item} has been selected.`,

‎docs/src/examples/components/Dropdown/Variations/index.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,17 @@ const Variations = () => (
77
<ComponentExample
88
title="Multiple Search with Image and Content"
99
description="A multiple search dropdown which items have header, content and image."
10-
examplePath="components/Dropdown/Variations/DropdownExampleMultipleSearchImageAndContent.shorthand"
10+
examplePath="components/Dropdown/Variations/DropdownExampleMultipleSearchImageAndContent"
1111
/>
1212
<ComponentExample
1313
title="Multiple Search Fluid"
1414
description="A multiple search dropdown that fits the width of the container."
15-
examplePath="components/Dropdown/Variations/DropdownExampleMultipleSearchFluid.shorthand"
15+
examplePath="components/Dropdown/Variations/DropdownExampleMultipleSearchFluid"
1616
/>
1717
<ComponentExample
1818
title="Multiple Search with Toggle Button"
1919
description="A multiple search dropdown with toggle button that shows/hides the items list."
20-
examplePath="components/Dropdown/Variations/DropdownExampleMultipleSearchToggleButton.shorthand"
20+
examplePath="components/Dropdown/Variations/DropdownExampleMultipleSearchToggleButton"
2121
/>
2222
</ExampleSection>
2323
)

0 commit comments

Comments
 (0)