feat(ActionList.Description): Add support for className prop (#5102)

* add classname prop to ActionList.Description

* small location change

* add prop to docs.json

.changeset/lucky-lamps-invite.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add `classname` prop support to `ActionList.Description` component

packages/react/src/ActionList/ActionList.docs.json

@@ -246,6 +246,12 @@
         {
           "name": "sx",
           "type": "SystemStyleObject"
+        },
+        {
+          "name": "className",
+          "type": "string | undefined",
+          "defaultValue": "",
+          "description": "CSS string"
         }
       ]
     },
@@ -326,4 +332,4 @@
       ]
     }
   ]
-}
+}

packages/react/src/ActionList/Description.tsx

@@ -13,11 +13,13 @@ export type ActionListDescriptionProps = {
    * - `"block"` - Secondary text is positioned below primary text.
    */
   variant?: 'inline' | 'block'
+  className?: string
 } & SxProp
 
 export const Description: React.FC<React.PropsWithChildren<ActionListDescriptionProps>> = ({
   variant = 'inline',
   sx = {},
+  className,
   ...props
 }) => {
   const styles = {
@@ -36,12 +38,19 @@ export const Description: React.FC<React.PropsWithChildren<ActionListDescription
   const {blockDescriptionId, inlineDescriptionId} = React.useContext(ItemContext)
 
   return variant === 'block' ? (
-    <Box as="span" sx={merge(styles, sx as SxProp)} id={blockDescriptionId} data-component="ActionList.Description">
+    <Box
+      as="span"
+      sx={merge(styles, sx as SxProp)}
+      id={blockDescriptionId}
+      className={className}
+      data-component="ActionList.Description"
+    >
       {props.children}
     </Box>
   ) : (
     <Truncate
       id={inlineDescriptionId}
+      className={className}
       sx={merge(styles, sx as SxProp)}
       title={props.children as string}
       inline={true}