From b5014e769fc82e13546315a9631dba839e4e8977 Mon Sep 17 00:00:00 2001 From: kev1n77 Date: Tue, 8 Sep 2026 21:02:16 +0800 Subject: [PATCH] fix(ui): align icon button geometry and icon opacity ownership Align xs icon button corners and interaction surfaces, and add the standard 30px outlined circle with a 16px glyph while preserving existing defaults. Move reviewed monochrome artwork alpha to a public token controlled by icon slots. Preserve standalone and layered artwork opacity, apply trailing button icon contrast, and remove redundant product slot sizing without resizing Button. Update Design Lab combinations, component contracts, asset fingerprints and regression coverage, and regenerate the offline design-system stylesheet. Validation: design-system:check, check:web, and nine session layout tests pass. --- .../src/pages/ComponentDetailPage.tsx | 20 ++- .../src/preview/IconCompositionPreview.tsx | 18 +++ design-system/apps/design-lab/src/styles.css | 11 ++ .../vite/component-detail-contract.test.mjs | 4 +- .../design-tokens/src/system.tokens.json | 7 +- design-system/packages/ui/README.md | 14 ++ .../components/ActionItem/ActionItem.meta.ts | 1 + .../ActionItem/ActionItem.module.css | 1 + .../ui/src/components/Button/Button.meta.ts | 1 + .../src/components/Button/Button.module.css | 6 + .../ui/src/components/Icon/Icon.meta.ts | 1 + .../ui/src/components/Icon/Icon.module.css | 5 + .../packages/ui/src/components/Icon/Icon.tsx | 1 + .../src/components/Icon/assets/arrow-left.svg | 2 +- .../components/Icon/assets/arrow-right.svg | 2 +- .../src/components/Icon/assets/arrow-up.svg | 2 +- .../components/Icon/assets/arrow-upright.svg | 2 +- .../ui/src/components/Icon/assets/bell.svg | 2 +- .../ui/src/components/Icon/assets/browser.svg | 2 +- .../components/Icon/assets/check-circle.svg | 2 +- .../src/components/Icon/assets/check-fill.svg | 2 +- .../src/components/Icon/assets/check-line.svg | 2 +- .../components/Icon/assets/chevron-down.svg | 2 +- .../components/Icon/assets/chevron-left.svg | 2 +- .../components/Icon/assets/chevron-right.svg | 2 +- .../src/components/Icon/assets/chevron-up.svg | 2 +- .../ui/src/components/Icon/assets/circle.svg | 2 +- .../ui/src/components/Icon/assets/clock.svg | 2 +- .../components/Icon/assets/command-mac.svg | 2 +- .../ui/src/components/Icon/assets/commit.svg | 2 +- .../src/components/Icon/assets/creative.svg | 2 +- .../ui/src/components/Icon/assets/delete.svg | 2 +- .../src/components/Icon/assets/device-mac.svg | 2 +- .../src/components/Icon/assets/download.svg | 2 +- .../src/components/Icon/assets/duplicate.svg | 2 +- .../ui/src/components/Icon/assets/edit.svg | 2 +- .../src/components/Icon/assets/extension.svg | 2 +- .../ui/src/components/Icon/assets/eye.svg | 2 +- .../ui/src/components/Icon/assets/files.svg | 2 +- .../ui/src/components/Icon/assets/filter.svg | 2 +- .../Icon/assets/floating-window.svg | 2 +- .../ui/src/components/Icon/assets/folder.svg | 2 +- .../ui/src/components/Icon/assets/gear.svg | 2 +- .../ui/src/components/Icon/assets/git.svg | 2 +- .../ui/src/components/Icon/assets/image.svg | 2 +- .../ui/src/components/Icon/assets/info.svg | 2 +- .../ui/src/components/Icon/assets/level.svg | 2 +- .../ui/src/components/Icon/assets/link.svg | 2 +- .../ui/src/components/Icon/assets/mic.svg | 2 +- .../src/components/Icon/assets/mini-app.svg | 2 +- .../ui/src/components/Icon/assets/minimal.svg | 2 +- .../ui/src/components/Icon/assets/more.svg | 2 +- .../ui/src/components/Icon/assets/palette.svg | 2 +- .../ui/src/components/Icon/assets/pin.svg | 2 +- .../ui/src/components/Icon/assets/plus.svg | 2 +- .../ui/src/components/Icon/assets/refresh.svg | 2 +- .../ui/src/components/Icon/assets/search.svg | 2 +- .../src/components/Icon/assets/selected.svg | 2 +- .../ui/src/components/Icon/assets/session.svg | 2 +- .../src/components/Icon/assets/settings.svg | 2 +- .../components/Icon/assets/show-session.svg | 2 +- .../src/components/Icon/assets/side-chat.svg | 2 +- .../components/Icon/assets/sidebar-left.svg | 2 +- .../components/Icon/assets/sidebar-right.svg | 2 +- .../ui/src/components/Icon/assets/spark.svg | 2 +- .../src/components/Icon/assets/standard.svg | 2 +- .../ui/src/components/Icon/assets/star.svg | 2 +- .../ui/src/components/Icon/assets/store.svg | 2 +- .../src/components/Icon/assets/terminal.svg | 2 +- .../src/components/Icon/assets/thinking.svg | 2 +- .../src/components/Icon/assets/ultimate.svg | 2 +- .../ui/src/components/Icon/assets/upload.svg | 2 +- .../ui/src/components/Icon/assets/user.svg | 2 +- .../Icon/assets/waitlist-message.svg | 2 +- .../ui/src/components/Icon/assets/xmark.svg | 2 +- .../components/IconButton/IconButton.meta.ts | 12 +- .../IconButton/IconButton.module.css | 26 +++- .../src/components/IconButton/IconButton.tsx | 4 +- .../src/components/TabGroup/TabGroup.meta.ts | 1 + .../components/TabGroup/TabGroup.module.css | 1 + .../packages/ui/src/icons/SessionIcon.tsx | 2 +- .../ui/tests/fixtures/icon-assets.json | 124 +++++++++--------- .../packages/ui/tests/icon-button.test.mjs | 13 ++ design-system/packages/ui/tests/icon.test.mjs | 17 +++ .../packages/ui/tests/registry.test.mjs | 1 + .../packages/ui/tests/session-icon.test.mjs | 2 +- .../ui/generated/design-system.css | 3 + .../sections/sessions/SessionsSection.tsx | 2 +- .../usage/SessionUsageReportCard.tsx | 2 +- 89 files changed, 281 insertions(+), 143 deletions(-) diff --git a/design-system/apps/design-lab/src/pages/ComponentDetailPage.tsx b/design-system/apps/design-lab/src/pages/ComponentDetailPage.tsx index 53d20d8eb7..5c7012c66a 100644 --- a/design-system/apps/design-lab/src/pages/ComponentDetailPage.tsx +++ b/design-system/apps/design-lab/src/pages/ComponentDetailPage.tsx @@ -153,7 +153,8 @@ type PageHeaderAlign = "center" | "start"; type PageHeaderSize = "display" | "lg" | "md" | "sm"; const buttonVariants = ["outline", "fill", "secondary", "primary", "text"] as const; -const iconButtonVariants = ["quiet", "fill", "primary"] as const; +const iconButtonVariants = ["quiet", "outline", "fill", "primary"] as const; +const iconButtonSizes = ["xs", "standard", "sm", "md", "lg"] as const; const buttonInspectorStates = ["default", "hover", "active"] as const; const fieldOrientations = ["vertical", "horizontal"] as const; const pageHeaderAlignments = ["start", "center"] as const; @@ -309,6 +310,8 @@ export function ComponentDetailPage({ const { t } = useI18n(); const stateLabel = (state: string) => optionLabelKeys[state] ? t(optionLabelKeys[state]) : state; const [variant, setVariant] = useState<(typeof buttonVariants)[number]>("fill"); + const [iconButtonSize, setIconButtonSize] = useState<(typeof iconButtonSizes)[number]>("xs"); + const [iconButtonShape, setIconButtonShape] = useState<"square" | "circle">("square"); const [iconButtonVariant, setIconButtonVariant] = useState<(typeof iconButtonVariants)[number]>("quiet"); const [iconName, setIconName] = useState("search"); const [numberBadgeValue, setNumberBadgeValue] = useState("18"); @@ -519,7 +522,7 @@ export function ComponentDetailPage({ if (component.name === "IconButton") { const stateProps = `${inspectorDisabled ? " disabled" : ""}${inspectorLoading ? " loading" : ""}`; - return `import { IconButton } from "@openbitfun/ui";\nimport { List } from "lucide-react";\n\n}\n variant="${iconButtonVariant}"${stateProps}\n/>`; + return `import { IconButton } from "@openbitfun/ui";\nimport { List } from "lucide-react";\n\n}\n variant="${iconButtonVariant}"\n size="${iconButtonSize}"\n shape="${iconButtonShape}"${stateProps}\n/>`; } if (component.name === "Field") { const labelAction = fieldShowLabelAction @@ -633,6 +636,8 @@ export function ComponentDetailPage({ fieldShowLabelAction, flowChatPreview, iconButtonVariant, + iconButtonSize, + iconButtonShape, iconName, iconSize, iconTone, @@ -854,7 +859,8 @@ export function ComponentDetailPage({ disabled={state === "disabled" || applyInspectorControls && inspectorDisabled} icon={