@patternfly/react-core 4.204.0 → 4.206.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.204.0",
+  "version": "4.206.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,16 +34,16 @@
     "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.57.0",
+    "@patternfly/react-styles": "^4.56.0",
+    "@patternfly/react-tokens": "^4.58.0",
     "focus-trap": "6.2.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2",
     "tslib": "^2.0.0"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "4.190.0",
+    "@patternfly/patternfly": "4.192.0",
     "@rollup/plugin-commonjs": "^21.0.0",
     "@rollup/plugin-node-resolve": "^13.0.0",
     "@rollup/plugin-replace": "^3.0.0",
@@ -60,5 +60,5 @@
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
   },
-  "gitHead": "9116e7cc699cff22722794c15cda402c1cabf67b"
+  "gitHead": "b29e37a88fa7fee5dde681b95a45957e348711fd"
 }

package/src/components/HelperText/HelperText.tsx

@@ -9,17 +9,33 @@ export interface HelperTextProps extends React.HTMLProps<HTMLDivElement | HTMLUL
   className?: string;
   /** Component type of the helper text container */
   component?: 'div' | 'ul';
+  /** ID for the helper text container. The value of this prop can be passed into a form component's
+   * aria-describedby prop when you intend for all helper text items to be announced to
+   * assistive technologies.
+   */
+  id?: string;
+  /** Flag for indicating whether the helper text container is a live region. Use this prop when you
+   * expect or intend for any helper text items within the container to be dynamically updated.
+   */
+  isLiveRegion?: boolean;
 }
 
 export const HelperText: React.FunctionComponent<HelperTextProps> = ({
   children,
   className,
   component = 'div',
+  id,
+  isLiveRegion = false,
   ...props
 }: HelperTextProps) => {
   const Component = component as any;
   return (
-    <Component className={css(styles.helperText, className)} {...props}>
+    <Component
+      id={id}
+      className={css(styles.helperText, className)}
+      {...(isLiveRegion && { 'aria-live': 'polite' })}
+      {...props}
+    >
       {children}
     </Component>
   );

package/src/components/HelperText/HelperTextItem.tsx

@@ -17,10 +17,18 @@ export interface HelperTextItemProps extends React.HTMLProps<HTMLDivElement | HT
   variant?: 'default' | 'indeterminate' | 'warning' | 'success' | 'error';
   /** Custom icon prefixing the helper text. This property will override the default icon paired with each helper text variant. */
   icon?: React.ReactNode;
-  /** Flag indicating the helper text item is dynamic. */
+  /** Flag indicating the helper text item is dynamic. This prop should be used when the
+   * text content of the helper text item will never change, but the icon and styling will
+   * be dynamically updated via the `variant` prop.
+   */
   isDynamic?: boolean;
   /** Flag indicating the helper text should have an icon. Dynamic helper texts include icons by default while static helper texts do not. */
   hasIcon?: boolean;
+  /** ID for the helper text item. The value of this prop can be passed into a form component's
+   * aria-describedby prop when you intend for only specific helper text items to be announced to
+   * assistive technologies.
+   */
+  id?: string;
 }
 
 const variantStyle = {
@@ -39,12 +47,14 @@ export const HelperTextItem: React.FunctionComponent<HelperTextItemProps> = ({
   icon,
   isDynamic = false,
   hasIcon = isDynamic,
+  id,
   ...props
 }: HelperTextItemProps) => {
   const Component = component as any;
   return (
     <Component
       className={css(styles.helperTextItem, variantStyle[variant], isDynamic && styles.modifiers.dynamic, className)}
+      id={id}
       {...props}
     >
       {icon && (

package/src/demos/HelperText.md

@@ -0,0 +1,48 @@
+---
+id: Helper text
+section: components
+---
+
+import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
+import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+
+## Demos
+
+### Static variant with static text
+
+In this demo, the static variant of the helper text item component (the default) is used, and the text itself will always be visible to users and will never change.
+
+The `aria-describedby` attribute is passed into the text input component and is linked to the `id` of the helper text component. This allows assistive technologies to notify users of the helper text content when the input receives focus, which can be helpful if a user navigates away from and then back to the input.
+
+Note that this demo does not validate the text input component. When it would need to be validated, there are other steps that would need to be taken to make it accessible, such as passing in `aria-invalid` and `aria-live` attributes to the appropriate components.
+
+```ts file='./examples/HelperText/HelperTextStaticVariantStaticText.tsx'
+```
+
+### Static variant with dynamic text
+
+In this demo, the static variant of the helper text item component (the default) is used with the `hasIcon` prop passed in when there is an error, and the text itself dynamically updates based on the input value. When the input has a value of `johndoe`, an error is rendered to simulate a username already being taken, while an empty input renders other helper text. When the input is valid, no helper text is rendered.
+
+The `aria-describedby` attribute is passed into the text input component and is linked to the `id` of the helper text component. Similar to the static variant with static text demo, this allows assistive technologies to notify users of the helper text content when the navigating to the input.
+
+An `aria-live` region is passed into the helper text component, which allows assistive technologies to announce to users when any dynamic content within it updates, such as when the text content changes or gets rendered. Without this attribute, a user would have to navigate out of and back into the input field multiple times to check the status of their input.
+
+The `aria-invalid` attribute is also passed into the text input, which allows assistive technologies to notify users that an input is invalid. When this attribute is true, it's important that users are notified of what is causing the input to be invalid; in this case, `aria-describedby` and `aria-live` help accomplish this.
+
+```ts file='./examples/HelperText/HelperTextStaticVariantDynamicText.tsx'
+```
+
+### Dynamic variant with static text
+
+In this demo, the helper text item components have the `isDynamic` prop passed in. While the text content of the components is static, the icons and styling will change as the validation of the input changes.
+
+The `aria-describedby` attribute is passed into the text input component and is linked to the id attribute of a helper text item that results in an invalid input. This will allow assistive technologies to only be notified of any outstanding criteria that has not been met when the input receives focus.
+
+Similar to the static variant with dynamic text example, the `aria-invalid` attribute is passed in, allowing assistive technologies to announce to users when at least 1 item is causing the input to be invalid.
+
+```ts file='./examples/HelperText/HelperTextDynamicVariantStaticText.tsx'
+```

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/HelperText/HelperTextDynamicVariantStaticText.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { Form, FormGroup, FormHelperText, TextInput, HelperText, HelperTextItem } from '@patternfly/react-core';
+
+export const HelperTextDynamicVariantDynamicText: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  const [inputValidation, setInputValidation] = React.useState({
+    ruleLength: 'indeterminate',
+    ruleCharacterTypes: 'indeterminate'
+  });
+  const { ruleLength, ruleCharacterTypes } = inputValidation;
+
+  React.useEffect(() => {
+    let lengthStatus = ruleLength;
+    let typeStatus = ruleCharacterTypes;
+
+    if (value === '') {
+      setInputValidation({
+        ruleLength: 'indeterminate',
+        ruleCharacterTypes: 'indeterminate'
+      });
+      return;
+    }
+
+    if (!/\d/g.test(value)) {
+      typeStatus = 'error';
+    } else {
+      typeStatus = 'success';
+    }
+
+    if (value.length < 5) {
+      lengthStatus = 'error';
+    } else {
+      lengthStatus = 'success';
+    }
+
+    setInputValidation({ ruleLength: lengthStatus, ruleCharacterTypes: typeStatus });
+  }, [value, ruleLength, ruleCharacterTypes]);
+
+  const handleInputChange = (inputValue: string) => {
+    setValue(inputValue);
+  };
+
+  const filterValidations = () => Object.keys(inputValidation).filter(item => inputValidation[item] !== 'success');
+
+  return (
+    <Form>
+      <FormGroup label="Username" isRequired fieldId="login-input-helper-text3">
+        <TextInput
+          isRequired
+          type="text"
+          id="login-input-helper-text3"
+          name="login-input-helper-text3"
+          onChange={handleInputChange}
+          aria-describedby={filterValidations().join(' ')}
+          aria-invalid={ruleCharacterTypes === 'error' || ruleLength === 'error'}
+          value={value}
+        />
+        <FormHelperText isHidden={false} component="div">
+          <HelperText component="ul">
+            <HelperTextItem component="li" id="ruleLength" isDynamic variant={ruleLength as any}>
+              Must be at least 5 characters in length
+            </HelperTextItem>
+            <HelperTextItem component="li" id="ruleCharacterTypes" isDynamic variant={ruleCharacterTypes as any}>
+              Must include at least 1 number
+            </HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      </FormGroup>
+    </Form>
+  );
+};

package/src/demos/examples/HelperText/HelperTextStaticVariantDynamicText.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Form, FormGroup, FormHelperText, TextInput, HelperText, HelperTextItem } from '@patternfly/react-core';
+
+export const HelperTextStaticVariantDynamicText: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+  const [inputValidation, setInputValidation] = React.useState('default');
+
+  const handleInputChange = (inputValue: string) => {
+    setValue(inputValue);
+  };
+
+  React.useEffect(() => {
+    if (value === '') {
+      setInputValidation('default');
+    } else if (value === 'johndoe') {
+      setInputValidation('error');
+    } else {
+      setInputValidation('success');
+    }
+  }, [value]);
+
+  return (
+    <Form>
+      <FormGroup label="Username" isRequired fieldId="login-input-helper-text2">
+        <TextInput
+          isRequired
+          type="text"
+          id="login-input-helper-text2"
+          name="login-input-helper-text2"
+          onChange={handleInputChange}
+          aria-describedby="helper-text2"
+          aria-invalid={inputValidation === 'error'}
+          value={value}
+        />
+        <FormHelperText isHidden={false} component="div">
+          <HelperText id="helper-text2" aria-live="polite">
+            {inputValidation !== 'success' && (
+              <HelperTextItem variant={inputValidation as any} hasIcon={inputValidation === 'error'}>
+                {inputValidation === 'default' ? 'Please enter a username' : 'Username already exists'}
+              </HelperTextItem>
+            )}
+          </HelperText>
+        </FormHelperText>
+      </FormGroup>
+    </Form>
+  );
+};

package/src/demos/examples/HelperText/HelperTextStaticVariantStaticText.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Form, FormGroup, FormHelperText, TextInput, HelperText, HelperTextItem } from '@patternfly/react-core';
+
+export const HelperTextStaticVariantStaticText: React.FunctionComponent = () => {
+  const [value, setValue] = React.useState('');
+
+  const handleInputChange = (inputValue: string) => {
+    setValue(inputValue);
+  };
+
+  return (
+    <Form>
+      <FormGroup label="Middle Name" fieldId="login-input-helper-text1">
+        <TextInput
+          type="text"
+          id="login-input-helper-text1"
+          name="login-input-helper-text1"
+          onChange={handleInputChange}
+          aria-describedby="helper-text1"
+          value={value}
+        />
+        <FormHelperText isHidden={false} component="div">
+          <HelperText id="helper-text1">
+            <HelperTextItem variant={'default'}>Enter your middle name or your middle initial</HelperTextItem>
+          </HelperText>
+        </FormHelperText>
+      </FormGroup>
+    </Form>
+  );
+};

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">