Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(react): refactor filterable multi select to function #10198

Merged
merged 21 commits into from
Dec 7, 2021
Merged
Changes from 1 commit
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
b0e0a3c
chore: check in progress
abbeyhrt Nov 18, 2021
505d85b
feat(react): refactor FilterableMultiSelect
abbeyhrt Nov 30, 2021
9389ff1
fix(react): reset Filterable field on multiselct
abbeyhrt Nov 30, 2021
efe4e8f
fix(styles): remove unnecessary styles
abbeyhrt Nov 30, 2021
9360c13
Merge branch 'main' into feat/filterable-multi-select
abbeyhrt Nov 30, 2021
8803a8e
fix(react): update snapshot
abbeyhrt Dec 1, 2021
d4477c0
Merge branch 'feat/filterable-multi-select' of github.com:abbeyhrt/my…
abbeyhrt Dec 1, 2021
1192581
Merge branch 'main' into feat/filterable-multi-select
abbeyhrt Dec 1, 2021
4185965
Merge branch 'main' into feat/filterable-multi-select
abbeyhrt Dec 2, 2021
d889a67
Merge branch 'main' into feat/filterable-multi-select
abbeyhrt Dec 3, 2021
cbe473f
chore(react): update to follow code style guidelines
abbeyhrt Dec 3, 2021
b677ceb
Update packages/react/src/components/MultiSelect/next/FilterableMulti…
abbeyhrt Dec 3, 2021
ef8f824
Merge branch 'main' into feat/filterable-multi-select
abbeyhrt Dec 6, 2021
de9e788
Update packages/react/src/components/MultiSelect/next/FilterableMulti…
abbeyhrt Dec 6, 2021
acad918
Update packages/react/src/components/MultiSelect/next/__tests__/Filte…
abbeyhrt Dec 6, 2021
b6265cc
fix(react): clear input and reset focus through user action
abbeyhrt Dec 7, 2021
3bbdf7d
Merge branch 'main' into feat/filterable-multi-select
abbeyhrt Dec 7, 2021
e589eee
Merge branch 'feat/filterable-multi-select' of github.com:abbeyhrt/my…
abbeyhrt Dec 7, 2021
24b9e31
chore(react): format file
abbeyhrt Dec 7, 2021
726e9d6
Merge branch 'main' into feat/filterable-multi-select
abbeyhrt Dec 7, 2021
aaf6ffc
Merge branch 'main' into feat/filterable-multi-select
kodiakhq[bot] Dec 7, 2021
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat(react): refactor FilterableMultiSelect
  • Loading branch information
abbeyhrt committed Nov 30, 2021
commit 505d85b4004046d754a438f26d16b925b0a49a72
Original file line number Diff line number Diff line change
@@ -0,0 +1,187 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`FilterableMultiSelect should render 1`] = `
<ForwardRef(FilterableMultiSelect)
ariaLabel="Choose an item"
compareItems={[Function]}
direction="bottom"
disabled={false}
filterItems={[Function]}
id="test-filterable-multiselect"
initialSelectedItems={Array []}
itemToString={[Function]}
items={
Array [
Object {
"id": "id-0",
"label": "Item 0",
"value": 0,
},
Object {
"id": "id-1",
"label": "Item 1",
"value": 1,
},
Object {
"id": "id-2",
"label": "Item 2",
"value": 2,
},
Object {
"id": "id-3",
"label": "Item 3",
"value": 3,
},
Object {
"id": "id-4",
"label": "Item 4",
"value": 4,
},
]
}
light={false}
locale="en"
onChange={[MockFunction]}
onMenuChange={[MockFunction]}
open={false}
placeholder="Placeholder..."
selectionFeedback="top-after-reopen"
sortItems={[Function]}
>
<Selection
disabled={false}
initialSelectedItems={Array []}
onChange={[Function]}
render={[Function]}
>
<Downshift
defaultHighlightedIndex={null}
defaultIsOpen={false}
environment={[Window]}
getA11yStatusMessage={[Function]}
highlightedIndex={null}
id="test-filterable-multiselect"
inputId="test-filterable-multiselect-input"
inputValue=""
isOpen={false}
itemToString={[Function]}
labelId="test-filterable-multiselect-label"
menuId="test-filterable-multiselect__menu"
onChange={[Function]}
onInputValueChange={[Function]}
onOuterClick={[Function]}
onSelect={[Function]}
onStateChange={[Function]}
onUserAction={[Function]}
scrollIntoView={[Function]}
selectedItem={Array []}
selectedItemChanged={[Function]}
stateReducer={[Function]}
suppressRefError={false}
>
<div
className="bx--multi-select__wrapper bx--list-box__wrapper"
>
<ListBox
className="bx--multi-select bx--combo-box bx--multi-select--filterable"
disabled={false}
isOpen={false}
light={false}
type="default"
>
<div
className="bx--multi-select bx--combo-box bx--multi-select--filterable bx--list-box"
onClick={[Function]}
onKeyDown={[Function]}
>
<div
className="bx--list-box__field"
>
<input
aria-activedescendant={null}
aria-autocomplete="list"
aria-controls={null}
aria-describedby={null}
aria-expanded={false}
aria-haspopup="listbox"
aria-labelledby={null}
aria-owns={null}
autoComplete="off"
className="bx--text-input bx--text-input--empty"
disabled={false}
id="test-filterable-multiselect-input"
onBlur={[Function]}
onChange={[Function]}
onClick={[Function]}
onFocus={[Function]}
onKeyDown={[Function]}
placeholder="Placeholder..."
role="combobox"
value=""
/>
<ListBoxTrigger
aria-haspopup={true}
aria-label="open menu"
data-toggle={true}
disabled={false}
isOpen={false}
onBlur={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
onMouseUp={[Function]}
role="button"
translateWithId={[Function]}
type="button"
>
<button
aria-haspopup={true}
aria-label="Open"
className="bx--list-box__menu-icon"
data-toggle={true}
disabled={false}
onBlur={[Function]}
onClick={[Function]}
onKeyDown={[Function]}
onKeyUp={[Function]}
onMouseUp={[Function]}
role="button"
tabIndex="-1"
title="Open"
type="button"
>
<ForwardRef(ChevronDown16)>
<Icon
fill="currentColor"
height={16}
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
>
<svg
aria-hidden={true}
fill="currentColor"
focusable="false"
height={16}
preserveAspectRatio="xMidYMid meet"
viewBox="0 0 16 16"
width={16}
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
/>
</svg>
</Icon>
</ForwardRef(ChevronDown16)>
</button>
</ListBoxTrigger>
</div>
</div>
</ListBox>
</div>
</Downshift>
</Selection>
</ForwardRef(FilterableMultiSelect)>
`;
4 changes: 4 additions & 0 deletions packages/styles/scss/components/list-box/_list-box.scss
Original file line number Diff line number Diff line change
@@ -556,6 +556,10 @@ $list-box-menu-width: rem(300px);

&:active {
background-color: $layer-selected;

&:hover {
background-color: $layer-selected-hover;
}
}
}