fix styling of main tabs during drag

finos · Oct 24, 2023 · f0c1d60 · f0c1d60
1 parent 177deb7
commit f0c1d60
Show file tree

Hide file tree

Showing 9 changed files with 34 additions and 46 deletions.
diff --git a/vuu-ui/packages/vuu-layout/src/layout-persistence/data.ts b/vuu-ui/packages/vuu-layout/src/layout-persistence/data.ts
@@ -22,10 +22,11 @@ export const defaultLayout: LayoutJSON = {
     className: "vuuShell-mainTabs",
     TabstripProps: {
       allowAddTab: true,
+      allowCloseTab: true,
       allowRenameTab: true,
       animateSelectionThumb: false,
       location: "main-tab",
-      allowCloseTab: true
+      tabClassName: "MainTab",
     },
     preserve: true,
     active: 0,

diff --git a/vuu-ui/packages/vuu-layout/src/stack/Stack.tsx b/vuu-ui/packages/vuu-layout/src/stack/Stack.tsx
@@ -47,6 +47,7 @@ const DefaultTabstripProps: Partial<TabstripProps> = {
 
 export const Stack = forwardRef(function Stack(
   {
+    TabstripProps = DefaultTabstripProps,
     active = 0,
     children,
     className: classNameProp,
@@ -62,7 +63,6 @@ export const Stack = forwardRef(function Stack(
     onTabSelectionChanged,
     showTabs = "top",
     style,
-    TabstripProps = DefaultTabstripProps,
   }: StackProps,
   ref: ForwardedRef<HTMLDivElement>
 ) {
@@ -71,6 +71,7 @@ export const Stack = forwardRef(function Stack(
     allowCloseTab,
     allowRenameTab,
     className: tabstripClassName,
+    tabClassName,
   } = TabstripProps;
 
   const handleExitEditMode = useCallback(

diff --git a/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tab.tsx b/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tab.tsx
@@ -122,7 +122,7 @@ export const Tab = forwardRef(function Tab(
       {...props}
       aria-controls={ariaControls}
       aria-selected={selected}
-      className={cx(classBase, {
+      className={cx(classBase, className, {
         [`${classBase}-closeable`]: closeable,
         "vuuDraggable-dragAway": dragging,
         [`${classBase}-editing`]: editing,

diff --git a/vuu-ui/packages/vuu-ui-controls/src/tabstrip/TabsTypes.ts b/vuu-ui/packages/vuu-ui-controls/src/tabstrip/TabsTypes.ts
@@ -111,6 +111,10 @@ export interface TabstripProps extends HTMLAttributes<HTMLDivElement> {
    * not closeable, not renameable and has no tab-location , otherwise true.
    */
   showTabMenuButton?: boolean;
+  /**
+   * An optional classname that will be added to each tab
+   */
+  tabClassName?: string;
 }
 
 export type exitEditHandler = (

diff --git a/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tabstrip.css b/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tabstrip.css
@@ -107,8 +107,10 @@
 }
 
 .vuuDraggable-tabstrip-horizontal {
+  --item-height: var(--tabstrip-height);
   --tab-thumb-height: 2px;
   --tab-thumb-left: 0px;
+  --tabstrip-display: inline-flex;
   --tabstrip-height: 28px;
   line-height: var(--tabstrip-height);
 }

diff --git a/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tabstrip.tsx b/vuu-ui/packages/vuu-ui-controls/src/tabstrip/Tabstrip.tsx
@@ -29,6 +29,7 @@ export const Tabstrip = ({
   orientation = "horizontal",
   showTabMenuButton,
   style: styleProp,
+  tabClassName,
   ...htmlAttributes
 }: TabstripProps) => {
   const rootRef = useRef<HTMLDivElement>(null);
@@ -53,7 +54,6 @@ export const Tabstrip = ({
     onMoveTab,
     orientation,
   });
-
   const id = useId(idProp);
   const className = cx(classBase, `${classBase}-${orientation}`, classNameProp);
   const style =
@@ -70,6 +70,7 @@ export const Tabstrip = ({
         .map((child, index) => {
           const {
             id: tabId = `${id}-tab-${index}`,
+            className,
             closeable = allowCloseTab,
             editable = allowRenameTab,
             location: tabLocation,
@@ -79,6 +80,7 @@ export const Tabstrip = ({
           return React.cloneElement(child, {
             ...tabProps,
             ...tabstripHook.navigationProps,
+            className: cx(className, tabClassName),
             closeable,
             "data-overflow-priority": selected ? "1" : undefined,
             dragging: draggedItemIndex === index,
@@ -111,19 +113,20 @@ export const Tabstrip = ({
           )
         ),
     [
-      activeTabIndex,
+      children,
       allowAddTab,
+      tabstripHook.navigationProps,
+      onClickAddTab,
+      id,
       allowCloseTab,
       allowRenameTab,
-      children,
-      focusVisible,
-      id,
-      location,
-      onClickAddTab,
       showTabMenuButton,
+      activeTabIndex,
       tabProps,
+      tabClassName,
       draggedItemIndex,
-      tabstripHook.navigationProps,
+      focusVisible,
+      location,
     ]
   );
 

diff --git a/vuu-ui/sample-apps/app-vuu-basket-trader/src/App.css b/vuu-ui/sample-apps/app-vuu-basket-trader/src/App.css
@@ -111,22 +111,23 @@ body {
     z-index: 1;
   }
 
-  .vuuShell-mainTabs > .vuuTabstrip .vuuTab {
-    background-color: var(--vuu-color-gray-28);
+  .MainTab {
+    background-color: #F1F2F4;
     border-color: #D6D7DA;
     border-radius: 6px 6px 0 0;
     border-width: 1px;
     border-style: solid; 
     position: relative;
   }
 
-  .vuuShell-mainTabs > .vuuTabstrip .vuuTab-selected {
+  .MainTab.vuuTab-selected {
     background-color: white;
     border-bottom-color: white;
     z-index: 1;
+
   }
 
-  .vuuShell-mainTabs > .vuuTabstrip .vuuTab-selected:before{
+  .MainTab.vuuTab-selected:before{
     background-color: #6d188b;;
     content: '';
     position: absolute;
@@ -137,7 +138,7 @@ body {
     width: 6px;
   }
 
-  .vuuShell-mainTabs > .vuuTabstrip .vuuTab:hover:not(.vuuTab-selected):before{
+  .MainTab.vuuTab:hover:not(.vuuTab-selected):before{
     background-color: #F37880;
     content: '';
     position: absolute;
@@ -148,7 +149,7 @@ body {
     width: 6px;
   }
 
-  .vuuShell-mainTabs > .vuuTabstrip .vuuTab-main {
+  .MainTab .vuuTab-main {
     background-color: transparent;
     font-weight: 700;
     height: 29px;

diff --git a/vuu-ui/sample-apps/app-vuu-basket-trader/src/defaultLayout.ts b/vuu-ui/sample-apps/app-vuu-basket-trader/src/defaultLayout.ts
diff --git a/vuu-ui/showcase/src/examples/Apps/NewTheme.examples.css b/vuu-ui/showcase/src/examples/Apps/NewTheme.examples.css
@@ -51,7 +51,7 @@ body {
 
   }
 
-  .vuuShell-mainTabs > .vuuTabstrip .vuuTab {
+  .MainTab {
     background-color: #F1F2F4;
     border-color: #D6D7DA;
     border-radius: 6px 6px 0 0;
@@ -60,14 +60,14 @@ body {
     position: relative;
   }
 
-  .vuuShell-mainTabs > .vuuTabstrip .vuuTab-selected {
+  .MainTab.vuuTab-selected {
     background-color: white;
     border-bottom-color: white;
     z-index: 1;
 
   }
 
-  .vuuShell-mainTabs > .vuuTabstrip .vuuTab-selected:before{
+  .MainTab.vuuTab-selected:before{
     background-color: #6d188b;;
     content: '';
     position: absolute;
@@ -78,7 +78,7 @@ body {
     width: 6px;
   }
 
-  .vuuShell-mainTabs > .vuuTabstrip .vuuTab:hover:not(.vuuTab-selected):before{
+  .MainTab.vuuTab:hover:not(.vuuTab-selected):before{
     background-color: #F37880;
     content: '';
     position: absolute;
@@ -89,7 +89,7 @@ body {
     width: 6px;
   }
 
-  .vuuShell-mainTabs > .vuuTabstrip .vuuTab-main {
+  .MainTab .vuuTab-main {
     background-color: transparent;
     font-weight: 700;
     height: 29px;