Skip to content

fix(web-components): remove the pattern of using data-indent for styling - #36457

Draft
marchbox wants to merge 8 commits into
microsoft:masterfrom
marchbox:users/machi/fix-menu-item-long-text
Draft

fix(web-components): remove the pattern of using data-indent for styling#36457
marchbox wants to merge 8 commits into
microsoft:masterfrom
marchbox:users/machi/fix-menu-item-long-text

Conversation

@marchbox

@marchbox marchbox commented Jul 27, 2026

Copy link
Copy Markdown
Contributor

Previous Behavior

Menu List, Tree Item, and Tablist have a pattern of using JS to check content and decide whether the host should have data-indent (or data-hasindent) attribute for styling.

New Behavior

Changed to pure CSS approach:

  • Use the :scope:has() pattern to check if an element has certain slots assigned, then change the styles based on that
  • Use subgrid to align with parent component’s grid system

@github-actions

Copy link
Copy Markdown

📊 Bundle size report

✅ No changes found

@github-actions

Copy link
Copy Markdown

Pull request demo site: URL

Comment thread packages/web-components/src/menu-item/menu-item.styles.ts
Comment thread packages/web-components/src/menu-list/menu-list.styles.ts
@marchbox marchbox changed the title use subgrid for menu-list and menu-item layouts fix(web-components): remove the pattern of using data-indent for styling Jul 28, 2026
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.

2 participants