feat(FiltersInline): PDD-289 apply filter design feedback#892
Open
AronI wants to merge 2 commits into
Open
Conversation
- remove the confirm CTA from the sort dropdown, sort applies on selection
- pass a change source ('drawer' | 'dropdown') to onSelectFilter so consumers can apply sort immediately from the dropdown only
- filter CTAs use regular button size instead of small
- filter option labels use the labels small-bold type token
- disabled styling for filter checkboxes so empty options can render inactive
- sort pill keeps rendering last in the row when Sort is first in the filters array
AronI
requested review from
DaveMcNamara,
adietrich3074,
constantinehuzenko,
davidicus,
scottdickerson,
sgrund14 and
zhenpanda
as code owners
✅ Deploy Preview for phillips-seldon ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Tip All tests passed and all changes approved!🟢 UI Tests: 464 tests unchanged |
|
🚀 Storybook preview is ready. • Preview: https://68b9f094608b90f3cfec5a06-xrlomsxbie.chromatic.com/ |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates the FiltersInline pattern to incorporate PDD-289 design feedback, primarily changing sort behavior (apply immediately on selection) and aligning dropdown/drawer UI styling with updated design tokens and button sizing.
Changes:
- Add a
FilterChangeSource('drawer' | 'dropdown') toonSelectFilterso consumers can apply sort immediately only when changes come from dropdowns. - Remove sort “Confirm” CTAs in dropdown menus and update CTA button sizing/styling across drawer/dropdowns.
- Update styling so the Sort pill is visually last in the inline row and adjust filter option label + disabled checkbox styling.
Reviewed changes
Copilot reviewed 8 out of 8 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| src/patterns/FiltersInline/utils.tsx | Threads optional source through handleInputChange to onSelectFilter. |
| src/patterns/FiltersInline/types.ts | Introduces FilterChangeSource, extends handler signatures, deprecates confirm translation. |
| src/patterns/FiltersInline/MainFilterDropdown.tsx | Marks drawer-originated changes with 'drawer' and updates CTA button sizing. |
| src/patterns/FiltersInline/FiltersInline.test.tsx | Updates/adds tests for sort dropdown behavior and source propagation. |
| src/patterns/FiltersInline/FilterDropdownMenuMobile.tsx | Removes sort action buttons, passes 'dropdown' source on selection, updates CTA rendering. |
| src/patterns/FiltersInline/FilterDropdownMenuDesktop.tsx | Removes sort action buttons, passes 'dropdown' source on selection, updates CTA rendering. |
| src/patterns/FiltersInline/_filtersInline.scss | Forces Sort pill to render visually last and aligns it right on desktop. |
| src/patterns/FiltersInline/_filterDropdownMenu.scss | Updates dropdown button styling, disabled checkbox styling, and label typography token usage. |
Comment on lines
+8
to
+12
| // The Sort filter always renders last in the row regardless of its position | ||
| // in the filters array (the drawer lists Sort first, the row shows it last). | ||
| > .#{$px}-filters-inline__sort { | ||
| order: 1; | ||
| } |
Comment on lines
+52
to
+54
| {/* Sort applies on selection, so the sort dropdown renders no action buttons. */} | ||
| {!isSortButton && ( | ||
| <div className={classnames(`${baseClassName}__buttons-wrap`, `${baseClassName}__mobile-wrap`)}> |
- render the Sort pill last in the row DOM so tab order matches visual order - drop the flexbox order hack now that DOM order is correct - keep the mobile sort dropdown safe-area inset via a spacer - reuse FilterChangeHandler for the dropdown menu props and input handler
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Design feedback from PDD-289: