feat(lib): Add Filter chip expand - #3794
Draft
louismaximepiton wants to merge 5 commits into
Draft
louismaximepiton wants to merge 5 commits into
louismaximepiton wants to merge 5 commits into
Conversation
github-project-automation
Bot
moved this to In Progress / Draft
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
boosted-bot
moved this from In Progress / Draft
to Need Dev Review
in 🟣 [Orange-Boosted-Bootstrap] PRs Board
Contributor
There was a problem hiding this comment.
🟡 Changes recommended
The docs and live-example code introduce verified accessibility/correctness issues (screen-reader text being removed and hardcoded brand/version sprite paths) that should be fixed before merge.
Once you've addressed the issues Copilot identified, you can request another Copilot review.
Pull request overview
This PR introduces the Filter chip expand variant to OUDS Web by adding the required chip styling, brand token plumbing for the expand/collapse icons, a docs live example snippet, and documentation/migration updates so consumers can adopt the new pattern.
Changes:
- Document a new “Filter chip expand” chip type (including examples and migration notes) and cross-link it from Dropdown docs.
- Extend chip SCSS to support the dropdown chevron affordance and additional “selected” triggers.
- Add brand token aliases for chip expanded icons and update CSS snapshots accordingly.
File summaries
| File | Description |
|---|---|
| site/src/content/docs/getting-started/migration.mdx | Adds migration note announcing Filter chip expand. |
| site/src/content/docs/getting-started/migration-from-boosted.mdx | Clarifies .dropdown-toggle replacement guidance, including chip usage. |
| site/src/content/docs/components/dropdown.mdx | Links dropdown usage to the new Filter chip expand docs section. |
| site/src/content/docs/components/chips.mdx | Adds Filter chip expand type, docs section, and multiple examples (including live example). |
| site/src/assets/partials/snippets.js | Adds JS snippet powering the docs live example behavior. |
| site/data/components-details.ts | Adds Filter chip expand to the components catalog/cards list. |
| scss/tests/snapshot-tests/snapshots/ouds-web.css | Updates CSS snapshot for chip selected states and dropdown chevron styling. |
| scss/tests/snapshot-tests/snapshots/ouds-web-bootstrap.css | Updates Bootstrap CSS snapshot in sync with chip changes. |
| scss/_chips.scss | Implements chip selected-state triggers and dropdown chevron styling for filter chips. |
| packages/sosh/scss/tokens/_composite.scss | Adds chip expanded icon aliases (via existing btn expanded icon CSS vars). |
| packages/orange/scss/tokens/_composite.scss | Adds chip expanded icon aliases (via existing btn expanded icon CSS vars). |
| packages/orange-compact/scss/tokens/_composite.scss | Adds chip expanded icon aliases (via existing btn expanded icon CSS vars). |
Review details
Files not reviewed (2)
- scss/tests/snapshot-tests/snapshots/ouds-web-bootstrap.css: Generated file
- scss/tests/snapshot-tests/snapshots/ouds-web.css: Generated file
Suppressed comments (6)
scss/_chips.scss:178
- Same issue as the base selected selector: this focus-visible variant matches any visible .badge. Narrow it to .badge-count to align with the documented selection trigger and avoid false positives.
.chip-interactive:has(.badge:not(.d-none)):focus-visible,
scss/_chips.scss:190
- Same issue as the base selected selector: this disabled variant matches any visible .badge. Narrow it to .badge-count so only the badge-count visibility controls the selected styling.
.chip-interactive:has(.badge:not(.d-none)):disabled,
site/src/content/docs/components/chips.mdx:395
- This example hardcodes an Orange + versioned docs path (/orange/docs/1.4/...), which will break in other brand docs and future versions. Use getVersionedDocsPath like the other sprite references in this file.
<button class="dropdown-item" aria-pressed="true" type="button">Apple <svg class="ms-auto" width="16" height="16" aria-hidden="true"><use xlink:href="/orange/docs/1.4/assets/img/ouds-web-sprite.svg#check2"></use></svg></button>
site/src/content/docs/components/chips.mdx:425
- This example hardcodes an Orange + versioned docs path (/orange/docs/1.4/...), which will break in other brand docs and future versions. Use getVersionedDocsPath like the other sprite references in this file.
<button class="dropdown-item" aria-pressed="true" type="button">Apple <svg class="ms-auto" width="16" height="16" aria-hidden="true"><use xlink:href="/orange/docs/1.4/assets/img/ouds-web-sprite.svg#check2"></use></svg></button>
site/src/content/docs/components/chips.mdx:452
- These live-example items hardcode an Orange + versioned docs path (/orange/docs/1.4/...), which will break in other brand docs and future versions. Use getVersionedDocsPath like the other sprite references in this file.
<button class="dropdown-item" data-bs-toggle="button" aria-pressed="false" type="button">Apple <svg class="d-none" width="16" height="16" aria-hidden="true"><use xlink:href="/orange/docs/1.4/assets/img/ouds-web-sprite.svg#check2"></use></svg></button>
<button class="dropdown-item" data-bs-toggle="button" aria-pressed="false" type="button">Samsung <svg class="d-none" width="16" height="16" aria-hidden="true"><use xlink:href="/orange/docs/1.4/assets/img/ouds-web-sprite.svg#check2"></use></svg></button>
site/src/content/docs/components/chips.mdx:814
- This example hardcodes an Orange + versioned docs path (/orange/docs/1.4/...), which will break in other brand docs and future versions. Use getVersionedDocsPath like the other sprite references in this file.
<button class="dropdown-item" aria-pressed="true" type="button">Label <svg class="ms-auto" width="16" height="16" aria-hidden="true"><use xlink:href="/orange/docs/1.4/assets/img/ouds-web-sprite.svg#check2"></use></svg></button>
- Files reviewed: 10/12 changed files
- Comments generated: 4
- Review effort level: Lite
💡 Configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| .chip-interactive[aria-selected="true"], | ||
| .chip-interactive:has(input:checked) { | ||
| .chip-interactive:has(input:checked), | ||
| .chip-interactive:has(.badge:not(.d-none)), |
|
|
||
| if (count > 0) { | ||
| badgeCount.classList.remove('d-none') | ||
| badgeCount.textContent = count |
Comment on lines
+315
to
+317
| if (mutation.type === 'attributes' && mutation.attributeName === 'aria-pressed') { | ||
| mutation.target.querySelector('svg')?.classList.toggle('d-none') | ||
| } |
| </div> | ||
| </button> | ||
| <div class="dropdown-menu"> | ||
| <button class="dropdown-item" aria-pressed="true" type="button">Apple <svg class="ms-auto" width="16" height="16" aria-hidden="true"><use xlink:href="/orange/docs/1.4/assets/img/ouds-web-sprite.svg#check2"></use></svg></button> |
Base automatically changed from
main-lmp-add-expand-button
to
main-lmp-add-dropdown-draft
September 16, 2026 10:32
Member
Author
|
Agreed to keep it on hold for now because it can cause accessibility issues with the dropdown menu provided. Will probably recheck about this when we'll tackle the real dropdown menu, setting it on draft in the mean time, can probably be closed or reopened when we'll be there. |
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.
Types of change
Related issues
NA
Context & Motivation
Add Filter chip expand to our library
Description
NA
Checklists
Checklist (for Core Team only)
Progression (for Core Team only)
mainfollowing conventional commitLive previews