fix: resolved border collapse issue #1626 when border variants are mixed in button group (#1637)

* fix(button-group): radius not work

* fix(button): not show the correct borders

* fix(changeset): button issue

* fix(changeset): fix typo

* fix(changeset): tweak changeset message

* fix(button-groups): add miss undefined radius

* fix: make changeset clearly

* test(button-group): add variant button

* refactor: button-group variant handling in button-group.stories.tsx

* test: update button variant to 'bordered'

* refactor: rename isIsolate to isIsolated

* Revert "fix(button-group): radius not work"

This reverts commit 6233690d8acd96664c48d4f721c481bcb4095be4.

* fix: remove isIsolate because using a negative value for the margin will always cover the neighbor

* fix(changeset): remove radius part for another PR

* test: add multiple variant buttons on storybook

* fix: remove unused attribute

* feat: use adjacent selector to remove doubles border

* test: make variantButtons theme consistency

* refactor: use collapseAdjacentVariantBorders to wrap an adjacent selector

* Added RTL support.

---------

Co-authored-by: Jakob Guddas <github@jguddas.de>

.changeset/chilly-trainers-type.md

@@ -0,0 +1,7 @@
+---
+"@nextui-org/button": patch
+"@nextui-org/theme": patch
+---
+
+Fix #1626 The 'border-left' is obscured by 'margin-left ml-[calc(theme(borderWidth.medium)*-1)]', and the border is not covered by its neighbor when the button is set to variant='bordered' in the ButtonGroup.
+

packages/components/button/stories/button-group.stories.tsx

@@ -63,6 +63,30 @@ const Template = (args: ButtonGroupProps) => (
   </ButtonGroup>
 );
 
+const VariantButtonTemplate = (args: ButtonGroupProps) => (
+  <ButtonGroup {...args}>
+    <Button>One</Button>
+    <Button>Two</Button>
+    <Button>Three</Button>
+    <Button variant="bordered">Four</Button>
+    <Button>Five</Button>
+    <Button>Six</Button>
+  </ButtonGroup>
+);
+
+const VariantButtonsTemplate = (args: ButtonGroupProps) => (
+  <ButtonGroup {...args}>
+    <Button color="success" variant="bordered">
+      One
+    </Button>
+    <Button color="success">Two</Button>
+    <Button variant="bordered">Three</Button>
+    <Button variant="bordered">Four</Button>
+    <Button variant="bordered">Five</Button>
+    <Button variant="bordered">Six</Button>
+  </ButtonGroup>
+);
+
 export const Default = {
   render: Template,
 
@@ -70,3 +94,21 @@ export const Default = {
     ...defaultProps,
   },
 };
+
+export const VariantButton = {
+  render: VariantButtonTemplate,
+
+  args: {
+    ...defaultProps,
+    variant: "solid",
+  },
+};
+
+export const VariantButtons = {
+  render: VariantButtonsTemplate,
+
+  args: {
+    ...defaultProps,
+    variant: "solid",
+  },
+};

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
@@ -316,7 +316,11 @@ const button = tv({
       color: "danger",
       class: colorVariants.ghost.danger,
     },
-    // isInGroup / size
+    // isInGroup / radius
+    {
+      isInGroup: true,
+      class: "rounded-none first:rounded-l-medium last:rounded-r-medium",
+    },
     {
       isInGroup: true,
       size: "sm",
@@ -340,8 +344,39 @@ const button = tv({
     // isInGroup / bordered / ghost
     {
       isInGroup: true,
-      variant: ["bordered", "ghost"],
+      variant: ["ghost", "bordered"],
-      class: "[&:not(:first-child)]:ml-[calc(theme(borderWidth.medium)*-1)]",
+      color: "default",
+      className: collapseAdjacentVariantBorders.default,
+    },
+    {
+      isInGroup: true,
+      variant: ["ghost", "bordered"],
+      color: "primary",
+      className: collapseAdjacentVariantBorders.primary,
+    },
+    {
+      isInGroup: true,
+      variant: ["ghost", "bordered"],
+      color: "secondary",
+      className: collapseAdjacentVariantBorders.secondary,
+    },
+    {
+      isInGroup: true,
+      variant: ["ghost", "bordered"],
+      color: "success",
+      className: collapseAdjacentVariantBorders.success,
+    },
+    {
+      isInGroup: true,
+      variant: ["ghost", "bordered"],
+      color: "warning",
+      className: collapseAdjacentVariantBorders.warning,
+    },
+    {
+      isInGroup: true,
+      variant: ["ghost", "bordered"],
+      color: "danger",
+      className: collapseAdjacentVariantBorders.danger,
     },
     {
       isIconOnly: true,

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]:ms-[calc(theme(borderWidth.medium)*-1)]"],
+  primary: ["[&+.border-medium.border-primary]:ms-[calc(theme(borderWidth.medium)*-1)]"],
+  secondary: ["[&+.border-medium.border-secondary]:ms-[calc(theme(borderWidth.medium)*-1)]"],
+  success: ["[&+.border-medium.border-success]:ms-[calc(theme(borderWidth.medium)*-1)]"],
+  warning: ["[&+.border-medium.border-warning]:ms-[calc(theme(borderWidth.medium)*-1)]"],
+  danger: ["[&+.border-medium.border-danger]:ms-[calc(theme(borderWidth.medium)*-1)]"],
+};