TabBar updates + NavigationRail docs

wri · Oct 30, 2024 · 85c6491 · 85c6491
1 parent 545e349
commit 85c6491
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 3 deletions.
diff --git a/src/components/NavigationRail/NavigationRail.stories.tsx b/src/components/NavigationRail/NavigationRail.stories.tsx
@@ -7,9 +7,15 @@ const meta = {
   title: 'Navigation Rail',
   component: NavigationRail,
   parameters: {
-    layout: 'centered',
+    layout: 'fullscreen',
+    docs: {
+      story: {
+        inline: false,
+        iframeHeight: 600,
+      },
+    },
   },
-  // tags: ['autodocs'],
+  tags: ['autodocs'],
   args: { onTabClick: fn() },
 } satisfies Meta<typeof NavigationRail>
 
@@ -26,3 +32,15 @@ export const NavigationRailActive: Story = {
     defaultActiveTabId: 'label-1',
   },
 }
+
+export const NavigationRailActiveLeft: Story = {
+  args: {
+    tabs: [
+      { id: 'label-1', label: 'Label 1', icon: <PlusSquareIcon /> },
+      { id: 'label-2', label: 'Label 2', icon: <SettingsIcon /> },
+      { id: 'label-3', label: 'Label 3', icon: <AddIcon /> },
+    ],
+    defaultActiveTabId: 'label-1',
+    isOnLeft: true,
+  },
+}
diff --git a/src/components/TabBar/index.tsx b/src/components/TabBar/index.tsx
@@ -8,7 +8,9 @@ const TabBar = ({
   defaultActiveTabId,
   onTabClick,
 }: TabBarProps) => {
-  const [selectedTab, setSelectedTab] = useState(defaultActiveTabId)
+  const [selectedTab, setSelectedTab] = useState(
+    defaultActiveTabId || tabs?.[0]?.id,
+  )
 
   const handleOnTabClick = (id: string) => {
     setSelectedTab(id)