fix: rename wrapper to tab wrapper (#4636)

* fix: rename wrapper to tab wrapper * docs: update * docs: update * docs: update * fix: rename wrapper to tab wrapper
heroui-inc · Jan 30, 2025 · 06d6f08 · 06d6f08
1 parent 1965b84
commit 06d6f08
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 6 deletions.
diff --git a/.changeset/dull-ladybugs-whisper.md b/.changeset/dull-ladybugs-whisper.md
@@ -0,0 +1,5 @@
+---
+"@heroui/theme": patch
+---
+
+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
@@ -199,6 +199,7 @@ function AppTabs() {
 - **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<Record<\"base\"｜ \"tabList\"｜ \"tab\"｜ \"tabContent\"｜ \"cursor\" ｜ \"panel\", string>>",
+      type: "Partial<Record<\"base\"｜ \"tabList\"｜ \"tab\"｜ \"tabContent\"｜ \"cursor\" ｜ \"panel\" ｜ \"tabWrapper\", string>>",
       description: "Allows to set custom class names for the card slots.",
       default: "-"
     },

diff --git a/packages/components/tabs/src/use-tabs.ts b/packages/components/tabs/src/use-tabs.ts
@@ -171,7 +171,7 @@ export function useTabs<T extends object>(originalProps: UseTabsProps<T>) {
   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
@@ -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",
       },
     },
   },