refactor: improve consistency

kripod · May 21, 2024 · 57aa0fc · 57aa0fc
1 parent 3da5b13
commit 57aa0fc
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 13 deletions.
diff --git a/src/components/Alert.tsx b/src/components/Alert.tsx
@@ -22,7 +22,7 @@ export function Alert({ sentiment = "info", children }: AlertProps) {
   return (
     <div
       role="alert"
-      className={clsx("flex gap-x-2 rounded-2xl border p-4 text-base", {
+      className={clsx("flex gap-x-2 rounded-2xl border p-3 text-base", {
         "border-ui-info-2 bg-ui-info-1 text-ui-info-5": sentiment === "info",
         "border-ui-warning-2 bg-ui-warning-1 text-ui-warning-5":
           sentiment === "warning",
@@ -31,7 +31,7 @@ export function Alert({ sentiment = "info", children }: AlertProps) {
       })}
     >
       <Icon className="h-6 w-6 flex-none" />
-      <div>{children}</div>
+      <div className="flex-1">{children}</div>
     </div>
   );
 }
diff --git a/src/components/PrimaryButton.tsx b/src/components/PrimaryButton.tsx
@@ -42,11 +42,11 @@ export const PrimaryButton = forwardRefWithGenerics(function PrimaryButton<
       className={clsx(
         className,
         {
-          "h-8 px-3 text-sm/none": size === "sm",
-          "h-10 px-4 text-base/none": size === "md",
-          "h-14 px-6 text-xl/none": size === "lg",
+          "h-8 rounded-md px-3 text-sm/none": size === "sm",
+          "h-10 rounded-lg px-4 text-base/none": size === "md",
+          "h-14 rounded-xl px-6 text-xl/none": size === "lg",
         },
-        "inline-flex items-center justify-center rounded-lg bg-ui-primary-3 text-center text-ui-primary-0 transition-colors hover:bg-ui-primary-4",
+        "inline-flex items-center justify-center bg-ui-primary-3 text-center font-medium text-ui-primary-0 transition-colors hover:bg-ui-primary-4",
       )}
       {...props}
     />

diff --git a/src/docs/sample.mdx b/src/docs/sample.mdx
@@ -1,10 +1,24 @@
+import { Unstyled } from "@storybook/blocks";
+
 import { Alert } from "../components/Alert";
 import { PrimaryButton } from "../components/PrimaryButton";
 
-<div className="space-y-4 text-base text-ui-neutral-5">
-  <Alert sentiment="danger">This is an alert.</Alert>
-  <Alert sentiment="warning">This is an alert.</Alert>
-  <Alert>This is an alert.</Alert>
-  <div>This is just a block of text.</div>
-  <PrimaryButton>Button</PrimaryButton>
-</div>
+<Unstyled>
+  <div className="space-y-4 text-base text-ui-neutral-5">
+    <Alert sentiment="danger">This is an alert.</Alert>
+    <Alert sentiment="warning">This is an alert.</Alert>
+    <Alert>
+      <div className="flex flex-col items-start gap-y-3">
+        An alert displays a brief, important message, usually at the top of a
+        page. Only text content updates are conveyed to screen readers,
+        preserving focus.
+        <div className="flex flex-wrap gap-3">
+          <PrimaryButton size="sm">Ok</PrimaryButton>
+          <PrimaryButton size="sm">Cancel</PrimaryButton>
+        </div>
+      </div>
+    </Alert>
+    <div>This is just a block of text.</div>
+    <PrimaryButton>Button</PrimaryButton>
+  </div>
+</Unstyled>