feat: add pressed state to option/tree/dropdown items (#DS-3482)#1779
feat: add pressed state to option/tree/dropdown items (#DS-3482)#1779lskramarov wants to merge 3 commits into
Conversation
|
Visit the preview URL for this PR (updated for commit 4f56d01): https://koobiq-next--prs-1779-vvm4rhu3.web.app (expires Mon, 27 Jul 2026 12:05:44 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: c9e37e518febda70d0317d07e8ceb35ac43c534c |
🚨 E2E tests failedReview the report for details. 💡 Comment |
|
/approve-snapshots |
|
🔄 Updating snapshots. |
|
✅ Snapshots updated! |
🚨 E2E tests failedReview the report for details. 💡 Comment |
|
/approve-snapshots |
|
🔄 Updating snapshots. |
|
✅ Snapshots updated! |
There was a problem hiding this comment.
Pull request overview
Adds a “pressed” visual state across option-like UI elements (tree options, tree-select options, select options, list items, dropdown items, and app-switcher items) and expands e2e coverage to capture the new state in screenshots.
Changes:
- Added pressed/active styling rules (
:activeand state classes like.kbq-active/.kbq-pressed) to component theme SCSS to apply the correct background tokens. - Updated e2e fixtures to expose “pressed” state cases for visual regression coverage.
- Added new Playwright screenshot tests for pressed states in tree-select and app-switcher.
Reviewed changes
Copilot reviewed 13 out of 30 changed files in this pull request and generated no comments.
Show a summary per file
| File | Description |
|---|---|
| packages/components/tree/e2e.ts | Adds “Active” / “SelectedActive” state rows and binds .kbq-active for tree pressed state fixtures. |
| packages/components/tree/_tree-theme.scss | Implements active/pressed background styling for tree options (single + selected + multiple-selected cases). |
| packages/components/tree-select/e2e.playwright-spec.ts | Adds Playwright visual tests covering pressed state in tree-select (single + multi). |
| packages/components/tree-select/_tree-select-theme.scss | Adds pressed styling rules with specificity adjustments so pressed wins over hover. |
| packages/components/select/e2e.ts | Adds a pressed option fixture (.kbq-pressed) and adjusts layout height for screenshots. |
| packages/components/list/_list-theme.scss | Fixes active/selected-active backgrounds without emitting undefined token variables from mixins. |
| packages/components/dropdown/e2e.ts | Adds pressed and selected+pressed dropdown item fixtures. |
| packages/components/dropdown/_dropdown-theme.scss | Adds pressed styling for dropdown items (:active / .kbq-active) including selected+pressed. |
| packages/components/core/option/_option-theme.scss | Adds .kbq-pressed / :active background styling for options, including selected and multiple-selected variants. |
| packages/components/app-switcher/kbq-app-switcher-list-item.scss | Aligns hover/active/selected backgrounds with list state tokens. |
| packages/components/app-switcher/e2e.playwright-spec.ts | Adds Playwright visual tests covering pressed state in app-switcher. |
| packages/components/app-switcher/app-switcher-dropdown-site.scss | Adjusts hover vs pressed backgrounds and adds explicit pressed selectors. |
| packages/components/app-switcher/app-switcher-dropdown-app.scss | Adjusts hover vs pressed backgrounds and adds explicit pressed selectors. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
No description provided.