font weight bold for ActionList.Item with inline description (#3170)

* change font weight to bold when an inline description is added to ActionList.Item * add changeset * Update src/ActionList/Item.tsx Co-authored-by: Cole Bemis <colebemis@github.com> * test(vrt): update snapshots --------- Co-authored-by: Cole Bemis <colebemis@github.com> Co-authored-by: lukasoppermann <lukasoppermann@users.noreply.github.com>
primer · Apr 14, 2023 · 1f2df9b · 1f2df9b
1 parent d749f49
commit 1f2df9b
Show file tree

Hide file tree

Showing 21 changed files with 17 additions and 1 deletion.
diff --git a/.changeset/strange-bears-tap.md b/.changeset/strange-bears-tap.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+When an inline description is added to the item the normal text is set to bold
diff --git a/...nList.test.ts-snapshots/ActionList-Inline-Description-dark-colorblind-linux.png b/...nList.test.ts-snapshots/ActionList-Inline-Description-dark-colorblind-linux.png
diff --git a/...ctionList.test.ts-snapshots/ActionList-Inline-Description-dark-dimmed-linux.png b/...ctionList.test.ts-snapshots/ActionList-Inline-Description-dark-dimmed-linux.png
diff --git a/...st.test.ts-snapshots/ActionList-Inline-Description-dark-high-contrast-linux.png b/...st.test.ts-snapshots/ActionList-Inline-Description-dark-high-contrast-linux.png
diff --git a/...nents/ActionList.test.ts-snapshots/ActionList-Inline-Description-dark-linux.png b/...nents/ActionList.test.ts-snapshots/ActionList-Inline-Description-dark-linux.png
diff --git a/...nList.test.ts-snapshots/ActionList-Inline-Description-dark-tritanopia-linux.png b/...nList.test.ts-snapshots/ActionList-Inline-Description-dark-tritanopia-linux.png
diff --git a/...List.test.ts-snapshots/ActionList-Inline-Description-light-colorblind-linux.png b/...List.test.ts-snapshots/ActionList-Inline-Description-light-colorblind-linux.png
diff --git a/...t.test.ts-snapshots/ActionList-Inline-Description-light-high-contrast-linux.png b/...t.test.ts-snapshots/ActionList-Inline-Description-light-high-contrast-linux.png
diff --git a/...ents/ActionList.test.ts-snapshots/ActionList-Inline-Description-light-linux.png b/...ents/ActionList.test.ts-snapshots/ActionList-Inline-Description-light-linux.png
diff --git a/...List.test.ts-snapshots/ActionList-Inline-Description-light-tritanopia-linux.png b/...List.test.ts-snapshots/ActionList-Inline-Description-light-tritanopia-linux.png
diff --git a/...test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-colorblind-linux.png b/...test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-colorblind-linux.png
diff --git a/...ist.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-dimmed-linux.png b/...ist.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-dimmed-linux.png
diff --git a/...t.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-high-contrast-linux.png b/...t.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-high-contrast-linux.png
diff --git a/...ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-linux.png b/...ActionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-linux.png
diff --git a/...test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-tritanopia-linux.png b/...test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-dark-tritanopia-linux.png
diff --git a/...est.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-colorblind-linux.png b/...est.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-colorblind-linux.png
diff --git a/....ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-high-contrast-linux.png b/....ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-high-contrast-linux.png
diff --git a/...ctionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-linux.png b/...ctionList.test.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-linux.png
diff --git a/...est.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-tritanopia-linux.png b/...est.ts-snapshots/ActionList-Text-Wrap-And-Truncation-light-tritanopia-linux.png
diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx
@@ -208,7 +208,14 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
                       if={Boolean(slots.InlineDescription)}
                       sx={{display: 'flex', flexGrow: 1, alignItems: 'baseline', minWidth: 0}}
                     >
-                      <Box as="span" id={labelId} sx={{flexGrow: slots.InlineDescription ? 0 : 1}}>
+                      <Box
+                        as="span"
+                        id={labelId}
+                        sx={{
+                          flexGrow: slots.InlineDescription ? 0 : 1,
+                          fontWeight: slots.InlineDescription ? 'bold' : 'normal',
+                        }}
+                      >
                         {props.children}
                       </Box>
                       {slots.InlineDescription}

diff --git a/src/NavList/__snapshots__/NavList.test.tsx.snap b/src/NavList/__snapshots__/NavList.test.tsx.snap
@@ -21,6 +21,7 @@ exports[`NavList renders a simple list 1`] = `
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
   flex-grow: 1;
+  font-weight: 400;
 }
 
 .c0 {
@@ -383,6 +384,7 @@ exports[`NavList renders with groups 1`] = `
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
   flex-grow: 1;
+  font-weight: 400;
 }
 
 .c1 {
@@ -807,6 +809,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
   flex-grow: 1;
+  font-weight: 400;
 }
 
 .c1 {
@@ -1268,6 +1271,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
   -webkit-flex-grow: 1;
   -ms-flex-positive: 1;
   flex-grow: 1;
+  font-weight: 400;
 }
 
 .c1 {