ButtonGroup: Fix button and icon button styling when tooltips are used on them #4210
Conversation
This file contains 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
🦋 Changeset detectedLatest commit: f427dfd The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
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 |
size-limit report 📦
|
broccolinisoup
commented
Feb 2, 2024
broccolinisoup
force-pushed
the
button-group-tooltip-style-issues
branch
from
f04ef75
to
3b0c065
Compare
broccolinisoup
commented
Feb 2, 2024
| @@ -15,3 +16,47 @@ export const IconButtons = () => ( | |||
| <IconButton icon={DashIcon} aria-label="Subtract" /> | |||
| </ButtonGroup> | |||
| ) | |||
|
|
|||
| export const IconButtonsWithTooltip = () => ( | |||
There was a problem hiding this comment.
Happy to remove them after the review if we don't want to keep them
There was a problem hiding this comment.
I think we can leave em' :)
langermank
reviewed
Feb 2, 2024
| @@ -15,3 +16,47 @@ export const IconButtons = () => ( | |||
| <IconButton icon={DashIcon} aria-label="Subtract" /> | |||
| </ButtonGroup> | |||
| ) | |||
|
|
|||
| export const IconButtonsWithTooltip = () => ( | |||
There was a problem hiding this comment.
I think we can leave em' :)
src/ButtonGroup/ButtonGroup.tsx
Outdated
| @@ -8,28 +8,32 @@ const ButtonGroup = styled.div` | |||
| vertical-align: middle; | |||
| isolation: isolate; | |||
|
|
|||
| && > * { | |||
| && > button, | |||
There was a problem hiding this comment.
@broccolinisoup is it possible these could be a tags as well? You could add a test story case for that and see.
There was a problem hiding this comment.
Oo great catch @langermank! Definitely, they can be a tags. I'll update the code.
This comment was marked as off-topic.
This comment was marked as off-topic.
joshblack
approved these changes
Feb 6, 2024
Merged
broccolinisoup
added a commit
that referenced
this pull request
Feb 11, 2024
…d on them (#4210) * fix button group styling for tooltip and tooltip v2 * Add changeset * take the a tag into account when styling * add e2e tests for the buttons groups that use tooltip * test(vrt): update snapshots --------- Co-authored-by: broccolinisoup <broccolinisoup@users.noreply.github.com>
13 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Closes #4129
Changelog
New
Changed
Updated Button group CSS to make sure the icon buttons and buttons are rendered as expected when they have tooltips (both v1 and v2) on them
Removed
Rollout strategy
Testing & Reviewing
Merge checklist