From 1f2fb05fc552b18adfc466934ddb78b4f27c1ed8 Mon Sep 17 00:00:00 2001
From: heswell <steve@heswell.com>
Date: Mon, 18 Sep 2023 16:33:36 +0100
Subject: [PATCH] Stack recognises data attributes to configure tabs (#880)

---
 vuu-ui/packages/vuu-layout/src/stack/Stack.tsx | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/vuu-ui/packages/vuu-layout/src/stack/Stack.tsx b/vuu-ui/packages/vuu-layout/src/stack/Stack.tsx
index 94ec3f63b..17311240e 100644
--- a/vuu-ui/packages/vuu-layout/src/stack/Stack.tsx
+++ b/vuu-ui/packages/vuu-layout/src/stack/Stack.tsx
@@ -21,7 +21,9 @@ const classBase = "Tabs";
 const getDefaultTabIcon = () => undefined;
 
 const getDefaultTabLabel = (component: ReactElement, tabIndex: number) =>
-  component.props?.title ?? `Tab ${tabIndex + 1}`;
+  component.props?.title ??
+  component.props?.["data-tab-title"] ??
+  `Tab ${tabIndex + 1}`;
 
 const getChildElements = <T extends ReactElement = ReactElement>(
   children: ReactNode
@@ -98,8 +100,11 @@ export const Stack = forwardRef(function Stack(
 
   const renderTabs = () =>
     getChildElements(children).map((child, idx) => {
-      const { closeable = allowCloseTab, id: childId = `${id}-${idx}` } =
-        child.props;
+      const {
+        closeable = allowCloseTab,
+        id: childId = `${id}-${idx}`,
+        "data-tab-location": tabLocation,
+      } = child.props;
       return (
         <Tab
           ariaControls={childId}
@@ -108,6 +113,7 @@ export const Stack = forwardRef(function Stack(
           id={`${childId}-tab`}
           index={idx}
           label={getTabLabel(child, idx)}
+          location={tabLocation}
           closeable={closeable}
           editable={allowRenameTab}
         />