Skip to content

Commit

Permalink
feat(dropdown-list): implements multiselect variant of dropdown-list (#…
Browse files Browse the repository at this point in the history 
…805)

* feat(dropdown-list): implements multiselect variant of dropdown-list
  • Loading branch information
@ogermain-kronos
ogermain-kronos authored Apr 22, 2024
1 parent 65708c8 commit 4889251
Show file tree
Hide file tree
Showing 9 changed files with 810 additions and 89 deletions.
4 changes: 2 additions & 2 deletions packages/react/src/components/date-picker/calendar-header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ export const CalendarHeader: VoidFunctionComponent<CalendarHeaderProps> = ({
ariaLabel={t('monthSelectLabel')}
data-testid="month-select"
options={monthsOptions}
onChange={(options) => {
onChange={(options: DropdownListOption) => {
changeMonth(months.indexOf(options.label));
}}
value={monthsOptions[getMonth(date)].value}
Expand All @@ -100,7 +100,7 @@ export const CalendarHeader: VoidFunctionComponent<CalendarHeaderProps> = ({
ariaLabel={t('yearSelectLabel')}
data-testid="year-select"
options={yearsOptions}
onChange={(options) => {
onChange={(options: DropdownListOption) => {
changeYear(parseInt(options.value, 10));
}}
value={getYear(date).toString()}
Expand Down
18 changes: 9 additions & 9 deletions packages/react/src/components/date-picker/date-picker.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2024,11 +2024,11 @@ input + .c1 {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: var(--size-2x);
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
min-height: var(--size-2x);
padding: 0 var(--spacing-1x);
text-wrap: none;
-webkit-user-select: none;
Expand Down Expand Up @@ -2446,7 +2446,7 @@ label + .c3 {
aria-expanded="false"
aria-invalid="false"
aria-label="Select a month"
aria-labelledby="uuid2_label"
aria-labelledby="uuid2_label uuid2_listbox_october_label"
aria-required="false"
class="c12"
data-testid="month-select"
Expand Down Expand Up @@ -2488,7 +2488,7 @@ label + .c3 {
aria-expanded="false"
aria-invalid="false"
aria-label="Select a year"
aria-labelledby="uuid3_label"
aria-labelledby="uuid3_label uuid3_listbox_2010_label"
aria-required="false"
class="c12"
data-testid="year-select"
Expand Down Expand Up @@ -3252,11 +3252,11 @@ input + .c1 {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: var(--size-2x);
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
min-height: var(--size-2x);
padding: 0 var(--spacing-1x);
text-wrap: none;
-webkit-user-select: none;
Expand Down Expand Up @@ -3680,7 +3680,7 @@ label + .c3 {
aria-expanded="false"
aria-invalid="false"
aria-label="Select a month"
aria-labelledby="uuid2_label"
aria-labelledby="uuid2_label uuid2_listbox_october_label"
aria-required="false"
class="c12"
data-testid="month-select"
Expand Down Expand Up @@ -3722,7 +3722,7 @@ label + .c3 {
aria-expanded="false"
aria-invalid="false"
aria-label="Select a year"
aria-labelledby="uuid3_label"
aria-labelledby="uuid3_label uuid3_listbox_2010_label"
aria-required="false"
class="c12"
data-testid="year-select"
Expand Down Expand Up @@ -4413,11 +4413,11 @@ input + .c1 {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
height: var(--size-2halfx);
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
min-height: var(--size-2halfx);
padding: 0 var(--spacing-1x);
text-wrap: none;
-webkit-user-select: none;
Expand Down Expand Up @@ -4833,7 +4833,7 @@ label + .c3 {
aria-expanded="false"
aria-invalid="false"
aria-label="Select a month"
aria-labelledby="uuid2_label"
aria-labelledby="uuid2_label uuid2_listbox_october_label"
aria-required="false"
class="c12"
data-testid="month-select"
Expand Down Expand Up @@ -4875,7 +4875,7 @@ label + .c3 {
aria-expanded="false"
aria-invalid="false"
aria-label="Select a year"
aria-labelledby="uuid3_label"
aria-labelledby="uuid3_label uuid3_listbox_2010_label"
aria-required="false"
class="c12"
data-testid="year-select"
Expand Down
51 changes: 51 additions & 0 deletions packages/react/src/components/dropdown-list/dropdown-list.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,21 @@ describe('Dropdown list', () => {
const wrapper = shallow(<DropdownList options={options} defaultValue="" />);

expect(getByTestId(wrapper, 'textbox').prop('value')).toBe('');
});

test('the specified defaultValues are independently displayed when list is multiselect', () => {
const wrapper = shallow(<DropdownList options={provinces} defaultValue={['nl', 'qc']} multiselect />);

expect(getByTestId(wrapper, 'listboxtag-qc').exists()).toBe(true);
expect(getByTestId(wrapper, 'listboxtag-nl').exists()).toBe(true);
expect(getByTestId(wrapper, 'tag-wrapper').children()).toHaveLength(2);
expect(getByTestId(wrapper, 'input').prop('value')).toBe('nl|qc');
});

test('no defaultValues are displayed when not specified and list is multiselect', () => {
const wrapper = shallow(<DropdownList options={provinces} multiselect />);

expect(getByTestId(wrapper, 'tag-wrapper').children()).toHaveLength(0);
expect(getByTestId(wrapper, 'input').prop('value')).toBe('');
});
});
Expand Down Expand Up @@ -129,6 +144,16 @@ describe('Dropdown list', () => {

expect(getByTestId(wrapper, 'textbox').prop('value')).toBe('bc');
});

test('clicking an option selects it and adds it to the input values when list is multiselect', () => {
const wrapper = mountWithTheme(<DropdownList options={provinces} defaultOpen multiselect />);

getByTestId(wrapper, 'listitem-nl').simulate('click');
getByTestId(wrapper, 'listitem-qc').simulate('click');

expect(getByTestId(wrapper, 'textbox').prop('value')).toBe('nl|qc');
expect(getByTestId(wrapper, 'input').prop('value')).toBe('nl|qc');
});
});

describe('component is controlled', () => {
Expand Down Expand Up @@ -313,6 +338,20 @@ describe('Dropdown list', () => {
expect(getByTestId(wrapper, 'input').prop('value')).toBe('sk');
});

test('Enter removes the focused Tag when list is multiselect', () => {
const wrapper = mountWithTheme(
<DropdownList options={provinces} defaultValue={['ab', 'bc']} defaultOpen multiselect />,
);

getByTestId(wrapper, 'listboxtag-bc').simulate(
'keydown',
{ key: 'Enter', preventDefault: jest.fn() },
);

expect(getByTestId(wrapper, 'textbox').prop('value')).toBe('ab');
expect(getByTestId(wrapper, 'input').prop('value')).toBe('ab');
});

describe('when typing printable characters', () => {
test('listbox opens when typing printable characters', () => {
const wrapper = shallow(<DropdownList options={provinces} />);
Expand Down Expand Up @@ -427,4 +466,16 @@ describe('Dropdown list', () => {

expect(tree).toMatchSnapshot();
});

test('matches the snapshot (multiselect)', () => {
const tree = renderWithProviders(
<DropdownList
defaultOpen
options={provinces}
multiselect
/>,
);

expect(tree).toMatchSnapshot();
});
});
Loading

0 comments on commit 4889251

Please sign in to comment.