@patternfly/react-core 4.204.0 → 4.205.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 4.205.0 (2022-04-18)
+
+
+### Features
+
+* **Tabs:** Add nested, unindented demo ([#7194](https://github.com/patternfly/patternfly-react/issues/7194)) ([81bd759](https://github.com/patternfly/patternfly-react/commit/81bd759189379bc558871acc791a1a34dcc2ed1a))
+
+
+
+
+
 # 4.204.0 (2022-04-18)
 
 

package/dist/umd/react-core.min.css

@@ -17635,6 +17635,159 @@ label.pf-c-radio, .pf-c-radio__label,
   margin-left: var(--pf-c-slider__main--actions--MarginLeft);
 }
 
+.pf-c-switch {
+  --pf-c-switch--FontSize: var(--pf-global--FontSize--md);
+  --pf-c-switch__label--PaddingLeft: var(--pf-global--spacer--md);
+  --pf-c-switch--ColumnGap: var(--pf-c-switch__label--PaddingLeft);
+  --pf-c-switch__toggle-icon--FontSize: calc(var(--pf-c-switch--FontSize) * .625);
+  --pf-c-switch__toggle-icon--Color: var(--pf-global--Color--light-100);
+  --pf-c-switch__toggle-icon--Left: calc(var(--pf-c-switch--FontSize) * .4);
+  --pf-c-switch__toggle-icon--Offset: 0.125rem;
+  --pf-c-switch--LineHeight: var(--pf-global--LineHeight--md);
+  --pf-c-switch--Height: auto;
+  --pf-c-switch__input--checked__toggle--BackgroundColor: var(--pf-global--primary-color--100);
+  --pf-c-switch__input--checked__toggle--before--TranslateX: calc(100% + var(--pf-c-switch__toggle-icon--Offset));
+  --pf-c-switch__input--checked__label--Color: var(--pf-global--Color--dark-100);
+  --pf-c-switch__input--not-checked__label--Color: var(--pf-global--disabled-color--100);
+  --pf-c-switch__input--disabled__label--Color: var(--pf-global--disabled-color--100);
+  --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
+  --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--palette--black-150);
+  --pf-c-switch__input--focus__toggle--OutlineWidth: var(--pf-global--BorderWidth--md);
+  --pf-c-switch__input--focus__toggle--OutlineOffset: var(--pf-global--spacer--sm);
+  --pf-c-switch__input--focus__toggle--OutlineColor: var(--pf-global--primary-color--100);
+  --pf-c-switch__toggle--Height: calc(var(--pf-c-switch--FontSize) * var(--pf-c-switch--LineHeight));
+  --pf-c-switch__toggle--BackgroundColor: var(--pf-global--palette--black-500);
+  --pf-c-switch__toggle--BorderRadius: var(--pf-c-switch__toggle--Height);
+  --pf-c-switch__toggle--before--Width: calc(var(--pf-c-switch--FontSize) - var(--pf-c-switch__toggle-icon--Offset));
+  --pf-c-switch__toggle--before--Height: var(--pf-c-switch__toggle--before--Width);
+  --pf-c-switch__toggle--before--Top: calc((var(--pf-c-switch__toggle--Height) - var(--pf-c-switch__toggle--before--Height)) / 2);
+  --pf-c-switch__toggle--before--Left: var(--pf-c-switch__toggle--before--Top);
+  --pf-c-switch__toggle--before--BackgroundColor: var(--pf-global--BackgroundColor--100);
+  --pf-c-switch__toggle--before--BorderRadius: var(--pf-global--BorderRadius--lg);
+  --pf-c-switch__toggle--before--BoxShadow: var(--pf-global--BoxShadow--md);
+  --pf-c-switch__toggle--before--Transition: transform .25s ease 0s;
+  --pf-c-switch__toggle--Width: calc(var(--pf-c-switch__toggle--Height) + var(--pf-c-switch__toggle-icon--Offset) + var(--pf-c-switch__toggle--before--Width));
+  --pf-c-switch__label--Color: var(--pf-global--Color--dark-100);
+  position: relative;
+  display: inline-grid;
+  grid-template-columns: auto;
+  grid-auto-columns: 1fr;
+  column-gap: var(--pf-c-switch--ColumnGap);
+  height: var(--pf-c-switch--Height);
+  font-size: var(--pf-c-switch--FontSize);
+  line-height: var(--pf-c-switch--LineHeight);
+  vertical-align: middle;
+  cursor: pointer;
+}
+
+.pf-c-switch.pf-m-reverse .pf-c-switch__label,
+.pf-c-switch.pf-m-reverse .pf-c-switch__toggle {
+  grid-row: 1;
+}
+
+.pf-c-switch.pf-m-reverse .pf-c-switch__label {
+  grid-column: 1;
+}
+
+.pf-c-switch__input {
+  position: absolute;
+  cursor: pointer;
+  opacity: 0;
+}
+
+.pf-c-switch__input:focus ~ .pf-c-switch__toggle {
+  outline: var(--pf-c-switch__input--focus__toggle--OutlineWidth) solid var(--pf-c-switch__input--focus__toggle--OutlineColor);
+  outline-offset: var(--pf-c-switch__input--focus__toggle--OutlineOffset);
+}
+
+.pf-c-switch__input:checked ~ .pf-c-switch__label {
+  color: var(--pf-c-switch__input--checked__label--Color);
+}
+
+.pf-c-switch__input:checked ~ .pf-c-switch__toggle {
+  background-color: var(--pf-c-switch__input--checked__toggle--BackgroundColor);
+}
+
+.pf-c-switch__input:checked ~ .pf-c-switch__toggle::before {
+  transform: translateX(var(--pf-c-switch__input--checked__toggle--before--TranslateX));
+}
+
+.pf-c-switch__input:checked ~ .pf-m-off {
+  display: none;
+}
+
+.pf-c-switch__input:not(:checked) ~ .pf-c-switch__label {
+  color: var(--pf-c-switch__input--not-checked__label--Color);
+}
+
+.pf-c-switch__input:not(:checked) ~ .pf-c-switch__toggle .pf-c-switch__toggle-icon {
+  display: none;
+  visibility: hidden;
+}
+
+.pf-c-switch__input:not(:checked) ~ .pf-m-on {
+  display: none;
+}
+
+.pf-c-switch__input:disabled {
+  cursor: not-allowed;
+}
+
+.pf-c-switch__input:disabled ~ .pf-c-switch__label {
+  color: var(--pf-c-switch__input--disabled__label--Color);
+  cursor: not-allowed;
+}
+
+.pf-c-switch__input:disabled ~ .pf-c-switch__toggle {
+  cursor: not-allowed;
+  background-color: var(--pf-c-switch__input--disabled__toggle--BackgroundColor);
+}
+
+.pf-c-switch__input:disabled ~ .pf-c-switch__toggle::before {
+  background-color: var(--pf-c-switch__input--disabled__toggle--before--BackgroundColor);
+}
+
+.pf-c-switch__toggle {
+  position: relative;
+  display: inline-block;
+  width: var(--pf-c-switch__toggle--Width);
+  height: var(--pf-c-switch__toggle--Height);
+  background-color: var(--pf-c-switch__toggle--BackgroundColor);
+  border-radius: var(--pf-c-switch__toggle--BorderRadius);
+}
+
+.pf-c-switch__toggle::before {
+  position: absolute;
+  top: var(--pf-c-switch__toggle--before--Top);
+  left: var(--pf-c-switch__toggle--before--Left);
+  display: block;
+  width: var(--pf-c-switch__toggle--before--Width);
+  height: var(--pf-c-switch__toggle--before--Height);
+  content: "";
+  background-color: var(--pf-c-switch__toggle--before--BackgroundColor);
+  border-radius: var(--pf-c-switch__toggle--before--BorderRadius);
+  box-shadow: var(--pf-c-switch__toggle--before--BoxShadow);
+  transition: var(--pf-c-switch__toggle--before--Transition);
+}
+
+.pf-c-switch__toggle-icon {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: var(--pf-c-switch__toggle-icon--Left);
+  display: flex;
+  align-items: center;
+  font-size: var(--pf-c-switch__toggle-icon--FontSize);
+  color: var(--pf-c-switch__toggle-icon--Color);
+}
+
+.pf-c-switch__label {
+  display: inline-block;
+  grid-column: 2;
+  color: var(--pf-c-switch__label--Color);
+  vertical-align: top;
+}
+
 .pf-c-spinner {
   --pf-c-spinner--diameter: var(--pf-global--icon--FontSize--xl);
   --pf-c-spinner--Width: var(--pf-c-spinner--diameter);
@@ -17864,159 +18017,6 @@ svg.pf-c-spinner.pf-m-xl {
     transform: rotate(720deg);
   }
 }
