Skip to content

Commit d92ff98

Browse files
gitdallasgitdallas
authored
docs(Tabs): add gray tabs demo (#6810) (#6811)
* docs(Tabs): add gray tabs demo (#6810) * docs(Tabs): add gray tabs demo - pr comment changes (#6810) * docs(Tabs): add gray tabs demo - pr comment changes (#6810) * docs(Tabs): add gray tabs demo (#6810) * docs(Tabs): add gray tabs demo - pr comment changes (#6810) * docs(Tabs): add gray tabs demo - pr comment changes (#6810) * docs(Tabs): add gray tabs demo - pr comment changes (#6810)
1 parent a41d19d commit d92ff98

File tree

3 files changed

+165
-3
lines changed

3 files changed

+165
-3
lines changed

‎packages/react-core/src/demos/Tabs.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -457,3 +457,7 @@ TabsOpenWithSecondaryTabsDemo = () => {
457457

458458
```js isFullscreen file="./examples/Tabs/ModalTabs.tsx"
459459
```
460+
### Gray tabs
461+
462+
```js isFullscreen file="./examples/Tabs/GrayTabs.tsx"
463+
```

‎packages/react-core/src/demos/Tabs/NestedTabsDemo.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -109,14 +109,14 @@ export const NestedTabsDemo = () => {
109109
<FlexItem flex={{ default: 'flex_1' }}>
110110
<Card isFullHeight>
111111
<CardHeader>
112-
<Title headingLevel="h3">Title of Card</Title>
112+
<Title headingLevel="h2">Title of Card</Title>
113113
</CardHeader>
114114
</Card>
115115
</FlexItem>
116116
<FlexItem flex={{ default: 'flex_1' }}>
117117
<Card isFullHeight>
118118
<CardHeader>
119-
<Title headingLevel="h3">Title of Card</Title>
119+
<Title headingLevel="h2">Title of Card</Title>
120120
</CardHeader>
121121
</Card>
122122
</FlexItem>
@@ -132,7 +132,7 @@ export const NestedTabsDemo = () => {
132132
Overview
133133
</Title>
134134
</PageSection>
135-
<PageSection type="tabs" variant={PageSectionVariants.light} isWidthLimited>
135+
<PageSection type="tabs" isWidthLimited>
136136
<Tabs activeKey={activeTabKey} onSelect={handleTabClick} usePageInsets id="nested-tabs-example-tabs-list">
137137
<Tab eventKey={0} title={<TabTitleText>Cluster 1</TabTitleText>} tabContentId={`tabContent${0}`} />
138138
<Tab eventKey={1} title={<TabTitleText>Cluster 2</TabTitleText>} tabContentId={`tabContent${1}`} />

‎packages/react-core/src/demos/examples/Tabs/GrayTabs.tsx‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
import React from 'react';
2+
import {
3+
PageSection,
4+
PageSectionVariants,
5+
Tabs,
6+
Tab,
7+
TabContent,
8+
TabContentBody,
9+
TabTitleText,
10+
Title,
11+
Grid,
12+
GridItem,
13+
Flex,
14+
FlexItem,
15+
Card,
16+
CardBody,
17+
CardHeader
18+
} from '@patternfly/react-core';
19+
import DashboardWrapper from '../../examples/DashboardWrapper';
20+
21+
export const GrayTabsDemo: React.FunctionComponent = () => {
22+
const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
23+
const [activeNestedTabKey, setActiveNestedTabKey] = React.useState<string | number>(0);
24+
25+
// Toggle currently active tab
26+
const handleTabClick = (_: React.MouseEvent, tabIndex: string | number) => setActiveTabKey(tabIndex);
27+
28+
// Toggle currently active nested tab
29+
const handleNestedTabClick = (_: React.MouseEvent, tabIndex: string | number) => setActiveNestedTabKey(tabIndex);
30+
31+
const tabContent = (
32+
<Grid hasGutter>
33+
<GridItem xl={8} md={6}>
34+
<Card>
35+
<CardHeader>
36+
<Title headingLevel="h2">Status</Title>
37+
</CardHeader>
38+
<CardBody>
39+
<Flex direction={{ default: 'column' }}>
40+
<FlexItem>
41+
<Tabs
42+
activeKey={activeNestedTabKey}
43+
isSecondary
44+
onSelect={handleNestedTabClick}
45+
id="nested-tabs-example-tabs-list"
46+
>
47+
<Tab eventKey={10} title={<TabTitleText>Cluster</TabTitleText>} tabContentId={`tabContent${10}`} />
48+
<Tab
49+
eventKey={11}
50+
title={<TabTitleText>Control plane</TabTitleText>}
51+
tabContentId={`tabContent${11}`}
52+
/>
53+
<Tab eventKey={12} title={<TabTitleText>Operators</TabTitleText>} tabContentId={`tabContent${12}`} />
54+
<Tab
55+
eventKey={13}
56+
title={<TabTitleText>Virtualization</TabTitleText>}
57+
tabContentId={`tabContent${13}`}
58+
/>
59+
</Tabs>
60+
</FlexItem>
61+
<FlexItem>
62+
<TabContent
63+
key={10}
64+
eventKey={10}
65+
id={`tabContent${10}`}
66+
activeKey={activeNestedTabKey}
67+
hidden={10 !== activeNestedTabKey}
68+
>
69+
<TabContentBody>
70+
{
71+
'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.'
72+
}
73+
</TabContentBody>
74+
</TabContent>
75+
<TabContent
76+
key={11}
77+
eventKey={11}
78+
id={`tabContent${11}`}
79+
activeKey={activeNestedTabKey}
80+
hidden={11 !== activeNestedTabKey}
81+
>
82+
<TabContentBody>Control plane panel</TabContentBody>
83+
</TabContent>
84+
<TabContent
85+
key={12}
86+
eventKey={12}
87+
id={`tabContent${12}`}
88+
activeKey={activeNestedTabKey}
89+
hidden={12 !== activeNestedTabKey}
90+
>
91+
<TabContentBody>Operators panel</TabContentBody>
92+
</TabContent>
93+
<TabContent
94+
key={13}
95+
eventKey={13}
96+
id={`tabContent${13}`}
97+
activeKey={activeNestedTabKey}
98+
hidden={13 !== activeNestedTabKey}
99+
>
100+
<TabContentBody>Virtualization panel</TabContentBody>
101+
</TabContent>
102+
</FlexItem>
103+
</Flex>
104+
</CardBody>
105+
</Card>
106+
</GridItem>
107+
<GridItem xl={4} md={6}>
108+
<Flex direction={{ default: 'column' }} className="pf-u-h-100">
109+
<FlexItem flex={{ default: 'flex_1' }}>
110+
<Card isFullHeight>
111+
<CardHeader>
112+
<Title headingLevel="h2">Title of Card</Title>
113+
</CardHeader>
114+
</Card>
115+
</FlexItem>
116+
<FlexItem flex={{ default: 'flex_1' }}>
117+
<Card isFullHeight>
118+
<CardHeader>
119+
<Title headingLevel="h2">Title of Card</Title>
120+
</CardHeader>
121+
</Card>
122+
</FlexItem>
123+
</Flex>
124+
</GridItem>
125+
</Grid>
126+
);
127+
128+
return (
129+
<DashboardWrapper hasNoBreadcrumb>
130+
<PageSection isWidthLimited variant={PageSectionVariants.light}>
131+
<Title headingLevel="h1" size="2xl">
132+
Overview
133+
</Title>
134+
</PageSection>
135+
<PageSection type="tabs" isWidthLimited>
136+
<Tabs
137+
activeKey={activeTabKey}
138+
onSelect={handleTabClick}
139+
usePageInsets
140+
isBox
141+
variant="light300"
142+
id="open-tabs-example-tabs-list"
143+
>
144+
<Tab eventKey={0} title={<TabTitleText>Cluster 1</TabTitleText>} tabContentId={`tabContent${0}`} />
145+
<Tab eventKey={1} title={<TabTitleText>Cluster 2</TabTitleText>} tabContentId={`tabContent${1}`} />
146+
</Tabs>
147+
</PageSection>
148+
<PageSection isWidthLimited>
149+
<TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
150+
<TabContentBody>{tabContent}</TabContentBody>
151+
</TabContent>
152+
<TabContent key={1} eventKey={1} id={`tabContent${1}`} activeKey={activeTabKey} hidden={1 !== activeTabKey}>
153+
<TabContentBody>Cluster 2 panel</TabContentBody>
154+
</TabContent>
155+
</PageSection>
156+
</DashboardWrapper>
157+
);
158+
};

0 commit comments

Comments
 (0)