Improve Alert API

Author: garronej

src/Alert.tsx

@@ -20,30 +20,34 @@ export type AlertProps = {
     /** Default h3 */
     as?: `h${2 | 3 | 4 | 5 | 6}`;
     classes?: Partial<Record<"root" | "title" | "description" | "close", string>>;
-} & (AlertProps.Md | AlertProps.Sm) &
+} & (AlertProps.DefaultSize | AlertProps.Small) &
     (AlertProps.NonClosable | AlertProps.Closable);
 
 export namespace AlertProps {
-    export type Md = {
-        isSmall?: false;
+    export type DefaultSize = {
+        /** Default false */
+        small?: false;
         title: NonNullable<ReactNode>;
         description?: NonNullable<ReactNode>;
     };
 
-    export type Sm = {
-        isSmall: true;
+    export type Small = {
+        /** Default false */
+        small: true;
         title?: NonNullable<ReactNode>;
         description: NonNullable<ReactNode>;
     };
 
     export type NonClosable = {
-        isClosable?: false;
-        isClosed?: undefined;
-        onClose?: undefined;
+        /** Default false */
+        closable?: false;
+        isClosed?: never;
+        onClose?: never;
     };
 
     export type Closable = {
-        isClosable: true;
+        /** Default false */
+        closable: true;
     } & (Closable.Controlled | Closable.Uncontrolled);
 
     export namespace Closable {
@@ -53,7 +57,7 @@ export namespace AlertProps {
         };
 
         export type Uncontrolled = {
-            isClosed?: undefined;
+            isClosed?: never;
             onClose?: () => void;
         };
     }
@@ -73,10 +77,10 @@ export const Alert = memo(
             severity,
             as: HtmlTitleTag = "h3",
             classes = {},
-            isSmall,
+            small: isSmall,
             title,
             description,
-            isClosable = false,
+            closable: isClosable = false,
             isClosed: props_isClosed,
             onClose,
             ...rest

stories/Alert.stories.tsx

@@ -29,7 +29,7 @@ const { meta, getStory } = getStoryFactory<AlertProps>({
         "description": {
             "description": "Required when the `<Alert isSmall />`"
         },
-        "isClosable": {
+        "closable": {
             "description": "If the modal should have a close button"
         },
         "onClose": {
@@ -51,18 +51,18 @@ export default meta;
 
 export const Default = getStory({
     "severity": "success",
-    "isSmall": false,
+    "small": false,
     "title": "Message successfully sent",
     "description": "Everything went well",
-    "isClosable": true,
+    "closable": true,
     "isClosed": undefined,
     ...logCallbacks(["onClose"])
 });
 
 export const SmallDescriptionOnlyInfo = getStory(
     {
         "severity": "info",
-        "isSmall": true,
+        "small": true,
         "description": "This is the description"
     },
     {
@@ -84,5 +84,5 @@ export const ClosableError = getStory({
     "severity": "error",
     "title": "This is the title",
     "description": "This is the description",
-    "isClosable": true
+    "closable": true
 });