You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
Fixes double border issue in ItemGroup when last item is focused.
Why?
Previously, the border was only removed when the item was not focused, causing a double border when the last item received focus.
How?
Modified the separated CSS to remove the bottom border on the last child item in all states rather than only in the non-focused state.
Testing Instructions
Run npm run storybook:dev to start the storybook.
Open the ItemGroup component in Storybook.
Emulate the :focus state on the last item using browser developer tools.
Verify the fix removes the double border when the last item is focused
Notes
The snapshots for the tests need to be updated thats probably the reason why unit tests are failing. I am not aware on how to update them. I would appreciate some guidance here.
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.
If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.
The reason will be displayed to describe this comment to others. Learn more.
Thanks for the PR!
I've read all of #30097 where this style was added, but I'm really not sure why :focus state was ignored from the selector. Perhaps it may be necessary for the first implementation, but I believe it shouldn't be needed anymore for now.
The snapshots for the tests need to be updated thats probably the reason why unit tests are failing. I am not aware on how to update them. I would appreciate some guidance here.
Run: npm run test:unit packages/components/src/item-group/test/index.js -- -u
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.
What?
Closes #61621
Fixes double border issue in
ItemGroup
when last item is focused.Why?
Previously, the border was only removed when the item was not focused, causing a double border when the last item received focus.
How?
Modified the separated CSS to remove the bottom border on the last child item in all states rather than only in the non-focused state.
Testing Instructions
npm run storybook:dev
to start the storybook.ItemGroup
component in Storybook.:focus
state on the last item using browser developer tools.Notes
The snapshots for the tests need to be updated thats probably the reason why unit tests are failing. I am not aware on how to update them. I would appreciate some guidance here.
Screenshots or screencast
Before
Screen.Recording.2025-04-30.at.4.58.00.PM.mov
After
Screen.Recording.2025-04-30.at.4.56.24.PM.mov