diff --git a/packages/react-core/src/components/Tabs/examples/Tabs.md b/packages/react-core/src/components/Tabs/examples/Tabs.md index 8c1d8ad3464..1e17b87d73c 100644 --- a/packages/react-core/src/components/Tabs/examples/Tabs.md +++ b/packages/react-core/src/components/Tabs/examples/Tabs.md @@ -25,84 +25,7 @@ Similarly the 'Tab content light variation' checkbox affects the TabContent back When passing in a Tooltip component to the Tab component, the Tooltip can also be passed in directly to the `tooltip` prop. -```js -import React from 'react'; -import { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core'; - -class SimpleTabs extends React.Component { - constructor(props) { - super(props); - this.state = { - activeTabKey: 0, - isBox: false - }; - // Toggle currently active tab - this.handleTabClick = (event, tabIndex) => { - this.setState({ - activeTabKey: tabIndex - }); - }; - - this.toggleBox = checked => { - this.setState({ - isBox: checked - }); - }; - } - - render() { - const { activeTabKey, isBox } = this.state; - const tooltip = ( - - ); - - return ( -
- - Users} aria-label="Default content - users"> - Users - - Containers}> - Containers - - Database}> - Database - - Disabled} isDisabled> - Disabled - - ARIA Disabled} isAriaDisabled> - ARIA Disabled - - ARIA Disabled (Tooltip)} - isAriaDisabled - > - ARIA Disabled (Tooltip) - - -
- -
-
- ); - } -} +```ts file="./TabsDefault.tsx" ``` ### With tooltip react ref @@ -111,305 +34,22 @@ When using a React ref to link a Tooltip to a Tab component via the `reference` The tooltip should also have the `id` prop passed in. The value given to this prop should then be passed into the tab's `aria-describedby` prop. This ensures a tooltip used with a React ref will be announced by the JAWS and NVDA screen readers. -```js -import React from 'react'; -import { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core'; - -class SimpleTabs extends React.Component { - constructor(props) { - super(props); - this.state = { - activeTabKey: 0, - isBox: false - }; - // Toggle currently active tab - this.handleTabClick = (event, tabIndex) => { - this.setState({ - activeTabKey: tabIndex - }); - }; - - this.toggleBox = checked => { - this.setState({ - isBox: checked - }); - }; - } - - render() { - const { activeTabKey, isBox } = this.state; - const tooltipRef = React.createRef(); - - return ( -
- - Users} aria-label="Tooltip ref content - users"> - Users - - Containers}> - Containers - - Database}> - Database - - Disabled} isDisabled> - Disabled - - ARIA Disabled} isAriaDisabled> - ARIA Disabled - - ARIA Disabled (Tooltip)} - isAriaDisabled - ref={tooltipRef} - aria-describedby="tooltip-ref1" - > - ARIA Disabled (Tooltip) - - - -
- -
-
- ); - } -} +```ts file="./TabsTooltipReactRef.tsx" ``` ### Uncontrolled -```js -import React from 'react'; -import { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core'; - -class UncontrolledSimpleTabs extends React.Component { - render() { - const tooltip = ( - - ); - - return ( - <> - - Users} aria-label="Uncontrolled ref content - users"> - Users - - Containers}> - Containers - - Database}> - Database - - Disabled} isDisabled> - Disabled - - ARIA Disabled} isAriaDisabled> - ARIA Disabled - - ARIA Disabled (Tooltip)} - isAriaDisabled - tooltip={tooltip} - > - ARIA Disabled (Tooltip) - - - - ); - } -} +```ts file="./TabsUncontrolled.tsx" ``` ### Box light variation -```js -import React from 'react'; -import { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core'; - -class SimpleTabs extends React.Component { - constructor(props) { - super(props); - this.state = { - activeTabKey: 0, - isTabsLightScheme: true - }; - // Toggle currently active tab - this.handleTabClick = (event, tabIndex) => { - this.setState({ - activeTabKey: tabIndex - }); - }; - - this.toggleScheme = checked => { - this.setState({ - isTabsLightScheme: checked - }); - }; - } - - render() { - const { activeTabKey, isBox, isTabsLightScheme } = this.state; - const tooltip = ( - - ); - - return ( -
- - Users} aria-label="Box light variation content - users"> - Users - - Containers}> - Containers - - Database}> - Database - - Disabled} isDisabled> - Disabled - - ARIA Disabled} isAriaDisabled> - ARIA Disabled - - ARIA Disabled (Tooltip)} - isAriaDisabled - tooltip={tooltip} - > - ARIA Disabled (Tooltip) - - -
- -
-
- ); - } -} +```ts file="./TabsBoxLight.tsx" ``` ### Default overflow -```js -import React from 'react'; -import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core'; - -class ScrollButtonsPrimaryTabs extends React.Component { - constructor(props) { - super(props); - this.state = { - activeTabKey: 0, - isBox: false - }; - - // Toggle currently active tab - this.handleTabClick = (event, tabIndex) => { - this.setState({ - activeTabKey: tabIndex - }); - }; - - this.toggleBox = checked => { - this.setState({ - isBox: checked - }); - }; - } - - render() { - const { activeTabKey, isBox } = this.state; - return ( -
- - Users} aria-label="Default overflow content users"> - Users - - Containers}> - Containers - - Database}> - Database - - Server}> - Server - - System}> - System - - Network}> - Network - - Tab item 7}> - Tab 7 section - - Tab item 8}> - Tab 8 section - - Tab item 9}> - Tab 9 section - - Tab item 10}> - Tab 10 section - - Tab item 11}> - Tab 11 section - - -
- -
-
- ); - } -} +```ts file="./TabsDefaultOverflow.tsx" ``` ### Horizontal overflow @@ -419,1258 +59,82 @@ class ScrollButtonsPrimaryTabs extends React.Component { ### Vertical -```js -import React from 'react'; -import { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core'; - -class VerticalTabs extends React.Component { - constructor(props) { - super(props); - this.state = { - activeTabKey: 0, - isBox: false - }; - // Toggle currently active tab - this.handleTabClick = (event, tabIndex) => { - this.setState({ - activeTabKey: tabIndex - }); - }; - - this.toggleBox = checked => { - this.setState({ - isBox: checked - }); - }; - } - - render() { - const { activeTabKey, isBox } = this.state; - const tooltip = ( - - ); - - return ( -
- - - Users - - } - aria-label="Vertical example content users" - > - Users - - Containers}> - Containers - - Database}> - Database - - Disabled} isDisabled> - Disabled - - ARIA Disabled} isAriaDisabled> - ARIA Disabled - - ARIA Disabled (Tooltip)} - isAriaDisabled - tooltip={tooltip} - > - ARIA Disabled (Tooltip) - - -
- -
-
- ); - } -} +```ts file="./TabsVertical.tsx" ``` ### Vertical expandable -```js -import React from 'react'; -import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core'; -class VerticalExpandableTabs extends React.Component { - constructor(props) { - super(props); - this.state = { - activeTabKey: 0, - isExpanded: false - }; - // Toggle currently active tab - this.handleTabClick = (event, tabIndex) => { - this.setState({ - activeTabKey: tabIndex - }); - }; - this.onToggle = isExpanded => { - this.setState({ - isExpanded - }); - }; - } - render() { - const { activeTabKey, isExpanded } = this.state; - return ( - - Users} aria-label="Vertical expandable content users"> - Users - - Containers}> - Containers - - Database}> - Database - - Server}> - Server - - System}> - System - - Network}> - Network - - - ); - } -} +```ts file="./TabsVerticalExpandable.tsx" ``` ### Vertical expandable uncontrolled -```js -import React from 'react'; -import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core'; -class VerticalExpandableUncontrolledTabs extends React.Component { - constructor(props) { - super(props); - this.state = { - activeTabKey: 0 - }; - // Toggle currently active tab - this.handleTabClick = (event, tabIndex) => { - this.setState({ - activeTabKey: tabIndex - }); - }; - } - render() { - const { activeTabKey } = this.state; - return ( - - Users} - aria-label="Vertical expandable uncontrolled content users" - > - Users - - Containers}> - Containers - - Database}> - Database - - Server}> - Server - - System}> - System - - Network}> - Network - - - ); - } -} +```ts file="./TabsVerticalExpandableUncontrolled.tsx" ``` ### Inset -```js -import React from 'react'; -import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core'; - -class InsetTabs extends React.Component { - constructor(props) { - super(props); - this.state = { - activeTabKey: 0, - isBox: false - }; - // Toggle currently active tab - this.handleTabClick = (event, tabIndex) => { - this.setState({ - activeTabKey: tabIndex - }); - }; - - this.toggleBox = checked => { - this.setState({ - isBox: checked - }); - }; - } - - render() { - const { activeTabKey, isBox } = this.state; - return ( -
- - Users} aria-label="Inset example content users"> - Users - - Containers}> - Containers - - Database}> - Database - - Server}> - Server - - System}> - System - - Network}> - Network - - -
- -
-
- ); - } -} +```ts file="./TabsInset.tsx" ``` ### Page Insets -```js -import React from 'react'; -import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core'; - -class PageInsetsTabs extends React.Component { - constructor(props) { - super(props); - this.state = { - activeTabKey: 0, - isBox: false - }; - // Toggle currently active tab - this.handleTabClick = (event, tabIndex) => { - this.setState({ - activeTabKey: tabIndex - }); - }; - - this.toggleBox = checked => { - this.setState({ - isBox: checked - }); - }; - } - - render() { - const { activeTabKey, isBox } = this.state; - return ( -
- - Users} aria-label="Page insets example content users"> - Users - - Containers}> - Containers - - Database}> - Database - - Server}> - Server - - System}> - System - - Network}> - Network - - -
- -
-
- ); - } -} +```ts file="./TabsPageInsets.tsx" ``` ### Icons and text -```js -import React from 'react'; -import { Tabs, Tab, TabTitleText, TabTitleIcon } from '@patternfly/react-core'; -import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon'; -import BoxIcon from '@patternfly/react-icons/dist/esm/icons/box-icon'; -import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon'; -import ServerIcon from '@patternfly/react-icons/dist/esm/icons/server-icon'; -import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon'; -import ProjectDiagramIcon from '@patternfly/react-icons/dist/esm/icons/project-diagram-icon'; - -class IconAndTextTabs extends React.Component { - constructor(props) { - super(props); - this.state = { - activeTabKey: 0 - }; - // Toggle currently active tab - this.handleTabClick = (event, tabIndex) => { - this.setState({ - activeTabKey: tabIndex - }); - }; - } - - render() { - return ( - - - - - {' '} - Users{' '} - - } - aria-label="icons and text content" - > - Users - - - - - {' '} - Containers{' '} - - } - > - Containers - - - - - {' '} - Database{' '} - - } - > - Database - - - - - {' '} - Server{' '} - - } - > - Server - - - - - {' '} - System{' '} - - } - > - System - - - - - {' '} - Network{' '} - - } - > - Network - - - ); - } -} +```ts file="./TabsIconAndText.tsx" ``` ### Tabs with sub tabs -```js -import React from 'react'; -import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core'; - -class SecondaryTabs extends React.Component { - constructor(props) { - super(props); - this.state = { - activeTabKey1: 0, - activeTabKey2: 10, - isBox: false - }; - // Toggle currently active tab - this.handleTabClickFirst = (event, tabIndex) => { - this.setState({ - activeTabKey1: tabIndex - }); - }; - // Toggle currently active secondary tab - this.handleTabClickSecond = (event, tabIndex) => { - this.setState({ - activeTabKey2: tabIndex - }); - }; - - this.toggleBox = checked => { - this.setState({ - isBox: checked - }); - }; - } - - render() { - const { activeTabKey1, activeTabKey2, isBox } = this.state; - return ( -
- - Users} aria-label="Tabs with subtabs content users"> - - Secondary tab item 1}> - Secondary tab item 1 item section - - Secondary tab item 2}> - Secondary tab item 2 section - - Secondary tab item 3}> - Secondary tab item 3 section - - Secondary tab item 4}> - Secondary tab item 4 section - - Secondary tab item 5}> - Secondary tab item 5 section - - Secondary tab item 6}> - Secondary tab item 6 section - - Secondary tab item 7}> - Secondary tab item 7 section - - Secondary tab item 8}> - Secondary tab item 8 section - - - - Containers}> - Containers - - Database}> - Database - - Server}> - Server - - System}> - System - - Network}> - Network - - Tab item 7}> - Tab 7 section - - Tab item 8}> - Tab 8 section - - Tab item 9}> - Tab 9 section - - Tab item 10}> - Tab 10 section - - Tab item 11}> - Tab 11 section - - -
- -
-
- ); - } -} +```ts file="./TabsSubtabs.tsx" ``` ### Filled -```js -import React from 'react'; -import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core'; - -class FilledTabs extends React.Component { - constructor(props) { - super(props); - this.state = { - activeTabKey: 0, - isBox: false - }; - // Toggle currently active tab - this.handleTabClick = (event, tabIndex) => { - this.setState({ - activeTabKey: tabIndex - }); - }; - - this.toggleBox = checked => { - this.setState({ - isBox: checked - }); - }; - } - - render() { - const { activeTabKey, isBox } = this.state; - return ( -
- - Users} aria-label="Tabs filled example content users"> - Users - - Containers}> - Containers - - Database}> - Database - - -
- -
-
- ); - } -} +```ts file="TabsFilled.tsx" ``` ### Filled with icons -```js -import React from 'react'; -import { Tabs, Tab, TabTitleText, TabTitleIcon, Checkbox } from '@patternfly/react-core'; -import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon'; -import BoxIcon from '@patternfly/react-icons/dist/esm/icons/box-icon'; -import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon'; - -class FilledTabsWithIcons extends React.Component { - constructor(props) { - super(props); - this.state = { - activeTabKey: 0, - isBox: false - }; - // Toggle currently active tab - this.handleTabClick = (event, tabIndex) => { - this.setState({ - activeTabKey: tabIndex - }); - }; - - this.toggleBox = checked => { - this.setState({ - isBox: checked - }); - }; - } - - render() { - const { activeTabKey, isBox } = this.state; - return ( -
- - - - - {' '} - Users{' '} - - } - aria-label="filled tabs with icons content users" - > - Users - - - - - {' '} - Containers{' '} - - } - > - Containers - - - - - {' '} - Database{' '} - - } - > - Database - - -
- -
-
- ); - } -} +```ts file="./TabsFilledWithIcons.tsx" ``` ### Using the nav element -```js -import React from 'react'; -import { Tabs, Tab, TabsComponent, TabTitleText } from '@patternfly/react-core'; - -class TabsNav extends React.Component { - constructor(props) { - super(props); - this.state = { - activeTabKey: 0 - }; - - // Toggle currently active tab - this.handleTabClick = (event, tabIndex) => { - this.setState({ - activeTabKey: tabIndex - }); - }; - } - - render() { - return ( - - Users} - href="#users" - aria-label="Nav element content users" - > - Users - - Containers} href="#containers"> - Containers - - Database} href="#database"> - Database - - Disabled} isDisabled href="#disabled"> - Disabled - - ARIA Disabled} isAriaDisabled href="#aria-disabled"> - ARIA Disabled - - Network} href="#network"> - Network - - - ); - } -} +```ts file="./TabsNav.tsx" ``` ### Sub nav using the nav element -```js -import React from 'react'; -import { Tabs, Tab, TabsComponent, TabTitleText } from '@patternfly/react-core'; - -class SecondaryTabsNav extends React.Component { - constructor(props) { - super(props); - this.state = { - activeTabKey1: 0, - activeTabKey2: 10 - }; - - // Toggle currently active tab - this.handleTabClickFirst = (event, tabIndex) => { - this.setState({ - activeTabKey1: tabIndex - }); - }; - - // Toggle currently active secondary tab - this.handleTabClickSecond = (event, tabIndex) => { - this.setState({ - activeTabKey2: tabIndex - }); - }; - } - - render() { - return ( - - Users} - href="#" - aria-label="Subtabs with nav content users" - > - - Item 1} href="#"> - Item 1 item section - - Item 2} href="#"> - Item 2 section - - Item 3} href="#"> - Item 3 section - - Disabled} isDisabled href="#"> - Disabled - - ARIA Disabled} isAriaDisabled href="#"> - ARIA Disabled - - Item 6} href="#"> - Item 6 section - - - - Containers} href="#"> - Containers - - Database} href="#"> - Database - - Disabled} isDisabled href="#"> - Disabled - - ARIA Disabled} isAriaDisabled href="#"> - ARIA Disabled - - Network} href="#"> - Network - - - ); - } -} +```ts file="./TabsNavSecondary.tsx" ``` ### Separate content -```js -import React from 'react'; -import { Tabs, Tab, TabTitleText, TabContent } from '@patternfly/react-core'; - -class SeparateTabContent extends React.Component { - constructor(props) { - super(props); - this.state = { - activeKey: 0 - }; - - this.contentRef1 = React.createRef(); - this.contentRef2 = React.createRef(); - this.contentRef3 = React.createRef(); - - // Toggle currently active tab - this.handleTabClick = (event, tabIndex) => { - this.setState({ - activeTabKey: tabIndex - }); - }; - } - - render() { - return ( - - - Tab item 1} - tabContentId="refTab1Section" - tabContentRef={this.contentRef1} - /> - Tab item 2} - tabContentId="refTab2Section" - tabContentRef={this.contentRef2} - /> - Tab item 3} - tabContentId="refTab3Section" - tabContentRef={this.contentRef3} - /> - -
- - Tab 1 section - - - -
- - ); - } -} +```ts file="./TabsSeparateContent.tsx" ``` ### Tab content with body and padding -```js -import React from 'react'; -import { Tabs, Tab, TabTitleText, TabContent, TabContentBody } from '@patternfly/react-core'; - -const TabContentWithBody = () => { - const [activeTabKey, setActiveTabKey] = React.useState(0); - - // Toggle currently active tab - const handleTabClick = (event, tabIndex) => { - setActiveTabKey(tabIndex); - }; - - const contentRef1 = React.createRef(); - const contentRef2 = React.createRef(); - const contentRef3 = React.createRef(); - - return ( - - - Tab item 1} - tabContentId="tab1SectionBodyPadding" - tabContentRef={contentRef1} - /> - Tab item 2} - tabContentId="tab2SectionBodyPadding" - tabContentRef={contentRef2} - /> - Tab item 3} - tabContentId="tab3SectionBodyPadding" - tabContentRef={contentRef3} - /> - -
- - Tab 1 section with body and padding - - - -
- - ); -}; +```ts file="./TabsContentWithBodyPadding.tsx" ``` ### Children mounting on click -```js -import React from 'react'; -import { Tabs, Tab, TabTitleText } from '@patternfly/react-core'; - -class MountingSimpleTabs extends React.Component { - constructor(props) { - super(props); - this.state = { - activeTabKey: 0 - }; - // Toggle currently active tab - this.handleTabClick = (event, tabIndex) => { - this.setState({ - activeTabKey: tabIndex - }); - }; - } - - render() { - return ( - - Tab item 1} aria-label="Tab 1"> - Tab 1 section - - Tab item 2} aria-label="Tab 2"> - Tab 2 section - - Tab item 3} aria-label="Tab 3"> - Tab 3 section - - - ); - } -} +```ts file="./TabsChildrenMounting.tsx" ``` ### Unmounting invisible children -```js -import React from 'react'; -import { Tabs, Tab, TabTitleText } from '@patternfly/react-core'; - -class UnmountingSimpleTabs extends React.Component { - constructor(props) { - super(props); - this.state = { - activeTabKey: 0 - }; - // Toggle currently active tab - this.handleTabClick = (event, tabIndex) => { - this.setState({ - activeTabKey: tabIndex - }); - }; - } - - render() { - return ( - - Tab item 1} aria-label="Invisible children tab 1"> - Tab 1 section - - Tab item 2} aria-label="Invisible children tab 2"> - Tab 2 section - - Tab item 3} aria-label="Invisible children tab 3"> - Tab 3 section - - - ); - } -} +```ts file="./TabsUnmountingInvisibleChildren.tsx" ``` ### Toggled separate content -```js -import React from 'react'; -import { Tabs, Tab, TabContent, Button, Divider } from '@patternfly/react-core'; - -class ToggledSeparateContent extends React.Component { - constructor(props) { - super(props); - this.state = { - activeKey: 0, - isTab2Hidden: false - }; - - this.contentRef1 = React.createRef(); - this.contentRef2 = React.createRef(); - this.contentRef3 = React.createRef(); - - // Toggle currently active tab - this.handleTabClick = (event, tabIndex) => { - this.setState({ - activeTabKey: tabIndex - }); - }; - } - - render() { - const { activeKey, isTab2Hidden } = this.state; - return ( - - - - - - {!isTab2Hidden && ( - - )} - - -
- - Tab 1 section - - {!isTab2Hidden && ( - - )} - -
- - ); - } -} +```ts file="./TabsToggledSeparateContent.tsx" ``` ### Dynamic diff --git a/packages/react-core/src/components/Tabs/examples/TabsBoxLight.tsx b/packages/react-core/src/components/Tabs/examples/TabsBoxLight.tsx new file mode 100644 index 00000000000..58b1d392e35 --- /dev/null +++ b/packages/react-core/src/components/Tabs/examples/TabsBoxLight.tsx @@ -0,0 +1,63 @@ +import React from 'react'; +import { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core'; + +export const TabsBoxLight: React.FunctionComponent = () => { + const [activeTabKey, setActiveTabKey] = React.useState(0); + const [isTabsLightScheme, setIsTabsLightScheme] = React.useState(true); + // Toggle currently active tab + const handleTabClick = ( + event: React.MouseEvent | React.KeyboardEvent | MouseEvent, + tabIndex: string | number + ) => { + setActiveTabKey(tabIndex); + }; + + const toggleScheme = (checked: boolean) => { + setIsTabsLightScheme(checked); + }; + + const tooltip = ( + + ); + return ( +
+ + Users} aria-label="Box light variation content - users"> + Users + + Containers}> + Containers + + Database}> + Database + + Disabled} isDisabled> + Disabled + + ARIA Disabled} isAriaDisabled> + ARIA Disabled + + ARIA Disabled (Tooltip)} isAriaDisabled tooltip={tooltip}> + ARIA Disabled (Tooltip) + + +
+ +
+
+ ); +}; diff --git a/packages/react-core/src/components/Tabs/examples/TabsChildrenMounting.tsx b/packages/react-core/src/components/Tabs/examples/TabsChildrenMounting.tsx new file mode 100644 index 00000000000..23e189e63ca --- /dev/null +++ b/packages/react-core/src/components/Tabs/examples/TabsChildrenMounting.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import { Tabs, Tab, TabTitleText } from '@patternfly/react-core'; + +export const TabsChildrenMounting: React.FunctionComponent = () => { + const [activeTabKey, setActiveTabKey] = React.useState(0); + // Toggle currently active tab + const handleTabClick = ( + event: React.MouseEvent | React.KeyboardEvent | MouseEvent, + tabIndex: string | number + ) => { + setActiveTabKey(tabIndex); + }; + + return ( + + Tab item 1} aria-label="Tab 1"> + Tab 1 section + + Tab item 2} aria-label="Tab 2"> + Tab 2 section + + Tab item 3} aria-label="Tab 3"> + Tab 3 section + + + ); +}; diff --git a/packages/react-core/src/components/Tabs/examples/TabsContentWithBodyPadding.tsx b/packages/react-core/src/components/Tabs/examples/TabsContentWithBodyPadding.tsx new file mode 100644 index 00000000000..1271559f18c --- /dev/null +++ b/packages/react-core/src/components/Tabs/examples/TabsContentWithBodyPadding.tsx @@ -0,0 +1,58 @@ +import React from 'react'; +import { Tabs, Tab, TabTitleText, TabContent, TabContentBody } from '@patternfly/react-core'; + +export const TabContentWithBodyPadding: React.FunctionComponent = () => { + const [activeTabKey, setActiveTabKey] = React.useState(0); + // Toggle currently active tab + const handleTabClick = ( + event: React.MouseEvent | React.KeyboardEvent | MouseEvent, + tabIndex: string | number + ) => { + setActiveTabKey(tabIndex); + }; + + const contentRef1 = React.createRef(); + const contentRef2 = React.createRef(); + const contentRef3 = React.createRef(); + + return ( + + + Tab item 1} + tabContentId="tab1SectionBodyPadding" + tabContentRef={contentRef1} + /> + Tab item 2} + tabContentId="tab2SectionBodyPadding" + tabContentRef={contentRef2} + /> + Tab item 3} + tabContentId="tab3SectionBodyPadding" + tabContentRef={contentRef3} + /> + +
+ + Tab 1 section with body and padding + + + +
+ + ); +}; diff --git a/packages/react-core/src/components/Tabs/examples/TabsDefault.tsx b/packages/react-core/src/components/Tabs/examples/TabsDefault.tsx new file mode 100644 index 00000000000..dadc08edb48 --- /dev/null +++ b/packages/react-core/src/components/Tabs/examples/TabsDefault.tsx @@ -0,0 +1,62 @@ +import React from 'react'; +import { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core'; + +export const TabsDefault: React.FunctionComponent = () => { + const [activeTabKey, setActiveTabKey] = React.useState(0); + const [isBox, setIsBox] = React.useState(false); + // Toggle currently active tab + const handleTabClick = ( + event: React.MouseEvent | React.KeyboardEvent | MouseEvent, + tabIndex: string | number + ) => { + setActiveTabKey(tabIndex); + }; + + const toggleBox = (checked: boolean) => { + setIsBox(checked); + }; + + const tooltip = ( + + ); + return ( +
+ + Users} aria-label="Default content - users"> + Users + + Containers}> + Containers + + Database}> + Database + + Disabled} isDisabled> + Disabled + + ARIA Disabled} isAriaDisabled> + ARIA Disabled + + ARIA Disabled (Tooltip)} isAriaDisabled> + ARIA Disabled (Tooltip) + + +
+ +
+
+ ); +}; diff --git a/packages/react-core/src/components/Tabs/examples/TabsDefaultOverflow.tsx b/packages/react-core/src/components/Tabs/examples/TabsDefaultOverflow.tsx new file mode 100644 index 00000000000..caa78a3791f --- /dev/null +++ b/packages/react-core/src/components/Tabs/examples/TabsDefaultOverflow.tsx @@ -0,0 +1,74 @@ +import React from 'react'; +import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core'; + +export const TabsDefaultOverflow: React.FunctionComponent = () => { + const [activeTabKey, setActiveTabKey] = React.useState(0); + const [isBox, setIsBox] = React.useState(false); + // Toggle currently active tab + const handleTabClick = ( + event: React.MouseEvent | React.KeyboardEvent | MouseEvent, + tabIndex: string | number + ) => { + setActiveTabKey(tabIndex); + }; + + const toggleBox = (checked: boolean) => { + setIsBox(checked); + }; + + return ( +
+ + Users} aria-label="Default overflow content users"> + Users + + Containers}> + Containers + + Database}> + Database + + Server}> + Server + + System}> + System + + Network}> + Network + + Tab item 7}> + Tab 7 section + + Tab item 8}> + Tab 8 section + + Tab item 9}> + Tab 9 section + + Tab item 10}> + Tab 10 section + + Tab item 11}> + Tab 11 section + + +
+ +
+
+ ); +}; diff --git a/packages/react-core/src/components/Tabs/examples/TabsFilled.tsx b/packages/react-core/src/components/Tabs/examples/TabsFilled.tsx new file mode 100644 index 00000000000..6802cf36d25 --- /dev/null +++ b/packages/react-core/src/components/Tabs/examples/TabsFilled.tsx @@ -0,0 +1,51 @@ +import React from 'react'; +import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core'; + +export const TabsFilled: React.FunctionComponent = () => { + const [activeTabKey, setActiveTabKey] = React.useState(0); + const [isBox, setIsBox] = React.useState(false); + // Toggle currently active tab + const handleTabClick = ( + event: React.MouseEvent | React.KeyboardEvent | MouseEvent, + tabIndex: string | number + ) => { + setActiveTabKey(tabIndex); + }; + + const toggleBox = (checked: boolean) => { + setIsBox(checked); + }; + + return ( +
+ + Users} aria-label="Tabs filled example content users"> + Users + + Containers}> + Containers + + Database}> + Database + + +
+ +
+
+ ); +}; diff --git a/packages/react-core/src/components/Tabs/examples/TabsFilledWithIcons.tsx b/packages/react-core/src/components/Tabs/examples/TabsFilledWithIcons.tsx new file mode 100644 index 00000000000..613434fa22b --- /dev/null +++ b/packages/react-core/src/components/Tabs/examples/TabsFilledWithIcons.tsx @@ -0,0 +1,85 @@ +import React from 'react'; +import { Tabs, Tab, TabTitleText, TabTitleIcon, Checkbox } from '@patternfly/react-core'; +import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon'; +import BoxIcon from '@patternfly/react-icons/dist/esm/icons/box-icon'; +import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon'; + +export const TabsFilledWithIcons: React.FunctionComponent = () => { + const [activeTabKey, setActiveTabKey] = React.useState(0); + const [isBox, setIsBox] = React.useState(false); + // Toggle currently active tab + const handleTabClick = ( + event: React.MouseEvent | React.KeyboardEvent | MouseEvent, + tabIndex: string | number + ) => { + setActiveTabKey(tabIndex); + }; + + const toggleBox = (checked: boolean) => { + setIsBox(checked); + }; + + return ( +
+ + + + + {' '} + Users{' '} + + } + aria-label="filled tabs with icons content users" + > + Users + + + + + {' '} + Containers{' '} + + } + > + Containers + + + + + {' '} + Database{' '} + + } + > + Database + + +
+ +
+
+ ); +}; diff --git a/packages/react-core/src/components/Tabs/examples/TabsIconAndText.tsx b/packages/react-core/src/components/Tabs/examples/TabsIconAndText.tsx new file mode 100644 index 00000000000..6c0da805c7f --- /dev/null +++ b/packages/react-core/src/components/Tabs/examples/TabsIconAndText.tsx @@ -0,0 +1,108 @@ +import React from 'react'; +import { Tabs, Tab, TabTitleText, TabTitleIcon } from '@patternfly/react-core'; +import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon'; +import BoxIcon from '@patternfly/react-icons/dist/esm/icons/box-icon'; +import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon'; +import ServerIcon from '@patternfly/react-icons/dist/esm/icons/server-icon'; +import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon'; +import ProjectDiagramIcon from '@patternfly/react-icons/dist/esm/icons/project-diagram-icon'; + +export const TabsIconAndText: React.FunctionComponent = () => { + const [activeTabKey, setActiveTabKey] = React.useState(0); + // Toggle currently active tab + const handleTabClick = ( + event: React.MouseEvent | React.KeyboardEvent | MouseEvent, + tabIndex: string | number + ) => { + setActiveTabKey(tabIndex); + }; + + return ( + + + + + {' '} + Users{' '} + + } + aria-label="icons and text content" + > + Users + + + + + {' '} + Containers{' '} + + } + > + Containers + + + + + {' '} + Database{' '} + + } + > + Database + + + + + {' '} + Server{' '} + + } + > + Server + + + + + {' '} + System{' '} + + } + > + System + + + + + {' '} + Network{' '} + + } + > + Network + + + ); +}; diff --git a/packages/react-core/src/components/Tabs/examples/TabsInset.tsx b/packages/react-core/src/components/Tabs/examples/TabsInset.tsx new file mode 100644 index 00000000000..6f9964d6627 --- /dev/null +++ b/packages/react-core/src/components/Tabs/examples/TabsInset.tsx @@ -0,0 +1,65 @@ +import React from 'react'; +import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core'; + +export const TabsInset: React.FunctionComponent = () => { + const [activeTabKey, setActiveTabKey] = React.useState(0); + const [isBox, setIsBox] = React.useState(false); + // Toggle currently active tab + const handleTabClick = ( + event: React.MouseEvent | React.KeyboardEvent | MouseEvent, + tabIndex: string | number + ) => { + setActiveTabKey(tabIndex); + }; + + const toggleBox = (checked: boolean) => { + setIsBox(checked); + }; + + return ( +
+ + Users} aria-label="Inset example content users"> + Users + + Containers}> + Containers + + Database}> + Database + + Server}> + Server + + System}> + System + + Network}> + Network + + +
+ +
+
+ ); +}; diff --git a/packages/react-core/src/components/Tabs/examples/TabsNav.tsx b/packages/react-core/src/components/Tabs/examples/TabsNav.tsx new file mode 100644 index 00000000000..42494ea94f0 --- /dev/null +++ b/packages/react-core/src/components/Tabs/examples/TabsNav.tsx @@ -0,0 +1,40 @@ +import React from 'react'; +import { Tabs, Tab, TabsComponent, TabTitleText } from '@patternfly/react-core'; + +export const TabsNav: React.FunctionComponent = () => { + const [activeTabKey, setActiveTabKey] = React.useState(0); + // Toggle currently active tab + const handleTabClick = ( + event: React.MouseEvent | React.KeyboardEvent | MouseEvent, + tabIndex: string | number + ) => { + setActiveTabKey(tabIndex); + }; + return ( + + Users} href="#users" aria-label="Nav element content users"> + Users + + Containers} href="#containers"> + Containers + + Database} href="#database"> + Database + + Disabled} isDisabled href="#disabled"> + Disabled + + ARIA Disabled} isAriaDisabled href="#aria-disabled"> + ARIA Disabled + + Network} href="#network"> + Network + + + ); +}; diff --git a/packages/react-core/src/components/Tabs/examples/TabsNavSecondary.tsx b/packages/react-core/src/components/Tabs/examples/TabsNavSecondary.tsx new file mode 100644 index 00000000000..7102c5aca73 --- /dev/null +++ b/packages/react-core/src/components/Tabs/examples/TabsNavSecondary.tsx @@ -0,0 +1,76 @@ +import React from 'react'; +import { Tabs, Tab, TabsComponent, TabTitleText } from '@patternfly/react-core'; + +export const TabsNavSecondary: React.FunctionComponent = () => { + const [activeTabKey1, setActiveTabKey1] = React.useState(0); + const [activeTabKey2, setActiveTabKey2] = React.useState(0); + + // Toggle currently active primary tab + const handleTabClickFirst = ( + event: React.MouseEvent | React.KeyboardEvent | MouseEvent, + tabIndex: string | number + ) => { + setActiveTabKey1(tabIndex); + }; + + // Toggle currently active secondary tab + const handleTabClickSecond = ( + event: React.MouseEvent | React.KeyboardEvent | MouseEvent, + tabIndex: string | number + ) => { + setActiveTabKey2(tabIndex); + }; + + return ( + + Users} href="#" aria-label="Subtabs with nav content users"> + + Item 1} href="#"> + Item 1 item section + + Item 2} href="#"> + Item 2 section + + Item 3} href="#"> + Item 3 section + + Disabled} isDisabled href="#"> + Disabled + + ARIA Disabled} isAriaDisabled href="#"> + ARIA Disabled + + Item 6} href="#"> + Item 6 section + + + + Containers} href="#"> + Containers + + Database} href="#"> + Database + + Disabled} isDisabled href="#"> + Disabled + + ARIA Disabled} isAriaDisabled href="#"> + ARIA Disabled + + Network} href="#"> + Network + + + ); +}; diff --git a/packages/react-core/src/components/Tabs/examples/TabsPageInsets.tsx b/packages/react-core/src/components/Tabs/examples/TabsPageInsets.tsx new file mode 100644 index 00000000000..e0a5429a396 --- /dev/null +++ b/packages/react-core/src/components/Tabs/examples/TabsPageInsets.tsx @@ -0,0 +1,60 @@ +import React from 'react'; +import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core'; + +export const TabsPageInsets: React.FunctionComponent = () => { + const [activeTabKey, setActiveTabKey] = React.useState(0); + const [isBox, setIsBox] = React.useState(false); + // Toggle currently active tab + const handleTabClick = ( + event: React.MouseEvent | React.KeyboardEvent | MouseEvent, + tabIndex: string | number + ) => { + setActiveTabKey(tabIndex); + }; + + const toggleBox = (checked: boolean) => { + setIsBox(checked); + }; + + return ( +
+ + Users} aria-label="Page insets example content users"> + Users + + Containers}> + Containers + + Database}> + Database + + Server}> + Server + + System}> + System + + Network}> + Network + + +
+ +
+
+ ); +}; diff --git a/packages/react-core/src/components/Tabs/examples/TabsSeparateContent.tsx b/packages/react-core/src/components/Tabs/examples/TabsSeparateContent.tsx new file mode 100644 index 00000000000..a07c3455636 --- /dev/null +++ b/packages/react-core/src/components/Tabs/examples/TabsSeparateContent.tsx @@ -0,0 +1,75 @@ +import React from 'react'; +import { Tabs, Tab, TabTitleText, TabContent } from '@patternfly/react-core'; + +export const TabsSeparateContent: React.FunctionComponent = () => { + const [activeTabKey, setActiveTabKey] = React.useState(0); + // Toggle currently active tab + const handleTabClick = ( + event: React.MouseEvent | React.KeyboardEvent | MouseEvent, + tabIndex: string | number + ) => { + setActiveTabKey(tabIndex); + }; + + const contentRef1 = React.createRef(); + const contentRef2 = React.createRef(); + const contentRef3 = React.createRef(); + + return ( + + + Tab item 1} + tabContentId="refTab1Section" + tabContentRef={contentRef1} + /> + Tab item 2} + tabContentId="refTab2Section" + tabContentRef={contentRef2} + /> + Tab item 3} + tabContentId="refTab3Section" + tabContentRef={contentRef3} + /> + +
+ + Tab 1 section + + + +
+ + ); +}; diff --git a/packages/react-core/src/components/Tabs/examples/TabsSubtabs.tsx b/packages/react-core/src/components/Tabs/examples/TabsSubtabs.tsx new file mode 100644 index 00000000000..2994a622641 --- /dev/null +++ b/packages/react-core/src/components/Tabs/examples/TabsSubtabs.tsx @@ -0,0 +1,115 @@ +import React from 'react'; +import { Tabs, Tab, TabTitleText, Checkbox } from '@patternfly/react-core'; + +export const TabsSubtabs: React.FunctionComponent = () => { + const [activeTabKey1, setActiveTabKey1] = React.useState(0); + const [activeTabKey2, setActiveTabKey2] = React.useState(0); + const [isBox, setIsBox] = React.useState(false); + + // Toggle currently active primary tab + const handleTabClickFirst = ( + event: React.MouseEvent | React.KeyboardEvent | MouseEvent, + tabIndex: string | number + ) => { + setActiveTabKey1(tabIndex); + }; + + // Toggle currently active secondary tab + const handleTabClickSecond = ( + event: React.MouseEvent | React.KeyboardEvent | MouseEvent, + tabIndex: string | number + ) => { + setActiveTabKey2(tabIndex); + }; + + const toggleBox = (checked: boolean) => { + setIsBox(checked); + }; + + return ( +
+ + Users} aria-label="Tabs with subtabs content users"> + + Secondary tab item 1}> + Secondary tab item 1 item section + + Secondary tab item 2}> + Secondary tab item 2 section + + Secondary tab item 3}> + Secondary tab item 3 section + + Secondary tab item 4}> + Secondary tab item 4 section + + Secondary tab item 5}> + Secondary tab item 5 section + + Secondary tab item 6}> + Secondary tab item 6 section + + Secondary tab item 7}> + Secondary tab item 7 section + + Secondary tab item 8}> + Secondary tab item 8 section + + + + Containers}> + Containers + + Database}> + Database + + Server}> + Server + + System}> + System + + Network}> + Network + + Tab item 7}> + Tab 7 section + + Tab item 8}> + Tab 8 section + + Tab item 9}> + Tab 9 section + + Tab item 10}> + Tab 10 section + + Tab item 11}> + Tab 11 section + + +
+ +
+
+ ); +}; diff --git a/packages/react-core/src/components/Tabs/examples/TabsToggledSeparateContent.tsx b/packages/react-core/src/components/Tabs/examples/TabsToggledSeparateContent.tsx new file mode 100644 index 00000000000..80aaf1c72f9 --- /dev/null +++ b/packages/react-core/src/components/Tabs/examples/TabsToggledSeparateContent.tsx @@ -0,0 +1,67 @@ +import React from 'react'; +import { Tabs, Tab, TabContent, Button, Divider } from '@patternfly/react-core'; + +export const TabsToggledSeparateContent: React.FunctionComponent = () => { + const [activeTabKey, setActiveTabKey] = React.useState(0); + const [isTab2Hidden, setisTab2Hidden] = React.useState(false); + // Toggle currently active tab + const handleTabClick = ( + event: React.MouseEvent | React.KeyboardEvent | MouseEvent, + tabIndex: string | number + ) => { + setActiveTabKey(tabIndex); + }; + + const contentRef1 = React.createRef(); + const contentRef2 = React.createRef(); + const contentRef3 = React.createRef(); + + return ( + + + + + + {!isTab2Hidden && ( + + )} + + +
+ + Tab 1 section + + {!isTab2Hidden && ( + + )} + +
+ + ); +}; diff --git a/packages/react-core/src/components/Tabs/examples/TabsTooltipReactRef.tsx b/packages/react-core/src/components/Tabs/examples/TabsTooltipReactRef.tsx new file mode 100644 index 00000000000..df7665c20ad --- /dev/null +++ b/packages/react-core/src/components/Tabs/examples/TabsTooltipReactRef.tsx @@ -0,0 +1,72 @@ +import React from 'react'; +import { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core'; + +export const TabsTooltipReactRef: React.FunctionComponent = () => { + const [activeTabKey, setActiveTabKey] = React.useState(0); + const [isBox, setIsBox] = React.useState(false); + // Toggle currently active tab + const handleTabClick = ( + event: React.MouseEvent | React.KeyboardEvent | MouseEvent, + tabIndex: string | number + ) => { + setActiveTabKey(tabIndex); + }; + + const toggleBox = (checked: boolean) => { + setIsBox(checked); + }; + + const tooltipRef = React.createRef(); + + return ( +
+ + Users} aria-label="Tooltip ref content - users"> + Users + + Containers}> + Containers + + Database}> + Database + + Disabled} isDisabled> + Disabled + + ARIA Disabled} isAriaDisabled> + ARIA Disabled + + ARIA Disabled (Tooltip)} + isAriaDisabled + ref={tooltipRef} + aria-describedby="tooltip-ref1" + > + ARIA Disabled (Tooltip) + + + +
+ +
+
+ ); +}; diff --git a/packages/react-core/src/components/Tabs/examples/TabsUncontrolled.tsx b/packages/react-core/src/components/Tabs/examples/TabsUncontrolled.tsx new file mode 100644 index 00000000000..51fb4826278 --- /dev/null +++ b/packages/react-core/src/components/Tabs/examples/TabsUncontrolled.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import { Tabs, Tab, TabTitleText, Tooltip } from '@patternfly/react-core'; + +export const TabsUncontrolled: React.FunctionComponent = () => { + const tooltip = ( + + ); + + return ( + <> + + Users} aria-label="Uncontrolled ref content - users"> + Users + + Containers}> + Containers + + Database}> + Database + + Disabled} isDisabled> + Disabled + + ARIA Disabled} isAriaDisabled> + ARIA Disabled + + ARIA Disabled (Tooltip)} isAriaDisabled tooltip={tooltip}> + ARIA Disabled (Tooltip) + + + + ); +}; diff --git a/packages/react-core/src/components/Tabs/examples/TabsUnmountingInvisibleChildren.tsx b/packages/react-core/src/components/Tabs/examples/TabsUnmountingInvisibleChildren.tsx new file mode 100644 index 00000000000..ed5b275043c --- /dev/null +++ b/packages/react-core/src/components/Tabs/examples/TabsUnmountingInvisibleChildren.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import { Tabs, Tab, TabTitleText } from '@patternfly/react-core'; + +export const TabsUnmountingInvisibleChildren: React.FunctionComponent = () => { + const [activeTabKey, setActiveTabKey] = React.useState(0); + // Toggle currently active tab + const handleTabClick = ( + event: React.MouseEvent | React.KeyboardEvent | MouseEvent, + tabIndex: string | number + ) => { + setActiveTabKey(tabIndex); + }; + + return ( + + Tab item 1} aria-label="Invisible children tab 1"> + Tab 1 section + + Tab item 2} aria-label="Invisible children tab 2"> + Tab 2 section + + Tab item 3} aria-label="Invisible children tab 3"> + Tab 3 section + + + ); +}; diff --git a/packages/react-core/src/components/Tabs/examples/TabsVertical.tsx b/packages/react-core/src/components/Tabs/examples/TabsVertical.tsx new file mode 100644 index 00000000000..3b05d926fd6 --- /dev/null +++ b/packages/react-core/src/components/Tabs/examples/TabsVertical.tsx @@ -0,0 +1,72 @@ +import React from 'react'; +import { Tabs, Tab, TabTitleText, Checkbox, Tooltip } from '@patternfly/react-core'; + +export const TabsVertical: React.FunctionComponent = () => { + const [activeTabKey, setActiveTabKey] = React.useState(0); + const [isBox, setIsBox] = React.useState(false); + // Toggle currently active tab + const handleTabClick = ( + event: React.MouseEvent | React.KeyboardEvent | MouseEvent, + tabIndex: string | number + ) => { + setActiveTabKey(tabIndex); + }; + + const toggleBox = (checked: boolean) => { + setIsBox(checked); + }; + + const tooltip = ( + + ); + + return ( +
+ + + Users + + } + aria-label="Vertical example content users" + > + Users + + Containers}> + Containers + + Database}> + Database + + Disabled} isDisabled> + Disabled + + ARIA Disabled} isAriaDisabled> + ARIA Disabled + + ARIA Disabled (Tooltip)} isAriaDisabled tooltip={tooltip}> + ARIA Disabled (Tooltip) + + +
+ +
+
+ ); +}; diff --git a/packages/react-core/src/components/Tabs/examples/TabsVerticalExpandable.tsx b/packages/react-core/src/components/Tabs/examples/TabsVerticalExpandable.tsx new file mode 100644 index 00000000000..5b31c6f8469 --- /dev/null +++ b/packages/react-core/src/components/Tabs/examples/TabsVerticalExpandable.tsx @@ -0,0 +1,51 @@ +import React from 'react'; +import { Tabs, Tab, TabTitleText } from '@patternfly/react-core'; + +export const TabsVerticalExpandable: React.FunctionComponent = () => { + const [activeTabKey, setActiveTabKey] = React.useState(0); + const [isExpanded, setIsExpanded] = React.useState(false); + // Toggle currently active tab + const handleTabClick = ( + event: React.MouseEvent | React.KeyboardEvent | MouseEvent, + tabIndex: string | number + ) => { + setActiveTabKey(tabIndex); + }; + + const onToggle = (isExpanded: boolean) => { + setIsExpanded(isExpanded); + }; + + return ( + + Users} aria-label="Vertical expandable content users"> + Users + + Containers}> + Containers + + Database}> + Database + + Server}> + Server + + System}> + System + + Network}> + Network + + + ); +}; diff --git a/packages/react-core/src/components/Tabs/examples/TabsVerticalExpandableUncontrolled.tsx b/packages/react-core/src/components/Tabs/examples/TabsVerticalExpandableUncontrolled.tsx new file mode 100644 index 00000000000..ac01f6f7dc3 --- /dev/null +++ b/packages/react-core/src/components/Tabs/examples/TabsVerticalExpandableUncontrolled.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import { Tabs, Tab, TabTitleText } from '@patternfly/react-core'; +export const TabsVerticalExpandableUncontrolled: React.FunctionComponent = () => { + const [activeTabKey, setActiveTabKey] = React.useState(0); + // Toggle currently active tab + const handleTabClick = ( + event: React.MouseEvent | React.KeyboardEvent | MouseEvent, + tabIndex: string | number + ) => { + setActiveTabKey(tabIndex); + }; + + return ( + + Users} + aria-label="Vertical expandable uncontrolled content users" + > + Users + + Containers}> + Containers + + Database}> + Database + + Server}> + Server + + System}> + System + + Network}> + Network + + + ); +};