feat: refine menu-item focus states and sidebar story layouts#606
Open
gab-az wants to merge 13 commits into
Open
feat: refine menu-item focus states and sidebar story layouts#606gab-az wants to merge 13 commits into
gab-az wants to merge 13 commits into
Conversation
Align menu-item focus and icon state behavior with selected/default semantics and simplify story coverage to the essential states. Co-authored-by: Cursor <cursoragent@cursor.com>
Move sidebar spacing ownership to slot content and refresh Storybook variants to cover content-only, header search, and profile footer layouts from the latest design. Co-authored-by: Cursor <cursoragent@cursor.com>
isaquebock
previously approved these changes
May 27, 2026
Render sidebar examples from a console-like menu data model so story variants stay aligned with production navigation structure. Co-authored-by: Cursor <cursoragent@cursor.com>
pauloSF0
previously approved these changes
May 28, 2026
robsongajunior
requested changes
May 28, 2026
| table: { | ||
| type: { summary: 'MenuItemKind' }, | ||
| defaultValue: { summary: 'option' }, | ||
| defaultValue: { summary: "'option'" }, |
Contributor
There was a problem hiding this comment.
update from defaultValue: { summary: "'option'" }to efaultValue: { summary: 'option' }
| table: { | ||
| type: { summary: 'string' }, | ||
| defaultValue: { summary: 'Option 1' }, | ||
| defaultValue: { summary: "'Option 1'" }, |
Contributor
There was a problem hiding this comment.
update from defaultValue: { summary: "'Option 1'" } to defaultValue: { summary: 'Option 1' }
| table: { | ||
| type: { summary: 'boolean' }, | ||
| defaultValue: { summary: false }, | ||
| defaultValue: { summary: 'false' }, |
Contributor
There was a problem hiding this comment.
'false' it is wrong, should be false || true
| table: { | ||
| type: { summary: 'boolean' }, | ||
| defaultValue: { summary: false }, | ||
| defaultValue: { summary: 'false' }, |
Contributor
There was a problem hiding this comment.
'false' it is wrong, should be false || true
| table: { | ||
| type: { summary: 'string' }, | ||
| defaultValue: { summary: '' }, | ||
| defaultValue: { summary: "''" }, |
| table: { | ||
| type: { summary: 'string' }, | ||
| defaultValue: { summary: 'pi pi-home' }, | ||
| defaultValue: { summary: "'pi pi-home'" }, |
| table: { | ||
| type: { summary: "'_self' | '_blank'" }, | ||
| defaultValue: { summary: '_self' }, | ||
| defaultValue: { summary: "'_self'" }, |
| table: { | ||
| type: { summary: 'MenuItemTagSeverity' }, | ||
| defaultValue: { summary: 'info' }, | ||
| defaultValue: { summary: "'info'" }, |
Restore plain string/boolean summaries in docs tables per review feedback. Co-authored-by: Cursor <cursoragent@cursor.com>
Support top, bottom, left, right, and auto sides with collision-aware positioning so panels open where space allows. Co-authored-by: Cursor <cursoragent@cursor.com>
Expose auto, top, bottom, left, and right in argTypes for the overlay menu. Co-authored-by: Cursor <cursoragent@cursor.com>
Wire the sidebar profile trigger to DropdownMenu with side top, Avatar WithImage pattern, and the Figma account menu items. Co-authored-by: Cursor <cursoragent@cursor.com>
Move vertical scrolling into Sidebar via ScrollArea, drop SidebarGroup scroll prop, and apply header/nav/footer spacing on the shell regions instead of consumer content wrappers. Co-authored-by: Cursor <cursoragent@cursor.com>
Refresh Purpose, Usage composition snippet, ariaLabel prop, and Storybook story list to match the region-based layout API. Co-authored-by: Cursor <cursoragent@cursor.com>
Inject spec Usage into Sidebar docs, drop content padding wrappers, remove SidebarGroup scroll usage, and note ScrollArea is built into Sidebar. Co-authored-by: Cursor <cursoragent@cursor.com>
Remove pb-0 override so the header region keeps consistent spacing on all sides. Co-authored-by: Cursor <cursoragent@cursor.com>
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
5 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.
Summary
MenuIteminteraction behavior: focus ring lives on the real interactive element (a/button), icon colors now respond to selected/hover/focus/disabled states, and non-behavioral attrs are forwarded safelyMenuItemstories to a leaner set and fix controls behavior for the default render templateSidebarregions and update sidebar/story templates to define spacing in slot content, including a new header+profile footer layout based on the provided Figma nodeTest plan
eslint --fix+prettier --write)pnpm storybook:devand verify:Webkit/Navigation/MenuItemfocus/hover/selected icon behaviorWebkit/Layout/Sidebarstories: content-only, with header search, and with header+profile footerpnpm storybook:buildMade with Cursor