SelectPanel: Fix font weight from active styles for modern ActionList (behind feature flag)

.changeset/thin-planes-grow.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+SelectPanel: Fix font weight from active styles for modern ActionList (behind feature flag)

packages/react/src/ActionList/Item.tsx

@@ -232,7 +232,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
 
       /** Active styles */
       ...(active ? activeStyles : {}), // NavList
-      '&[data-is-active-descendant]': activeStyles, // SelectPanel
+      '&[data-is-active-descendant]': {...activeStyles, fontWeight: 'normal'}, // SelectPanel
 
       ...(!buttonSemantics ? hoverStyles : {}),
     }

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

@@ -136,7 +136,7 @@ exports[`NavList renders a simple list 1`] = `
 }
 
 .c2[data-is-active-descendant] {
-  font-weight: 600;
+  font-weight: 400;
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
@@ -233,7 +233,7 @@ exports[`NavList renders a simple list 1`] = `
 }
 
 .c7[data-is-active-descendant] {
-  font-weight: 600;
+  font-weight: 400;
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
@@ -613,7 +613,7 @@ exports[`NavList renders with groups 1`] = `
 }
 
 .c6[data-is-active-descendant] {
-  font-weight: 600;
+  font-weight: 400;
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
@@ -710,7 +710,7 @@ exports[`NavList renders with groups 1`] = `
 }
 
 .c11[data-is-active-descendant] {
-  font-weight: 600;
+  font-weight: 400;
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
@@ -1124,7 +1124,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
 }
 
 .c11[data-is-active-descendant] {
-  font-weight: 600;
+  font-weight: 400;
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
@@ -1221,7 +1221,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav
 }
 
 .c4[data-is-active-descendant] {
-  font-weight: 600;
+  font-weight: 400;
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
@@ -1629,7 +1629,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
 }
 
 .c11[data-is-active-descendant] {
-  font-weight: 600;
+  font-weight: 400;
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
@@ -1747,7 +1747,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t
 }
 
 .c4[data-is-active-descendant] {
-  font-weight: 600;
+  font-weight: 400;
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 

packages/react/src/SelectPanel/SelectPanel.stories.tsx

@@ -33,20 +33,20 @@ function getColorCircle(color: string) {
   }
 }
 
-const items = [
-  {leadingVisual: getColorCircle('#a2eeef'), text: 'enhancement', id: 1},
-  {leadingVisual: getColorCircle('#d73a4a'), text: 'bug', id: 2},
-  {leadingVisual: getColorCircle('#0cf478'), text: 'good first issue', id: 3},
+const items: ItemInput[] = [
+  {leadingVisual: getColorCircle('#a2eeef'), text: 'enhancement', description: 'New feature or request', id: 1},
+  {leadingVisual: getColorCircle('#d73a4a'), text: 'bug', description: "Something isn't working", id: 2},
+  {leadingVisual: getColorCircle('#0cf478'), text: 'good first issue', description: 'Good for newcomers', id: 3},
   {leadingVisual: getColorCircle('#ffd78e'), text: 'design', id: 4},
   {leadingVisual: getColorCircle('#ff0000'), text: 'blocker', id: 5},
   {leadingVisual: getColorCircle('#a4f287'), text: 'backend', id: 6},
   {leadingVisual: getColorCircle('#8dc6fc'), text: 'frontend', id: 7},
-]
+].map(item => ({...item, descriptionVariant: 'block'}))
 
 export const Default = () => {
   const [selected, setSelected] = React.useState<ItemInput[]>([items[0], items[1]])
   const [filter, setFilter] = React.useState('')
-  const filteredItems = items.filter(item => item.text.toLowerCase().startsWith(filter.toLowerCase()))
+  const filteredItems = items.filter(item => item.text?.toLowerCase().startsWith(filter.toLowerCase()))
   const [open, setOpen] = useState(false)
 
   return (

packages/react/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap

@@ -796,7 +796,7 @@ exports[`snapshots renders a menu that contains an item to add to the menu 1`] =
 }
 
 .c3[data-is-active-descendant] {
-  font-weight: 600;
+  font-weight: 400;
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
@@ -1603,7 +1603,7 @@ exports[`snapshots renders a multiselect input 1`] = `
 }
 
 .c3[data-is-active-descendant] {
-  font-weight: 600;
+  font-weight: 400;
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
@@ -2382,7 +2382,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 }
 
 .c3[data-is-active-descendant] {
-  font-weight: 600;
+  font-weight: 400;
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
@@ -2479,7 +2479,7 @@ exports[`snapshots renders a multiselect input with selected menu items 1`] = `
 }
 
 .c8[data-is-active-descendant] {
-  font-weight: 600;
+  font-weight: 400;
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
@@ -3202,7 +3202,7 @@ exports[`snapshots renders a single select input 1`] = `
 }
 
 .c3[data-is-active-descendant] {
-  font-weight: 600;
+  font-weight: 400;
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }
 
@@ -3689,7 +3689,7 @@ exports[`snapshots renders with a custom text input component 1`] = `
 }
 
 .c3[data-is-active-descendant] {
-  font-weight: 600;
+  font-weight: 400;
   background-color: var(--control-transparent-bgColor-selected,var(--color-action-list-item-default-selected-bg,rgba(208,215,222,0.24)));
 }