Skip to content

Update filter view to use ListItem and Listbox components #9683

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
Draft
olmoh wants to merge 57 commits into
base: main
Choose a base branch
from
Draft

Update filter view to use ListItem and Listbox components #9683

olmoh wants to merge 57 commits into from
+2,142 −1,390

Conversation

@olmoh
Copy link
Collaborator

@olmoh olmoh commented Jan 21, 2026 •
edited by faern
Loading

This PR updates filter view to use new ListItem and Listbox components. This PR includes some behavioral changes to the view to make it align more with how it works on other platforms. These changes include:

  • The ownership filter is now static and does not update based on selection of provider.
  • If the user makes an invalid combination of ownership and provider that we know won't result in any servers, we disable the apply button.
  • The filter accordions default to being expanded when the view is opened.

Fixes DES-2749

This change is Reviewable

olmoh added 30 commits January 15, 2026 13:26
@olmoh
Add props to settings list items
305357d
@olmoh
Add props to user interface list items
db06d11
@olmoh
Add props to vpn settings list items
4465019
@olmoh
Add props to app info list items
e20367e
@olmoh
Export StyledListItemTrigger
760b1f5
@olmoh
Update design for ListItem component
731cbf0
@olmoh
Update design for Listbox component
0b1ca47
@olmoh
Update design for Accordion component
f1b4fa3
@olmoh
Use small text variant as default for switch labels
2782812
@olmoh
Use tiny text as default for list item text
c09d8e6
@olmoh
Combine and animate listbox label and icon
aa2dae5
@olmoh
Update views to align with updated list item design
8a8132c
@olmoh
Rename SelectLanguage file to SelectLanguageView
8f288c4
@olmoh
Add useLocale hook
492e334
@olmoh
Update select language view to align with updated list item design
8a7c73f
@olmoh
Move setup of device list item context variables into context provider
85157d3
@olmoh
Update DeviceList and related components to align with updated design
7680ba0
@olmoh
Adjust AnimatedListItem transition
81b6018
@olmoh
Add ListboxFooter component
ba73451
@olmoh
Add ListboxFooterText component
f0263fc
@olmoh
Add ListboxHeader component
cbe221f
@olmoh
Add SettingsListboxHeader component
5c29ffd
@olmoh
Refactor SettingsListbox to expose ListItem through namespace
e6895ca
@olmoh
Rename ListboxItem to ListboxHeaderItem
3a211dc
@olmoh
Rename AccordionHeader to AccordionHeaderItem
b5df174
@olmoh
Add ListItemFooterText component
65070f4
@olmoh
Use FooterText in list item footers
55230e6
@olmoh
Add AccordionHeader component
ad21b04
@olmoh
Use data property instead of transient prop in AccordionHeaderItem
51c0e63
@olmoh
Add SettingsAccordionHeader component
0e37af2
olmoh added 22 commits January 15, 2026 13:28
@olmoh
Use SettingsListbox in ownership filter
efad2bf
@olmoh
Move id generation into AccordionContext
cc7a47b
@olmoh
Add checkbox checkmark icon
aae2a3a
@olmoh
Refactor Switch into an input element
da9e34c
@olmoh
Rename SwitchThumb to SwitchInput
7bb4558
@olmoh
Add Checkbox component
0f73271
@olmoh
Move filter view hooks into hooks folder
bc199ab
@olmoh
Move filter view components to separate folders
3d0b65b
@olmoh
Move filter view utils to separate folders
4c9eb3e
@olmoh
Rename FilterByOwnership to OwnershipFilter
4771c89
@olmoh
Rename FilterByProvider to ProviderFilter
878707a
@olmoh
Allow selecting multiple options in Listbox
7de7dab
@olmoh
Add Checkbox to ListItem and ListboxOption
24a3ab2
@olmoh
Add SettingsListbox component
75932dd
@olmoh
Add useProviders feature hook
150ea64
@olmoh
Add useOwnership feature hook
9161e63
@olmoh
Refactor FilterView to use Listbox for filters
b1612d8
@olmoh
Fix visual artifact when content changes inside Accordion
c7a43d8
@olmoh
Update filter accordions to be open when opening view
8efad83
@olmoh
Update checkbox selectors for filter tests
28d2876
@olmoh
Handle relay settings event in tests when applying filters
2d89b18
@olmoh
Update translations
7c00f8d
@linear
Copy link

linear bot commented Jan 21, 2026

DES-2749 Fix stretched/compressed content when Accordion is expanded/collapsed

DES-2795 Update filter view with new ListItems

@olmoh olmoh changed the base branch from main to update-listitem-styling-to-match-new-design-des-2741 January 21, 2026 08:19
@olmoh olmoh force-pushed the update-listitem-styling-to-match-new-design-des-2741 branch 4 times, most recently from 4be1fbf to 8ec016f Compare January 26, 2026 11:14
@tobias-jarvelov tobias-jarvelov force-pushed the update-listitem-styling-to-match-new-design-des-2741 branch from 8ec016f to 23de5bc Compare January 26, 2026 15:50
Base automatically changed from update-listitem-styling-to-match-new-design-des-2741 to main January 26, 2026 15:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@olmoh