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.

Sign up for GitHub

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

Jump to bottom

fix(dropdowns): pass user ID's to Downshift #6326

Merged
merged 9 commits into from
Jun 24, 2020
Merged

fix(dropdowns): pass user ID's to Downshift #6326

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
f58c57e
fix(dropdowns): pass user supplied IDs to Downshift
dakahn Jun 22, 2020
e933632
test(Dropdown): update snappies
dakahn Jun 22, 2020
d59e05e
Merge branch 'master' into 6315-pass-id-to-downshift
dakahn Jun 22, 2020
a314c14
Merge branch 'master' into 6315-pass-id-to-downshift
tw15egan Jun 23, 2020
79201b9
Apply suggestions from code review
joshblack Jun 23, 2020
a5de9c6
Merge branch 'master' into 6315-pass-id-to-downshift
joshblack Jun 23, 2020
dd04d5f
test(MultiSelect): update test to match new id shape
dakahn Jun 23, 2020
bb6b720
fix(dropdown): fix id locations for each dropdown variant
joshblack Jun 24, 2020
768d8d4
chore(listbox): remove unused snapshot
joshblack Jun 24, 2020
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
2 changes: 1 addition & 1 deletion packages/react/src/components/ComboBox/ComboBox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -337,6 +337,7 @@ export default class ComboBox extends React.Component {
inputValue={this.state.inputValue || ''}
itemToString={itemToString}
defaultSelectedItem={initialSelectedItem}
id={id}
selectedItem={selectedItem}>
{({
getToggleButtonProps,
Expand Down Expand Up @@ -367,7 +368,6 @@ export default class ComboBox extends React.Component {
light={light}
size={size}>
<ListBox.Field
id={id}
{...getToggleButtonProps({
disabled,
onClick: this.onToggleClick(isOpen),
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/Dropdown/Dropdown.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,7 @@ function Dropdown({
itemToString,
initialSelectedItem,
onSelectedItemChange,
id,
};

// only set selectedItem if the prop is defined. Setting if it is undefined
Expand Down Expand Up @@ -130,7 +131,6 @@ function Dropdown({
<WarningFilled16 className={`${prefix}--list-box__invalid-icon`} />
)}
<button
id={id}
className={`${prefix}--list-box__field`}
disabled={disabled}
aria-disabled={disabled}
Expand Down
88 changes: 44 additions & 44 deletions packages/react/src/components/Dropdown/__snapshots__/Dropdown-test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,10 +63,10 @@ exports[`Dropdown should render 1`] = `
aria-disabled={false}
aria-expanded={false}
aria-haspopup="listbox"
aria-labelledby="downshift-0-label downshift-0-toggle-button"
aria-labelledby="[object Object]-label [object Object]-toggle-button"
className="bx--list-box__field"
disabled={false}
id="downshift-0-toggle-button"
id="[object Object]-toggle-button"
onClick={[Function]}
onKeyDown={[Function]}
>
Expand Down Expand Up @@ -121,18 +121,18 @@ exports[`Dropdown should render 1`] = `
</ListBoxMenuIcon>
</button>
<ListBoxMenu
aria-labelledby="downshift-0-label"
id="downshift-0-menu"
aria-labelledby="[object Object]-label"
id="[object Object]-menu"
onBlur={[Function]}
onKeyDown={[Function]}
onMouseLeave={[Function]}
role="listbox"
tabIndex={-1}
>
<div
aria-labelledby="downshift-0-label"
aria-labelledby="[object Object]-label"
className="bx--list-box__menu"
id="downshift-0-menu"
id="[object Object]-menu"
onBlur={[Function]}
onKeyDown={[Function]}
onMouseLeave={[Function]}
Expand Down Expand Up @@ -209,10 +209,10 @@ exports[`Dropdown should render custom item components 1`] = `
aria-disabled={false}
aria-expanded={true}
aria-haspopup="listbox"
aria-labelledby="downshift-6-label downshift-6-toggle-button"
aria-labelledby="[object Object]-label [object Object]-toggle-button"
className="bx--list-box__field"
disabled={false}
id="downshift-6-toggle-button"
id="[object Object]-toggle-button"
onClick={[Function]}
onKeyDown={[Function]}
>
Expand Down Expand Up @@ -267,18 +267,18 @@ exports[`Dropdown should render custom item components 1`] = `
</ListBoxMenuIcon>
</button>
<ListBoxMenu
aria-labelledby="downshift-6-label"
id="downshift-6-menu"
aria-labelledby="[object Object]-label"
id="[object Object]-menu"
onBlur={[Function]}
onKeyDown={[Function]}
onMouseLeave={[Function]}
role="listbox"
tabIndex={-1}
>
<div
aria-labelledby="downshift-6-label"
aria-labelledby="[object Object]-label"
className="bx--list-box__menu"
id="downshift-6-menu"
id="[object Object]-menu"
onBlur={[Function]}
onKeyDown={[Function]}
onMouseLeave={[Function]}
Expand All @@ -287,18 +287,18 @@ exports[`Dropdown should render custom item components 1`] = `
>
<ListBoxMenuItem
aria-selected="false"
id="downshift-6-item-0"
id="[object Object]-item-0"
isActive={false}
isHighlighted={false}
key="downshift-6-item-0"
key="[object Object]-item-0"
onClick={[Function]}
onMouseMove={[Function]}
role="option"
>
<div
aria-selected="false"
className="bx--list-box__menu-item"
id="downshift-6-item-0"
id="[object Object]-item-0"
onClick={[Function]}
onMouseMove={[Function]}
role="option"
Expand All @@ -308,7 +308,7 @@ exports[`Dropdown should render custom item components 1`] = `
>
<itemToElement
id="id-0"
key="downshift-6-item-0"
key="[object Object]-item-0"
label="Item 0"
value={0}
>
Expand All @@ -323,18 +323,18 @@ exports[`Dropdown should render custom item components 1`] = `
</ListBoxMenuItem>
<ListBoxMenuItem
aria-selected="false"
id="downshift-6-item-1"
id="[object Object]-item-1"
isActive={false}
isHighlighted={false}
key="downshift-6-item-1"
key="[object Object]-item-1"
onClick={[Function]}
onMouseMove={[Function]}
role="option"
>
<div
aria-selected="false"
className="bx--list-box__menu-item"
id="downshift-6-item-1"
id="[object Object]-item-1"
onClick={[Function]}
onMouseMove={[Function]}
role="option"
Expand All @@ -344,7 +344,7 @@ exports[`Dropdown should render custom item components 1`] = `
>
<itemToElement
id="id-1"
key="downshift-6-item-1"
key="[object Object]-item-1"
label="Item 1"
value={1}
>
Expand All @@ -359,18 +359,18 @@ exports[`Dropdown should render custom item components 1`] = `
</ListBoxMenuItem>
<ListBoxMenuItem
aria-selected="false"
id="downshift-6-item-2"
id="[object Object]-item-2"
isActive={false}
isHighlighted={false}
key="downshift-6-item-2"
key="[object Object]-item-2"
onClick={[Function]}
onMouseMove={[Function]}
role="option"
>
<div
aria-selected="false"
className="bx--list-box__menu-item"
id="downshift-6-item-2"
id="[object Object]-item-2"
onClick={[Function]}
onMouseMove={[Function]}
role="option"
Expand All @@ -380,7 +380,7 @@ exports[`Dropdown should render custom item components 1`] = `
>
<itemToElement
id="id-2"
key="downshift-6-item-2"
key="[object Object]-item-2"
label="Item 2"
value={2}
>
Expand All @@ -395,18 +395,18 @@ exports[`Dropdown should render custom item components 1`] = `
</ListBoxMenuItem>
<ListBoxMenuItem
aria-selected="false"
id="downshift-6-item-3"
id="[object Object]-item-3"
isActive={false}
isHighlighted={false}
key="downshift-6-item-3"
key="[object Object]-item-3"
onClick={[Function]}
onMouseMove={[Function]}
role="option"
>
<div
aria-selected="false"
className="bx--list-box__menu-item"
id="downshift-6-item-3"
id="[object Object]-item-3"
onClick={[Function]}
onMouseMove={[Function]}
role="option"
Expand All @@ -416,7 +416,7 @@ exports[`Dropdown should render custom item components 1`] = `
>
<itemToElement
id="id-3"
key="downshift-6-item-3"
key="[object Object]-item-3"
label="Item 3"
value={3}
>
Expand All @@ -431,18 +431,18 @@ exports[`Dropdown should render custom item components 1`] = `
</ListBoxMenuItem>
<ListBoxMenuItem
aria-selected="false"
id="downshift-6-item-4"
id="[object Object]-item-4"
isActive={false}
isHighlighted={false}
key="downshift-6-item-4"
key="[object Object]-item-4"
onClick={[Function]}
onMouseMove={[Function]}
role="option"
>
<div
aria-selected="false"
className="bx--list-box__menu-item"
id="downshift-6-item-4"
id="[object Object]-item-4"
onClick={[Function]}
onMouseMove={[Function]}
role="option"
Expand All @@ -452,7 +452,7 @@ exports[`Dropdown should render custom item components 1`] = `
>
<itemToElement
id="id-4"
key="downshift-6-item-4"
key="[object Object]-item-4"
label="Item 4"
value={4}
>
Expand Down Expand Up @@ -513,10 +513,10 @@ exports[`Dropdown should render with strings as items 1`] = `
aria-disabled={false}
aria-expanded={true}
aria-haspopup="listbox"
aria-labelledby="downshift-4-label downshift-4-toggle-button"
aria-labelledby="[object Object]-label [object Object]-toggle-button"
className="bx--list-box__field"
disabled={false}
id="downshift-4-toggle-button"
id="[object Object]-toggle-button"
onClick={[Function]}
onKeyDown={[Function]}
>
Expand Down Expand Up @@ -571,18 +571,18 @@ exports[`Dropdown should render with strings as items 1`] = `
</ListBoxMenuIcon>
</button>
<ListBoxMenu
aria-labelledby="downshift-4-label"
id="downshift-4-menu"
aria-labelledby="[object Object]-label"
id="[object Object]-menu"
onBlur={[Function]}
onKeyDown={[Function]}
onMouseLeave={[Function]}
role="listbox"
tabIndex={-1}
>
<div
aria-labelledby="downshift-4-label"
aria-labelledby="[object Object]-label"
className="bx--list-box__menu"
id="downshift-4-menu"
id="[object Object]-menu"
onBlur={[Function]}
onKeyDown={[Function]}
onMouseLeave={[Function]}
Expand All @@ -591,10 +591,10 @@ exports[`Dropdown should render with strings as items 1`] = `
>
<ListBoxMenuItem
aria-selected="false"
id="downshift-4-item-0"
id="[object Object]-item-0"
isActive={false}
isHighlighted={false}
key="downshift-4-item-0"
key="[object Object]-item-0"
onClick={[Function]}
onMouseMove={[Function]}
role="option"
Expand All @@ -603,7 +603,7 @@ exports[`Dropdown should render with strings as items 1`] = `
<div
aria-selected="false"
className="bx--list-box__menu-item"
id="downshift-4-item-0"
id="[object Object]-item-0"
onClick={[Function]}
onMouseMove={[Function]}
role="option"
Expand All @@ -618,10 +618,10 @@ exports[`Dropdown should render with strings as items 1`] = `
</ListBoxMenuItem>
<ListBoxMenuItem
aria-selected="false"
id="downshift-4-item-1"
id="[object Object]-item-1"
isActive={false}
isHighlighted={false}
key="downshift-4-item-1"
key="[object Object]-item-1"
onClick={[Function]}
onMouseMove={[Function]}
role="option"
Expand All @@ -630,7 +630,7 @@ exports[`Dropdown should render with strings as items 1`] = `
<div
aria-selected="false"
className="bx--list-box__menu-item"
id="downshift-4-item-1"
id="[object Object]-item-1"
onClick={[Function]}
onMouseMove={[Function]}
role="option"
Expand Down
6 changes: 2 additions & 4 deletions packages/react/src/components/MultiSelect/MultiSelect.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -83,6 +83,7 @@ function MultiSelect({
...downshiftProps,
highlightedIndex,
isOpen,
id,
itemToString,
onStateChange,
selectedItem: controlledSelectedItems,
Expand Down Expand Up @@ -114,7 +115,6 @@ function MultiSelect({
const helperId = !helperText
? undefined
: `multiselect-helper-text-${multiSelectInstanceId}`;
const labelId = `multiselect-label-${multiSelectInstanceId}`;
const fieldLabelId = `multiselect-field-label-${multiSelectInstanceId}`;
const helperClasses = cx(`${prefix}--form__helper-text`, {
[`${prefix}--form__helper-text--disabled`]: disabled,
Expand Down Expand Up @@ -172,12 +172,11 @@ function MultiSelect({
return (
<div className={wrapperClasses}>
{titleText && (
<label id={labelId} className={titleClasses} {...getLabelProps()}>
<label className={titleClasses} {...getLabelProps()}>
{titleText}
</label>
)}
<ListBox
id={id}
type={type}
size={size}
className={className}
Expand All @@ -190,7 +189,6 @@ function MultiSelect({
<WarningFilled16 className={`${prefix}--list-box__invalid-icon`} />
)}
<button
id={id}
className={`${prefix}--list-box__field`}
disabled={disabled}
aria-disabled={disabled}
Expand Down
2 changes: 1 addition & 1 deletion packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -275,7 +275,7 @@ describe('MultiSelect', () => {
/>
);

expect(document.getElementById('custom-id')).toBeTruthy();
expect(document.getElementById('custom-id-menu')).toBeTruthy();
joshblack marked this conversation as resolved.
Show resolved Hide resolved
});

it('should support a custom itemToString with object items', () => {
Expand Down