Support className on Alert and AlertTitle

sippy-platform · Jun 20, 2022 · 7e727eb · 7e727eb
1 parent 44ad369
commit 7e727eb
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
@@ -11,6 +11,10 @@ export interface AlertProps {
    * The color of the button, only works when the variant is `color` or `hover`
    */
   color?: 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'teal' | 'cyan' | 'blue' | 'indigo' | 'violet' | 'purple' | 'pink' | 'rose' | 'brown' | 'grey' | 'accent';
+  /**
+   * Custom classes for the dialog
+   */
+  className?: string;
   /**
    * Alert contents.
    */
@@ -23,14 +27,16 @@ export interface AlertProps {
 export function Alert({
   color,
   children,
+  className,
   ...props
 }: AlertProps) {
   return (
     <div
       role="alert"
       className={clsx(
         'alert',
-        color
+        color,
+        className
       )}
       {...props}
     >

diff --git a/src/components/AlertTitle/AlertTitle.tsx b/src/components/AlertTitle/AlertTitle.tsx
@@ -1,6 +1,12 @@
 import React, { ReactNode } from 'react';
 
+import clsx from 'clsx';
+
 export interface AlertTitleProps {
+  /**
+   * Custom classes for the dialog
+   */
+  className?: string;
   /**
    * AlertTitle contents.
    */
@@ -12,11 +18,15 @@ export interface AlertTitleProps {
  */
 export function AlertTitle({
   children,
+  className,
   ...props
 }: AlertTitleProps) {
   return (
     <h4
-      className="alert-title"
+    className={clsx(
+      'alert-title',
+      className
+    )}
       {...props}
     >
       {children}