UnderlineNav: Display loading counters only for items with the "count…

…er" prop (#4745) * shows LoadingCounter only when counter prop is given * shows LoadingCounter only when counter prop is given * test(vrt): update snapshots * Update .changeset/erken-gelen-oturur.md --------- Co-authored-by: Katie Langerman <18661030+langermank@users.noreply.github.com> Co-authored-by: Josh Black <joshblack@users.noreply.github.com> Co-authored-by: Armağan <broccolinisoup@github.com>
primer · Nov 12, 2024 · 3f508c7 · 3f508c7
1 parent 1fb1160
commit 3f508c7
Show file tree

Hide file tree

Showing 11 changed files with 12 additions and 7 deletions.
diff --git a/.changeset/erken-gelen-oturur.md b/.changeset/erken-gelen-oturur.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+UnderlineNav: Display loading counters only for items with the "counter" prop.
diff --git a/...test.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-colorblind-linux.png b/...test.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-colorblind-linux.png
diff --git a/...Nav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-dimmed-linux.png b/...Nav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-dimmed-linux.png
diff --git a/...t.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-high-contrast-linux.png b/...t.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-high-contrast-linux.png
diff --git a/...derlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-linux.png b/...derlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-linux.png
diff --git a/...test.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-tritanopia-linux.png b/...test.ts-snapshots/UnderlineNav-Counters-Loading-State-dark-tritanopia-linux.png
diff --git a/...est.ts-snapshots/UnderlineNav-Counters-Loading-State-light-colorblind-linux.png b/...est.ts-snapshots/UnderlineNav-Counters-Loading-State-light-colorblind-linux.png
diff --git a/....ts-snapshots/UnderlineNav-Counters-Loading-State-light-high-contrast-linux.png b/....ts-snapshots/UnderlineNav-Counters-Loading-State-light-high-contrast-linux.png
diff --git a/...erlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-light-linux.png b/...erlineNav.test.ts-snapshots/UnderlineNav-Counters-Loading-State-light-linux.png
diff --git a/...est.ts-snapshots/UnderlineNav-Counters-Loading-State-light-tritanopia-linux.png b/...est.ts-snapshots/UnderlineNav-Counters-Loading-State-light-tritanopia-linux.png
diff --git a/packages/react/src/internal/components/UnderlineTabbedInterface.tsx b/packages/react/src/internal/components/UnderlineTabbedInterface.tsx
@@ -220,17 +220,17 @@ export const UnderlineItem = forwardRef(
             {children}
           </span>
         )}
-        {loadingCounters ? (
-          <span data-component="counter">
-            <LoadingCounter />
-          </span>
-        ) : (
-          counter !== undefined && (
+        {counter !== undefined ? (
+          loadingCounters ? (
+            <span data-component="counter">
+              <LoadingCounter />
+            </span>
+          ) : (
             <span data-component="counter">
               <CounterLabel>{counter}</CounterLabel>
             </span>
           )
-        )}
+        ) : null}
       </StyledUnderlineItem>
     )
   },