Skip to content

refactor(ui): centralize compact icon button sizing in EMCN - #7991

Open
BillLeoutsakosvl346 wants to merge 2 commits into
stagingfrom
codex/control-fix-icon-button-sizing
Open

BillLeoutsakosvl346 wants to merge 2 commits into
stagingfrom
codex/control-fix-icon-button-sizing

Conversation

@BillLeoutsakosvl346

Copy link
Copy Markdown
Contributor

Summary

Product icon buttons repeatedly set square dimensions and zero padding through consumer classes. Add Button's iconSize option and migrate all 25 matching EMCN Button locations across 10 product files, including the shared workflow action-bar recipe.

compact preserves spacing-based sizing (size-6); compact-fixed preserves fixed 24px sizing. Both own zero padding while retaining the selected size and variant's typography, corners, icon strokes and colors. This keeps the original behavior when the browser's font size changes. Consumers retain positioning, canvas width overrides, icons, labels, disabled conditions and handlers. Omitting the new option leaves existing buttons unchanged.

The change contains the shared Button update, seven focused test cases and consumer migrations. Landing pages, global CSS, dependencies and audit tooling are excluded.

Validation

  • 350 EMCN tests and 26 relevant app tests passed. EMCN, app and workflow-renderer type checks, repository lint, API validation and diff checks passed.
  • Final external category audit: 32 findings → 0 (18 size overrides and 14 padding overrides). Seven additional action-bar usages were verified through their shared class recipe. Unrelated findings are unchanged.
  • Consumer AST comparison confirms only the intended sizing props/classes changed. Exact rendered class sets match, including 448 action-bar state combinations; all 210 existing Button variant/size/padding combinations remain unchanged.
  • 920 isolated Chromium comparisons match across light/dark themes, normal/enlarged root font sizes, and idle/hover/focus/active/disabled states. These use real Button renders with representative SVG children and compiled app CSS, not full product navigation.
  • Committed-diff conformance audit: zero usage violations; six expected central-definition notices for the two size/padding recipes.

@vercel

vercel Bot commented Sep 18, 2026

Copy link
Copy Markdown

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated
docs Ready Ready Preview Sep 18, 2026 11:35pm UTC

Request Review

@greptile-apps

greptile-apps Bot commented Sep 18, 2026

Copy link
Copy Markdown
Contributor

RetriggerConfidence Score: 5/5

The PR appears safe to merge; no actionable correctness, security, or repository-rule issues remain.

Summary

This PR centralizes compact icon-button geometry in the shared EMCN Button component.

  • Adds spacing-based compact and fixed-pixel compact-fixed icon-size variants while preserving existing typography, corners, icon strokes, and colors.
  • Migrates matching product and workflow-renderer buttons away from repeated sizing and zero-padding classes.
  • Adds focused equivalence and override-precedence tests.

Reviews (2) · Last reviewed commit: "test(emcn): follow documented button tes..."

Comment thread packages/emcn/src/components/button/button.test.tsx Outdated

@cubic-dev-ai cubic-dev-ai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

No issues found across 12 files

Confidence score: 5/5

  • Automated review surfaced no issues in the provided summaries.
  • No files require special attention.

Re-trigger cubic

@BillLeoutsakosvl346

Copy link
Copy Markdown
Contributor Author

@greptile

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant