chore: adding junior's suggestions

heroui-inc · Jan 21, 2025 · 18455c7 · 18455c7
1 parent 05e06b9
commit 18455c7
Show file tree

Hide file tree

Showing 13 changed files with 142 additions and 128 deletions.
diff --git a/.changeset/shaggy-beers-breathe.md b/.changeset/shaggy-beers-breathe.md
@@ -1,7 +1,7 @@
 ---
-"@nextui-org/shared-icons": patch
-"@nextui-org/toast": patch
-"@nextui-org/theme": patch
+"@heroui/shared-icons": patch
+"@heroui/toast": patch
+"@heroui/theme": patch
 ---
 
 Introducing the toast component(#2560)
diff --git a/apps/docs/content/components/toast/color.raw.jsx b/apps/docs/content/components/toast/color.raw.jsx
@@ -2,27 +2,23 @@ import {addToast, Button} from "@heroui/react";
 
 export default function App() {
   return (
-    <>
-      <div className="flex flex-wrap gap-x-2">
-        {["default", "primary", "secondary", "success", "warning", "danger"].map((color) => (
-          <Button
-            key={color}
-            // @ts-ignore
-            color={color}
-            variant={"solid"}
-            onPress={() =>
-              addToast({
-                title: "Toast title",
-                description: "Toast displayed successfully",
-                // @ts-ignore
-                color: color,
-              })
-            }
-          >
-            {color}
-          </Button>
-        ))}
-      </div>
-    </>
+    <div className="flex flex-wrap gap-x-2">
+      {["default", "primary", "secondary", "success", "warning", "danger"].map((color) => (
+        <Button
+          key={color}
+          color={color}
+          variant={"flat"}
+          onPress={() =>
+            addToast({
+              title: "Toast title",
+              description: "Toast displayed successfully",
+              color: color,
+            })
+          }
+        >
+          {color}
+        </Button>
+      ))}
+    </div>
   );
 }
diff --git a/apps/docs/content/components/toast/custom-styles.raw.jsx b/apps/docs/content/components/toast/custom-styles.raw.jsx
@@ -2,53 +2,49 @@ import {addToast, Button, cn} from "@heroui/react";
 
 const CustomToastComponent = () => {
   return (
-    <>
-      <Button
-        variant="solid"
-        onPress={() => {
-          addToast({
-            title: "Sucessful!",
-            description: "Document uploaded to cloud successful.",
-            classNames: {
-              base: cn([
-                "bg-default-50 dark:bg-background shadow-sm",
-                "border-1",
-                "relative before:content-[''] before:absolute before:z-10",
-                "before:left-0 before:top-[-1px] before:bottom-[-1px] before:w-1",
-                "rounded-l-none border-l-0",
-                "min-w-[350px]",
-                "rounded-md",
-                "flex flex-col items-start",
-                "before:bg-primary border-primary-200 dark:border-primary-100",
-                ,
-              ]),
-              icon: "w-6 h-6 fill-current",
-            },
-            endContent: (
-              <div className="ms-11 my-2 flex gap-x-2">
-                <Button color={"primary"} size="sm" variant="bordered">
-                  View Document
-                </Button>
-                <Button className="underline-offset-2" color={"primary"} size="sm" variant="light">
-                  Maybe Later
-                </Button>
-              </div>
-            ),
-          });
-        }}
-      >
-        Show Toast
-      </Button>
-    </>
+    <Button
+      variant="flat"
+      onPress={() => {
+        addToast({
+          title: "Sucessful!",
+          description: "Document uploaded to cloud successful.",
+          classNames: {
+            base: cn([
+              "bg-default-50 dark:bg-background shadow-sm",
+              "border-1",
+              "relative before:content-[''] before:absolute before:z-10",
+              "before:left-0 before:top-[-1px] before:bottom-[-1px] before:w-1",
+              "rounded-l-none border-l-0",
+              "min-w-[350px]",
+              "rounded-md",
+              "flex flex-col items-start",
+              "before:bg-primary border-primary-200 dark:border-primary-100",
+              ,
+            ]),
+            icon: "w-6 h-6 fill-current",
+          },
+          endContent: (
+            <div className="ms-11 my-2 flex gap-x-2">
+              <Button color={"primary"} size="sm" variant="bordered">
+                View Document
+              </Button>
+              <Button className="underline-offset-2" color={"primary"} size="sm" variant="light">
+                Maybe Later
+              </Button>
+            </div>
+          ),
+        });
+      }}
+    >
+      Show Toast
+    </Button>
   );
 };
 
 export default function App() {
   return (
-    <>
-      <div className="flex gap-2">
-        <CustomToastComponent />
-      </div>
-    </>
+    <div className="flex gap-2">
+      <CustomToastComponent />
+    </div>
   );
 }
diff --git a/apps/docs/content/components/toast/index.ts b/apps/docs/content/components/toast/index.ts
@@ -4,7 +4,7 @@ import customStyles from "./custom-styles";
 import radius from "./radius";
 import placement from "./placement";
 import provider from "./provider";
-import types from "./types";
+import usage from "./usage";
 
 export const toastContent = {
   color,
@@ -13,5 +13,5 @@ export const toastContent = {
   radius,
   placement,
   provider,
-  types,
+  usage,
 };
diff --git a/apps/docs/content/components/toast/placement.raw.jsx b/apps/docs/content/components/toast/placement.raw.jsx
@@ -18,7 +18,7 @@ export default function App() {
         ].map((position) => (
           <Button
             key={position}
-            variant={"solid"}
+            variant={"flat"}
             onPress={() => {
               setPlacement(position);
               addToast({

diff --git a/apps/docs/content/components/toast/radius.raw.jsx b/apps/docs/content/components/toast/radius.raw.jsx
@@ -2,26 +2,23 @@ import {addToast, Button} from "@heroui/react";
 
 export default function App() {
   return (
-    <>
-      <div className="flex flex-wrap gap-x-2">
-        {["none", "sm", "md", "lg", "full"].map((radius) => (
-          <Button
-            key={radius}
-            radius={radius}
-            variant={"solid"}
-            onPress={() =>
-              addToast({
-                title: "Toast title",
-                description: "Toast displayed successfully",
-                // @ts-ignore
-                radius: radius,
-              })
-            }
-          >
-            {radius}
-          </Button>
-        ))}
-      </div>
-    </>
+    <div className="flex flex-wrap gap-x-2">
+      {["none", "sm", "md", "lg", "full"].map((radius) => (
+        <Button
+          key={radius}
+          radius={radius}
+          variant={"flat"}
+          onPress={() =>
+            addToast({
+              title: "Toast title",
+              description: "Toast displayed successfully",
+              radius: radius,
+            })
+          }
+        >
+          {radius}
+        </Button>
+      ))}
+    </div>
   );
 }
diff --git a/...cs/content/components/toast/types.raw.jsx → ...cs/content/components/toast/usage.raw.jsx b/...cs/content/components/toast/types.raw.jsx → ...cs/content/components/toast/usage.raw.jsx
@@ -4,7 +4,7 @@ export default function App() {
   return (
     <div className="flex flex-wrap gap-2">
       <Button
-        variant="solid"
+        variant="flat"
         onPress={() => {
           addToast({
             title: "Toast Title",
@@ -15,7 +15,7 @@ export default function App() {
       </Button>
 
       <Button
-        variant="solid"
+        variant="flat"
         onPress={() => {
           addToast({
             title: "Toast Title",
@@ -27,7 +27,7 @@ export default function App() {
       </Button>
 
       <Button
-        variant="solid"
+        variant="flat"
         onPress={() => {
           addToast({
             title: "Toast Title",
@@ -40,7 +40,7 @@ export default function App() {
       </Button>
 
       <Button
-        variant="solid"
+        variant="flat"
         onPress={() => {
           addToast({
             title: "Toast Title",
@@ -53,6 +53,7 @@ export default function App() {
       </Button>
 
       <Button
+        variant="flat"
         onPress={() => {
           addToast({
             title: "Toast Title",
@@ -70,6 +71,7 @@ export default function App() {
       </Button>
 
       <Button
+        variant="flat"
         onPress={() => {
           addToast({
             title: "Toast Title",
@@ -82,6 +84,7 @@ export default function App() {
       </Button>
 
       <Button
+        variant="flat"
         onPress={() =>
           addToast({
             title: "Toast title",

diff --git a/apps/docs/content/components/toast/types.ts → apps/docs/content/components/toast/usage.ts b/apps/docs/content/components/toast/types.ts → apps/docs/content/components/toast/usage.ts
@@ -1,4 +1,4 @@
-import Types from "./types.raw.jsx?raw";
+import Types from "./usage.raw.jsx?raw";
 
 const react = {
   "/App.jsx": Types,

diff --git a/apps/docs/content/components/toast/variants.raw.jsx b/apps/docs/content/components/toast/variants.raw.jsx
@@ -2,31 +2,29 @@ import {addToast, Button} from "@heroui/react";
 
 export default function App() {
   return (
-    <>
-      <div className="flex flex-wrap gap-x-2">
-        {[
-          ["solid", "solid"],
-          ["bordered", "bordered"],
-          ["flat", "faded"],
-        ].map((variant) => (
-          <Button
-            key={variant[0]}
-            // @ts-ignore
-            variant={variant[1]}
-            onPress={() =>
-              addToast({
-                title: "Toast title",
-                description: "Toast displayed successfully",
-                // @ts-ignore
-                variant: variant[0],
-                color: "secondary",
-              })
-            }
-          >
-            {variant[0]}
-          </Button>
-        ))}
-      </div>
-    </>
+    <div className="flex flex-wrap gap-x-2">
+      {[
+        ["solid", "solid"],
+        ["bordered", "bordered"],
+        ["flat", "faded"],
+      ].map((variant) => (
+        <Button
+          key={variant[0]}
+          // @ts-ignore
+          variant={variant[1]}
+          onPress={() =>
+            addToast({
+              title: "Toast title",
+              description: "Toast displayed successfully",
+              // @ts-ignore
+              variant: variant[0],
+              color: "secondary",
+            })
+          }
+        >
+          {variant[0]}
+        </Button>
+      ))}
+    </div>
   );
 }
diff --git a/apps/docs/content/docs/components/toast.mdx b/apps/docs/content/docs/components/toast.mdx
@@ -20,7 +20,7 @@ Toasts are temporary notifications that provide concise feedback about an action
 <PackageManagers
   showGlobalInstallWarning
   commands={{
-    cli: "npx nextui-cli@latest add toast",
+    cli: "npx heroui-cli@latest add toast",
     npm: "npm install @heroui/toast",
     yarn: "yarn add @heroui/toast",
     pnpm: "pnpm add @heroui/toast",
@@ -39,13 +39,13 @@ Toasts are temporary notifications that provide concise feedback about an action
 
 ## Requirement
 
-The ToastProvider must be added to the application's root (or the relevant part of it) before using the addToast function. This is required to initialize the context for managing toasts.
+The `ToastProvider` must be added to the application's root (or the relevant part of it) before using the addToast function. This is required to initialize the context for managing toasts.
 
 <CodeDemo showPreview={false} title="ToastProvider" files={toastContent.provider} />
 
 ### Usage
 
-<CodeDemo title="Usage" files={toastContent.types} />
+<CodeDemo title="Usage" files={toastContent.usage} />
 
 ### Colors
 
@@ -154,7 +154,7 @@ Toast has the following slots:
     },
     {
       attribute: "variant",
-      type: "solid | bordered | flat | faded",
+      type: "solid | bordered | flat",
       description: "The alert variant",
       default: "flat"
     },
@@ -197,9 +197,21 @@ Toast has the following slots:
     {
       attribute: "hideIcon",
       type: "boolean",
-      description: "Whether the icon is hidden",
+      description: "Hides icon when true",
       default: "false"
     },
+    {
+      attribute: "hideCloseButton",
+      type: "boolean",
+      description: "Hides closeButton when true",
+      default: "false"
+    },
+    {
+      attribute: "classNames",
+      type: "Partial<Record<\"base\" | \"content\" | \"title\" | \"description\" | \"icon\" | \"loadingIcon\" | \"progressTrack\" | \"progressIndicator\", string>>",
+      description: "Allows to set custom class names for the toast slots.",
+      default: "-"
+    }
   ]}
 />