-.pf-c-switch {
-  --pf-c-switch--FontSize: var(--pf-global--FontSize--md);
-  --pf-c-switch__label--PaddingLeft: var(--pf-global--spacer--md);
-  --pf-c-switch--ColumnGap: var(--pf-c-switch__label--PaddingLeft);
-  --pf-c-switch__toggle-icon--FontSize: calc(var(--pf-c-switch--FontSize) * .625);
-  --pf-c-switch__toggle-icon--Color: var(--pf-global--Color--light-100);
-  --pf-c-switch__toggle-icon--Left: calc(var(--pf-c-switch--FontSize) * .4);
-  --pf-c-switch__toggle-icon--Offset: 0.125rem;
-  --pf-c-switch--LineHeight: var(--pf-global--LineHeight--md);
-  --pf-c-switch--Height: auto;
-  --pf-c-switch__input--checked__toggle--BackgroundColor: var(--pf-global--primary-color--100);
-  --pf-c-switch__input--checked__toggle--before--TranslateX: calc(100% + var(--pf-c-switch__toggle-icon--Offset));
-  --pf-c-switch__input--checked__label--Color: var(--pf-global--Color--dark-100);
-  --pf-c-switch__input--not-checked__label--Color: var(--pf-global--disabled-color--100);
-  --pf-c-switch__input--disabled__label--Color: var(--pf-global--disabled-color--100);
-  --pf-c-switch__input--disabled__toggle--BackgroundColor: var(--pf-global--disabled-color--200);
-  --pf-c-switch__input--disabled__toggle--before--BackgroundColor: var(--pf-global--palette--black-150);
-  --pf-c-switch__input--focus__toggle--OutlineWidth: var(--pf-global--BorderWidth--md);
-  --pf-c-switch__input--focus__toggle--OutlineOffset: var(--pf-global--spacer--sm);
-  --pf-c-switch__input--focus__toggle--OutlineColor: var(--pf-global--primary-color--100);
-  --pf-c-switch__toggle--Height: calc(var(--pf-c-switch--FontSize) * var(--pf-c-switch--LineHeight));
-  --pf-c-switch__toggle--BackgroundColor: var(--pf-global--palette--black-500);
-  --pf-c-switch__toggle--BorderRadius: var(--pf-c-switch__toggle--Height);
-  --pf-c-switch__toggle--before--Width: calc(var(--pf-c-switch--FontSize) - var(--pf-c-switch__toggle-icon--Offset));
-  --pf-c-switch__toggle--before--Height: var(--pf-c-switch__toggle--before--Width);
-  --pf-c-switch__toggle--before--Top: calc((var(--pf-c-switch__toggle--Height) - var(--pf-c-switch__toggle--before--Height)) / 2);
-  --pf-c-switch__toggle--before--Left: var(--pf-c-switch__toggle--before--Top);
-  --pf-c-switch__toggle--before--BackgroundColor: var(--pf-global--BackgroundColor--100);
-  --pf-c-switch__toggle--before--BorderRadius: var(--pf-global--BorderRadius--lg);
-  --pf-c-switch__toggle--before--BoxShadow: var(--pf-global--BoxShadow--md);
-  --pf-c-switch__toggle--before--Transition: transform .25s ease 0s;
-  --pf-c-switch__toggle--Width: calc(var(--pf-c-switch__toggle--Height) + var(--pf-c-switch__toggle-icon--Offset) + var(--pf-c-switch__toggle--before--Width));
-  --pf-c-switch__label--Color: var(--pf-global--Color--dark-100);
-  position: relative;
-  display: inline-grid;
-  grid-template-columns: auto;
-  grid-auto-columns: 1fr;
-  column-gap: var(--pf-c-switch--ColumnGap);
-  height: var(--pf-c-switch--Height);
-  font-size: var(--pf-c-switch--FontSize);
-  line-height: var(--pf-c-switch--LineHeight);
-  vertical-align: middle;
-  cursor: pointer;
-}
-
-.pf-c-switch.pf-m-reverse .pf-c-switch__label,
-.pf-c-switch.pf-m-reverse .pf-c-switch__toggle {
-  grid-row: 1;
-}
-
-.pf-c-switch.pf-m-reverse .pf-c-switch__label {
-  grid-column: 1;
-}
-
-.pf-c-switch__input {
-  position: absolute;
-  cursor: pointer;
-  opacity: 0;
-}
-
-.pf-c-switch__input:focus ~ .pf-c-switch__toggle {
-  outline: var(--pf-c-switch__input--focus__toggle--OutlineWidth) solid var(--pf-c-switch__input--focus__toggle--OutlineColor);
-  outline-offset: var(--pf-c-switch__input--focus__toggle--OutlineOffset);
-}
-
-.pf-c-switch__input:checked ~ .pf-c-switch__label {
-  color: var(--pf-c-switch__input--checked__label--Color);
-}
-
-.pf-c-switch__input:checked ~ .pf-c-switch__toggle {
-  background-color: var(--pf-c-switch__input--checked__toggle--BackgroundColor);
-}
-
-.pf-c-switch__input:checked ~ .pf-c-switch__toggle::before {
-  transform: translateX(var(--pf-c-switch__input--checked__toggle--before--TranslateX));
-}
-
-.pf-c-switch__input:checked ~ .pf-m-off {
-  display: none;
-}
-
-.pf-c-switch__input:not(:checked) ~ .pf-c-switch__label {
-  color: var(--pf-c-switch__input--not-checked__label--Color);
-}
-
-.pf-c-switch__input:not(:checked) ~ .pf-c-switch__toggle .pf-c-switch__toggle-icon {
-  display: none;
-  visibility: hidden;
-}
-
-.pf-c-switch__input:not(:checked) ~ .pf-m-on {
-  display: none;
-}
-
-.pf-c-switch__input:disabled {
-  cursor: not-allowed;
-}
-
-.pf-c-switch__input:disabled ~ .pf-c-switch__label {
-  color: var(--pf-c-switch__input--disabled__label--Color);
-  cursor: not-allowed;
-}
-
-.pf-c-switch__input:disabled ~ .pf-c-switch__toggle {
-  cursor: not-allowed;
-  background-color: var(--pf-c-switch__input--disabled__toggle--BackgroundColor);
-}
-
-.pf-c-switch__input:disabled ~ .pf-c-switch__toggle::before {
-  background-color: var(--pf-c-switch__input--disabled__toggle--before--BackgroundColor);
-}
-
-.pf-c-switch__toggle {
-  position: relative;
-  display: inline-block;
-  width: var(--pf-c-switch__toggle--Width);
-  height: var(--pf-c-switch__toggle--Height);
-  background-color: var(--pf-c-switch__toggle--BackgroundColor);
-  border-radius: var(--pf-c-switch__toggle--BorderRadius);
-}
-
-.pf-c-switch__toggle::before {
-  position: absolute;
-  top: var(--pf-c-switch__toggle--before--Top);
-  left: var(--pf-c-switch__toggle--before--Left);
-  display: block;
-  width: var(--pf-c-switch__toggle--before--Width);
-  height: var(--pf-c-switch__toggle--before--Height);
-  content: "";
-  background-color: var(--pf-c-switch__toggle--before--BackgroundColor);
-  border-radius: var(--pf-c-switch__toggle--before--BorderRadius);
-  box-shadow: var(--pf-c-switch__toggle--before--BoxShadow);
-  transition: var(--pf-c-switch__toggle--before--Transition);
-}
-
-.pf-c-switch__toggle-icon {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: var(--pf-c-switch__toggle-icon--Left);
-  display: flex;
-  align-items: center;
-  font-size: var(--pf-c-switch__toggle-icon--FontSize);
-  color: var(--pf-c-switch__toggle-icon--Color);
-}
-
-.pf-c-switch__label {
-  display: inline-block;
-  grid-column: 2;
-  color: var(--pf-c-switch__label--Color);
-  vertical-align: top;
-}
-
 .pf-c-tabs {
   --pf-c-tabs--inset: 0;
   --pf-c-tabs--Width: auto;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.204.0",
+  "version": "4.205.0",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -34,9 +34,9 @@
     "generate": "node scripts/copyStyles.js"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^4.55.0",
-    "@patternfly/react-styles": "^4.54.0",
-    "@patternfly/react-tokens": "^4.56.0",
+    "@patternfly/react-icons": "^4.56.0",
+    "@patternfly/react-styles": "^4.55.0",
+    "@patternfly/react-tokens": "^4.57.0",
     "focus-trap": "6.2.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "9116e7cc699cff22722794c15cda402c1cabf67b"
+  "gitHead": "aad64697166a03d35c3e711df51f25ec0d517623"
 }

