Adjust ActionList label font-weight if a list has both items with descriptions AND without

.changeset/slow-gorillas-itch.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Adjust ActionList label font-weight if a list has both items with descriptions AND without

e2e/components/TooltipV2.test.ts

@@ -6,10 +6,12 @@ const stories = [
   {
     title: 'Default',
     id: 'components-tooltipv2--default',
+    disableAnimations: true,
   },
   {
     title: 'Anchor Has Margin',
     id: 'components-tooltipv2-features--anchor-has-margin',
+    disableAnimations: true,
   },
   {
     title: 'Calculated Direction',
@@ -18,14 +20,17 @@ const stories = [
   {
     title: 'Icon Button With Description',
     id: 'components-tooltipv2-features--icon-button-with-description',
+    disableAnimations: true,
   },
   {
     title: 'Label Type',
     id: 'components-tooltipv2-features--label-type',
+    disableAnimations: true,
   },
   {
     title: 'Dev SX Props',
     id: 'components-tooltipv2-dev--default',
+    disableAnimations: true,
   },
 ] as const
 

packages/react/src/ActionList/ActionList.module.css

@@ -85,6 +85,13 @@
   & .Divider:first-child {
     display: none;
   }
+
+  /* if a list has a mix of items with and without descriptions, reset the label font-weight to normal */
+  &:has([data-has-description='true']):has([data-has-description='false']) {
+    & .ItemLabel {
+      font-weight: var(--base-text-weight-normal);
+    }
+  }
 }
 
 /* ActionListItem is a li that handles visual state, while ActionListItemContent controls actual state via button or link */

packages/react/src/ActionList/Item.tsx

@@ -249,6 +249,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
           data-active={active ? true : undefined}
           data-inactive={inactiveText ? true : undefined}
           data-has-subitem={slots.subItem ? true : undefined}
+          data-has-description={slots.description ? true : false}
           className={clsx(classes.ActionListItem, className)}
         >
           <ItemWrapper {...wrapperProps} className={classes.ActionListContent}>

packages/react/src/NavList/__snapshots__/NavList.test.tsx.snap

@@ -11,6 +11,7 @@ exports[`NavList > renders a simple list 1`] = `
       <li
         class="prc-ActionList-ActionListItem-jXerx"
         data-active="true"
+        data-has-description="false"
       >
         <a
           aria-current="page"
@@ -39,6 +40,7 @@ exports[`NavList > renders a simple list 1`] = `
       </li>
       <li
         class="prc-ActionList-ActionListItem-jXerx"
+        data-has-description="false"
       >
         <a
           aria-labelledby=":r2:--label  "
@@ -66,6 +68,7 @@ exports[`NavList > renders a simple list 1`] = `
       </li>
       <li
         class="prc-ActionList-ActionListItem-jXerx"
+        data-has-description="false"
       >
         <a
           aria-labelledby=":r3:--label  "
@@ -132,6 +135,7 @@ exports[`NavList > renders with groups 1`] = `
           <li
             class="prc-ActionList-ActionListItem-jXerx"
             data-active="true"
+            data-has-description="false"
           >
             <a
               aria-current="page"
@@ -187,6 +191,7 @@ exports[`NavList > renders with groups 1`] = `
         >
           <li
             class="prc-ActionList-ActionListItem-jXerx"
+            data-has-description="false"
           >
             <a
               aria-labelledby=":r8:--label  "
@@ -229,6 +234,7 @@ exports[`NavList.Item with NavList.SubNav > does not have active styles if SubNa
     >
       <li
         class="prc-ActionList-ActionListItem-jXerx"
+        data-has-description="false"
         data-has-subitem="true"
       >
         <button
@@ -285,6 +291,7 @@ exports[`NavList.Item with NavList.SubNav > does not have active styles if SubNa
           <li
             class="prc-ActionList-ActionListItem-jXerx"
             data-active="true"
+            data-has-description="false"
           >
             <a
               aria-current="page"
@@ -329,6 +336,7 @@ exports[`NavList.Item with NavList.SubNav > has active styles if SubNav contains
       <li
         class="prc-ActionList-ActionListItem-jXerx"
         data-active="true"
+        data-has-description="false"
         data-has-subitem="true"
       >
         <button
@@ -385,6 +393,7 @@ exports[`NavList.Item with NavList.SubNav > has active styles if SubNav contains
           <li
             class="prc-ActionList-ActionListItem-jXerx"
             data-active="true"
+            data-has-description="false"
           >
             <a
               aria-current="page"