#671 feat: add FilterList display mode for enum filters by kevinmdd · Pull Request #681 · Translation-Commons/lang-nav

kevinmdd · 2026-06-18T22:00:37Z

Fixes #671

Summary: Replaced dropdown/button displays for enum filters with a new Filter List display mode that shows options as a compact vertical list, showing the first 4 with an "Expand All" toggle when there are 5 or more.

User experience
- Enum filters (Language Authority, Modality, Languoid Type, Territory Type, ISO Language Status) now show as a vertical plain-text list instead of a dropdown or button group
- Options are visible at a glance without needing to open a dropdown
- "Expand All" / "Collapse" button appears when there are more than 4 options
Logical changes
- Added FilterList to the SelectorDisplay enum
- Selector now slices visible options to the first 4 when in FilterList mode and not expanded
- FilterListMoreButton component added to Selector for the expand/collapse toggle
- SelectorContainer renders as flex-column with full width for FilterList
- useClickOutside guarded to not collapse FilterList state on outside click
Data
- No data changes
Refactors
- LanguageModalitySelector, LanguageScopeSelector, TerritoryScopeSelector, VitalitySelector updated to accept and forward a display prop
- VitalitySelector.test updated to include FilterList in the SelectorDisplay mock and added "Expand All" click before checking all options are visible

Out of scope/Future work: The dual meaning of expanded state (dropdown open vs filter list expanded) could be split into two separate state variables for clarity.

Test Plan and Screenshots

How to test the changes in this PR: Run npm run dev, open the Filter panel, then verify enum filters show as vertical lists and "Expand All" works.

Before	After

Checklist

Feel free to check off or just delete items in this section as you have completed them.

Summary

Clear description of what and why
Scope kept focused; note follow-ups if any
Set yourself as assignee
Mention the issue (usually by writing "Fixes #ISSUE_NUMBER" or "Closes #ISSUE_NUMBER")

Testing

Changes

Visual changes

Add screenshots to the table template at the top of this file. You can include images inside the table
Drag and drop images in the GitHub PR comment box to upload screenshots
Since more views can be reproduced by just sharing the URL -- add links (eg. link) to the relevant page and/or conditions to reproduce the view.

Data changes

TSV, SVG, etc. edits in public/data/
Corresponding readmes updated in public/data/
Load/connect/compute updates in src/features/data/ including how we aggregate data or compute derived values

Internal changes

Logical changes
Refactors, moving files around
If you notice any changes that require explanations, make sure to include the explanations in the code as well.

Docs

Code is self-documenting, or if not, comments are added where needed.
Updated markdown readme files documenting how the code behaves or how to develop in case there are any relevant changes to make.

conradarcturus

This is a very solid first PR -- great job!

I have some stylistic comments about moving some of the style statements to CSS and 1 change about left-margins -- but that's all pretty small so I'll approve so you don't have to wait for a re-review.

The screenshot tests are failing but that's okay because you are intentionally updating the interface appearance. You can see the results if you tag update-baselines to automatically regenerate the screenshots.

