feat: count chip inside multi-select filter input (PIN-9840) - #86
Draft
Alepazz wants to merge 1 commit into
Draft
Conversation
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.
🔗 Issue
PIN-9840 —
[FND] - Componente AutoComplete📝 Description / Context
The current multi-select filter field (
autocomplete-multiple) renders one removableChipper selection both inside the input (making it grow vertically) and as a row of chips under the fields. This hurts accessibility and clashes with the new design direction.This PR explores the feasibility of a redesign where multi-select fields stay compact, showing a single chip with the selection count inside the input itself (see mockup attached to the Jira ticket). After selecting options the user sees only the count + a close icon to clear all, not a wall of removable tags.
This PR is opened as draft to drive the discussion with the design team before finalizing pixel-level details.
🛠 List of changes
AutocompleteMultipleFilterField: renders a countChipwith a close icon when ≥1 option is selected;onDeleteclears all selections;stopPropagationavoids opening the dropdown.AutocompleteBaseFilterField: new internalendAdornmentExtraslot, prepended to MUI's defaultendAdornmentwhen present. Excluded from the spread to<Autocomplete>so it never lands on the DOM.ActiveFiltersChips: multi-select filters no longer render as removable chips in the summary row (their selection is already shown inside the input). Other filter types (single-value, freetext, datepicker, numeric) still render as chips.Filters.test.tsx+ snapshots updated to reflect the new rendering.🧪 How to test
Link this branch into
pdnd-interop-frontend(viapnpm linkorfile:protocol) — no consumer code change is required, the new behavior is the default for allautocomplete-multiplefields.Suggested pages:
type: 'autocomplete-multiple'inuseFiltersChecklist:
×on the count chip: all selections cleared, URL params updated×variant: 'chips' | 'count-chip') to stagger the migration, or proceed with this breaking change as-is. Current implementation takes the second path for simplicity.color="primary",size="small").pdnd-interop-frontend(and any other commons consumer) declaring anautocomplete-multiplefilter. No API change required, visual regression testing advisable.1.x.x → 2.0.0); alternatively a minor with the opt-in flag mentioned above.📎 Prerequisite
This PR is a follow-up / evolution of PIN-7358 (branch
feature/PIN-7358_filters-redesign). Merge order should be:develop.develop.hasSubmitButton(introduced by PIN-7358) and the count-chip UX introduced here is resolved during the rebase.🖼️ Pictures