fix(MainNavigationBar): allow right slot to expand#1546
fix(MainNavigationBar): allow right slot to expand#1546AlexandraGallipoliRodrigues wants to merge 10 commits intomasterfrom
Conversation
AlexandraGallipoliRodrigues
requested review from
atabel,
ieduardogf and
yceballost
|
Size stats
|
|
Deploy preview for mistica-web ready!
Deployed with vercel-action |
|
Accessibility report ℹ️ You can run this locally by executing |
There was a problem hiding this comment.
Pull request overview
This PR fixes layout limitations in MainNavigationBar/NavigationBar right content so the right slot can properly expand when the provided right element is intended to be full-width, and introduces a new InlineItem API to allow individual inline children to opt into flex-grow behavior.
Changes:
- Wrap
rightcontent inNavigationBarContentContainerwhenexpandRightContentis enabled and the right element hasfullWidth, plus add supporting CSS to allow correct shrinking/expansion. - Add
InlineItemwithgrowsupport so specificInlinechildren can expand, and switchInlinerendering to inspect children for grow items. - Re-export
InlineItemfrom the library entrypoint.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| src/navigation-bar.tsx | Conditionally wraps right slot content to allow full-width expansion when requested. |
| src/navigation-bar.css.ts | Tweaks expanded right-slot sizing and adds a wrapper style for full-width content. |
| src/inline.tsx | Adds InlineItem API and updates child rendering to support grow items. |
| src/inline.css.ts | Adds flex container and grow-item styles needed for the new InlineItem behavior. |
| src/index.tsx | Exposes InlineItem from the public package API. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| return ( | ||
| <div | ||
| key={index} |
There was a problem hiding this comment.
I dont feel really easy in terms of devExp to have another component called InlineItem to manage this kind of things
Is not there any other solution? maybe manage this property in the <Inline> component?
wdyt @atabel ?
There was a problem hiding this comment.
Good point, thanks! I’ve removed the public InlineItem component and moved the behavior into Inline via a growItems prop
…OBVIVO-3456-fix-MainNavigationBar-allow-right-slot-to-expand
|
Size stats
|
| hasGrowItem && styles.flexLayout, | ||
| isStringSpace ? (wrap ? styles.stringSpaceWithWrap : styles.stringSpace) : styles.marginInline |
…OBVIVO-3456-fix-MainNavigationBar-allow-right-slot-to-expand
…ow-right-slot-to-expand
| type Props = { | ||
| space: FlexSpace | ByBreakpoint<NumericSpace>; | ||
| verticalSpace?: ByBreakpoint<NumericSpace>; | ||
| alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline'; | ||
| children: React.ReactNode; | ||
| className?: string; | ||
| role?: string; | ||
| 'aria-label'?: string; | ||
| 'aria-labelledby'?: string; | ||
| fullWidth?: boolean; | ||
| dataAttributes?: DataAttributes; | ||
| wrap?: boolean; | ||
| growItems?: number | ReadonlyArray<number>; | ||
| }; |
| <div | ||
| key={getChildKey(child, index)} | ||
| role={role === 'list' ? 'listitem' : undefined} | ||
| className={classnames(shouldGrowItem(growItems, index) && styles.growItem)} |
ticket: https://jira.tid.es/browse/WEB-2439
figma: https://www.figma.com/design/HA6UnnWC187IL1YujMYlYZ/Main-Navigation-Bar?node-id=2412-5583
MainNavigationBar: allows the right slot to span the full width. The change is guarded so the extra wrapper is only applied when the right slot is expanded and the provided right element explicitly has fullWidth. Existing right slots like NavigationBarActionGroup are not wrapped.InlineItem grow: allows you to specify which Inline child should occupy the remaining space.bug:
fix, local playroom:
