From b92a0c9f646be4479c204f2277432ae9048d1e46 Mon Sep 17 00:00:00 2001
From: Gabi Podolnikova <gpodolni@redhat.com>
Date: Wed, 24 Nov 2021 15:16:31 +0100
Subject: [PATCH 1/3] chore(Tabs): added nested Tabs demo

---
 packages/react-core/src/demos/Tabs.md | 129 ++++++++++++++++++++++++++
 1 file changed, 129 insertions(+)

diff --git a/packages/react-core/src/demos/Tabs.md b/packages/react-core/src/demos/Tabs.md
index a67309a67dc..7e5668ad580 100644
--- a/packages/react-core/src/demos/Tabs.md
+++ b/packages/react-core/src/demos/Tabs.md
@@ -437,3 +437,132 @@ TabsOpenWithSecondaryTabsDemo = () => {
   );
 };
 ```
+
+### Open nested tabs
+
+```js isFullscreen
+import React from 'react';
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  Grid,
+  GridItem,
+  PageSection,
+  PageSectionVariants,
+  Tabs,
+  Tab,
+  TabContent,
+  TabContentBody,
+  TabTitleText,
+  Title,
+  Label,
+  LabelGroup,
+  Flex,
+  FlexItem
+} from '@patternfly/react-core';
+import DashboardWrapper from './examples/DashboardWrapper';
+import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
+import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
+
+TabsOpenNestedDemo = () => {
+  const [activeTabKey, setActiveTabKey] = React.useState(0);
+  const [activeNestedTabKey, setActiveNestedTabKey] = React.useState(10);
+
+  // Toggle currently active tab
+  const handleTabClick = (event, tabIndex) =>
+    setActiveTabKey(tabIndex);
+
+  // Toggle currently active nested tab
+  const handleNestedTabClick = (event, tabIndex) =>
+    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} onSelect={handleNestedTabClick} id="open-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="h3" >
+                  Title of Card
+                </Title>
+              </CardHeader>
+            </Card>
+          </FlexItem>
+          <FlexItem flex={{ default: 'flex_1' }}>
+            <Card isFullHeight>
+              <CardHeader>
+                <Title headingLevel="h3" >
+                  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" variant={PageSectionVariants.light} isWidthLimited>
+        <Tabs activeKey={activeTabKey} onSelect={handleTabClick} usePageInsets id="open-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}`} />
+        </Tabs>
+      </PageSection>
+      <PageSection isWidthLimited variant={PageSectionVariants.light}>
+        <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>
+  );
+};
+```
\ No newline at end of file

From 4eb8dc088b362223d8e68ba277a037d9ac53d22d Mon Sep 17 00:00:00 2001
From: Gabi Podolnikova <gpodolni@redhat.com>
Date: Tue, 30 Nov 2021 15:32:55 +0100
Subject: [PATCH 2/3] fixing few style issues

---
 packages/react-core/src/demos/Tabs.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/react-core/src/demos/Tabs.md b/packages/react-core/src/demos/Tabs.md
index 7e5668ad580..4de16878557 100644
--- a/packages/react-core/src/demos/Tabs.md
+++ b/packages/react-core/src/demos/Tabs.md
@@ -489,7 +489,7 @@ TabsOpenNestedDemo = () => {
           <CardBody>
             <Flex direction={{ default: 'column' }}>
               <FlexItem>
-                <Tabs activeKey={activeNestedTabKey} onSelect={handleNestedTabClick} id="open-nested-tabs-example-tabs-list">
+                <Tabs activeKey={activeNestedTabKey} isSecondary onSelect={handleNestedTabClick} id="open-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}`} />
@@ -554,7 +554,7 @@ TabsOpenNestedDemo = () => {
           <Tab eventKey={1} title={<TabTitleText>Cluster 2</TabTitleText>} tabContentId={`tabContent${1}`} />
         </Tabs>
       </PageSection>
-      <PageSection isWidthLimited variant={PageSectionVariants.light}>
+      <PageSection isWidthLimited>
         <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
           <TabContentBody>{tabContent}</TabContentBody>
         </TabContent>

From 914d251b222537706a44345072d0a57f9551c9ae Mon Sep 17 00:00:00 2001
From: Gabi Podolnikova <gpodolni@redhat.com>
Date: Thu, 2 Dec 2021 13:50:47 +0100
Subject: [PATCH 3/3] Fixed formatting

---
 packages/react-core/src/demos/Tabs.md         | 129 +--------------
 .../src/demos/Tabs/NestedTabsDemo.js          | 151 ++++++++++++++++++
 2 files changed, 153 insertions(+), 127 deletions(-)
 create mode 100644 packages/react-core/src/demos/Tabs/NestedTabsDemo.js

diff --git a/packages/react-core/src/demos/Tabs.md b/packages/react-core/src/demos/Tabs.md
index 4de16878557..1709c39e379 100644
--- a/packages/react-core/src/demos/Tabs.md
+++ b/packages/react-core/src/demos/Tabs.md
@@ -438,131 +438,6 @@ TabsOpenWithSecondaryTabsDemo = () => {
 };
 ```
 
-### Open nested tabs
-
-```js isFullscreen
-import React from 'react';
-import {
-  Card,
-  CardHeader,
-  CardBody,
-  Grid,
-  GridItem,
-  PageSection,
-  PageSectionVariants,
-  Tabs,
-  Tab,
-  TabContent,
-  TabContentBody,
-  TabTitleText,
-  Title,
-  Label,
-  LabelGroup,
-  Flex,
-  FlexItem
-} from '@patternfly/react-core';
-import DashboardWrapper from './examples/DashboardWrapper';
-import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
-import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
-
-TabsOpenNestedDemo = () => {
-  const [activeTabKey, setActiveTabKey] = React.useState(0);
-  const [activeNestedTabKey, setActiveNestedTabKey] = React.useState(10);
-
-  // Toggle currently active tab
-  const handleTabClick = (event, tabIndex) =>
-    setActiveTabKey(tabIndex);
-
-  // Toggle currently active nested tab
-  const handleNestedTabClick = (event, tabIndex) =>
-    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="open-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="h3" >
-                  Title of Card
-                </Title>
-              </CardHeader>
-            </Card>
-          </FlexItem>
-          <FlexItem flex={{ default: 'flex_1' }}>
-            <Card isFullHeight>
-              <CardHeader>
-                <Title headingLevel="h3" >
-                  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" variant={PageSectionVariants.light} isWidthLimited>
-        <Tabs activeKey={activeTabKey} onSelect={handleTabClick} usePageInsets id="open-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}`} />
-        </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>
-  );
-};
+### Nested tabs
+```js isFullscreen file="./Tabs/NestedTabsDemo.js"
 ```
