expose defaultIndex on Tabs component (#148)

* expose defaultIndex on Tabs component * add defaultIndex prop documentation
USACE · Jan 27, 2025 · cdb232f · cdb232f
1 parent 9685d09
commit cdb232f
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 2 deletions.
diff --git a/lib/components/navigation/tabs.jsx b/lib/components/navigation/tabs.jsx
@@ -1,9 +1,9 @@
 import { Tab } from "@headlessui/react";
 import gwMerge from "../../gw-merge";
 
-function Tabs({ tabs, fill = false }) {
+function Tabs({ tabs, fill = false, defaultIndex = 0 }) {
   return (
-    <Tab.Group defaultIndex={0}>
+    <Tab.Group defaultIndex={defaultIndex}>
       <Tab.List className="gw-flex gw-flex-wrap gw-gap-x-1 gw-text-gray-500 gw-font-semibold gw-border-b-2 gw-border-gray-300">
         {tabs.map((tab, idx) => (
           <Tab

diff --git a/src/app-pages/documentation/navigation/tabs.jsx b/src/app-pages/documentation/navigation/tabs.jsx
@@ -32,6 +32,12 @@ const componentProps = [
     default: "false",
     desc: "If true, the tabs will expand to fill the width of their container.",
   },
+  {
+    name: "defaultIndex",
+    type: "number",
+    default: "0",
+    desc: "The index of the tab that should be active by default when the Tabs component renders.",
+  },
 ];
 
 function TabsDocs() {
@@ -104,6 +110,7 @@ export default Component;
         <div className="gw-rounded-md gw-border gw-border-dashed gw-px-6 gw-py-3 gw-mb-3">
           <Tabs
             fill
+            defaultIndex={1}
             tabs={[
               {
                 name: "Downloads",
@@ -128,6 +135,7 @@ function Component() {
   return (
     <Tabs
       fill
+      defaultIndex={1}
       tabs={[
         {
           name: "Downloads",