Skip to content

feat(menu): Avatar 领头的菜单行纳入前导图标列约定 #27

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
qqqqqf-q merged 1 commit into from
Sep 14, 2026
Merged

feat(menu): Avatar 领头的菜单行纳入前导图标列约定 #27

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
4 changes: 2 additions & 2 deletions src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2571,7 +2571,7 @@
The menu owns icon size and spacing; grid alignment centers the glyph.
SelectItemText is transparent to this grid only when it has a leading icon. */
@layer utilities {
.menu-item:has(> :is(svg, img):first-child),
.menu-item:has(> :is(svg, img, [data-slot="avatar"]):first-child),
.menu-item:has(> [data-slot="select-item-text"] > :is(svg, img):first-child) {
Comment on lines +2574 to 2575

@chatgpt-codex-connector chatgpt-codex-connector Bot Sep 14, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

P2 Badge Include wrapped Select avatars in the grid rule

When an Avatar is supplied to <SelectItem>, SelectItem.vue wraps the slot inside [data-slot="select-item-text"], so the changed direct-child branch cannot match and the nested branches still accept only svg/img. Those Avatar-leading Select rows therefore retain the old flex padding and 32px Avatar instead of receiving the new grid column and 16px sizing; add Avatar to the three nested SelectItemText selector lists as well.

Useful? React with 👍 / 👎.

display: grid;
grid-template-columns: var(--menu-item-leading-size) minmax(0, 1fr);
Expand All @@ -2582,7 +2582,7 @@
padding-inline-start: 0;
column-gap: 0;
}
.menu-item > :is(svg, img):first-child,
.menu-item > :is(svg, img, [data-slot="avatar"]):first-child,
.menu-item > [data-slot="select-item-text"] > :is(svg, img):first-child {
/* Menu geometry overrides legacy size/margin utilities at call sites. */
width: var(--menu-leading-icon-size) !important;
Comment on lines +2585 to 2588

@chatgpt-codex-connector chatgpt-codex-connector Bot Sep 14, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

P1 Badge Document the Avatar-specific menu sizing contract

This globally changes a menu-leading Avatar from its normally overridable 32px size to the 16px menu-icon token via !important, establishing a new cross-cutting sizing exception. Without documenting Avatar under the menu-leading contract, callers cannot know their explicit Avatar size classes are intentionally ignored and are likely to fight the rule; update the design contract alongside this selector as required.

AGENTS.md reference: AGENTS.md:L856-L861

Useful? React with 👍 / 👎.

Expand Down
Loading