SelectPanel: Add focus indicator SelectPanel items (#6259)

Author: TylerJDev

.changeset/puny-yaks-bake.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+SelectPanel: Adds focus indicator to disabled items

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

@@ -114,7 +114,7 @@
     }
   }
 
-  &:not(:has([aria-disabled], [disabled]), [aria-disabled='true'], [data-has-subitem='true']) {
+  &:not(:has([aria-disabled], [disabled]), [data-has-subitem='true']) {
     @media (hover: hover) {
       &:hover,
       &:active {

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

@@ -209,6 +209,37 @@ export const MultiSelect = () => {
   )
 }
 
+export const WithDisabledItem = () => {
+  const [selected, setSelected] = useState<ItemInput[]>(items.slice(1, 3))
+  const [filter, setFilter] = useState('')
+  const filteredItems = items.map((item, index) => (index === 3 ? {...item, disabled: true} : item))
+  const [open, setOpen] = useState(false)
+
+  return (
+    <FormControl>
+      <FormControl.Label>Labels</FormControl.Label>
+      <SelectPanel
+        title="Select labels"
+        placeholder="Select labels"
+        subtitle="Use labels to organize issues and pull requests"
+        renderAnchor={({children, ...anchorProps}) => (
+          <Button trailingAction={TriangleDownIcon} {...anchorProps} aria-haspopup="dialog">
+            {children}
+          </Button>
+        )}
+        open={open}
+        onOpenChange={setOpen}
+        items={filteredItems}
+        selected={selected}
+        onSelectedChange={setSelected}
+        onFilterChange={setFilter}
+        width="medium"
+        message={filteredItems.length === 0 ? NoResultsMessage(filter) : undefined}
+      />
+    </FormControl>
+  )
+}
+
 export const WithExternalAnchor = () => {
   const [selected, setSelected] = useState<ItemInput[]>(items.slice(1, 3))
   const [filter, setFilter] = useState('')