Allow overriding classnames in tabs

firecmsco · Nov 19, 2024 · 902ab6c · 902ab6c
1 parent 0ac71b5
commit 902ab6c
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 5 deletions.
diff --git a/packages/collection_editor/src/ui/collection_editor/CollectionEditorDialog.tsx b/packages/collection_editor/src/ui/collection_editor/CollectionEditorDialog.tsx
@@ -538,7 +538,7 @@ function CollectionEditorInternal<M extends Record<string, any>>({
 
             <>
                 {!isNewCollection && <Tabs value={currentView}
-                                           className={cls(defaultBorderMixin, "justify-end bg-surface-50 dark:bg-surface-950 border-b")}
+                                           innerClassName={cls(defaultBorderMixin, "justify-end bg-surface-50 dark:bg-surface-950 border-b")}
                                            onValueChange={(v) => setCurrentView(v as EditorView)}>
                     <Tab value={"details"}>
                         Details

diff --git a/packages/firecms_core/src/core/EntityEditView.tsx b/packages/firecms_core/src/core/EntityEditView.tsx
@@ -1029,7 +1029,7 @@ export function EntityEditViewInner<M extends Record<string, any>>({
                         onValueChange={(value) => {
                             onSideTabClick(value);
                         }}
-                        className="pl-4 pr-4 pt-0">
+                        innerClassName="pl-4 pr-4 pt-0">
 
                         <Tab
                             disabled={!hasAdditionalViews}

diff --git a/packages/ui/src/components/Tabs.tsx b/packages/ui/src/components/Tabs.tsx
@@ -5,6 +5,7 @@ import { cls } from "../util";
 export type TabsProps = {
     value: string,
     children: React.ReactNode,
+    innerClassName?: string,
     className?: string,
     onValueChange: (value: string) => void
 };
@@ -13,13 +14,14 @@ export function Tabs({
                          value,
                          onValueChange,
                          className,
+                         innerClassName,
                          children
                      }: TabsProps) {
 
-    return <TabsPrimitive.Root value={value} onValueChange={onValueChange}>
+    return <TabsPrimitive.Root value={value} onValueChange={onValueChange} className={className}>
         <TabsPrimitive.List className={cls(
             "flex text-sm font-medium text-center text-surface-accent-800 dark:text-white max-w-full overflow-auto no-scrollbar",
-            className)
+            innerClassName)
         }>
             {children}
         </TabsPrimitive.List>
@@ -29,13 +31,15 @@ export function Tabs({
 export type TabProps = {
     value: string,
     className?: string,
+    innerClassName?: string,
     children: React.ReactNode,
     disabled?: boolean
 };
 
 export function Tab({
                         value,
                         className,
+                        innerClassName,
                         children,
                         disabled
                     }: TabProps) {
@@ -53,7 +57,8 @@ export function Tab({
                                       // "data-[state=active]:bg-surface-accent-50 data-[state=active]:dark:bg-surface-accent-800",
                                       className)}>
         <div className={cls("uppercase inline-block p-2 px-4 m-2 rounded",
-            "hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800")}>
+            "hover:bg-surface-accent-200 hover:bg-opacity-75 dark:hover:bg-surface-accent-800",
+            innerClassName)}>
             {children}
         </div>
     </TabsPrimitive.Trigger>;