SelectPanel: Fix font weight from active styles for modern ActionList…

… (behind feature flag) (#5033)

* remove font weight from active styles

* Create thin-planes-grow.md

* update snapshots

* test(vrt): update snapshots

---------

Co-authored-by: siddharthkp <siddharthkp@users.noreply.github.com>

.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)));
 }
 
@@ -627,7 +627,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)));
 }
 
@@ -724,7 +724,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)));
 }
 
@@ -1146,7 +1146,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)));
 }
 
@@ -1243,7 +1243,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)));
 }
 
@@ -1651,7 +1651,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)));
 }
 
@@ -1769,7 +1769,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)));
 }