Skip to content

fix(navigation primary): secondary items fit content at #2405

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

Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

fix(navigation primary): secondary items fit content at #2405

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0eca2d1
fix(navigation-primary): first pass at fit-content-at menus
zeroedin May 27, 2025
4592cd0
fix(navigation-primary): correct misaligned breakpoints names and values
zeroedin May 27, 2025
cd15565
Merge branch 'main' into fix/navigation-primary/secondary-items-fit-c…
zeroedin Jul 2, 2025
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 elements/rh-navigation-primary/demo/rh-navigation-primary.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,7 +232,7 @@ <h2>Products Content</h2>
<a href="#console">Support</a>
</rh-navigation-primary-item>

<rh-navigation-primary-item slot="dropdowns" hide-at="sm" variant="dropdown">
<rh-navigation-primary-item slot="dropdowns" hide-at="xs" menu-fit-content-at="sm" variant="dropdown">
<rh-icon slot="icon" icon="search" set="ui"></rh-icon>
<span slot="summary">Search</span>
<form>
Expand All @@ -241,7 +241,7 @@ <h2>Products Content</h2>
</form>
</rh-navigation-primary-item>

<rh-navigation-primary-item slot="dropdowns" hide-at="sm" variant="dropdown">
<rh-navigation-primary-item slot="dropdowns" hide-at="xs" menu-fit-content-at="sm" variant="dropdown">
<rh-icon slot="icon" icon="notification" set="ui"></rh-icon>
<span slot="summary">For you</span>
<h2>Recommendations for you</h2>
Expand Down
79 changes: 71 additions & 8 deletions elements/rh-navigation-primary/rh-navigation-primary-item.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,35 +23,47 @@
}

@container (min-width: 320px) {
:host([hide-at='xs']) {
:host([hide-at='2xs']) {
display: block;
}
}

@container (min-width: 567px) {
:host([hide-at='sm']) {
:host([hide-at='xs']) {
display: block;
}
}

@container (min-width: 768px) {
:host([hide-at='md']) {
:host([hide-at='sm']) {
display: block;
}
}

@container (min-width: 992px) {
:host([hide-at='lg']) {
:host([hide-at='md']) {
display: block;
}
}

@container (min-width: 1200px) {
:host([hide-at='lg']) {
display: block;
}
}

@container (min-width: 1440px) {
:host([hide-at='xl']) {
display: block;
}
}

@container (min-width: 1680px) {
:host([hide-at='2xl']) {
display: block;
}
}

:host(:is(:focus, :focus-visible)) {
outline: none;
outline-style: none;
Expand Down Expand Up @@ -289,10 +301,61 @@
max-block-size: calc(100dvh - var(--_navbar-height));
overflow-y: auto;

@container (min-width: 1200px) {
inline-size: fit-content;
border-end-end-radius: calc(var(--rh-border-radius-default, 3px) * 2);
border-end-start-radius: calc(var(--rh-border-radius-default, 3px) * 2);
&.fit-content-at-xs {
@container (min-width: 567px) {
inline-size: fit-content;
border-end-end-radius: calc(var(--rh-border-radius-default, 3px) * 2);
border-end-start-radius: calc(var(--rh-border-radius-default, 3px) * 2);
}
}

&.fit-content-at-sm {
@container (min-width: 768px) {
inline-size: fit-content;
border-end-end-radius: calc(var(--rh-border-radius-default, 3px) * 2);
border-end-start-radius: calc(var(--rh-border-radius-default, 3px) * 2);
}
}

&.fit-content-at-md {
@container (min-width: 992px) {
inline-size: fit-content;
border-end-end-radius: calc(var(--rh-border-radius-default, 3px) * 2);
border-end-start-radius: calc(var(--rh-border-radius-default, 3px) * 2);
}
}

&.fit-content-at-lg {
@container (min-width: 1200px) {
inline-size: fit-content;
border-end-end-radius: calc(var(--rh-border-radius-default, 3px) * 2);
border-end-start-radius: calc(var(--rh-border-radius-default, 3px) * 2);
}
}

&.fit-content-at-xl {
@container (min-width: 1440px) {
inline-size: fit-content;
border-end-end-radius: calc(var(--rh-border-radius-default, 3px) * 2);
border-end-start-radius: calc(var(--rh-border-radius-default, 3px) * 2);
}
}

&.fit-content-at-2xl {
@container (min-width: 1680px) {
inline-size: fit-content;
border-end-end-radius: calc(var(--rh-border-radius-default, 3px) * 2);
border-end-start-radius: calc(var(--rh-border-radius-default, 3px) * 2);
}
}

/* default fit content width */
&:not(.fit-content-at-xs, .fit-content-at-sm, .fit-content-at-md, .fit-content-at-lg, .fit-content-at-xl, .fit-content-at-2xl) {
@container (min-width: 1200px) {
inline-size: fit-content;
border-end-end-radius: calc(var(--rh-border-radius-default, 3px) * 2);
border-end-start-radius: calc(var(--rh-border-radius-default, 3px) * 2);
}
}
}

Expand Down
18 changes: 15 additions & 3 deletions elements/rh-navigation-primary/rh-navigation-primary-item.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,10 +46,18 @@ export class RhNavigationPrimaryItem extends LitElement {

/**
* Hides the element at various container query based breakpoints.
* Breakpoints available 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
* Breakpoints available '2xs', 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
*/
@property({ reflect: true, attribute: 'hide-at' })
hideAt?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' = undefined;
hideAt?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' = undefined;

/**
* Secondary slotted menus go from full screen to fit content
* at container query based breakpoints. Defaults to 'lg' (1200px)
* Breakpoints available 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'
*/
@property({ reflect: true, attribute: 'menu-fit-content-at' })
menuFitContentAt?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' = undefined;

/** Shorthand for the `icon` slot, the value is icon name */
@property() icon?: IconNameFor<IconSetName>;
Expand Down Expand Up @@ -86,6 +94,7 @@ export class RhNavigationPrimaryItem extends LitElement {
const { variant = '' } = this;
const compact = this.compact ?? true;
const hamburger = (!this.getAttribute('slot'));
const { menuFitContentAt = '' } = this;
return html`
<div id="container" class="${classMap({
[variant]: true,
Expand All @@ -103,7 +112,10 @@ export class RhNavigationPrimaryItem extends LitElement {
<div id="summary-text"><slot name="summary">${this.summary}</slot></div>
<rh-icon icon="caret-down" set="microns"></rh-icon>
</summary>
<rh-navigation-primary-item-menu id="details-content">
<rh-navigation-primary-item-menu id="details-content"
class="${classMap({
[`fit-content-at-${menuFitContentAt}`]: menuFitContentAt && !hamburger,
})}">
<slot></slot>
</rh-navigation-primary-item-menu>
</details>` : html`
Expand Down
Loading