Merge 726a99c into 2a3c473

primer · Oct 10, 2024 · 8a072af · 8a072af
2 parents 2a3c473 + 726a99c
commit 8a072af
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/.changeset/lucky-lamps-invite.md b/.changeset/lucky-lamps-invite.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': minor
+---
+
+Add `classname` prop support to `ActionList.Description` component
diff --git a/packages/react/src/ActionList/Description.tsx b/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,7 +38,13 @@ 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>
   ) : (
@@ -47,6 +55,7 @@ export const Description: React.FC<React.PropsWithChildren<ActionListDescription
       inline={true}
       maxWidth="100%"
       data-component="ActionList.Description"
+      className={className}
     >
       {props.children}
     </Truncate>