fix(Link): keep the gap between icon and text in a nested Button - #3053
Draft
Lisa18289 wants to merge 2 commits into
Draft
fix(Link): keep the gap between icon and text in a nested Button#3053Lisa18289 wants to merge 2 commits into
Lisa18289 wants to merge 2 commits into
Conversation
Link wrapped all Button children in a single `Text`, collapsing icon and label into one flex item. The button's `column-gap` then had nothing to apply to, and the icon lost its `flow--button--icon` class, so the `:has(.text) .icon` margin didn't apply either — icon and label ended up glued together. Wrap only plain string children, the same condition `Button` itself uses. This also restores the icon-only padding for an icon-only Button in a Link, which the always-present `.text` had suppressed. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Lisa18289
added
update-screenshots
github-actions
Bot
removed
run-visual-tests
Contributor
Coverage Report for ./packages/components/
File CoverageNo changed files found. |
Contributor
🚀 Preview DeploymentPreview environments are ready:
Images:
|
Contributor
❌ Visual Regression Tests FailedAt least one shard did not pass. If snapshots differ from the committed baselines, download the visual-diffs-* artifacts from this run to inspect the actual/diff images (a shard that failed before comparison, e.g. during install or browser setup, leaves none). If the differences are intentional, update the baselines by adding the |
Co-authored-by: Lisa18289 <84317589+Lisa18289@users.noreply.github.com>
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
A
Buttonwith an icon and a label loses the spacing between them as soon as it sits inside aLink— the icon ends up glued to the text.Linkwrapped allButtonchildren in a singleText, which collapsed icon and label into one flex item. The button'scolumn-gapthen had nothing to apply to, and the icon gotflow--text--iconinstead offlow--button--icon, so the:has(.text) .iconmargin fallback didn't apply either.Now only plain string children get the wrapper — the same condition
Buttonitself uses viaisStringContent. Side effect: an icon-onlyButtonin aLinkgets its square icon-only padding back, which the always-present.texthad suppressed.Covered by a new
WithButtonAndIconstory and two extra rows in theLink with Buttonvisual scenario (icon+text and icon-only). The darwin baselines are updated; the linux ones come from theupdate-screenshotslabel.🤖 Generated with Claude Code