Bug fix: make active label bold in ActionList (#4392)

* make bold * Create wicked-rings-lay.md * snaps --------- Co-authored-by: Josh Black <joshblack@github.com>
primer · Mar 22, 2024 · f100683 · f100683
1 parent b812dd7
commit f100683
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 15 deletions.
diff --git a/.changeset/wicked-rings-lay.md b/.changeset/wicked-rings-lay.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Bug fix: make `active` label bold in ActionList
diff --git a/packages/react/src/ActionList/Item.tsx b/packages/react/src/ActionList/Item.tsx
@@ -320,7 +320,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
                     id={labelId}
                     sx={{
                       flexGrow: slots.inlineDescription ? 0 : 1,
-                      fontWeight: slots.inlineDescription || slots.blockDescription ? 'bold' : 'normal',
+                      fontWeight: slots.inlineDescription || slots.blockDescription || active ? 'bold' : 'normal',
                       marginBlockEnd: slots.blockDescription ? '4px' : undefined,
                     }}
                   >

diff --git a/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap b/packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap
@@ -17,6 +17,14 @@ exports[`NavList renders a simple list 1`] = `
 }
 
 .c6 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  font-weight: 600;
+}
+
+.c8 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -357,7 +365,7 @@ exports[`NavList renders a simple list 1`] = `
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              class="c6"
+              class="c8"
               id=":r2:--label"
             >
               About
@@ -380,7 +388,7 @@ exports[`NavList renders a simple list 1`] = `
             data-component="ActionList.Item--DividerContainer"
           >
             <span
-              class="c6"
+              class="c8"
               id=":r3:--label"
             >
               Contact
@@ -434,6 +442,14 @@ exports[`NavList renders with groups 1`] = `
 }
 
 .c10 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  font-weight: 600;
+}
+
+.c12 {
   -webkit-box-flex: 1;
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
@@ -825,7 +841,7 @@ exports[`NavList renders with groups 1`] = `
                 data-component="ActionList.Item--DividerContainer"
               >
                 <span
-                  class="c10"
+                  class="c12"
                   id=":r8:--label"
                 >
                   Avatar
@@ -894,6 +910,14 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   color: var(--fgColor-default,var(--color-fg-default,#1F2328));
 }
 
+.c14 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  font-weight: 600;
+}
+
 .c10 {
   padding: 0;
   margin: 0;
@@ -917,8 +941,8 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   --divider-color: transparent !important;
 }
 
-.c14:hover:not([aria-disabled]):not([data-inactive]) + .c3,
-.c14[data-focus-visible-added] + li {
+.c15:hover:not([aria-disabled]):not([data-inactive]) + .c3,
+.c15[data-focus-visible-added] + li {
   --divider-color: transparent;
 }
 
@@ -1287,7 +1311,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
                   data-component="ActionList.Item--DividerContainer"
                 >
                   <span
-                    class="c1 c7"
+                    class="c1 c14"
                     id=":r22:--label"
                   >
                     Sub Item
@@ -1334,14 +1358,6 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   flex-grow: 1;
 }
 
-.c7 {
-  -webkit-box-flex: 1;
-  -webkit-flex-grow: 1;
-  -ms-flex-positive: 1;
-  flex-grow: 1;
-  font-weight: 400;
-}
-
 .c8 {
   height: 20px;
   -webkit-flex-shrink: 0;
@@ -1363,6 +1379,14 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   display: none;
 }
 
+.c7 {
+  -webkit-box-flex: 1;
+  -webkit-flex-grow: 1;
+  -ms-flex-positive: 1;
+  flex-grow: 1;
+  font-weight: 600;
+}
+
 .c9 {
   -webkit-transform: rotate(0deg);
   -ms-transform: rotate(0deg);