Skip to content

Commit 21b2584

Browse files
rezrahrezrah
authored
Fix SubNav regressions (#851)
1 parent 1adc975 commit 21b2584

8 files changed

+88
-43
lines changed

‎packages/react/src/SubNav/SubNav.module.css‎

Lines changed: 44 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.SubNav__container {
22
position: absolute;
33
width: 100%;
4+
z-index: 2;
45
}
56

67
.SubNav__container--with-anchor-nav {
@@ -89,16 +90,50 @@
8990
z-index: 91; /* must be higher than subdomain nav bar */
9091
}
9192

93+
.SubNav__anchor-menu-container {
94+
opacity: 0;
95+
background-color: transparent;
96+
transform: translateY(var(--brand-animation-variant-slideInDown-distance));
97+
transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),
98+
background-color var(--brand-animation-duration-default) var(--brand-animation-easing-default);
99+
}
100+
101+
.SubNav__anchor-menu-outer-container--stuck .SubNav__anchor-menu-container {
102+
transform: translateY(0);
103+
opacity: 1;
104+
background-color: var(--brand-color-canvas-default);
105+
}
106+
107+
.SubNav__anchor-menu-outer-container {
108+
height: 0;
109+
transition: height var(--brand-animation-duration-default) var(--brand-animation-easing-default);
110+
}
111+
112+
.SubNav__anchor-menu-outer-container--stuck {
113+
height: auto;
114+
}
115+
116+
.SubNav__sub-menu--anchor {
117+
opacity: 0;
118+
visibility: hidden;
119+
transform: translateY(var(--brand-animation-variant-slideInDown-distance));
120+
transition: opacity var(--brand-animation-duration-default) var(--brand-animation-easing-default),
121+
height var(--brand-animation-duration-default) var(--brand-animation-easing-default),
122+
transform var(--brand-animation-duration-default) var(--brand-animation-easing-default);
123+
}
124+
125+
.SubNav__anchor-menu-outer-container--stuck .SubNav__sub-menu--anchor {
126+
visibility: visible;
127+
opacity: 1;
128+
transform: translateY(0);
129+
}
130+
92131
.SubNav__sub-menu--anchor {
93132
display: flex;
94133
padding-block-start: var(--base-size-12);
95134
padding-block-end: var(--base-size-20);
96135
}
97136

98-
.SubNav__anchor-menu-outer-container--stuck {
99-
background-color: var(--brand-color-canvas-default);
100-
}
101-
102137
.SubNav__sub-menu--anchor .SubNav__sub-menu-list {
103138
display: inline-flex;
104139
list-style-type: none;
@@ -277,10 +312,10 @@
277312
position: relative;
278313
width: 100%;
279314
display: flex;
280-
281315
order: 1;
282316
z-index: 9999;
283317
padding-inline: 0;
318+
justify-content: end;
284319
}
285320

286321
.SubNav__overlay-toggle-content {
@@ -340,7 +375,6 @@
340375
}
341376

342377
.SubNav__anchor-menu-outer-container {
343-
overflow: hidden;
344378
position: sticky;
345379
top: -1px;
346380
}
@@ -405,6 +439,10 @@
405439
top: calc(var(--base-size-4) / 4 * -1);
406440
}
407441

