Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Tabs: fix "With tab icons" Storybook example #63297

Merged
merged 2 commits into from
Jul 9, 2024

Conversation

ciampo
Copy link
Contributor

@ciampo ciampo commented Jul 9, 2024

What?

Fixes #63271

Tweaks the "With tab icons" Storybook example for the Tabs component so that tab styles are correct

Why?

Previously, the example was using the Button component, which would being in its own styles, overriding the Tabs.Tab styles.

How?

By switching from Button to using the individual Tooltip and Icon components, as suggested by @mirka in #63271 (comment)

Testing Instructions

  • Load the "With tab icons" Storybook example for the Tabs component
  • Play around with the component, using the keyboard to select different tabs
  • Make sure that focus styles look correct, that tab selection works as expected, and the tooltip shows as expected while hovering or focussing a tab

Screenshots or screencast

Before (trunk) After (this PR)
Screenshot 2024-07-09 at 14 43 08 Screenshot 2024-07-09 at 14 41 17

@ciampo ciampo requested a review from ajitbohra as a code owner July 9, 2024 12:41
Copy link

github-actions bot commented Jul 9, 2024

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.

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@ciampo ciampo self-assigned this Jul 9, 2024
@ciampo ciampo added [Type] Bug An existing feature does not function as intended [Package] Components /packages/components labels Jul 9, 2024
@ciampo ciampo requested a review from a team July 9, 2024 12:46
Copy link
Member

@mirka mirka left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Works as expected, thanks!

@ciampo ciampo enabled auto-merge (squash) July 9, 2024 13:42
@ciampo ciampo merged commit 1e72e86 into trunk Jul 9, 2024
67 of 68 checks passed
@ciampo ciampo deleted the fix/tabs-storybook-example-with-icons branch July 9, 2024 14:32
@github-actions github-actions bot added this to the Gutenberg 18.8 milestone Jul 9, 2024
huubl pushed a commit to huubl/gutenberg that referenced this pull request Jul 10, 2024
* Tabs: fix "With tab icons" Storybook example

* CHANGELOG

---

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
carstingaxion pushed a commit to carstingaxion/gutenberg that referenced this pull request Jul 18, 2024
* Tabs: fix "With tab icons" Storybook example

* CHANGELOG

---

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Components /packages/components [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Tabs: "With Tab Icons" story has duplicated focus styles
2 participants