package/src/demos/Tabs.md

@@ -445,7 +445,12 @@ TabsOpenWithSecondaryTabsDemo = () => {
 
 ### Nested tabs
 
-```js isFullscreen file="./Tabs/NestedTabsDemo.js"
+```js isFullscreen file="./examples/Tabs/NestedTabs.tsx"
+```
+
+### Nested, unindented tabs
+
+```js isFullscreen file="./examples/Tabs/NestedUnindentedTabs.tsx"
 ```
 
 ### Tables and tabs

package/src/demos/examples/DashboardWrapper.js

@@ -6,8 +6,11 @@ import {
   NavItem,
   NavList,
   Page,
+  PageSection,
   PageSidebar,
-  SkipToContent
+  SkipToContent,
+  Text,
+  TextContent
 } from '@patternfly/react-core';
 import DashboardHeader from './DashboardHeader';
 
@@ -21,6 +24,15 @@ export const DashboardBreadcrumb = (
     </BreadcrumbItem>
   </Breadcrumb>
 );
+
+export const PageTemplateTitle = (
+  <PageSection variant="light">
+    <TextContent>
+      <Text component="h1">Main title</Text>
+      <Text component="p">This is a full page demo.</Text>
+    </TextContent>
+  </PageSection>
+);
 export default class DashboardWrapper extends React.Component {
   constructor(props) {
     super(props);
@@ -45,7 +57,8 @@ export default class DashboardWrapper extends React.Component {
       sidebar,
       sidebarNavOpen,
       onPageResize,
-      hasNoBreadcrumb
+      hasNoBreadcrumb,
+      hasPageTemplateTitle
     } = this.props;
 
     let renderedBreadcrumb;
@@ -92,6 +105,7 @@ export default class DashboardWrapper extends React.Component {
         mainContainerId={mainContainerId ? mainContainerId : 'main-content-page-layout-default-nav'}
         onPageResize={onPageResize}
       >
+        {hasPageTemplateTitle && PageTemplateTitle}
         {children}
       </Page>
     );

package/src/demos/examples/Tabs/GrayTabs.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import {
   PageSection,
-  PageSectionVariants,
   Tabs,
   Tab,
   TabContent,
@@ -16,7 +15,7 @@ import {
   CardBody,
   CardHeader
 } from '@patternfly/react-core';
-import DashboardWrapper from '../../examples/DashboardWrapper';
+import DashboardWrapper from '../DashboardWrapper';
 
 export const GrayTabsDemo: React.FunctionComponent = () => {
   const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
@@ -126,12 +125,7 @@ export const GrayTabsDemo: React.FunctionComponent = () => {
   );
 
   return (
-    <DashboardWrapper hasNoBreadcrumb>
-      <PageSection isWidthLimited variant={PageSectionVariants.light}>
-        <Title headingLevel="h1" size="2xl">
-          Overview
-        </Title>
-      </PageSection>
+    <DashboardWrapper hasPageTemplateTitle>
       <PageSection type="tabs" isWidthLimited>
         <Tabs
           activeKey={activeTabKey}

package/src/demos/examples/Tabs/ModalTabs.tsx

@@ -81,7 +81,7 @@ export const ModalTabs: React.FunctionComponent = () => {
 
   return (
     <React.Fragment>
-      <DashboardWrapper mainContainerId="main-content-card-view-default-nav" breadcrumb={null}>
+      <DashboardWrapper mainContainerId="main-content-card-view-default-nav">
         <PageSection variant={PageSectionVariants.light}>
           <TextContent>
             <Text component="h1">Projects</Text>

package/src/demos/{Tabs/NestedTabsDemo.js → examples/Tabs/NestedTabs.tsx}

@@ -6,7 +6,6 @@ import {
   Grid,
   GridItem,
   PageSection,
-  PageSectionVariants,
   Tabs,
   Tab,
   TabContent,
@@ -16,17 +15,17 @@ import {
   Flex,
   FlexItem
 } from '@patternfly/react-core';
-import DashboardWrapper from '../examples/DashboardWrapper';
+import DashboardWrapper from '../DashboardWrapper';
 
-export const NestedTabsDemo = () => {
+export const NestedTabs: React.FunctionComponent = () => {
   const [activeTabKey, setActiveTabKey] = React.useState(0);
   const [activeNestedTabKey, setActiveNestedTabKey] = React.useState(10);
 
   // Toggle currently active tab
-  const handleTabClick = (_, tabIndex) => setActiveTabKey(tabIndex);
+  const handleTabClick = (tabIndex: number) => setActiveTabKey(tabIndex);
 
   // Toggle currently active nested tab
-  const handleNestedTabClick = (_, tabIndex) => setActiveNestedTabKey(tabIndex);
+  const handleNestedTabClick = (tabIndex: number) => setActiveNestedTabKey(tabIndex);
 
   const tabContent = (
     <Grid hasGutter>
@@ -41,7 +40,7 @@ export const NestedTabsDemo = () => {
                 <Tabs
                   activeKey={activeNestedTabKey}
                   isSecondary
-                  onSelect={handleNestedTabClick}
+                  onSelect={(_event, tabIndex) => handleNestedTabClick(Number(tabIndex))}
                   id="nested-tabs-example-nested-tabs-list"
                 >
                   <Tab eventKey={10} title={<TabTitleText>Cluster</TabTitleText>} tabContentId={`tabContent${10}`} />
@@ -126,14 +125,14 @@ export const NestedTabsDemo = () => {
   );
 
   return (
-    <DashboardWrapper hasNoBreadcrumb>
-      <PageSection isWidthLimited variant={PageSectionVariants.light}>
-        <Title headingLevel="h1" size="2xl">
-          Overview
-        </Title>
-      </PageSection>
+    <DashboardWrapper hasPageTemplateTitle>
       <PageSection type="tabs" isWidthLimited>
-        <Tabs activeKey={activeTabKey} onSelect={handleTabClick} usePageInsets id="nested-tabs-example-tabs-list">
+        <Tabs
+          activeKey={activeTabKey}
+          onSelect={(_event, tabIndex) => handleTabClick(Number(tabIndex))}
+          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>

package/src/demos/examples/Tabs/NestedUnindentedTabs.tsx

@@ -0,0 +1,174 @@
+import React from 'react';
+import {
+  Card,
+  CardHeader,
+  CardBody,
+  Grid,
+  GridItem,
+  PageSection,
+  Tabs,
+  Tab,
+  TabContent,
+  TabContentBody,
+  TabTitleText,
+  Title,
+  Text,
+  TextContent,
+  TitleSizes
+} from '@patternfly/react-core';
+import DashboardWrapper from '../DashboardWrapper';
+
+export const NestedUnindentedTabs: React.FunctionComponent = () => {
+  const [activeTabKey, setActiveTabKey] = React.useState(1);
+  const [activeNestedTabKey, setActiveNestedTabKey] = React.useState(10);
+
+  // Toggle currently active tab
+  const handleTabClick = (tabIndex: number) => setActiveTabKey(tabIndex);
+
+  // Toggle currently active nested tab
+  const handleNestedTabClick = (tabIndex: number) => setActiveNestedTabKey(tabIndex);
+
+  const tabContent = (
+    <Grid hasGutter>
+      <GridItem>
+        <CardHeader>
+          <Title headingLevel="h1" size={TitleSizes['2xl']}>
+            Get started with Red Hat Enterprise Linux
+          </Title>
+        </CardHeader>
+      </GridItem>
+      <GridItem>
+        <Tabs
+          activeKey={activeNestedTabKey}
+          isSecondary
+          onSelect={(_event, tabIndex) => handleNestedTabClick(Number(tabIndex))}
+          id="nested-tabs-example-nested-tabs-list"
+        >
+          <Tab eventKey={10} title={<TabTitleText>x86 architecture</TabTitleText>} tabContentId={`tabContent${10}`} />
+          <Tab
+            eventKey={11}
+            title={<TabTitleText>Additional Architectures</TabTitleText>}
+            tabContentId={`tabContent${11}`}
+          />
+        </Tabs>
+      </GridItem>
+      <GridItem>
+        <TabContent
+          key={10}
+          eventKey={10}
+          id={`tabContent${10}`}
+          activeKey={activeNestedTabKey}
+          hidden={10 !== activeNestedTabKey}
+        >
+          <TabContentBody>
+            <Grid hasGutter>
+              <GridItem>
+                <TextContent>
+                  <Text>To perform a standard x86_64 installation using the GUI, you'll need to:</Text>
+                </TextContent>
+              </GridItem>
+              <Grid md={6} xl2={3} hasGutter>
+                <GridItem>
+                  <Card isFullHeight>
+                    <CardHeader>Check system requirements</CardHeader>
+                    <CardBody>
+                      Your physical or virtual machine should meet the <a href="#">system requirement</a>.
+                    </CardBody>
+                  </Card>
+                </GridItem>
+
+                <GridItem>
+                  <Card isFullHeight>
+                    <CardHeader>Download an installation ISO image</CardHeader>
+                    <CardBody>
+                      {' '}
+                      <a href="#">Download</a> the binary DVD ISO.
+                    </CardBody>
+                  </Card>
+                </GridItem>
+                <GridItem>
+                  <Card isFullHeight>
+                    <CardHeader>Create a bootable installation media</CardHeader>
+                    <CardBody>
+                      {' '}
+                      <a href="#">Create</a> a bootable installation media, for example a USB flash drive.
+                    </CardBody>
+                  </Card>
+                </GridItem>
+                <GridItem>
+                  <Card isFullHeight>
+                    <CardHeader>Install and register your system</CardHeader>
+                    <CardBody>
+                      Boot the installation, register your system, attach RHEL subscriptions, and install RHEL from the
+                      Red Hat Content Delivery Network (CDN) using the GUI.
+                    </CardBody>
+                  </Card>
+                </GridItem>
+              </Grid>
+            </Grid>
+          </TabContentBody>
+        </TabContent>
+        <TabContent
+          key={11}
+          eventKey={11}
+          id={`tabContent${11}`}
+          activeKey={activeNestedTabKey}
+          hidden={11 !== activeNestedTabKey}
+        >
+          <TabContentBody>Additional architectures 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>
+      </GridItem>
+    </Grid>
+  );
+
+  return (
+    <DashboardWrapper hasPageTemplateTitle>
+      <PageSection type="tabs" isWidthLimited variant="light">
+        <Tabs
+          isBox
+          activeKey={activeTabKey}
+          onSelect={(_event, tabIndex) => handleTabClick(Number(tabIndex))}
+          usePageInsets
+          id="nested-tabs-example-tabs-list"
+        >
+          <Tab eventKey={0} title={<TabTitleText>What's new</TabTitleText>} tabContentId={`tabContent${0}`} />
+          <Tab eventKey={1} title={<TabTitleText>Get started</TabTitleText>} tabContentId={`tabContent${1}`} />
+          <Tab eventKey={2} title={<TabTitleText>Knowledge</TabTitleText>} tabContentId={`tabContent${2}`} />
+          <Tab eventKey={3} title={<TabTitleText>Support</TabTitleText>} tabContentId={`tabContent${3}`} />
+        </Tabs>
+      </PageSection>
+      <PageSection variant="light">
+        <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
+          <TabContentBody>What's new panel</TabContentBody>
+        </TabContent>
+        <TabContent key={1} eventKey={1} id={`tabContent${1}`} activeKey={activeTabKey} hidden={1 !== activeTabKey}>
+          <TabContentBody>{tabContent}</TabContentBody>
+        </TabContent>
+        <TabContent key={2} eventKey={2} id={`tabContent${2}`} activeKey={activeTabKey} hidden={2 !== activeTabKey}>
+          <TabContentBody>Knowledge panel</TabContentBody>
+        </TabContent>
+        <TabContent key={3} eventKey={3} id={`tabContent${3}`} activeKey={activeTabKey} hidden={3 !== activeTabKey}>
+          <TabContentBody>Support Panel</TabContentBody>
+        </TabContent>
+      </PageSection>
+    </DashboardWrapper>
+  );
+};

package/src/demos/examples/Tabs/TabsAndTable.tsx

@@ -400,7 +400,7 @@ export const TablesAndTabs = () => {
   );
 
   return (
-    <DashboardWrapper hasNoBreadcrumb>
+    <DashboardWrapper>
       <React.Fragment>
         <PageSection variant={PageSectionVariants.light}>
           <Title headingLevel="h1" size="2xl">