fix(buttons): match Figma padding + icon sizing across variants#300
Open
Infi-Knight wants to merge 1 commit into
Open
fix(buttons): match Figma padding + icon sizing across variants#300Infi-Knight wants to merge 1 commit into
Infi-Knight wants to merge 1 commit into
Conversation
✅ Deploy Preview for interledger-org-v5 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Infi-Knight
temporarily deployed
to
strapi-staging
GitHub Actions
Inactive
Infi-Knight
force-pushed
the
ravi/fix-button-padding
branch
from
d1abdb2 to
39c1c8b
Compare
Infi-Knight
temporarily deployed
to
strapi-staging
GitHub Actions
Inactive
6 tasks
Contributor
Author
|
|
Audit of the primary/secondary/FAB button designs in Figma surfaced
three padding bugs and one icon-size bug in the shared button
component:
1. Lg buttons used px-xl (24px) horizontally regardless of content,
producing 16/24 instead of Figma's 16/16 for text-only buttons.
2. iconOnly buttons forced px-0 + aspect-square, producing a tight
box rather than Figma's symmetric p-lg/p-md.
3. Icon+text buttons rendered symmetric padding; Figma calls for
asymmetric horizontal padding (text side +1 t-shirt size) to
visually balance the icon.
4. FAB icon rendered at the Icon component's 20px default. Per the
PillarCard FAB reference (and Framer prod), it should be 16px.
Changes:
- buttonVariants.ts: base size variants now use p-lg/p-md (square);
iconOnly drops px-0; new iconPosition axis with compoundVariants
for asymmetric text+icon padding; removed the FAB-specific
py-md/px-md override so FAB inherits Figma-correct 16px padding.
- Button.astro / LinkButton.astro: auto-derive iconPosition from
filled slots via Astro.slots.has(), so callers don't need to know
about the new axis.
- Icon.astro: expose a numeric size prop that maps to the SVG's
width/height attributes (more reliable than class-based sizing for
SVG dimensions in this Tailwind v4 setup).
- PillarCard.astro + preview: explicit size={16} on the FAB icon.
- preview: updated the "Symmetric vs asymmetric padding" section to
reflect the new base values (lg→xl, md→lg text-side bump).
Live verification of rendered measurements (preview/ui-components):
primary lg text 78×48 pad 16/16/16/16 matches Figma
primary lg icon-only 48×48 pad 16/16/16/16 matches Figma
primary sm text 71×44 pad 12/12/12/12 matches Figma
primary sm icon-only 44×44 pad 12/12/12/12 matches Figma
lg + icon-left 156×48 pad 16/24/16/16 matches Figma
lg + icon-right 165×48 pad 16/16/16/24 matches Figma
FAB icon-only 48×48 pad 16/16/16/16 matches Figma
FAB icon 16×16 matches Framer
Figma refs:
- Primary button: node 53:573
- Secondary "About us": node 466:58447
- PillarCard FAB: node 466:58457
Infi-Knight
force-pushed
the
ravi/fix-button-padding
branch
from
39c1c8b to
962b0eb
Compare
Infi-Knight
temporarily deployed
to
strapi-staging
GitHub Actions
Inactive
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.
Aligns the shared button component with Figma after a design audit.
buttonVariants.ts: symmetricp-lg/p-mdinstead ofpy-*overrides;iconOnlyno longer forcespx-0; replacediconSidewithiconPositionusing logicalps-*/pe-*(text side bumps one size for optical balance); FAB inherits base padding.Button.astro/LinkButton.astro:iconPositionauto-derived fromAstro.slots.has('icon-left' | 'icon-right'); oldiconSideprop removed.Icon.astro: numericsizeprop (default 20) maps to SVGwidth/height;shrink-0to prevent flex-induced squashing on FABs.PillarCard.astro: FAB passesiconOnlyandsize={24}.Figma: primary · secondary · FAB.
Manual test
Open
/preview/ui-components, spot-check that buttons havep-lg/p-mdsymmetric padding by default andpe-xl/ps-xl(lg) orpe-lg/ps-lg(sm) on text+icon variants. FAB renders as a 48×48 circle.Checks
pnpm run formatpnpm run lint