Fixed delayed appearance of heading separator in SubNav (#866)

Author: rezrah

.changeset/long-nails-rest.md

@@ -0,0 +1,5 @@
+---
+'@primer/react-brand': patch
+---
+
+Fixed delayed appearance of heading separator in `SubNav`.

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;

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;

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(