From 72e82dbc2f4ce5db4318ff3133a48916053e78f7 Mon Sep 17 00:00:00 2001
From: Reza Rahman <13340707+rezrah@users.noreply.github.com>
Date: Tue, 17 Dec 2024 12:00:22 +0000
Subject: [PATCH] Fixed delayed appearance of heading separator in SubNav

---
 .changeset/long-nails-rest.md                 |  5 ++
 packages/react/src/SubNav/SubNav.module.css   |  4 ++
 .../react/src/SubNav/SubNav.module.css.d.ts   |  1 +
 packages/react/src/SubNav/SubNav.tsx          | 48 ++++++++++---------
 4 files changed, 36 insertions(+), 22 deletions(-)
 create mode 100644 .changeset/long-nails-rest.md

diff --git a/.changeset/long-nails-rest.md b/.changeset/long-nails-rest.md
new file mode 100644
index 000000000..4adc035d7
--- /dev/null
+++ b/.changeset/long-nails-rest.md
@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Fixed delayed appearance of heading separator in `SubNav`.
diff --git a/packages/react/src/SubNav/SubNav.module.css b/packages/react/src/SubNav/SubNav.module.css
index fd70cea5a..84990236d 100644
--- a/packages/react/src/SubNav/SubNav.module.css
+++ b/packages/react/src/SubNav/SubNav.module.css
@@ -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;
diff --git a/packages/react/src/SubNav/SubNav.module.css.d.ts b/packages/react/src/SubNav/SubNav.module.css.d.ts
index f28b9c4bc..5574384ea 100644
--- a/packages/react/src/SubNav/SubNav.module.css.d.ts
+++ b/packages/react/src/SubNav/SubNav.module.css.d.ts
@@ -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;
diff --git a/packages/react/src/SubNav/SubNav.tsx b/packages/react/src/SubNav/SubNav.tsx
index e255be12d..62508735a 100644
--- a/packages/react/src/SubNav/SubNav.tsx
+++ b/packages/react/src/SubNav/SubNav.tsx
@@ -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(