Components: Fix double border in ItemGroup when last item is focused
#70021
Conversation
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
There was a problem hiding this comment.
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
eedaec5 to
1c6040d
Compare
WordPress#70021) * fix: Make border transparent for all pseudo events * chore: Add changelog entry * chore: Update snapshots Co-authored-by: im3dabasia <im3dabasia1@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org> Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: madhusudhand <madhudollu@git.wordpress.org>
What?
Closes #61621
Fixes double border issue in
ItemGroupwhen 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:devto start the storybook.ItemGroupcomponent in Storybook.:focusstate 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