refactor: use gap shorthand

kripod · Jul 12, 2024 · 21fae7a · 21fae7a
1 parent f15a047
commit 21fae7a
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 10 deletions.
diff --git a/src/components/Alert.stories.tsx b/src/components/Alert.stories.tsx
@@ -18,7 +18,7 @@ export const Basic = {
 
 export const Sentiments = {
   render: () => (
-    <div className="flex flex-col gap-y-4">
+    <div className="flex flex-col gap-4">
       <Alert sentiment="info">Info</Alert>
       <Alert sentiment="danger">Danger</Alert>
       <Alert sentiment="success">Success</Alert>

diff --git a/src/components/Alert.tsx b/src/components/Alert.tsx
@@ -25,7 +25,7 @@ export function Alert({ sentiment = "info", children }: AlertProps) {
     <div
       role="alert"
       className={clsx(
-        "flex gap-x-2 rounded-2xl p-4 text-base ring-1 ring-inset",
+        "flex gap-2 rounded-2xl p-4 text-base ring-1 ring-inset",
         sentiment === "info" &&
           "bg-ui-info-100 text-ui-info-800 ring-ui-info-300",
         sentiment === "danger" &&

diff --git a/src/components/ButtonPrimary.stories.tsx b/src/components/ButtonPrimary.stories.tsx
@@ -31,7 +31,7 @@ export const Interactivity = {
 
 export const Sizes = {
   render: () => (
-    <div className="flex flex-col items-start gap-y-4">
+    <div className="flex flex-col items-start gap-4">
       <ButtonPrimary size="sm">Small</ButtonPrimary>
       <ButtonPrimary size="md">Medium</ButtonPrimary>
       <ButtonPrimary size="lg">Large</ButtonPrimary>

diff --git a/src/components/Input.stories.tsx b/src/components/Input.stories.tsx
@@ -22,7 +22,7 @@ export const Basic = {
 
 export const Interactivity = {
   render: () => (
-    <div className="flex flex-col items-start gap-y-4">
+    <div className="flex flex-col items-start gap-4">
       <Input defaultValue="Focused" />
       <Input defaultValue="Invalid" aria-invalid />
       <Input value="Read-only" readOnly />
@@ -37,7 +37,7 @@ export const Interactivity = {
 
 export const Sizes = {
   render: () => (
-    <div className="flex flex-col items-start gap-y-4">
+    <div className="flex flex-col items-start gap-4">
       <Input size="sm" placeholder="Small" />
       <Input size="md" placeholder="Medium" />
       <Input size="lg" placeholder="Large" />

diff --git a/src/docs/sample.mdx b/src/docs/sample.mdx
@@ -5,9 +5,9 @@ import { ButtonPrimary } from "../components/ButtonPrimary";
 import { Input } from "../components/Input";
 
 <Unstyled>
-  <div className="space-y-4 text-base text-ui-neutral-800">
+  <div className="flex flex-col gap-4 text-base text-ui-neutral-800">
     <Alert>
-      <div className="flex flex-col gap-y-4">
+      <div className="flex flex-col gap-4">
         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.
@@ -22,15 +22,15 @@ import { Input } from "../components/Input";
     <Alert sentiment="success">This is an alert.</Alert>
     <Alert sentiment="warning">This is an alert.</Alert>
     <div>This is just a block of text.</div>
-    <div className="space-x-2">
+    <div className="flex gap-2">
       <Input size="sm" placeholder="Placeholder" />
       <ButtonPrimary size="sm">Submit</ButtonPrimary>
     </div>
-    <div className="space-x-2">
+    <div className="flex gap-2">
       <Input size="md" placeholder="Placeholder" />
       <ButtonPrimary size="md">Submit</ButtonPrimary>
     </div>
-    <div className="space-x-2">
+    <div className="flex gap-2">
       <Input size="lg" placeholder="Placeholder" />
       <ButtonPrimary size="lg">Submit</ButtonPrimary>
     </div>