conradarcturus · 2026-06-21T01:09:04Z

  const [expanded, setExpanded] = useState(false);
  const optionsRef = useClickOutside(() => {
-    setTimeout(() => setExpanded(false), 100);
+    // Only auto-collapse for dropdown modes; FilterList is a persistent filter UI


Thanks for the comment

conradarcturus · 2026-06-21T01:10:42Z

+          position: isFilterList ? undefined : 'relative',
+          display: 'flex',
+          width: isFilterList ? '100%' : undefined,
+          alignItems: isFilterList ? 'flex-start' : 'center',
+          flexDirection: isFilterList ? 'column' : 'row',


Oof there is a lot of style exceptions. As you saw when you worked on this component, I generally avoided css and instead inlined style. That helps some comprehension & control over the styles. However I have since learned that was a Facebook company thing.

When its compact it isn't a big deal, but here it is taking up a lot of space. Can you instead give this a css class name (eg but not necessary SelectorButtons) and move all of these styles into controls.css for .SelectorButtons and .filterList .SelectorButtons

conradarcturus · 2026-06-21T01:19:53Z

+              display: 'flex',
+              flexDirection: 'column',
+              width: '100%',
+              alignItems: 'flex-start',
+              alignSelf: 'stretch',


Can you put these in controls.css under ".selector.filterList`?

conradarcturus · 2026-06-21T01:25:37Z

+      return (
+        <div
+          ref={containerRef}
+          style={{


For this (and the ButtonList display option above) -- we should probably move these styles to the CSS and give this component a classname eg. SelectorOptions. I will note though that ButtonList's marginLeft should stay like it is. Also, FilterList should also use that marginLeft trick to indent the buttons.

conradarcturus · 2026-06-21T01:28:08Z

+        color: 'inherit',
+        cursor: 'pointer',
+        fontSize: '0.9em',
+        padding: '0.2em 3.5em',


3.5em horizontal padding is very manual -- but I am not certain about the alternative (fill the whole row) so I'll differ to your judgment.

conradarcturus · 2026-06-21T01:29:33Z

+    case SelectorDisplay.FilterList:
+      style.border = 'none';
+      style.borderRadius = '0.5em';
+      style.padding = '0.2em 0.4em';


minor nit: I usually use multiples of 0.25em (0.5, 0.75, 0.125...) to keep a consistent padding pattern, but I don't think people would notice anyway.

conradarcturus · 2026-06-21T01:30:14Z

      style.borderRadius = '1em';
      if (!isSelected) style.border = '0.125em solid var(--color-button-secondary)';
      break;
+    case SelectorDisplay.FilterList:


This is good. It's annoying we have so many manual styles here but when I used to have this all in CSS there were so many conflicting statements, it was easier to do it like this.

kevinmdd · 2026-06-25T03:50:23Z

This is a very solid first PR -- great job!

I have some stylistic comments about moving some of the style statements to CSS and 1 change about left-margins -- but that's all pretty small so I'll approve so you don't have to wait for a re-review.

The screenshot tests are failing but that's okay because you are intentionally updating the interface appearance. You can see the results if you tag update-baselines to automatically regenerate the screenshots.

Thank you Conrad, I have moved over to the master branch with a new PR containing the requested changes!

kevinmdd added 2 commits June 18, 2026 14:33

feat: add FilterList display mode for enum filters

42a8208

revert pr template changes

8902ed9

kevinmdd requested a review from a team as a code owner June 18, 2026 22:00

conradarcturus added the update-baselines label Jun 21, 2026

conradarcturus approved these changes Jun 21, 2026

View reviewed changes

kevinmdd closed this Jun 25, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

#671 feat: add FilterList display mode for enum filters#681

#671 feat: add FilterList display mode for enum filters#681
kevinmdd wants to merge 2 commits into
Translation-Commons:masterfrom
kevinmdd:feat/filter-list-display

kevinmdd commented Jun 18, 2026

Uh oh!

conradarcturus left a comment

Uh oh!

conradarcturus Jun 21, 2026

Uh oh!

conradarcturus Jun 21, 2026

Uh oh!

conradarcturus Jun 21, 2026

Uh oh!

conradarcturus Jun 21, 2026

Uh oh!

conradarcturus Jun 21, 2026

Uh oh!

conradarcturus Jun 21, 2026

Uh oh!

conradarcturus Jun 21, 2026

Uh oh!

kevinmdd commented Jun 25, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

kevinmdd commented Jun 18, 2026

Test Plan and Screenshots

Checklist

Summary

Testing

Changes

Visual changes

Data changes

Internal changes

Docs

Uh oh!

conradarcturus left a comment

Choose a reason for hiding this comment

Uh oh!

conradarcturus Jun 21, 2026

Choose a reason for hiding this comment

Uh oh!

conradarcturus Jun 21, 2026

Choose a reason for hiding this comment

Uh oh!

conradarcturus Jun 21, 2026

Choose a reason for hiding this comment

Uh oh!

conradarcturus Jun 21, 2026

Choose a reason for hiding this comment

Uh oh!

conradarcturus Jun 21, 2026

Choose a reason for hiding this comment

Uh oh!

conradarcturus Jun 21, 2026

Choose a reason for hiding this comment

Uh oh!

conradarcturus Jun 21, 2026

Choose a reason for hiding this comment

Uh oh!

kevinmdd commented Jun 25, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants