Skip to content

docs(Tabs): add gray tabs demo (patternfly#6810) #6811

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tlabaj merged 7 commits into from
Jan 20, 2022
Merged

docs(Tabs): add gray tabs demo (patternfly#6810) #6811

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
f5ed183
docs(Tabs): add gray tabs demo (patternfly#6810)
gitdallas Jan 17, 2022
e131d44
docs(Tabs): add gray tabs demo - pr comment changes (patternfly#6810)
gitdallas Jan 17, 2022
57c141d
docs(Tabs): add gray tabs demo - pr comment changes (patternfly#6810)
gitdallas Jan 19, 2022
a68292b
docs(Tabs): add gray tabs demo (patternfly#6810)
gitdallas Jan 17, 2022
68f68a2
docs(Tabs): add gray tabs demo - pr comment changes (patternfly#6810)
gitdallas Jan 17, 2022
883839f
docs(Tabs): add gray tabs demo - pr comment changes (patternfly#6810)
gitdallas Jan 19, 2022
2f3b3e5
docs(Tabs): add gray tabs demo - pr comment changes (patternfly#6810)
gitdallas Jan 19, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/react-core/src/demos/Tabs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -457,3 +457,7 @@ TabsOpenWithSecondaryTabsDemo = () => {

```js isFullscreen file="./examples/Tabs/ModalTabs.tsx"
```
### Gray tabs

```js isFullscreen file="./examples/Tabs/GrayTabs.tsx"
```
6 changes: 3 additions & 3 deletions packages/react-core/src/demos/Tabs/NestedTabsDemo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -109,14 +109,14 @@ export const NestedTabsDemo = () => {
<FlexItem flex={{ default: 'flex_1' }}>
<Card isFullHeight>
<CardHeader>
<Title headingLevel="h3">Title of Card</Title>
<Title headingLevel="h2">Title of Card</Title>
</CardHeader>
</Card>
</FlexItem>
<FlexItem flex={{ default: 'flex_1' }}>
<Card isFullHeight>
<CardHeader>
<Title headingLevel="h3">Title of Card</Title>
<Title headingLevel="h2">Title of Card</Title>
</CardHeader>
</Card>
</FlexItem>
Expand All @@ -132,7 +132,7 @@ export const NestedTabsDemo = () => {
Overview
</Title>
</PageSection>
<PageSection type="tabs" variant={PageSectionVariants.light} isWidthLimited>
<PageSection type="tabs" isWidthLimited>
<Tabs activeKey={activeTabKey} onSelect={handleTabClick} usePageInsets id="nested-tabs-example-tabs-list">
<Tab eventKey={0} title={<TabTitleText>Cluster 1</TabTitleText>} tabContentId={`tabContent${0}`} />
<Tab eventKey={1} title={<TabTitleText>Cluster 2</TabTitleText>} tabContentId={`tabContent${1}`} />
Expand Down
158 changes: 158 additions & 0 deletions packages/react-core/src/demos/examples/Tabs/GrayTabs.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,158 @@
import React from 'react';
import {
PageSection,
PageSectionVariants,
Tabs,
Tab,
TabContent,
TabContentBody,
TabTitleText,
Title,
Grid,
GridItem,
Flex,
FlexItem,
Card,
CardBody,
CardHeader
} from '@patternfly/react-core';
import DashboardWrapper from '../../examples/DashboardWrapper';

export const GrayTabsDemo: React.FunctionComponent = () => {
const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
const [activeNestedTabKey, setActiveNestedTabKey] = React.useState<string | number>(0);

// Toggle currently active tab
const handleTabClick = (_: React.MouseEvent, tabIndex: string | number) => setActiveTabKey(tabIndex);

// Toggle currently active nested tab
const handleNestedTabClick = (_: React.MouseEvent, tabIndex: string | number) => setActiveNestedTabKey(tabIndex);

const tabContent = (
<Grid hasGutter>
<GridItem xl={8} md={6}>
<Card>
<CardHeader>
<Title headingLevel="h2">Status</Title>
</CardHeader>
<CardBody>
<Flex direction={{ default: 'column' }}>
<FlexItem>
<Tabs
activeKey={activeNestedTabKey}
isSecondary
onSelect={handleNestedTabClick}
id="nested-tabs-example-tabs-list"
>
<Tab eventKey={10} title={<TabTitleText>Cluster</TabTitleText>} tabContentId={`tabContent${10}`} />
<Tab
eventKey={11}
title={<TabTitleText>Control plane</TabTitleText>}
tabContentId={`tabContent${11}`}
/>
<Tab eventKey={12} title={<TabTitleText>Operators</TabTitleText>} tabContentId={`tabContent${12}`} />
<Tab
eventKey={13}
title={<TabTitleText>Virtualization</TabTitleText>}
tabContentId={`tabContent${13}`}
/>
</Tabs>
</FlexItem>
<FlexItem>
<TabContent
key={10}
eventKey={10}
id={`tabContent${10}`}
activeKey={activeNestedTabKey}
hidden={10 !== activeNestedTabKey}
>
<TabContentBody>
{
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce in odio porttitor, feugiat risus in, feugiat arcu. Nullam euismod enim eget fringilla condimentum. Maecenas tincidunt et metus id aliquet. Integer et fermentum purus. Nulla tempor velit arcu, vitae semper purus iaculis at. Sed malesuada auctor luctus. Pellentesque et leo urna. Aliquam vitae felis congue lacus mattis fringilla. Nullam et ultricies erat, sed dignissim elit. Cras mattis pulvinar aliquam. In ac est nulla. Pellentesque fermentum nibh ac sapien porta, ut congue orci aliquam. Sed nisl est, tempor eu pharetra eget, ullamcorper ut augue. Vestibulum eleifend libero eu nulla cursus lacinia.'
}
</TabContentBody>
</TabContent>
<TabContent
key={11}
eventKey={11}
id={`tabContent${11}`}
activeKey={activeNestedTabKey}
hidden={11 !== activeNestedTabKey}
>
<TabContentBody>Control plane panel</TabContentBody>
</TabContent>
<TabContent
key={12}
eventKey={12}
id={`tabContent${12}`}
activeKey={activeNestedTabKey}
hidden={12 !== activeNestedTabKey}
>
<TabContentBody>Operators panel</TabContentBody>
</TabContent>
<TabContent
key={13}
eventKey={13}
id={`tabContent${13}`}
activeKey={activeNestedTabKey}
hidden={13 !== activeNestedTabKey}
>
<TabContentBody>Virtualization panel</TabContentBody>
</TabContent>
</FlexItem>
</Flex>
</CardBody>
</Card>
</GridItem>
<GridItem xl={4} md={6}>
<Flex direction={{ default: 'column' }} className="pf-u-h-100">
<FlexItem flex={{ default: 'flex_1' }}>
<Card isFullHeight>
<CardHeader>
<Title headingLevel="h2">Title of Card</Title>
</CardHeader>
</Card>
</FlexItem>
<FlexItem flex={{ default: 'flex_1' }}>
<Card isFullHeight>
<CardHeader>
<Title headingLevel="h2">Title of Card</Title>
</CardHeader>
</Card>
</FlexItem>
</Flex>
</GridItem>
</Grid>
);

return (
<DashboardWrapper hasNoBreadcrumb>
<PageSection isWidthLimited variant={PageSectionVariants.light}>
<Title headingLevel="h1" size="2xl">
Overview
</Title>
</PageSection>
<PageSection type="tabs" isWidthLimited>
<Tabs
activeKey={activeTabKey}
onSelect={handleTabClick}
usePageInsets
isBox
variant="light300"
id="open-tabs-example-tabs-list"
>
<Tab eventKey={0} title={<TabTitleText>Cluster 1</TabTitleText>} tabContentId={`tabContent${0}`} />
<Tab eventKey={1} title={<TabTitleText>Cluster 2</TabTitleText>} tabContentId={`tabContent${1}`} />
</Tabs>
</PageSection>
<PageSection isWidthLimited>
<TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
<TabContentBody>{tabContent}</TabContentBody>
</TabContent>
<TabContent key={1} eventKey={1} id={`tabContent${1}`} activeKey={activeTabKey} hidden={1 !== activeTabKey}>
<TabContentBody>Cluster 2 panel</TabContentBody>
</TabContent>
</PageSection>
</DashboardWrapper>
);
};