diff --git a/src/core/client/ui/components/Tabs/Tab.mdx b/src/core/client/ui/components/Tabs/Tab.mdx index 365259456..f81399cfc 100644 --- a/src/core/client/ui/components/Tabs/Tab.mdx +++ b/src/core/client/ui/components/Tabs/Tab.mdx @@ -1,5 +1,5 @@ --- -name: TabBar +name: Tab menu: UI Kit --- diff --git a/src/core/client/ui/components/Tabs/Tab.tsx b/src/core/client/ui/components/Tabs/Tab.tsx index 70f2a5f5d..87b4ba236 100644 --- a/src/core/client/ui/components/Tabs/Tab.tsx +++ b/src/core/client/ui/components/Tabs/Tab.tsx @@ -12,10 +12,21 @@ export interface TabBarProps { * Override or extend the styles applied to the component. */ classes: typeof styles; - + /** + * The id/name of the tab + */ tabId: string; + /** + * Active status + */ active: boolean; - color: string; + /** + * Color style variant + */ + color: "primary" | "secondary"; + /** + * Action taken on tab click + */ onTabClick?: (tabId: string) => void; } diff --git a/src/core/client/ui/components/Tabs/TabBar.tsx b/src/core/client/ui/components/Tabs/TabBar.tsx index ab9c6212d..46427f3cd 100644 --- a/src/core/client/ui/components/Tabs/TabBar.tsx +++ b/src/core/client/ui/components/Tabs/TabBar.tsx @@ -12,13 +12,21 @@ export interface TabBarProps { * Override or extend the styles applied to the component. */ classes: typeof styles; - + /** + * Color style variant + */ color: "primary" | "secondary"; - + /** + * Active tab id/name + */ activeTab?: string; + /** + * Default active tab id/name + */ defaultActiveTab?: string; - - onChange?: (activeId: string) => void; + /** + * Action taken on tab click + */ onTabClick?: (tabId: string) => void; } diff --git a/src/core/client/ui/components/Tabs/TabContent.tsx b/src/core/client/ui/components/Tabs/TabContent.tsx index 4ce407db7..da68f05a9 100644 --- a/src/core/client/ui/components/Tabs/TabContent.tsx +++ b/src/core/client/ui/components/Tabs/TabContent.tsx @@ -1,6 +1,9 @@ import React, { StatelessComponent } from "react"; export interface TabContentProps { + /** + * Active tab id/name + */ activeTab?: string; }