Repository navigation
ROU-13132: Make Submenu styling context-independent - #1308
Merged
Merged
Conversation
The pill treatment for the Submenu header lived only under `.app-menu-links`, so a Submenu placed anywhere else fell back to the old underline look: no block padding, 2px transparent top/bottom borders, a primary underline on hover and on `.active`, and no background while open. Hoist the pill onto the base `.osui-submenu__header` and drop the header-scoped copies, so the header renders identically wherever it sits: 8px/12px padding, 8px radius, `bg-neutral-subtlest-hover` on hover and while open, and no underline in any state. - New CSS API knobs: `--osui-submenu-header-hover-background`, `-border-radius`, `-padding-block`, `-padding-inline`. - BREAKING (CSS API): `--osui-submenu-hover-border-color` is removed — there is no hover border any more. `--osui-submenu-active-border-color` keeps its name although it now only paints text, to avoid a second break. - `margin-inline: 0` added to the side-menu and tablet/phone header rules: the 1px pill gutter would push those full-width rows out of their column. Verified with a block-level diff of every compiled `submenu` rule against a baseline build — the delta is exactly the intended rules. In-header and out-of-header headers measure identically (101x40, 8px/12px padding, 8px radius) in default, hover, open and selected. Regenerating `docs-ai/` and the Storybook CSS-API manifest also picks up pre-existing drift from earlier commits (Dropdown, Accordion, Range Slider, List Updating properties and a `text-primary` utility retarget) that was never regenerated. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
|
🖼️ Storybook: Chromatic UI tests result: ✅ Passed
|
os-davidlourenco
approved these changes
Oct 19, 2026
os-davidlourenco
left a comment
os-davidlourenco
left a comment
Contributor
There was a problem hiding this comment.
LGTM - There is still a problem with color in dark mode but I think it could be out of scope for this task
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The pill treatment for the Submenu header lived only under
.app-menu-links, so a Submenu placed anywhere else fell back to the old underline look: no block padding, 2px transparent top/bottom borders, a primary underline on hover and on.active, and no background while open.Hoist the pill onto the base
.osui-submenu__headerand drop the header-scoped copies, so the header renders identically wherever it sits: 8px/12px padding, 8px radius,bg-neutral-subtlest-hoveron hover and while open, and no underline in any state.--osui-submenu-header-hover-background,-border-radius,-padding-block,-padding-inline.--osui-submenu-hover-border-coloris removed — there is no hover border any more.--osui-submenu-active-border-colorkeeps its name although it now only paints text, to avoid a second break.margin-inline: 0added to the side-menu and tablet/phone header rules: the 1px pill gutter would push those full-width rows out of their column.Verified with a block-level diff of every compiled
submenurule against a baseline build — the delta is exactly the intended rules. In-header and out-of-header headers measure identically (101x40, 8px/12px padding, 8px radius) in default, hover, open and selected.Regenerating
docs-ai/and the Storybook CSS-API manifest also picks up pre-existing drift from earlier commits (Dropdown, Accordion, Range Slider, List Updating properties and atext-primaryutility retarget) that was never regenerated.Checklist