Skip to content

fix(web-ui): standardize sidebar icon tokens and repair navigation layout #3135

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kev1n77 merged 1 commit into from
Sep 20, 2026
Merged

fix(web-ui): standardize sidebar icon tokens and repair navigation layout #3135

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
21 changes: 15 additions & 6 deletions design-system/packages/design-tokens/src/system.tokens.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -543,12 +543,21 @@
"expandedPaddingInline": { "$value": "0.625rem" }
},
"icon": {
"$type": "dimension",
"size2xs": { "$value": "8px" },
"sizeXs": { "$value": "12px" },
"sizeSm": { "$value": "14px" },
"sizeMd": { "$value": "16px" },
"sizeLg": { "$value": "24px" }
"size2xs": { "$type": "dimension", "$value": "8px" },
"sizeXs": { "$type": "dimension", "$value": "12px" },
"sizeSm": { "$type": "dimension", "$value": "14px" },
"sizeMd": { "$type": "dimension", "$value": "16px" },
"sizeLg": { "$type": "dimension", "$value": "24px" },
"strokeWidth": {
"$description": "Default optical line weight for Lucide-based interface icons.",
"$type": "number",
"$value": 1.6
},
"strokeWidthStrong": {
"$description": "Stronger optical line weight for compact navigation and other emphasized icon groups.",
"$type": "number",
"$value": 2
}
},
"height": {
"$type": "dimension",
Expand Down
2 changes: 2 additions & 0 deletions design-system/packages/design-tokens/tests/contract.test.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,8 @@ test("Icon geometry exposes every catalog size without product semantics", () =>
assert.equal(tokens["control.icon.sizeSm"], "14px");
assert.equal(tokens["control.icon.sizeMd"], "16px");
assert.equal(tokens["control.icon.sizeLg"], "24px");
assert.equal(tokens["control.icon.strokeWidth"], 1.6);
assert.equal(tokens["control.icon.strokeWidthStrong"], 2);
});

