Add className to Blankslate (#4866)

* add classname * extend * Create fifty-foxes-drop.md
primer · Aug 21, 2024 · 587603b · 587603b
1 parent 6c69bff
commit 587603b
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/.changeset/fifty-foxes-drop.md b/.changeset/fifty-foxes-drop.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Add `className` to Blankslate
diff --git a/packages/react/src/Blankslate/Blankslate.tsx b/packages/react/src/Blankslate/Blankslate.tsx
@@ -23,6 +23,8 @@ export type BlankslateProps = React.PropsWithChildren<{
    * Increase the padding of this component
    */
   spacious?: boolean
+
+  className?: string
 }>
 
 const StyledBlankslate = styled.div`
@@ -126,13 +128,18 @@ const BlankslateContainerQuery = `
   }
 `
 
-function Blankslate({border, children, narrow, spacious}: BlankslateProps) {
+function Blankslate({border, children, narrow, spacious, className}: BlankslateProps) {
   const enabled = useFeatureFlag('primer_react_css_modules')
 
   if (enabled) {
     return (
       <div className={classes.Container}>
-        <div className={classes.Blankslate} data-border={border} data-narrow={narrow} data-spacious={spacious}>
+        <div
+          className={cx(classes.Blankslate, className)}
+          data-border={border}
+          data-narrow={narrow}
+          data-spacious={spacious}
+        >
           {children}
         </div>
       </div>
@@ -147,7 +154,7 @@ function Blankslate({border, children, narrow, spacious}: BlankslateProps) {
       */}
       <style type="text/css" dangerouslySetInnerHTML={{__html: BlankslateContainerQuery}} />
       <StyledBlankslate>
-        <div className="Blankslate" data-border={border} data-narrow={narrow} data-spacious={spacious}>
+        <div className={cx('Blankslate', className)} data-border={border} data-narrow={narrow} data-spacious={spacious}>
           {children}
         </div>
       </StyledBlankslate>