Device manager - updated dropdown style in filtered device list (PSG-689) (#9226)

* add FilterDropdown wrapper on Dropdown for filter styles

* test and fix strict errors

* fix comment
This commit is contained in:
Kerry 2022-08-30 19:11:33 +02:00 committed by GitHub
parent 825a0af4a9
commit 50f6986f6c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 389 additions and 20 deletions

View file

@ -0,0 +1,137 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`<FilterDropdown /> renders dropdown options in menu 1`] = `
<div
class="mx_Dropdown_menu"
id="test_listbox"
role="listbox"
>
<div
aria-selected="false"
class="mx_Dropdown_option"
id="test__one"
role="option"
>
<div
class="mx_FilterDropdown_option"
data-testid="filter-option-one"
>
<div
class="mx_FilterDropdown_optionSelectedIcon"
/>
<span
class="mx_FilterDropdown_optionLabel"
>
Option one
</span>
</div>
</div>
<div
aria-selected="false"
class="mx_Dropdown_option"
id="test__two"
role="option"
>
<div
class="mx_FilterDropdown_option"
data-testid="filter-option-two"
>
<span
class="mx_FilterDropdown_optionLabel"
>
Option two
</span>
<span
class="mx_FilterDropdown_optionDescription"
>
with description
</span>
</div>
</div>
</div>
`;
exports[`<FilterDropdown /> renders selected option 1`] = `
<div>
<div
class="mx_Dropdown mx_FilterDropdown test"
>
<div
aria-describedby="test_value"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="test label"
aria-owns="test_input"
class="mx_AccessibleButton mx_Dropdown_input mx_no_textinput"
role="button"
tabindex="0"
>
<div
class="mx_Dropdown_option"
id="test_value"
>
Option one
</div>
<span
class="mx_Dropdown_arrow"
/>
</div>
</div>
</div>
`;
exports[`<FilterDropdown /> renders selected option with selectedLabel 1`] = `
<div>
<div
class="mx_Dropdown mx_FilterDropdown test"
>
<div
aria-describedby="test_value"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="test label"
aria-owns="test_input"
class="mx_AccessibleButton mx_Dropdown_input mx_no_textinput"
role="button"
tabindex="0"
>
<div
class="mx_Dropdown_option"
id="test_value"
>
Show: Option one
</div>
<span
class="mx_Dropdown_arrow"
/>
</div>
</div>
</div>
`;
exports[`<FilterDropdown /> renders when selected option is not in options 1`] = `
<div>
<div
class="mx_Dropdown mx_FilterDropdown test"
>
<div
aria-describedby="test_value"
aria-expanded="false"
aria-haspopup="listbox"
aria-label="test label"
aria-owns="test_input"
class="mx_AccessibleButton mx_Dropdown_input mx_no_textinput"
role="button"
tabindex="0"
>
<div
class="mx_Dropdown_option"
id="test_value"
/>
<span
class="mx_Dropdown_arrow"
/>
</div>
</div>
</div>
`;