- Refactored UGroup and URow styles

- Replaced space styles with gaps to avoid visual bugs
vuelessjs · Jun 4, 2024 · 1d5b100 · 1d5b100
1 parent 6a987a4
commit 1d5b100
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 29 deletions.
diff --git a/src/ui.container-group/configs/default.config.js b/src/ui.container-group/configs/default.config.js
@@ -16,14 +16,14 @@ export default /*tw*/ {
     base: "flex flex-col",
     variants: {
       gap: {
-        none: "space-y-0",
-        "2xs": "space-y-1",
-        xs: "space-y-2",
-        sm: "space-y-3",
-        md: "space-y-4",
-        lg: "space-y-5",
-        xl: "space-y-6",
-        "2xl": "space-y-8",
+        none: "gap-0",
+        "2xs": "gap-1",
+        xs: "gap-2",
+        sm: "gap-3",
+        md: "gap-4",
+        lg: "gap-5",
+        xl: "gap-6",
+        "2xl": "gap-8",
       },
       align: {
         end: "items-end",

diff --git a/src/ui.container-row/configs/default.config.js b/src/ui.container-row/configs/default.config.js
@@ -3,14 +3,14 @@ export default /*tw*/ {
     base: "flex flex-col md:flex-row w-full",
     variants: {
       gap: {
-        none: "space-y-0 md:space-x-0",
-        "2xs": "space-y-1 md:space-x-1",
-        xs: "space-y-2 md:space-x-2",
-        sm: "space-y-3 md:space-x-3",
-        md: "space-y-4 md:space-x-4",
-        lg: "space-y-5 md:space-x-5",
-        xl: "space-y-6 md:space-x-6",
-        "2xl": "space-y-8 md:space-x-8",
+        none: "gap-0",
+        "2xs": "gap-1",
+        xs: "gap-2",
+        sm: "gap-3",
+        md: "gap-4",
+        lg: "gap-5",
+        xl: "gap-6",
+        "2xl": "gap-8",
       },
       align: {
         end: "items-end",
@@ -20,20 +20,9 @@ export default /*tw*/ {
         baseline: "items-baseline",
       },
       noMobile: {
-        true: "flex-row space-y-0",
-        false: "md:space-y-0",
+        true: "flex-row",
       },
     },
-    compoundVariants: [
-      { gap: "none", noMobile: true, class: "space-x-0" },
-      { gap: "2xs", noMobile: true, class: "space-x-1" },
-      { gap: "xs", noMobile: true, class: "space-x-2" },
-      { gap: "sm", noMobile: true, class: "space-x-3" },
-      { gap: "md", noMobile: true, class: "space-x-4" },
-      { gap: "lg", noMobile: true, class: "space-x-5" },
-      { gap: "xl", noMobile: true, class: "space-x-6" },
-      { gap: "2xl", noMobile: true, class: "space-x-8" },
-    ],
   },
   defaultVariants: {
     gap: "md",

diff --git a/src/ui.container-row/index.stories.js b/src/ui.container-row/index.stories.js
@@ -30,7 +30,7 @@ const DefaultTemplate = (args) => ({
     return { args };
   },
   template: `
-    <URow v-bind="args">
+    <URow v-bind="args" class="flex">
       ${args.slotTemplate || defaultSlotTemplate}
     </URow>
   `,