Merge pull request #364 from rakesh-m-r/fix/className-prop-Badge

fix: added className Prop.
supabase · Jul 18, 2022 · fc1b794 · fc1b794
2 parents 2e9c79d + a5cc8fd
commit fc1b794
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 29 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/Badge/Badge.stories.tsx b/src/components/Badge/Badge.stories.tsx
@@ -50,6 +50,10 @@ export const large = (args: any) => <Badge {...args}>Hello world</Badge>
 
 export const withDotLarge = (args: any) => <Badge {...args}>Hello world</Badge>
 
+export const withCustomClassNames = (args: any) => (
+  <Badge {...args}>Hello world</Badge>
+)
+
 export const allBadges = () => (
   <>
     <div className="flex flex-row gap-6 mx-auto my-4">
@@ -88,3 +92,7 @@ withDotLarge.args = {
   size: 'large',
   dot: true,
 }
+
+withCustomClassNames.args = {
+  className: 'border-teal-100 border-2'
+}
diff --git a/src/components/Badge/Badge.test.js b/src/components/Badge/Badge.test.js
@@ -47,4 +47,9 @@ describe('#Badge', () => {
       `sbui-badge ${size === 'large' ? 'sbui-badge--large' : ''}`
     )
   })
+
+  it('should render with Classes',()=>{
+    render(<Badge className='border-2'>Badge</Badge>)
+    expect(screen.getByText('Badge')).toHaveClass('border-2')
+  })
 })
diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
@@ -35,9 +35,10 @@ interface Props {
   children: string | React.ReactNode
   size?: 'large' | 'small'
   dot?: boolean
+  className?: string
 }
 
-function Badge({ color = 'brand', children, size, dot }: Props) {
+function Badge({ color = 'brand', children, size, dot, className }: Props) {
   const __styles = styleHandler('badge')
 
   let classes = [__styles.base]
@@ -47,6 +48,9 @@ function Badge({ color = 'brand', children, size, dot }: Props) {
   if (size === 'large') {
     classes.push(__styles.size.large)
   }
+  if (className) {
+    classes.push(className)
+  }
 
   return (
     <span className={classes.join(' ')}>