test("TabGroup geometry preserves the capsule selected and outline contract", async () => {
Expand Down
4 changes: 1 addition & 3 deletions design-system/packages/ui/src/components/Icon/Icon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -242,8 +242,6 @@ interface IconBaseProps

export type IconProps = IconBaseProps & IconSource;

const LINE_ICON_STROKE_WIDTH = 1.6;

export const Icon = forwardRef<HTMLSpanElement, IconProps>(function Icon({
className,
glyph: LineGlyph,
Expand Down Expand Up @@ -285,7 +283,7 @@ export const Icon = forwardRef<HTMLSpanElement, IconProps>(function Icon({
<Glyph
aria-hidden="true"
focusable="false"
strokeWidth={LINE_ICON_STROKE_WIDTH}
strokeWidth="var(--openbitfun-control-icon-stroke-width)"
/>
) : null}
</span>
Expand Down
6 changes: 3 additions & 3 deletions design-system/packages/ui/src/components/IconButton/IconButton.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
--_icon-button-background-hover: var(--openbitfun-color-action-neutral-surface-hover);
--_icon-button-background-active: var(--openbitfun-color-action-neutral-surface-hover);
--_icon-button-content: var(--openbitfun-color-content-primary);
--_icon-button-icon-size: 14px;
--_icon-button-icon-size: var(--openbitfun-control-icon-size-sm);
--_icon-button-size: var(--openbitfun-control-height-sm);

position: relative;
Expand Down Expand Up @@ -126,12 +126,12 @@
}

.button[data-size="md"] {
--_icon-button-icon-size: 16px;
--_icon-button-icon-size: var(--openbitfun-control-icon-size-md);
--_icon-button-size: var(--openbitfun-control-height-md);
}

.button[data-size="lg"] {
--_icon-button-icon-size: 20px;
--_icon-button-icon-size: var(--openbitfun-control-icon-size-lg);
--_icon-button-size: var(--openbitfun-control-height-lg);
}

Expand Down
2 changes: 1 addition & 1 deletion design-system/packages/ui/src/icons/SessionIcon.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,5 +10,5 @@ export const SessionIcon = forwardRef<SVGSVGElement, SessionIconProps>(function
height, size = 24, width, style, ...props
}, ref) {
return <MessageCircle {...props} ref={ref} width={width ?? size} height={height ?? size}
strokeWidth={1.6} style={{ opacity: "var(--openbitfun-opacity-icon-artwork)", ...style }} />;
strokeWidth="var(--openbitfun-control-icon-stroke-width)" style={{ opacity: "var(--openbitfun-opacity-icon-artwork)", ...style }} />;
});
2 changes: 1 addition & 1 deletion design-system/packages/ui/tests/icon-slots.test.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ test("buttons constrain normalized line fallbacks through the same icon slot", (
const markup = renderToStaticMarkup(createElement(Component, props));
assert.match(markup, /data-openbitfun-component="icon"/);
assert.match(markup, /data-openbitfun-source="line"/);
assert.match(markup, /<svg[^>]*stroke-width="1.6"/);
assert.match(markup, /<svg[^>]*stroke-width="var\(--openbitfun-control-icon-stroke-width\)"/);
}
});

Expand Down
6 changes: 3 additions & 3 deletions design-system/packages/ui/tests/icon.test.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ test("Icon is decorative by default and renders the named Lucide glyph", () => {
assert.match(markup, /data-size="lg"/);
assert.match(markup, /aria-hidden="true"/);
assert.match(markup, /lucide-search/);
assert.match(markup, /stroke-width="1.6"/);
assert.match(markup, /stroke-width="var\(--openbitfun-control-icon-stroke-width\)"/);
assert.doesNotMatch(markup, /mask-image/);
});

Expand Down Expand Up @@ -63,7 +63,7 @@ test("Icon normalizes Lucide fallbacks without exposing product-owned line weigh
assert.match(markup, /data-openbitfun-tone="secondary"/);
assert.match(markup, /role="img"/);
assert.match(markup, /aria-label="Network"/);
assert.match(markup, /<svg[^>]*stroke-width="1.6"/);
assert.match(markup, /<svg[^>]*stroke-width="var\(--openbitfun-control-icon-stroke-width\)"/);
assert.match(markup, /<svg[^>]*aria-hidden="true"/);
assert.doesNotMatch(markup, /mask-image/);
});
Expand Down Expand Up @@ -127,7 +127,7 @@ test("every general-purpose named icon renders Lucide and only the reviewed exce
assert.doesNotMatch(markup, /<svg/, name);
} else {
assert.match(markup, /class="lucide lucide-/, name);
assert.match(markup, /stroke-width="1.6"/, name);
assert.match(markup, /stroke-width="var\(--openbitfun-control-icon-stroke-width\)"/, name);
assert.doesNotMatch(markup, /mask-image/, name);
}
}
Expand Down
2 changes: 1 addition & 1 deletion design-system/packages/ui/tests/session-icon.test.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ test("SessionIcon renders the Lucide conversation glyph with standalone opacity"
assert.match(markup, /viewBox="0 0 24 24"/);
assert.match(markup, /lucide-message-circle/);
assert.match(markup, /stroke="currentColor"/);
assert.match(markup, /stroke-width="1.6"/);
assert.match(markup, /stroke-width="var\(--openbitfun-control-icon-stroke-width\)"/);
assert.match(markup, /opacity:var\(--openbitfun-opacity-icon-artwork\)/);
});

Expand Down
2 changes: 2 additions & 0 deletions src/apps/data-migrator/ui/generated/design-system.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,8 @@
--openbitfun-control-icon-size-md: 16px;
--openbitfun-control-icon-size-sm: 14px;
--openbitfun-control-icon-size-xs: 12px;
--openbitfun-control-icon-stroke-width: 1.6;
--openbitfun-control-icon-stroke-width-strong: 2;
--openbitfun-control-icon-button-standard-icon-size: 16px;
--openbitfun-control-icon-button-standard-size: 30px;
--openbitfun-control-icon-button-xs-icon-size: 14px;
Expand Down
4 changes: 2 additions & 2 deletions src/web-ui/src/app/components/NavBar/NavBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ const NavBar: React.FC<NavBarProps> = ({
onClick={onExpandNav}
aria-label={t('header.expandLeftPanel')}
>
<Icon name="sidebar-left" size="sm" style={{ width: 13, height: 13 }} />
<Icon name="sidebar-left" size="sm" />
</button>
</Tooltip>
</div>
Expand All @@ -114,7 +114,7 @@ const NavBar: React.FC<NavBarProps> = ({
onClick={onExpandNav}
aria-label={t('header.collapseLeftPanel')}
>
<Icon name="sidebar-left" size="sm" style={{ width: 13, height: 13 }} />
<Icon name="sidebar-left" size="sm" />
</button>
</Tooltip>

Expand Down
Loading
Loading