Bug fix: ActionList item label weight and spacing if description exis…

…ts (#3490) * fix item with description * Create kind-eggs-cheer.md * test(vrt): update snapshots --------- Co-authored-by: langermank <langermank@users.noreply.github.com>
primer · Jul 6, 2023 · 8d1d514 · 8d1d514
1 parent 7f5a792
commit 8d1d514
Show file tree

Hide file tree

Showing 65 changed files with 8 additions and 1 deletion.
diff --git a/.changeset/kind-eggs-cheer.md b/.changeset/kind-eggs-cheer.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Bug fix: ActionList item label weight and spacing if description exists
diff --git a/...onList.test.ts-snapshots/ActionList-Block-Description-dark-colorblind-linux.png b/...onList.test.ts-snapshots/ActionList-Block-Description-dark-colorblind-linux.png
diff --git a/...ActionList.test.ts-snapshots/ActionList-Block-Description-dark-dimmed-linux.png b/...ActionList.test.ts-snapshots/ActionList-Block-Description-dark-dimmed-linux.png
diff --git a/...ist.test.ts-snapshots/ActionList-Block-Description-dark-high-contrast-linux.png b/...ist.test.ts-snapshots/ActionList-Block-Description-dark-high-contrast-linux.png
diff --git a/...onents/ActionList.test.ts-snapshots/ActionList-Block-Description-dark-linux.png b/...onents/ActionList.test.ts-snapshots/ActionList-Block-Description-dark-linux.png
diff --git a/...onList.test.ts-snapshots/ActionList-Block-Description-dark-tritanopia-linux.png b/...onList.test.ts-snapshots/ActionList-Block-Description-dark-tritanopia-linux.png
diff --git a/...nList.test.ts-snapshots/ActionList-Block-Description-light-colorblind-linux.png b/...nList.test.ts-snapshots/ActionList-Block-Description-light-colorblind-linux.png
diff --git a/...st.test.ts-snapshots/ActionList-Block-Description-light-high-contrast-linux.png b/...st.test.ts-snapshots/ActionList-Block-Description-light-high-contrast-linux.png
diff --git a/...nents/ActionList.test.ts-snapshots/ActionList-Block-Description-light-linux.png b/...nents/ActionList.test.ts-snapshots/ActionList-Block-Description-light-linux.png
diff --git a/...nList.test.ts-snapshots/ActionList-Block-Description-light-tritanopia-linux.png b/...nList.test.ts-snapshots/ActionList-Block-Description-light-tritanopia-linux.png
diff --git a/...ActionList.test.ts-snapshots/ActionList-Disabled-Item-dark-colorblind-linux.png b/...ActionList.test.ts-snapshots/ActionList-Disabled-Item-dark-colorblind-linux.png
diff --git a/...nts/ActionList.test.ts-snapshots/ActionList-Disabled-Item-dark-dimmed-linux.png b/...nts/ActionList.test.ts-snapshots/ActionList-Disabled-Item-dark-dimmed-linux.png
diff --git a/...ionList.test.ts-snapshots/ActionList-Disabled-Item-dark-high-contrast-linux.png b/...ionList.test.ts-snapshots/ActionList-Disabled-Item-dark-high-contrast-linux.png
diff --git a/...components/ActionList.test.ts-snapshots/ActionList-Disabled-Item-dark-linux.png b/...components/ActionList.test.ts-snapshots/ActionList-Disabled-Item-dark-linux.png
diff --git a/...ActionList.test.ts-snapshots/ActionList-Disabled-Item-dark-tritanopia-linux.png b/...ActionList.test.ts-snapshots/ActionList-Disabled-Item-dark-tritanopia-linux.png
diff --git a/...ctionList.test.ts-snapshots/ActionList-Disabled-Item-light-colorblind-linux.png b/...ctionList.test.ts-snapshots/ActionList-Disabled-Item-light-colorblind-linux.png
diff --git a/...onList.test.ts-snapshots/ActionList-Disabled-Item-light-high-contrast-linux.png b/...onList.test.ts-snapshots/ActionList-Disabled-Item-light-high-contrast-linux.png
diff --git a/...omponents/ActionList.test.ts-snapshots/ActionList-Disabled-Item-light-linux.png b/...omponents/ActionList.test.ts-snapshots/ActionList-Disabled-Item-light-linux.png
diff --git a/...ctionList.test.ts-snapshots/ActionList-Disabled-Item-light-tritanopia-linux.png b/...ctionList.test.ts-snapshots/ActionList-Disabled-Item-light-tritanopia-linux.png
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/.../ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-colorblind-linux.png b/.../ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-colorblind-linux.png
diff --git a/...ents/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-dimmed-linux.png b/...ents/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-dimmed-linux.png
diff --git a/...tionList.test.ts-snapshots/ActionList-Multi-Select-dark-high-contrast-linux.png b/...tionList.test.ts-snapshots/ActionList-Multi-Select-dark-high-contrast-linux.png
diff --git a/.../components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-linux.png b/.../components/ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-linux.png
diff --git a/.../ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-tritanopia-linux.png b/.../ActionList.test.ts-snapshots/ActionList-Multi-Select-dark-tritanopia-linux.png
diff --git a/...ActionList.test.ts-snapshots/ActionList-Multi-Select-light-colorblind-linux.png b/...ActionList.test.ts-snapshots/ActionList-Multi-Select-light-colorblind-linux.png
diff --git a/...ionList.test.ts-snapshots/ActionList-Multi-Select-light-high-contrast-linux.png b/...ionList.test.ts-snapshots/ActionList-Multi-Select-light-high-contrast-linux.png
diff --git a/...components/ActionList.test.ts-snapshots/ActionList-Multi-Select-light-linux.png b/...components/ActionList.test.ts-snapshots/ActionList-Multi-Select-light-linux.png
diff --git a/...ActionList.test.ts-snapshots/ActionList-Multi-Select-light-tritanopia-linux.png b/...ActionList.test.ts-snapshots/ActionList-Multi-Select-light-tritanopia-linux.png
diff --git a/...ActionList.test.ts-snapshots/ActionList-Single-Select-dark-colorblind-linux.png b/...ActionList.test.ts-snapshots/ActionList-Single-Select-dark-colorblind-linux.png
diff --git a/...nts/ActionList.test.ts-snapshots/ActionList-Single-Select-dark-dimmed-linux.png b/...nts/ActionList.test.ts-snapshots/ActionList-Single-Select-dark-dimmed-linux.png
diff --git a/...ionList.test.ts-snapshots/ActionList-Single-Select-dark-high-contrast-linux.png b/...ionList.test.ts-snapshots/ActionList-Single-Select-dark-high-contrast-linux.png
diff --git a/...components/ActionList.test.ts-snapshots/ActionList-Single-Select-dark-linux.png b/...components/ActionList.test.ts-snapshots/ActionList-Single-Select-dark-linux.png
diff --git a/...ActionList.test.ts-snapshots/ActionList-Single-Select-dark-tritanopia-linux.png b/...ActionList.test.ts-snapshots/ActionList-Single-Select-dark-tritanopia-linux.png
diff --git a/...ctionList.test.ts-snapshots/ActionList-Single-Select-light-colorblind-linux.png b/...ctionList.test.ts-snapshots/ActionList-Single-Select-light-colorblind-linux.png
diff --git a/...onList.test.ts-snapshots/ActionList-Single-Select-light-high-contrast-linux.png b/...onList.test.ts-snapshots/ActionList-Single-Select-light-high-contrast-linux.png
diff --git a/...omponents/ActionList.test.ts-snapshots/ActionList-Single-Select-light-linux.png b/...omponents/ActionList.test.ts-snapshots/ActionList-Single-Select-light-linux.png
diff --git a/...ctionList.test.ts-snapshots/ActionList-Single-Select-light-tritanopia-linux.png b/...ctionList.test.ts-snapshots/ActionList-Single-Select-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/....test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-colorblind-linux.png b/....test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-colorblind-linux.png
diff --git a/...Menu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-dimmed-linux.png b/...Menu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-dimmed-linux.png
diff --git a/...st.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-high-contrast-linux.png b/...st.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-high-contrast-linux.png
diff --git a/.../ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-linux.png b/.../ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-linux.png
diff --git a/....test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-tritanopia-linux.png b/....test.ts-snapshots/ActionMenu-Groups-And-Descriptions-dark-tritanopia-linux.png
diff --git a/...test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-colorblind-linux.png b/...test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-colorblind-linux.png
diff --git a/...t.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-high-contrast-linux.png b/...t.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-high-contrast-linux.png
diff --git a/...ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-linux.png b/...ActionMenu.test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-linux.png
diff --git a/...test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-tritanopia-linux.png b/...test.ts-snapshots/ActionMenu-Groups-And-Descriptions-light-tritanopia-linux.png
diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx
@@ -221,7 +221,9 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
                     id={labelId}
                     sx={{
                       flexGrow: slots.description && slots.description.props.variant !== 'block' ? 0 : 1,
-                      fontWeight: slots.description && slots.description.props.variant !== 'block' ? 'bold' : 'normal',
+                      fontWeight: slots.description ? 'bold' : 'normal',
+                      marginBlockEnd:
+                        slots.description && slots.description.props.variant !== 'inline' ? '4px' : undefined,
                     }}
                   >
                     {childrenWithoutSlots}