Skip to content

Commit

Permalink
Fixed delayed appearance of heading separator in SubNav (#866)
Browse files Browse the repository at this point in the history
  • Loading branch information
rezrah authored Dec 18, 2024
1 parent 4bac386 commit 8223135
Show file tree
Hide file tree
Showing 4 changed files with 36 additions and 22 deletions.
5 changes: 5 additions & 0 deletions .changeset/long-nails-rest.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/react-brand': patch
---

Fixed delayed appearance of heading separator in `SubNav`.
4 changes: 4 additions & 0 deletions packages/react/src/SubNav/SubNav.module.css
Original file line number Diff line number Diff line change
Expand Up @@ -278,6 +278,10 @@
z-index: 9998;
}

.SubNav__heading-separator:not(.SubNav__heading-separator--has-adjacent-label) {
display: none;
}

.SubNav__links-overlay {
position: relative;
display: flex;
Expand Down
1 change: 1 addition & 0 deletions packages/react/src/SubNav/SubNav.module.css.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ declare const styles: {
readonly "SubNav--open": string;
readonly "fade-in": string;
readonly "SubNav__header-container": string;
readonly "SubNav__heading-separator--has-adjacent-label": string;
readonly "SubNav__links-overlay--open": string;
readonly "SubNav__link--has-sub-menu": string;
readonly "SubNav__overlay-toggle": string;
Expand Down
48 changes: 26 additions & 22 deletions packages/react/src/SubNav/SubNav.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -239,28 +239,32 @@ const _SubNavRoot = memo(({id, children, className, 'data-testid': testId, fullW
<div ref={rootRef} className={styles['SubNav--header-container-outer']}>
<div className={styles['SubNav__header-container']}>
{HeadingChild && <div className={styles['SubNav__heading-container']}>{HeadingChild}</div>}
{(activeLinklabel || isLarge) && (
<span role="separator" className={styles['SubNav__heading-separator']} aria-hidden>
<svg
xmlns="http://www.w3.org/2000/svg"
width="8"
height="16"
viewBox="0 0 8 16"
fill="none"
aria-hidden
>
<g clipPath="url(#clip0_50_1307)">
<path d="M0 15.2992L5.472 0.701172H7.632L2.16 15.2992H0Z" fill="currentColor" />
</g>
<defs>
<clipPath id="clip0_50_1307">
<rect width="7.632" height="14.598" transform="translate(0 0.701172)" />
</clipPath>
</defs>
</svg>
</span>
)}

<span
role="separator"
className={clsx(
styles['SubNav__heading-separator'],
activeLinklabel && styles['SubNav__heading-separator--has-adjacent-label'],
)}
aria-hidden
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="8"
height="16"
viewBox="0 0 8 16"
fill="none"
aria-hidden
>
<g clipPath="url(#clip0_50_1307)">
<path d="M0 15.2992L5.472 0.701172H7.632L2.16 15.2992H0Z" fill="currentColor" />
</g>
<defs>
<clipPath id="clip0_50_1307">
<rect width="7.632" height="14.598" transform="translate(0 0.701172)" />
</clipPath>
</defs>
</svg>
</span>
{!isLarge && (
<button
className={clsx(
Expand Down

0 comments on commit 8223135

Please sign in to comment.