fix(inline-edit): wrap action buttons to support opacity-based palette (#DS-5219)#1661
fix(inline-edit): wrap action buttons to support opacity-based palette (#DS-5219)#1661NikGurev wants to merge 4 commits into
Conversation
NikGurev
changed the title
🚨 E2E tests failedReview the report for details. 💡 Comment |
|
Visit the preview URL for this PR (updated for commit 5811afe): https://koobiq-next--prs-1661-rjfpsxsz.web.app (expires Wed, 01 Jul 2026 10:20:14 GMT) 🔥 via Firebase Hosting GitHub Action 🌎 Sign: c9e37e518febda70d0317d07e8ceb35ac43c534c |
🚨 E2E tests failedReview the report for details. 💡 Comment |
|
/approve-snapshots |
|
🔄 Updating snapshots. |
🚨 E2E tests failedReview the report for details. 💡 Comment |
🚨 E2E tests failedReview the report for details. 💡 Comment |
|
/approve-snapshots |
|
🔄 Updating snapshots. |
|
✅ Snapshots updated! |
There was a problem hiding this comment.
Pull request overview
This PR updates KbqInlineEdit action-button markup and styling to ensure the action buttons render correctly with an opacity-based palette, and adds coverage in both unit tests and Playwright visual-regression tests for the new structure.
Changes:
- Wrap save/cancel action buttons in a new
.kbq-inline-edit__action-buttonelement and update SCSS to style the wrapper instead of the button being a direct child. - Update unit tests’ DOM queries to account for the new wrapper element.
- Add a new inline-edit E2E demo page and Playwright screenshot test to validate invalid-state visuals (light/dark).
Reviewed changes
Copilot reviewed 6 out of 10 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/e2e/routes.ts | Registers the new inline-edit E2E demo route/component. |
| packages/components/inline-edit/inline-edit.spec.ts | Updates DOM selectors for action buttons and adds wrapper-aware querying. |
| packages/components/inline-edit/inline-edit.scss | Moves action-button visual styling (shadow/background/radius) onto the wrapper element. |
| packages/components/inline-edit/inline-edit.html | Introduces wrapper elements around the save/cancel buttons. |
| packages/components/inline-edit/e2e.ts | Adds a new E2E demo component to exercise action-button visuals in invalid state. |
| packages/components/inline-edit/e2e.playwright-spec.ts | Adds visual-regression coverage for the new E2E scenario (light/dark). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| if (terminalButtonList.length && terminalButtonList[0].firstElementChild instanceof HTMLButtonElement) { | ||
| terminalButtonList[0].firstElementChild.click(); | ||
| } |
No description provided.