442+
.SubNav__overlay-toggle-content--end {
443+
justify-content: flex-end;
444+
}
445+
408446
@media screen and (min-width: 48rem) {
409447
.SubNav {
410448
padding: var(--base-size-16) var(--base-size-24);

‎packages/react/src/SubNav/SubNav.module.css.d.ts‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,9 @@ declare const styles: {
1414
readonly "SubNav__sub-menu-toggle": string;
1515
readonly "SubNav__heading-separator": string;
1616
readonly "SubNav__anchor-menu-outer-container": string;
17-
readonly "SubNav__sub-menu--anchor": string;
17+
readonly "SubNav__anchor-menu-container": string;
1818
readonly "SubNav__anchor-menu-outer-container--stuck": string;
19+
readonly "SubNav__sub-menu--anchor": string;
1920
readonly "SubNav__sub-menu-list": string;
2021
readonly "SubNav__link--is-in-view": string;
2122
readonly "SubNav__link-label": string;
@@ -30,8 +31,8 @@ declare const styles: {
3031
readonly "SubNav__action": string;
3132
readonly "SubNav__sub-menu": string;
3233
readonly "SubNav__sub-menu--dropdown": string;
33-
readonly "SubNav__anchor-menu-container": string;
3434
readonly "SubNav__overlay-toggle-icon": string;
35+
readonly "SubNav__overlay-toggle-content--end": string;
3536
readonly "SubNav__heading-label": string;
3637
readonly "SubNav__link--expanded": string;
3738
readonly "fade-in-down": string;

‎packages/react/src/SubNav/SubNav.stories.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,13 +16,9 @@ const Template: StoryFn<typeof SubNav> = args => (
1616
<SubNav.Heading href="#">Heading</SubNav.Heading>
1717
<SubNav.Link href="#">Link </SubNav.Link>
1818
<SubNav.Link href="#">Link</SubNav.Link>
19-
<SubNav.Link href="#" aria-current="page">
20-
Link
21-
</SubNav.Link>
2219
<SubNav.Link href="#">Link</SubNav.Link>
23-
<SubNav.Link href="#" aria-current="false">
24-
Link
25-
</SubNav.Link>
20+
<SubNav.Link href="#">Link</SubNav.Link>
21+
<SubNav.Link href="#">Link</SubNav.Link>
2622
<SubNav.Link href="#">Link</SubNav.Link>
2723
<SubNav.Action href="#">Primary CTA</SubNav.Action>
2824
</SubNav>

‎packages/react/src/SubNav/SubNav.tsx‎

Lines changed: 39 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ export const useSubNavContext = () => {
7878
}
7979

8080
function SubNavProvider({children}: {children: React.ReactNode}) {
81+
const anchoredNavOuterPortalRef = React.useRef<HTMLDivElement>(null)
8182
const anchoredNavPortalRef = React.useRef<HTMLDivElement>(null)
8283

8384
const value = useMemo(
@@ -88,7 +89,7 @@ function SubNavProvider({children}: {children: React.ReactNode}) {
8889
)
8990

9091
useEffect(() => {
91-
const menuContainer = anchoredNavPortalRef.current
92+
const menuContainer = anchoredNavOuterPortalRef.current
9293

9394
const observer = new IntersectionObserver(
9495
([entry]) => {
@@ -112,7 +113,7 @@ function SubNavProvider({children}: {children: React.ReactNode}) {
112113
<SubNavContext.Provider value={value}>
113114
{children}
114115

115-
<div className={styles['SubNav__anchor-menu-outer-container']}>
116+
<div className={styles['SubNav__anchor-menu-outer-container']} ref={anchoredNavOuterPortalRef}>
116117
<div className={clsx(styles['SubNav__anchor-menu-container'])} ref={anchoredNavPortalRef} />
117118
</div>
118119
</SubNavContext.Provider>
@@ -217,12 +218,11 @@ const _SubNavRoot = memo(({id, children, className, 'data-testid': testId, fullW
217218
{heading: undefined, links: [], action: undefined},
218219
)
219220

220-
// The values are different types depending on whether a submenu is present
221221
const activeLinklabel =
222222
typeof activeLink?.props.children === 'string' ? activeLink.props.children : activeLink?.props.children[0]
223+
223224
// needed to prevent rendering of anchor subnav inside the narrow <button> element
224225
const MaybeSubNav = activeLink?.props.children?.[1]?.props?.variant === 'anchor' && activeLink.props.children?.[1]
225-
226226
return (
227227
<div className={clsx(styles['SubNav__container'], hasAnchoredNav && styles['SubNav__container--with-anchor-nav'])}>
228228
<SubNavProvider>
@@ -241,26 +241,29 @@ const _SubNavRoot = memo(({id, children, className, 'data-testid': testId, fullW
241241
<div ref={rootRef} className={styles['SubNav--header-container-outer']}>
242242
<div className={styles['SubNav__header-container']}>
243243
{HeadingChild && <div className={styles['SubNav__heading-container']}>{HeadingChild}</div>}
244-
<span role="separator" className={styles['SubNav__heading-separator']} aria-hidden>
245-
<svg
246-
xmlns="http://www.w3.org/2000/svg"
247-
width="8"
248-
height="16"
249-
viewBox="0 0 8 16"
250-
fill="none"
251-
aria-hidden
252-
>
253-
<g clipPath="url(#clip0_50_1307)">
254-
<path d="M0 15.2992L5.472 0.701172H7.632L2.16 15.2992H0Z" fill="currentColor" />
255-
</g>
256-
<defs>
257-
<clipPath id="clip0_50_1307">
258-
<rect width="7.632" height="14.598" transform="translate(0 0.701172)" />
259-
</clipPath>
260-
</defs>
261-
</svg>
262-
</span>
263-
{activeLink && activeLinklabel && !isLarge && (
244+
{activeLinklabel && (
245+
<span role="separator" className={styles['SubNav__heading-separator']} aria-hidden>
246+
<svg
247+
xmlns="http://www.w3.org/2000/svg"
248+
width="8"
249+
height="16"
250+
viewBox="0 0 8 16"
251+
fill="none"
252+
aria-hidden
253+
>
254+
<g clipPath="url(#clip0_50_1307)">
255+
<path d="M0 15.2992L5.472 0.701172H7.632L2.16 15.2992H0Z" fill="currentColor" />
256+
</g>
257+
<defs>
258+
<clipPath id="clip0_50_1307">
259+
<rect width="7.632" height="14.598" transform="translate(0 0.701172)" />
260+
</clipPath>
261+
</defs>
262+
</svg>
263+
</span>
264+
)}
265+
266+
{!isLarge && (
264267
<button
265268
className={clsx(
266269
styles['SubNav__overlay-toggle'],
@@ -271,11 +274,18 @@ const _SubNavRoot = memo(({id, children, className, 'data-testid': testId, fullW
271274
aria-expanded={isOpenAtNarrow ? 'true' : 'false'}
272275
aria-controls={idForLinkContainer}
273276
>
274-
<span className="visually-hidden">Navigation menu. Current page: </span>
275-
<span className={styles['SubNav__overlay-toggle-content']}>
276-
<Text as="span" size="200">
277-
{activeLinklabel}
278-
</Text>
277+
{activeLinklabel && <span className="visually-hidden">Navigation menu. Current page: </span>}
278+
<span
279+
className={clsx(
280+
styles['SubNav__overlay-toggle-content'],
281+
!activeLinklabel && styles['SubNav__overlay-toggle-content--end'],
282+
)}
283+
>
284+
{activeLinklabel && (
285+
<Text as="span" size="200">
286+
{activeLinklabel}
287+
</Text>
288+
)}
279289
{isOpenAtNarrow ? (
280290
<ChevronUpIcon className={styles['SubNav__overlay-toggle-icon']} size={24} />
281291
) : (

‎packages/react/src/SubNav/SubNav.visual.spec.ts-snapshots/Visual-Comparison-SubNav-Mobile-viewport-test-6184a--SubNav-Narrow-Anchor-Nav-Variant-Menu-Open-1-linux.png‎

-86.7 KB
Loading

‎packages/react/src/SubNav/SubNav.visual.spec.ts-snapshots/Visual-Comparison-SubNav-Mobile-viewport-test-d89c8-av-Variant-SubNav-Narrow-Anchor-Nav-Variant-1-linux.png‎

-5.51 KB
Loading

‎packages/react/src/SubNav/SubNav.visual.spec.ts-snapshots/Visual-Comparison-SubNav-SubNav-Anchor-Nav-Variant-1-linux.png‎

-2.15 KB
Loading

‎packages/react/src/SubNav/SubNav.visual.spec.ts-snapshots/Visual-Comparison-SubNav-SubNav-Default-1-linux.png‎

-739 Bytes
Loading

0 commit comments

Comments
 (0)