From 6233690d8acd96664c48d4f721c481bcb4095be4 Mon Sep 17 00:00:00 2001 From: chongruei Date: Sat, 16 Sep 2023 22:48:23 +0800 Subject: [PATCH 01/20] fix(button-group): radius not work --- packages/core/theme/src/components/button.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/core/theme/src/components/button.ts b/packages/core/theme/src/components/button.ts index 4f9e376a4e..c17ac445b0 100644 --- a/packages/core/theme/src/components/button.ts +++ b/packages/core/theme/src/components/button.ts @@ -319,22 +319,22 @@ const button = tv({ // isInGroup / size { isInGroup: true, - size: "sm", + radius: "sm", class: "rounded-none first:rounded-l-small last:rounded-r-small", }, { isInGroup: true, - size: "md", + radius: "md", class: "rounded-none first:rounded-l-medium last:rounded-r-medium", }, { isInGroup: true, - size: "lg", + radius: "lg", class: "rounded-none first:rounded-l-large last:rounded-r-large", }, { isInGroup: true, - isRounded: true, + radius: "full", class: "rounded-none first:rounded-l-full last:rounded-r-full", }, // isInGroup / bordered / ghost From 11cf0c2faf9cde3a0d1931b540782f322868ab71 Mon Sep 17 00:00:00 2001 From: chongruei Date: Sat, 16 Sep 2023 23:26:01 +0800 Subject: [PATCH 02/20] fix(button): not show the correct borders --- packages/components/button/src/use-button.ts | 3 +++ packages/core/theme/src/components/button.ts | 6 +++++- 2 files changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/components/button/src/use-button.ts b/packages/components/button/src/use-button.ts index a00febb5c5..e3fa8abf94 100644 --- a/packages/components/button/src/use-button.ts +++ b/packages/components/button/src/use-button.ts @@ -65,6 +65,7 @@ export type UseButtonProps = Props & export function useButton(props: UseButtonProps) { const groupContext = useButtonGroupContext(); const isInGroup = !!groupContext; + const isIsolate = isInGroup && !!props.variant; const { ref, @@ -112,6 +113,7 @@ export function useButton(props: UseButtonProps) { fullWidth, isDisabled, isInGroup, + isIsolate, disableAnimation, isIconOnly, className, @@ -124,6 +126,7 @@ export function useButton(props: UseButtonProps) { fullWidth, isDisabled, isInGroup, + isIsolate, isIconOnly, disableAnimation, className, diff --git a/packages/core/theme/src/components/button.ts b/packages/core/theme/src/components/button.ts index c17ac445b0..7e0fca287c 100644 --- a/packages/core/theme/src/components/button.ts +++ b/packages/core/theme/src/components/button.ts @@ -79,6 +79,9 @@ const button = tv({ isInGroup: { true: "[&:not(:first-child):not(:last-child)]:rounded-none", }, + isIsolate: { + true: "mr-0 ml-0", + }, isIconOnly: { true: "px-unit-0 !gap-unit-0", false: "[&>svg]:max-w-[theme(spacing.unit-8)]", @@ -340,7 +343,8 @@ const button = tv({ // isInGroup / bordered / ghost { isInGroup: true, - variant: ["bordered", "ghost"], + isIsolate: false, + variant: ["ghost", "bordered"], class: "[&:not(:first-child)]:ml-[calc(theme(borderWidth.medium)*-1)]", }, { From 8352f8f2d38bc58ccddf8d0b96d8f5d0f5c6844c Mon Sep 17 00:00:00 2001 From: chongruei Date: Sat, 16 Sep 2023 23:29:55 +0800 Subject: [PATCH 03/20] fix(changeset): button issue --- .changeset/chilly-trainers-type.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .changeset/chilly-trainers-type.md diff --git a/.changeset/chilly-trainers-type.md b/.changeset/chilly-trainers-type.md new file mode 100644 index 0000000000..6a010a46a7 --- /dev/null +++ b/.changeset/chilly-trainers-type.md @@ -0,0 +1,7 @@ +--- +"@nextui-org/button": patch +"@nextui-org/theme": patch +--- + +fix(button): not show the correct borders +fix(button-group): radis not work From 2b7cbb8ab9b45c9374e43f0c15ca8547c7aa1c9e Mon Sep 17 00:00:00 2001 From: chongruei Date: Sat, 16 Sep 2023 23:43:08 +0800 Subject: [PATCH 04/20] fix(changeset): fix typo --- .changeset/chilly-trainers-type.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/chilly-trainers-type.md b/.changeset/chilly-trainers-type.md index 6a010a46a7..434000b552 100644 --- a/.changeset/chilly-trainers-type.md +++ b/.changeset/chilly-trainers-type.md @@ -4,4 +4,4 @@ --- fix(button): not show the correct borders -fix(button-group): radis not work +fix(button-group): radius not work From c0e03600c9ed739713fcdca1727bc10eaf47ba58 Mon Sep 17 00:00:00 2001 From: chongruei Date: Sat, 16 Sep 2023 23:54:04 +0800 Subject: [PATCH 05/20] fix(changeset): tweak changeset message --- .changeset/chilly-trainers-type.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/chilly-trainers-type.md b/.changeset/chilly-trainers-type.md index 434000b552..80469ca68f 100644 --- a/.changeset/chilly-trainers-type.md +++ b/.changeset/chilly-trainers-type.md @@ -3,5 +3,5 @@ "@nextui-org/theme": patch --- -fix(button): not show the correct borders -fix(button-group): radius not work +Fix #1626 The radius now works, and the border is displayed correctly in the buttonGroup. + From b9f451836f921ff34d93328b02882dc950a28760 Mon Sep 17 00:00:00 2001 From: chongruei Date: Sun, 17 Sep 2023 00:59:02 +0800 Subject: [PATCH 06/20] fix(button-groups): add miss undefined radius --- packages/core/theme/src/components/button.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/core/theme/src/components/button.ts b/packages/core/theme/src/components/button.ts index 7e0fca287c..9639835c52 100644 --- a/packages/core/theme/src/components/button.ts +++ b/packages/core/theme/src/components/button.ts @@ -319,7 +319,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, radius: "sm", From 6ea7058fb8adf3ee26b2709e644f0915a3150681 Mon Sep 17 00:00:00 2001 From: chongruei Date: Sun, 17 Sep 2023 01:06:19 +0800 Subject: [PATCH 07/20] fix: make changeset clearly --- .changeset/chilly-trainers-type.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/chilly-trainers-type.md b/.changeset/chilly-trainers-type.md index 80469ca68f..c9d465a7a4 100644 --- a/.changeset/chilly-trainers-type.md +++ b/.changeset/chilly-trainers-type.md @@ -3,5 +3,5 @@ "@nextui-org/theme": patch --- -Fix #1626 The radius now works, and the border is displayed correctly in the buttonGroup. +Fix #1626 The 'radius' will be changed based on the ButtonGroup props. However, 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. From d65e3c8ad062e02d10367c83916c14c2cff21ba7 Mon Sep 17 00:00:00 2001 From: chongruei Date: Sun, 17 Sep 2023 01:21:56 +0800 Subject: [PATCH 08/20] test(button-group): add variant button --- .../button/stories/button-group.stories.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/packages/components/button/stories/button-group.stories.tsx b/packages/components/button/stories/button-group.stories.tsx index 042f464ea5..49a2817230 100644 --- a/packages/components/button/stories/button-group.stories.tsx +++ b/packages/components/button/stories/button-group.stories.tsx @@ -63,6 +63,14 @@ const Template = (args: ButtonGroupProps) => ( ); +const VariantButtonTemplate = (args: ButtonGroupProps) => ( + + + + + +); + export const Default = { render: Template, @@ -70,3 +78,11 @@ export const Default = { ...defaultProps, }, }; + +export const VariantButton = { + render: VariantButtonTemplate, + + args: { + ...defaultProps, + }, +}; From 8b93f0ba0df6f10910006618cb26c75f785824bd Mon Sep 17 00:00:00 2001 From: chongruei Date: Sun, 17 Sep 2023 01:35:53 +0800 Subject: [PATCH 09/20] refactor: button-group variant handling in button-group.stories.tsx --- packages/components/button/stories/button-group.stories.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/button/stories/button-group.stories.tsx b/packages/components/button/stories/button-group.stories.tsx index 49a2817230..7ae6e78482 100644 --- a/packages/components/button/stories/button-group.stories.tsx +++ b/packages/components/button/stories/button-group.stories.tsx @@ -64,7 +64,7 @@ const Template = (args: ButtonGroupProps) => ( ); const VariantButtonTemplate = (args: ButtonGroupProps) => ( - + @@ -84,5 +84,6 @@ export const VariantButton = { args: { ...defaultProps, + variant: "solid", }, }; From 56aded5b027c64b5477e3bfb8171d20ec0286021 Mon Sep 17 00:00:00 2001 From: chongruei Date: Sun, 17 Sep 2023 02:30:15 +0800 Subject: [PATCH 10/20] test: update button variant to 'bordered' --- packages/components/button/stories/button-group.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/button/stories/button-group.stories.tsx b/packages/components/button/stories/button-group.stories.tsx index 7ae6e78482..ce0a72afc6 100644 --- a/packages/components/button/stories/button-group.stories.tsx +++ b/packages/components/button/stories/button-group.stories.tsx @@ -66,7 +66,7 @@ const Template = (args: ButtonGroupProps) => ( const VariantButtonTemplate = (args: ButtonGroupProps) => ( - + ); From 7d8420ee262ba57280eb4c813012cf0770359292 Mon Sep 17 00:00:00 2001 From: chongruei Date: Sun, 17 Sep 2023 02:31:39 +0800 Subject: [PATCH 11/20] refactor: rename isIsolate to isIsolated --- packages/components/button/src/use-button.ts | 6 +++--- packages/core/theme/src/components/button.ts | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/components/button/src/use-button.ts b/packages/components/button/src/use-button.ts index e3fa8abf94..2c1f7b3abb 100644 --- a/packages/components/button/src/use-button.ts +++ b/packages/components/button/src/use-button.ts @@ -65,7 +65,7 @@ export type UseButtonProps = Props & export function useButton(props: UseButtonProps) { const groupContext = useButtonGroupContext(); const isInGroup = !!groupContext; - const isIsolate = isInGroup && !!props.variant; + const isIsolated = isInGroup && !!props.variant; const { ref, @@ -113,7 +113,7 @@ export function useButton(props: UseButtonProps) { fullWidth, isDisabled, isInGroup, - isIsolate, + isIsolated, disableAnimation, isIconOnly, className, @@ -126,7 +126,7 @@ export function useButton(props: UseButtonProps) { fullWidth, isDisabled, isInGroup, - isIsolate, + isIsolated, isIconOnly, disableAnimation, className, diff --git a/packages/core/theme/src/components/button.ts b/packages/core/theme/src/components/button.ts index 9639835c52..94dee3e56a 100644 --- a/packages/core/theme/src/components/button.ts +++ b/packages/core/theme/src/components/button.ts @@ -79,7 +79,7 @@ const button = tv({ isInGroup: { true: "[&:not(:first-child):not(:last-child)]:rounded-none", }, - isIsolate: { + isIsolated: { true: "mr-0 ml-0", }, isIconOnly: { @@ -347,7 +347,7 @@ const button = tv({ // isInGroup / bordered / ghost { isInGroup: true, - isIsolate: false, + isIsolated: false, variant: ["ghost", "bordered"], class: "[&:not(:first-child)]:ml-[calc(theme(borderWidth.medium)*-1)]", }, From bf901d2fa07d73e00b4d2d9f40f526cf3453785d Mon Sep 17 00:00:00 2001 From: chongruei Date: Sun, 17 Sep 2023 02:33:01 +0800 Subject: [PATCH 12/20] Revert "fix(button-group): radius not work" This reverts commit 6233690d8acd96664c48d4f721c481bcb4095be4. --- packages/core/theme/src/components/button.ts | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/core/theme/src/components/button.ts b/packages/core/theme/src/components/button.ts index 94dee3e56a..a66a19c124 100644 --- a/packages/core/theme/src/components/button.ts +++ b/packages/core/theme/src/components/button.ts @@ -326,22 +326,22 @@ const button = tv({ }, { isInGroup: true, - radius: "sm", + size: "sm", class: "rounded-none first:rounded-l-small last:rounded-r-small", }, { isInGroup: true, - radius: "md", + size: "md", class: "rounded-none first:rounded-l-medium last:rounded-r-medium", }, { isInGroup: true, - radius: "lg", + size: "lg", class: "rounded-none first:rounded-l-large last:rounded-r-large", }, { isInGroup: true, - radius: "full", + isRounded: true, class: "rounded-none first:rounded-l-full last:rounded-r-full", }, // isInGroup / bordered / ghost From e7c0a5f1b44d0f1585132fd4fee9d05b75cd90df Mon Sep 17 00:00:00 2001 From: chongruei Date: Mon, 18 Sep 2023 01:10:05 +0800 Subject: [PATCH 13/20] fix: remove isIsolate because using a negative value for the margin will always cover the neighbor --- packages/components/button/src/use-button.ts | 3 --- packages/core/theme/src/components/button.ts | 4 ---- 2 files changed, 7 deletions(-) diff --git a/packages/components/button/src/use-button.ts b/packages/components/button/src/use-button.ts index 2c1f7b3abb..a00febb5c5 100644 --- a/packages/components/button/src/use-button.ts +++ b/packages/components/button/src/use-button.ts @@ -65,7 +65,6 @@ export type UseButtonProps = Props & export function useButton(props: UseButtonProps) { const groupContext = useButtonGroupContext(); const isInGroup = !!groupContext; - const isIsolated = isInGroup && !!props.variant; const { ref, @@ -113,7 +112,6 @@ export function useButton(props: UseButtonProps) { fullWidth, isDisabled, isInGroup, - isIsolated, disableAnimation, isIconOnly, className, @@ -126,7 +124,6 @@ export function useButton(props: UseButtonProps) { fullWidth, isDisabled, isInGroup, - isIsolated, isIconOnly, disableAnimation, className, diff --git a/packages/core/theme/src/components/button.ts b/packages/core/theme/src/components/button.ts index a66a19c124..ce28661a2a 100644 --- a/packages/core/theme/src/components/button.ts +++ b/packages/core/theme/src/components/button.ts @@ -79,9 +79,6 @@ const button = tv({ isInGroup: { true: "[&:not(:first-child):not(:last-child)]:rounded-none", }, - isIsolated: { - true: "mr-0 ml-0", - }, isIconOnly: { true: "px-unit-0 !gap-unit-0", false: "[&>svg]:max-w-[theme(spacing.unit-8)]", @@ -349,7 +346,6 @@ const button = tv({ isInGroup: true, isIsolated: false, variant: ["ghost", "bordered"], - class: "[&:not(:first-child)]:ml-[calc(theme(borderWidth.medium)*-1)]", }, { isIconOnly: true, From 83ed63ca737c27a8f123a2d125f10747436c29ce Mon Sep 17 00:00:00 2001 From: chongruei Date: Mon, 18 Sep 2023 01:10:48 +0800 Subject: [PATCH 14/20] fix(changeset): remove radius part for another PR --- .changeset/chilly-trainers-type.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/chilly-trainers-type.md b/.changeset/chilly-trainers-type.md index c9d465a7a4..3462125be5 100644 --- a/.changeset/chilly-trainers-type.md +++ b/.changeset/chilly-trainers-type.md @@ -3,5 +3,5 @@ "@nextui-org/theme": patch --- -Fix #1626 The 'radius' will be changed based on the ButtonGroup props. However, 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. +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. From df489433c322d25a7cc107ea5d68e8efc4cd4a65 Mon Sep 17 00:00:00 2001 From: chongruei Date: Mon, 18 Sep 2023 01:12:15 +0800 Subject: [PATCH 15/20] test: add multiple variant buttons on storybook --- .../button/stories/button-group.stories.tsx | 29 ++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/packages/components/button/stories/button-group.stories.tsx b/packages/components/button/stories/button-group.stories.tsx index ce0a72afc6..c5e863d253 100644 --- a/packages/components/button/stories/button-group.stories.tsx +++ b/packages/components/button/stories/button-group.stories.tsx @@ -66,8 +66,26 @@ const Template = (args: ButtonGroupProps) => ( const VariantButtonTemplate = (args: ButtonGroupProps) => ( - + + + + + +); + +const VariantButtonsTemplate = (args: ButtonGroupProps) => ( + + + + + + + ); @@ -87,3 +105,12 @@ export const VariantButton = { variant: "solid", }, }; + +export const VariantButtons = { + render: VariantButtonsTemplate, + + args: { + ...defaultProps, + variant: "solid", + }, +}; From ac9fbbdcf0f1335ab4e2b74ac91fd1dde3b08bc7 Mon Sep 17 00:00:00 2001 From: chongruei Date: Mon, 18 Sep 2023 01:15:25 +0800 Subject: [PATCH 16/20] fix: remove unused attribute --- packages/core/theme/src/components/button.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/core/theme/src/components/button.ts b/packages/core/theme/src/components/button.ts index ce28661a2a..336558f028 100644 --- a/packages/core/theme/src/components/button.ts +++ b/packages/core/theme/src/components/button.ts @@ -344,7 +344,6 @@ const button = tv({ // isInGroup / bordered / ghost { isInGroup: true, - isIsolated: false, variant: ["ghost", "bordered"], }, { From e98a2540cfb130a986d6065ca2086ec61685b2f8 Mon Sep 17 00:00:00 2001 From: chongruei Date: Tue, 19 Sep 2023 23:54:02 +0800 Subject: [PATCH 17/20] feat: use adjacent selector to remove doubles border --- packages/core/theme/src/components/button.ts | 38 ++++++++++++++++++++ 1 file changed, 38 insertions(+) diff --git a/packages/core/theme/src/components/button.ts b/packages/core/theme/src/components/button.ts index 336558f028..92136e9cc2 100644 --- a/packages/core/theme/src/components/button.ts +++ b/packages/core/theme/src/components/button.ts @@ -345,6 +345,44 @@ const button = tv({ { isInGroup: true, variant: ["ghost", "bordered"], + color: "default", + className: + "nextui-adjacent-default [&+.nextui-adjacent-default]:ml-[calc(theme(borderWidth.medium)*-1)]", + }, + { + isInGroup: true, + variant: ["ghost", "bordered"], + color: "primary", + className: + "nextui-adjacent-primary [&+.nextui-adjacent-primary]:ml-[calc(theme(borderWidth.medium)*-1)]", + }, + { + isInGroup: true, + variant: ["ghost", "bordered"], + color: "secondary", + className: + "nextui-adjacent-secondary [&+.nextui-adjacent-secondary]:ml-[calc(theme(borderWidth.medium)*-1)]", + }, + { + isInGroup: true, + variant: ["ghost", "bordered"], + color: "success", + className: + "nextui-adjacent-success [&+.nextui-adjacent-success]:ml-[calc(theme(borderWidth.medium)*-1)]", + }, + { + isInGroup: true, + variant: ["ghost", "bordered"], + color: "warning", + className: + "nextui-adjacent-warning [&+.nextui-adjacent-warning]:ml-[calc(theme(borderWidth.medium)*-1)]", + }, + { + isInGroup: true, + variant: ["ghost", "bordered"], + color: "danger", + className: + "nextui-adjacent-danger [&+.nextui-adjacent-danger]:ml-[calc(theme(borderWidth.medium)*-1)]", }, { isIconOnly: true, From 03532e1e7288da7e4e44645e931d7ecd9c8297e3 Mon Sep 17 00:00:00 2001 From: chongruei Date: Wed, 20 Sep 2023 00:13:20 +0800 Subject: [PATCH 18/20] test: make variantButtons theme consistency --- .../components/button/stories/button-group.stories.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/components/button/stories/button-group.stories.tsx b/packages/components/button/stories/button-group.stories.tsx index c5e863d253..18796b2083 100644 --- a/packages/components/button/stories/button-group.stories.tsx +++ b/packages/components/button/stories/button-group.stories.tsx @@ -79,12 +79,10 @@ const VariantButtonsTemplate = (args: ButtonGroupProps) => ( - + - - + + ); From a30dbd0a70e4d000f78a09e3b7673445c246b174 Mon Sep 17 00:00:00 2001 From: chongruei Date: Wed, 20 Sep 2023 22:10:11 +0800 Subject: [PATCH 19/20] refactor: use collapseAdjacentVariantBorders to wrap an adjacent selector --- packages/core/theme/src/components/button.ts | 20 +++++++------------- packages/core/theme/src/utils/classes.ts | 13 +++++++++++++ 2 files changed, 20 insertions(+), 13 deletions(-) diff --git a/packages/core/theme/src/components/button.ts b/packages/core/theme/src/components/button.ts index 92136e9cc2..0b7cbc1aed 100644 --- 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 index 30ab57a583..36f14aa78a 100644 --- 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)]"], +}; From f89b7c93e955d63f28587abd6b39291eeb26eb29 Mon Sep 17 00:00:00 2001 From: Jakob Guddas Date: Sun, 1 Oct 2023 17:27:39 +0200 Subject: [PATCH 20/20] Added RTL support. --- packages/core/theme/src/utils/classes.ts | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/core/theme/src/utils/classes.ts b/packages/core/theme/src/utils/classes.ts index 36f14aa78a..7ed19d23a1 100644 --- a/packages/core/theme/src/utils/classes.ts +++ b/packages/core/theme/src/utils/classes.ts @@ -60,10 +60,10 @@ export const absoluteFullClasses = ["absolute", "inset-0"]; * 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)]"], + 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)]"], };