\ No newline at end of file
diff --git a/packages/react-core/src/demos/Tabs/NestedTabsDemo.js b/packages/react-core/src/demos/Tabs/NestedTabsDemo.js
new file mode 100644
index 00000000000..66d3bbc482d
--- /dev/null
+++ b/packages/react-core/src/demos/Tabs/NestedTabsDemo.js
@@ -0,0 +1,151 @@
+import React from 'react';
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  Grid,
+  GridItem,
+  PageSection,
+  PageSectionVariants,
+  Tabs,
+  Tab,
+  TabContent,
+  TabContentBody,
+  TabTitleText,
+  Title,
+  Flex,
+  FlexItem
+} from '@patternfly/react-core';
+import DashboardWrapper from '../examples/DashboardWrapper';
+
+export const NestedTabsDemo = () => {
+  const [activeTabKey, setActiveTabKey] = React.useState(0);
+  const [activeNestedTabKey, setActiveNestedTabKey] = React.useState(10);
+
+  // Toggle currently active tab
+  const handleTabClick = (_, tabIndex) => setActiveTabKey(tabIndex);
+
+  // Toggle currently active nested tab
+  const handleNestedTabClick = (_, tabIndex) => 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="h3">Title of Card</Title>
+              </CardHeader>
+            </Card>
+          </FlexItem>
+          <FlexItem flex={{ default: 'flex_1' }}>
+            <Card isFullHeight>
+              <CardHeader>
+                <Title headingLevel="h3">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" variant={PageSectionVariants.light} 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}`} />
+        </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>
+  );
+};