From 3249a52c96264b336781827e5d44dbbccb92f474 Mon Sep 17 00:00:00 2001 From: winches <329487092@qq.com> Date: Fri, 24 Jan 2025 22:42:08 +0800 Subject: [PATCH 1/5] fix: rename wrapper to tab wrapper --- packages/components/tabs/src/use-tabs.ts | 2 +- packages/core/theme/src/components/tabs.ts | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/components/tabs/src/use-tabs.ts b/packages/components/tabs/src/use-tabs.ts index 4935d335d8..45d3f4d9fa 100644 --- a/packages/components/tabs/src/use-tabs.ts +++ b/packages/components/tabs/src/use-tabs.ts @@ -171,7 +171,7 @@ export function useTabs(originalProps: UseTabsProps) { const getWrapperProps: PropGetter = useCallback( (props) => ({ "data-slot": "tabWrapper", - className: slots.wrapper({class: clsx(classNames?.wrapper, props?.className)}), + className: slots.tabWrapper({class: clsx(classNames?.tabWrapper, props?.className)}), "data-placement": placement, "data-vertical": isVertical || placement === "start" || placement === "end" ? "vertical" : "horizontal", diff --git a/packages/core/theme/src/components/tabs.ts b/packages/core/theme/src/components/tabs.ts index 70432a33c6..2cddfac8d5 100644 --- a/packages/core/theme/src/components/tabs.ts +++ b/packages/core/theme/src/components/tabs.ts @@ -72,7 +72,7 @@ const tabs = tv({ // focus ring ...dataFocusVisibleClasses, ], - wrapper: [], + tabWrapper: [], }, variants: { variant: { @@ -166,15 +166,15 @@ const tabs = tv({ start: { tabList: "flex-col", panel: "py-0 px-3", - wrapper: "flex", + tabWrapper: "flex", }, end: { tabList: "flex-col", panel: "py-0 px-3", - wrapper: "flex flex-row-reverse", + tabWrapper: "flex flex-row-reverse", }, bottom: { - wrapper: "flex flex-col-reverse", + tabWrapper: "flex flex-col-reverse", }, }, }, From 5171be353b5d4c89465397900789c599c6388f9f Mon Sep 17 00:00:00 2001 From: winches <329487092@qq.com> Date: Fri, 24 Jan 2025 22:45:55 +0800 Subject: [PATCH 2/5] docs: update --- .changeset/dull-ladybugs-whisper.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/dull-ladybugs-whisper.md diff --git a/.changeset/dull-ladybugs-whisper.md b/.changeset/dull-ladybugs-whisper.md new file mode 100644 index 0000000000..ff582475d7 --- /dev/null +++ b/.changeset/dull-ladybugs-whisper.md @@ -0,0 +1,5 @@ +--- +"@heroui/theme": patch +--- + +Fix wrapper rename to tabWrapper (#4552) From 0e58930e32a022f62b44c5fcee778a5a2e8baa46 Mon Sep 17 00:00:00 2001 From: winches <329487092@qq.com> Date: Mon, 27 Jan 2025 23:06:45 +0800 Subject: [PATCH 3/5] docs: update --- apps/docs/content/docs/components/tabs.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/docs/content/docs/components/tabs.mdx b/apps/docs/content/docs/components/tabs.mdx index 69f62149ce..08f69c178c 100644 --- a/apps/docs/content/docs/components/tabs.mdx +++ b/apps/docs/content/docs/components/tabs.mdx @@ -195,7 +195,7 @@ function AppTabs() { - **base**: The main tabs slot, it wraps the items and the panels. - **tabList**: The tab list slot, it wraps the tab items. -- **tab**: The tab slot, it wraps the tab item. +- **tabWrapper**: The tab wrapper slot, it wraps the tab item. - **tabContent**: The tab content slot, it wraps the tab content. - **cursor**: The cursor slot, it wraps the cursor. This is only visible when `disableAnimation=false` - **panel**: The panel slot, it wraps the tab panel (content). @@ -343,7 +343,7 @@ You can customize the `Tabs` component by passing custom Tailwind CSS classes to }, { attribute: "classNames", - type: "Partial>", + type: "Partial>", description: "Allows to set custom class names for the card slots.", default: "-" }, From 20955f3d235ea87a85428753e35cae084d9af4b0 Mon Sep 17 00:00:00 2001 From: winches <329487092@qq.com> Date: Mon, 27 Jan 2025 23:09:41 +0800 Subject: [PATCH 4/5] docs: update --- .changeset/dull-ladybugs-whisper.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/dull-ladybugs-whisper.md b/.changeset/dull-ladybugs-whisper.md index ff582475d7..7f0abff693 100644 --- a/.changeset/dull-ladybugs-whisper.md +++ b/.changeset/dull-ladybugs-whisper.md @@ -2,4 +2,4 @@ "@heroui/theme": patch --- -Fix wrapper rename to tabWrapper (#4552) +Fix tabs slots "tab" rename to "tabWrapper" -- Breaking Change (#4552) From 6ec9d404af33c869ce680c4bc462eac76563a800 Mon Sep 17 00:00:00 2001 From: winches <329487092@qq.com> Date: Thu, 30 Jan 2025 19:15:38 +0800 Subject: [PATCH 5/5] fix: rename wrapper to tab wrapper --- .changeset/dull-ladybugs-whisper.md | 2 +- apps/docs/content/docs/components/tabs.mdx | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/.changeset/dull-ladybugs-whisper.md b/.changeset/dull-ladybugs-whisper.md index 7f0abff693..5fde4a11c0 100644 --- a/.changeset/dull-ladybugs-whisper.md +++ b/.changeset/dull-ladybugs-whisper.md @@ -2,4 +2,4 @@ "@heroui/theme": patch --- -Fix tabs slots "tab" rename to "tabWrapper" -- Breaking Change (#4552) +Fix tabs slots "wrapper" rename to "tabWrapper" -- Breaking Change (#4552) diff --git a/apps/docs/content/docs/components/tabs.mdx b/apps/docs/content/docs/components/tabs.mdx index 08f69c178c..8b8f339e3e 100644 --- a/apps/docs/content/docs/components/tabs.mdx +++ b/apps/docs/content/docs/components/tabs.mdx @@ -195,10 +195,11 @@ function AppTabs() { - **base**: The main tabs slot, it wraps the items and the panels. - **tabList**: The tab list slot, it wraps the tab items. -- **tabWrapper**: The tab wrapper slot, it wraps the tab item. +- **tab**: The tab slot, it wraps the tab item. - **tabContent**: The tab content slot, it wraps the tab content. - **cursor**: The cursor slot, it wraps the cursor. This is only visible when `disableAnimation=false` - **panel**: The panel slot, it wraps the tab panel (content). +- **tabWrapper**: The tab wrapper slot, it wraps the tab and the tab content. ### Custom Styles @@ -343,7 +344,7 @@ You can customize the `Tabs` component by passing custom Tailwind CSS classes to }, { attribute: "classNames", - type: "Partial>", + type: "Partial>", description: "Allows to set custom class names for the card slots.", default: "-" },