refactor: use collapseAdjacentVariantBorders to wrap an adjacent sele…

…ctor
nextui-org · Sep 20, 2023 · a30dbd0 · a30dbd0
1 parent 03532e1
commit a30dbd0
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 13 deletions.
diff --git a/packages/core/theme/src/components/button.ts b/packages/core/theme/src/components/button.ts
@@ -1,7 +1,7 @@
 import type {VariantProps} from "tailwind-variants";
 
 import {tv} from "../utils/tv";
-import {colorVariants, dataFocusVisibleClasses} from "../utils";
+import {collapseAdjacentVariantBorders, colorVariants, dataFocusVisibleClasses} from "../utils";
 
 /**
  * Button wrapper **Tailwind Variants** component
@@ -346,43 +346,37 @@ const button = tv({
       isInGroup: true,
       variant: ["ghost", "bordered"],
       color: "default",
-      className:
-        "nextui-adjacent-default [&+.nextui-adjacent-default]:ml-[calc(theme(borderWidth.medium)*-1)]",
+      className: collapseAdjacentVariantBorders.default,
     },
     {
       isInGroup: true,
       variant: ["ghost", "bordered"],
       color: "primary",
-      className:
-        "nextui-adjacent-primary [&+.nextui-adjacent-primary]:ml-[calc(theme(borderWidth.medium)*-1)]",
+      className: collapseAdjacentVariantBorders.primary,
     },
     {
       isInGroup: true,
       variant: ["ghost", "bordered"],
       color: "secondary",
-      className:
-        "nextui-adjacent-secondary [&+.nextui-adjacent-secondary]:ml-[calc(theme(borderWidth.medium)*-1)]",
+      className: collapseAdjacentVariantBorders.secondary,
     },
     {
       isInGroup: true,
       variant: ["ghost", "bordered"],
       color: "success",
-      className:
-        "nextui-adjacent-success [&+.nextui-adjacent-success]:ml-[calc(theme(borderWidth.medium)*-1)]",
+      className: collapseAdjacentVariantBorders.success,
     },
     {
       isInGroup: true,
       variant: ["ghost", "bordered"],
       color: "warning",
-      className:
-        "nextui-adjacent-warning [&+.nextui-adjacent-warning]:ml-[calc(theme(borderWidth.medium)*-1)]",
+      className: collapseAdjacentVariantBorders.warning,
     },
     {
       isInGroup: true,
       variant: ["ghost", "bordered"],
       color: "danger",
-      className:
-        "nextui-adjacent-danger [&+.nextui-adjacent-danger]:ml-[calc(theme(borderWidth.medium)*-1)]",
+      className: collapseAdjacentVariantBorders.danger,
     },
     {
       isIconOnly: true,

diff --git a/packages/core/theme/src/utils/classes.ts b/packages/core/theme/src/utils/classes.ts
@@ -54,3 +54,16 @@ export const translateCenterClasses = [
 ];
 
 export const absoluteFullClasses = ["absolute", "inset-0"];
+
+/**
+ * This object defines CSS classes for collapsing adjacent variant borders.
+ * It includes classes for different variants like default, primary, secondary, etc.
+ */
+export const collapseAdjacentVariantBorders = {
+  default: ["[&+.border-medium.border-default]:ml-[calc(theme(borderWidth.medium)*-1)]"],
+  primary: ["[&+.border-medium.border-primary]:ml-[calc(theme(borderWidth.medium)*-1)]"],
+  secondary: ["[&+.border-medium.border-secondary]:ml-[calc(theme(borderWidth.medium)*-1)]"],
+  success: ["[&+.border-medium.border-success]:ml-[calc(theme(borderWidth.medium)*-1)]"],
+  warning: ["[&+.border-medium.border-warning]:ml-[calc(theme(borderWidth.medium)*-1)]"],
+  danger: ["[&+.border-medium.border-danger]:ml-[calc(theme(borderWidth.medium)*-1)]"],
+};