fix(core): show active state on open dropdown button EIX-84 - #2684
fix(core): show active state on open dropdown button EIX-84#2684alexkaduk wants to merge 3 commits into
Conversation
🦋 Changeset detectedLatest commit: b14eab7 The changes in this PR will be included in the next version bump. This PR includes changesets to release 5 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
✅ Deploy Preview for ix-storybook ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
📝 WalkthroughWalkthrough
ChangesDropdown Button Active State
Estimated code review effort: 2 (Simple) | ~10 minutes Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/core/src/components/dropdown-button/dropdown-button.ct.ts`:
- Around line 107-192: Add an axe-based regression test in dropdown-button.ct.ts
that mounts a dropdown-button with a dropdown item, opens it to the expanded
state, and runs the existing accessibility scan against the expanded component.
Assert that the scan reports no violations, reusing the established
regressionTest and axe-test helpers from the file.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: fcf9de8d-7b2d-4970-9adf-f6fd0160b723
📒 Files selected for processing (3)
.changeset/dropdown-button-expanded-active.mdpackages/core/src/components/dropdown-button/dropdown-button.ct.tspackages/core/src/components/dropdown-button/dropdown-button.scss
|
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@packages/core/src/components/dropdown-button/dropdown-button.scss`:
- Line 14: Remove the parentheses surrounding the condition in the `@if` rule at
line 14 in the dropdown-button.scss file. The condition `($name != '')` should
be updated to remove the outer parentheses while keeping the condition logic
intact, as required by the scss/at-rule-conditional-no-parentheses linting rule.
🪄 Autofix
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 364ba936-eb3e-44f6-a3d2-e506e8d40be2
📒 Files selected for processing (2)
packages/core/src/components/dropdown-button/dropdown-button.scsspackages/core/src/components/dropdown-button/dropdown-button.vars.scss
| @use './dropdown-button.vars' as *; | ||
|
|
||
| @mixin triangle($name: '') { | ||
| @if ($name != '') { |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Remove parentheses from the @if condition.
Stylelint reports scss/at-rule-conditional-no-parentheses at Line 14. This file fails the configured lint rule.
Proposed fix
- `@if` ($name != '') {
+ `@if` $name != '' {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| @if ($name != '') { | |
| `@if` $name != '' { |
🧰 Tools
🪛 Stylelint (17.14.1)
[error] 14-14: Unexpected () used to surround statements for @-rules (scss/at-rule-conditional-no-parentheses)
(scss/at-rule-conditional-no-parentheses)
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@packages/core/src/components/dropdown-button/dropdown-button.scss` at line
14, Remove the parentheses surrounding the condition in the `@if` rule at line 14
in the dropdown-button.scss file. The condition `($name != '')` should be
updated to remove the outer parentheses while keeping the condition logic
intact, as required by the scss/at-rule-conditional-no-parentheses linting rule.
Source: Linters/SAST tools
2 participants
💡 What is the current behavior?
While a dropdown menu is open,
ix-dropdown-buttondoes not keep a lasting active visual state on the trigger. The trigger can look idle even thougharia-expandedistrue, so the open menu can appear disconnected from its control.GitHub Issue Number: #1402
Jira: EIX-84
🆕 What is the new behavior?
aria-expanded="true"), the inner button’s theme CSS variables are remapped to their--activecounterparts (including hover → active) so the trigger keeps the Figma Active look for the whole Expanded state.ix-dropdown-button(e.g. breadcrumb truncate, date picker month/year, split button, tabs overflow) pick up the same behavior.🏁 Checklist
A pull request can only be merged if all of these conditions are met (where applicable):
aria-expandedalready presentpnpm test) dropdown-button CT updated;pnpm run test.ct -- --grep dropdown-buttonpassedpnpm lint)pnpm build, changes pushed)👨💻 Help & support
Summary by CodeRabbit