@patternfly/react-core 6.5.0-prerelease.5 → 6.5.0-prerelease.51

package/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsx

@@ -42,8 +42,8 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
+import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
@@ -283,10 +283,10 @@ export const PrimaryDetailFullPage: React.FunctionComponent = () => {
                         <CubeIcon /> 5
                       </FlexItem>
                       <FlexItem>
-                        <CheckCircleIcon /> 7
+                        <RhUiCheckCircleFillIcon /> 7
                       </FlexItem>
                       <FlexItem>
-                        <ExclamationTriangleIcon /> 5
+                        <RhUiWarningFillIcon /> 5
                       </FlexItem>
                       <FlexItem>
                         <TimesCircleIcon /> 5
@@ -380,10 +380,10 @@ export const PrimaryDetailFullPage: React.FunctionComponent = () => {
                         <CubeIcon /> 5
                       </FlexItem>
                       <FlexItem>
-                        <CheckCircleIcon /> 7
+                        <RhUiCheckCircleFillIcon /> 7
                       </FlexItem>
                       <FlexItem>
-                        <ExclamationTriangleIcon /> 5
+                        <RhUiWarningFillIcon /> 5
                       </FlexItem>
                       <FlexItem>
                         <TimesCircleIcon /> 5

package/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsx

@@ -42,8 +42,8 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
+import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
@@ -283,10 +283,10 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
                         <CubeIcon /> 5
                       </FlexItem>
                       <FlexItem>
-                        <CheckCircleIcon /> 7
+                        <RhUiCheckCircleFillIcon /> 7
                       </FlexItem>
                       <FlexItem>
-                        <ExclamationTriangleIcon /> 5
+                        <RhUiWarningFillIcon /> 5
                       </FlexItem>
                       <FlexItem>
                         <TimesCircleIcon /> 5
@@ -380,10 +380,10 @@ export const PrimaryDetailInlineModifier: React.FunctionComponent = () => {
                         <CubeIcon /> 5
                       </FlexItem>
                       <FlexItem>
-                        <CheckCircleIcon /> 7
+                        <RhUiCheckCircleFillIcon /> 7
                       </FlexItem>
                       <FlexItem>
-                        <ExclamationTriangleIcon /> 5
+                        <RhUiWarningFillIcon /> 5
                       </FlexItem>
                       <FlexItem>
                         <TimesCircleIcon /> 5

package/src/demos/examples/Progress/ProgressBasic.tsx

@@ -0,0 +1,32 @@
+import { useState } from 'react';
+import { Progress, Button, Stack, StackItem } from '@patternfly/react-core';
+import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
+
+export const ProgressBasic: React.FunctionComponent = () => {
+  const [currentValue, setCurrentValue] = useState(0);
+
+  const onProgressUpdate = (nextValue) => {
+    setCurrentValue(nextValue);
+  };
+
+  return (
+    <Stack>
+      <StackItem>
+        <Button onClick={() => onProgressUpdate(currentValue - 10)} isDisabled={currentValue === 0}>
+          Decrease value
+        </Button>{' '}
+        <Button onClick={() => onProgressUpdate(currentValue + 10)} isDisabled={currentValue === 100}>
+          Increase value
+        </Button>
+        <br />
+        <br />
+      </StackItem>
+      <StackItem>
+        <div className={accessibilityStyles.screenReader} aria-live="polite">
+          {`Progress value is ${currentValue}%.`}
+        </div>
+        <Progress value={currentValue} title="Title" />
+      </StackItem>
+    </Stack>
+  );
+};

package/src/demos/examples/Progress/ProgressWithOnlyIncreasing.tsx

@@ -0,0 +1,33 @@
+import { useState } from 'react';
+import { Progress, Button, Stack, StackItem } from '@patternfly/react-core';
+
+export const ProgressWithOnlyIncreasing: React.FunctionComponent = () => {
+  const [currentValue, setCurrentValue] = useState(0);
+
+  const onProgressUpdate = (nextValue) => {
+    if (nextValue > currentValue) {
+      setCurrentValue(nextValue);
+    }
+  };
+
+  return (
+    <Stack>
+      <StackItem>
+        <Button onClick={() => onProgressUpdate(currentValue - 10)} isDisabled={currentValue === 0}>
+          Decrease value
+        </Button>{' '}
+        <Button onClick={() => onProgressUpdate(currentValue + 10)} isDisabled={currentValue === 100}>
+          Increase value
+        </Button>
+        <br />
+        <br />
+      </StackItem>
+      <StackItem>
+        <div className={accessibilityStyles.screenReader} aria-live="polite">
+          {`Progress value is ${currentValue}%.`}
+        </div>
+        <Progress value={currentValue} title="Title" />
+      </StackItem>
+    </Stack>
+  );
+};

package/src/demos/examples/ProgressStepper/ProgressStepperBasic.tsx

@@ -0,0 +1,72 @@
+import { useState } from 'react';
+import { ProgressStepper, ProgressStep, Button, Stack, StackItem } from '@patternfly/react-core';
+import accessibilityStyles from '@patternfly/react-styles/css/utilities/Accessibility/accessibility';
+
+export const ProgressStepperBasic: React.FunctionComponent = () => {
+  const [currentStep, setCurrentStep] = useState(0);
+
+  const steps = [
+    { title: 'First step', id: 'step1' },
+    { title: 'Second step', id: 'step2' },
+    { title: 'Third step', id: 'step3' },
+    { title: 'Fourth step', id: 'step4' },
+    { title: 'Fifth step', id: 'step5' }
+  ];
+
+  const onStepForward = (_event) => {
+    const next = currentStep + 1;
+    setCurrentStep(next <= 5 ? next : 4);
+  };
+
+  const onStepBack = (_event) => {
+    const next = currentStep - 1;
+    setCurrentStep(next > 0 ? next : 0);
+  };
+
+  return (
+    <Stack>
+      <StackItem>
+        <Button onClick={onStepBack} isDisabled={currentStep === 0}>
+          Step back
+        </Button>{' '}
+        <Button onClick={onStepForward} isDisabled={currentStep === 5}>
+          Step forward
+        </Button>
+        <br />
+        <br />
+      </StackItem>
+      <StackItem>
+        <div className={accessibilityStyles.screenReader} aria-live="polite">
+          {steps[currentStep] && `On ${steps[currentStep].title}.`}
+          {steps[currentStep - 1] && `${steps[currentStep - 1].title} was successful.`}
+        </div>
+        <ProgressStepper>
+          {steps.map((step, index) => {
+            let variant = 'pending';
+            let ariaLabel = 'pending step';
+            if (index < currentStep) {
+              variant = 'success';
+              ariaLabel = 'completed step, step with success';
+            } else if (index === currentStep) {
+              variant = 'info';
+              ariaLabel = 'current step';
+            }
+
+            return (
+              <ProgressStep
+                id={index}
+                titleId={step.id}
+                key={index}
+                variant={variant}
+                isCurrent={index === currentStep}
+                aria-label={ariaLabel}
+              >
+                {step.title}
+              </ProgressStep>
+            );
+          })}
+        </ProgressStepper>
+      </StackItem>
+    </Stack>
+  );
+};

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

@@ -0,0 +1,185 @@
+import { useState } from 'react';
+import {
+  PageSection,
+  PageBreadcrumb,
+  Breadcrumb,
+  BreadcrumbItem,
+  Tabs,
+  Tab,
+  TabContent,
+  TabContentBody,
+  TabTitleText,
+  Title,
+  DescriptionList,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  DescriptionListDescription,
+  Label,
+  LabelGroup,
+  Flex,
+  FlexItem
+} from '@patternfly/react-core';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-check-circle-fill-icon';
+import RhUiInformationFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-information-fill-icon';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+
+export const TabsOpen: React.FunctionComponent = () => {
+  const [activeTabKey, setActiveTabKey] = useState(0);
+
+  // Toggle currently active tab
+  const handleTabClick = (_event: React.MouseEvent<HTMLElement>, tabIndex: number | string) => {
+    setActiveTabKey(tabIndex);
+  };
+
+  const tabsBreadcrumb = (
+    <PageBreadcrumb isWidthLimited>
+      <Breadcrumb>
+        <BreadcrumbItem to="#">Overview</BreadcrumbItem>
+        <BreadcrumbItem to="#">Pods</BreadcrumbItem>
+        <BreadcrumbItem to="#" isActive>
+          Pod details{' '}
+        </BreadcrumbItem>
+      </Breadcrumb>
+    </PageBreadcrumb>
+  );
+
+  const tabContent = (
+    <Flex direction={{ default: 'column' }}>
+      <FlexItem spacer={{ default: 'spacerLg' }}>
+        <Title headingLevel="h2" size="lg" className={spacing.mtSm} id="open-tabs-example-tabs-list-details-title">
+          Pod details
+        </Title>
+      </FlexItem>
+      <FlexItem>
+        <DescriptionList columnModifier={{ lg: '2Col' }} aria-labelledby="open-tabs-example-tabs-list-details-title">
+          <DescriptionListGroup>
+            <DescriptionListTerm>Name</DescriptionListTerm>
+            <DescriptionListDescription>3scale-control-fccb6ddb9-phyqv9</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Status</DescriptionListTerm>
+            <DescriptionListDescription>
+              <Flex spacer={{ default: 'spacerLg' }}>
+                <FlexItem>
+                  <RhUiCheckCircleFillIcon />
+                </FlexItem>
+                <FlexItem>Running</FlexItem>
+              </Flex>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Namespace</DescriptionListTerm>
+            <DescriptionListDescription>
+              <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                <FlexItem>
+                  <Label color="teal">NS</Label>
+                </FlexItem>
+                <FlexItem>
+                  <a href="#">knative-serving-ingress</a>
+                </FlexItem>
+              </Flex>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Restart policy</DescriptionListTerm>
+            <DescriptionListDescription>Always restart</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Labels</DescriptionListTerm>
+            <DescriptionListDescription>
+              <LabelGroup>
+                <Label>app=3scale-gateway</Label>
+                <Label>pod-template-has=6747686899</Label>
+              </LabelGroup>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Active deadline seconds</DescriptionListTerm>
+            <DescriptionListDescription>Not configured</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Tolerations</DescriptionListTerm>
+            <DescriptionListDescription>stuff</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Pod IP</DescriptionListTerm>
+            <DescriptionListDescription>10.345.2.197</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Annotations</DescriptionListTerm>
+            <DescriptionListDescription>stuff</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Node</DescriptionListTerm>
+            <DescriptionListDescription>
+              <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                <FlexItem>
+                  <Label color="purple">N</Label>
+                </FlexItem>
+                <FlexItem>ip-10-0-233-118.us-east-2.computer.external</FlexItem>
+              </Flex>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Created at</DescriptionListTerm>
+            <DescriptionListDescription>
+              <time>Oct 15, 1:51 pm</time>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+        </DescriptionList>
+      </FlexItem>
+    </Flex>
+  );
+
+  return (
+    <DashboardWrapper hasNoBreadcrumb>
+      {tabsBreadcrumb}
+      <PageSection isWidthLimited aria-label="Pod header">
+        <Flex
+          spaceItems={{ default: 'spaceItemsMd' }}
+          alignItems={{ default: 'alignItemsFlexStart' }}
+          flexWrap={{ default: 'noWrap' }}
+        >
+          <FlexItem>
+            <Label color="blue">N</Label>
+          </FlexItem>
+          <FlexItem>
+            <Title headingLevel="h1" size="2xl">
+              3scale-control-fccb6ddb9-phyqv9
+            </Title>
+          </FlexItem>
+          <FlexItem flex={{ default: 'flexNone' }}>
+            <Label icon={<RhUiInformationFillIcon />}>Running</Label>
+          </FlexItem>
+        </Flex>
+      </PageSection>
+      <PageSection type="tabs" isWidthLimited aria-label="Pod navigation tabs">
+        <Tabs activeKey={activeTabKey} onSelect={handleTabClick} usePageInsets id="open-tabs-example-tabs-list">
+          <Tab eventKey={0} title={<TabTitleText>Details</TabTitleText>} tabContentId={`tabContent${0}`} />
+          <Tab eventKey={1} title={<TabTitleText>YAML</TabTitleText>} tabContentId={`tabContent${1}`} />
+          <Tab eventKey={2} title={<TabTitleText>Environment</TabTitleText>} tabContentId={`tabContent${2}`} />
+          <Tab eventKey={3} title={<TabTitleText>Events</TabTitleText>} tabContentId={`tabContent${3}`} />
+          <Tab eventKey={4} title={<TabTitleText>Terminal</TabTitleText>} tabContentId={`tabContent${4}`} />
+        </Tabs>
+      </PageSection>
+      <PageSection isWidthLimited aria-label="Pod content">
+        <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>YAML panel</TabContentBody>
+        </TabContent>
+        <TabContent key={2} eventKey={2} id={`tabContent${2}`} activeKey={activeTabKey} hidden={2 !== activeTabKey}>
+          <TabContentBody>Environment panel</TabContentBody>
+        </TabContent>
+        <TabContent key={3} eventKey={3} id={`tabContent${3}`} activeKey={activeTabKey} hidden={3 !== activeTabKey}>
+          <TabContentBody>Events panel</TabContentBody>
+        </TabContent>
+        <TabContent key={4} eventKey={4} id={`tabContent${4}`} activeKey={activeTabKey} hidden={4 !== activeTabKey}>
+          <TabContentBody>Terminal panel</TabContentBody>
+        </TabContent>
+      </PageSection>
+    </DashboardWrapper>
+  );
+};

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

@@ -0,0 +1,228 @@
+import { useState } from 'react';
+import {
+  PageSection,
+  PageBreadcrumb,
+  Breadcrumb,
+  BreadcrumbItem,
+  Tabs,
+  Tab,
+  TabContent,
+  TabContentBody,
+  TabTitleText,
+  Title,
+  DescriptionList,
+  DescriptionListGroup,
+  DescriptionListTerm,
+  DescriptionListDescription,
+  Label,
+  LabelGroup,
+  Flex,
+  FlexItem
+} from '@patternfly/react-core';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-check-circle-fill-icon';
+import RhUiInformationFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-information-fill-icon';
+import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+
+export const TabsOpenWithSecondaryTabs: React.FunctionComponent = () => {
+  const [activeTabKey, setActiveTabKey] = useState<number>(0);
+  const [activeTabKeySecondary, setActiveTabKeySecondary] = useState<number>(10);
+
+  // Toggle currently active tab
+  const handleTabClick = (_event: React.MouseEvent<HTMLElement>, tabIndex: number) => {
+    setActiveTabKey(tabIndex);
+  };
+
+  // Toggle currently active secondary tab
+  const handleTabClickSecondary = (_event: React.MouseEvent<HTMLElement>, tabIndex: number) => {
+    setActiveTabKeySecondary(tabIndex);
+  };
+
+  const tabsBreadcrumb = (
+    <PageBreadcrumb isWidthLimited>
+      <Breadcrumb>
+        <BreadcrumbItem to="#">Overview</BreadcrumbItem>
+        <BreadcrumbItem to="#">Pods</BreadcrumbItem>
+        <BreadcrumbItem to="#" isActive>
+          Pod details{' '}
+        </BreadcrumbItem>
+      </Breadcrumb>
+    </PageBreadcrumb>
+  );
+
+  const tabContent = (
+    <Flex direction={{ default: 'column' }}>
+      <FlexItem spacer={{ default: 'spacerLg' }}>
+        <Title headingLevel="h2" size="lg" className={spacing.mtSm} id="open-tabs-example-tabs-list-details-title">
+          Pod details
+        </Title>
+      </FlexItem>
+      <FlexItem>
+        <DescriptionList columnModifier={{ lg: '2Col' }} aria-labelledby="open-tabs-example-tabs-list-details-title">
+          <DescriptionListGroup>
+            <DescriptionListTerm>Name</DescriptionListTerm>
+            <DescriptionListDescription>3scale-control-fccb6ddb9-phyqv9</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Status</DescriptionListTerm>
+            <DescriptionListDescription>
+              <Flex spacer={{ default: 'spacerLg' }}>
+                <FlexItem>
+                  <RhUiCheckCircleFillIcon />
+                </FlexItem>
+                <FlexItem>Running</FlexItem>
+              </Flex>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Namespace</DescriptionListTerm>
+            <DescriptionListDescription>
+              <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                <FlexItem>
+                  <Label color="teal">NS</Label>
+                </FlexItem>
+                <FlexItem>
+                  <a href="#">knative-serving-ingress</a>
+                </FlexItem>
+              </Flex>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Restart policy</DescriptionListTerm>
+            <DescriptionListDescription>Always restart</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Labels</DescriptionListTerm>
+            <DescriptionListDescription>
+              <LabelGroup>
+                <Label>app=3scale-gateway</Label>
+                <Label>pod-template-has=6747686899</Label>
+              </LabelGroup>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Active deadline seconds</DescriptionListTerm>
+            <DescriptionListDescription>Not configured</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Tolerations</DescriptionListTerm>
+            <DescriptionListDescription>stuff</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Pod IP</DescriptionListTerm>
+            <DescriptionListDescription>10.345.2.197</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Annotations</DescriptionListTerm>
+            <DescriptionListDescription>stuff</DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Node</DescriptionListTerm>
+            <DescriptionListDescription>
+              <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+                <FlexItem>
+                  <Label color="purple">N</Label>
+                </FlexItem>
+                <FlexItem>ip-10-0-233-118.us-east-2.computer.external</FlexItem>
+              </Flex>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+          <DescriptionListGroup>
+            <DescriptionListTerm>Created at</DescriptionListTerm>
+            <DescriptionListDescription>
+              <time>Oct 15, 1:51 pm</time>
+            </DescriptionListDescription>
+          </DescriptionListGroup>
+        </DescriptionList>
+      </FlexItem>
+    </Flex>
+  );
+
+  return (
+    <DashboardWrapper hasNoBreadcrumb>
+      {tabsBreadcrumb}
+      <PageSection isWidthLimited aria-label="Pod header">
+        <Flex
+          spaceItems={{ default: 'spaceItemsMd' }}
+          alignItems={{ default: 'alignItemsFlexStart' }}
+          flexWrap={{ default: 'noWrap' }}
+        >
+          <FlexItem>
+            <Label color="blue">N</Label>
+          </FlexItem>
+          <FlexItem>
+            <Title headingLevel="h1" size="2xl">
+              3scale-control-fccb6ddb9-phyqv9
+            </Title>
+          </FlexItem>
+          <FlexItem flex={{ default: 'flexNone' }}>
+            <Label icon={<RhUiInformationFillIcon />}>Running</Label>
+          </FlexItem>
+        </Flex>
+      </PageSection>
+      <PageSection type="tabs" isWidthLimited aria-label="Pod navigation tabs">
+        <Tabs activeKey={activeTabKey} onSelect={handleTabClick} usePageInsets id="open-tabs-example-tabs-list">
+          <Tab eventKey={0} title={<TabTitleText>Details</TabTitleText>} tabContentId={`tabContent${0}`} />
+          <Tab eventKey={1} title={<TabTitleText>YAML</TabTitleText>} tabContentId={`tabContent${1}`} />
+          <Tab eventKey={2} title={<TabTitleText>Environment</TabTitleText>} tabContentId={`tabContent${2}`} />
+          <Tab eventKey={3} title={<TabTitleText>Events</TabTitleText>} tabContentId={`tabContent${3}`} />
+          <Tab eventKey={4} title={<TabTitleText>Terminal</TabTitleText>} tabContentId={`tabContent${4}`} />
+        </Tabs>
+      </PageSection>
+      <PageSection isWidthLimited padding={{ default: 'noPadding' }} aria-label="Pod content">
+        <TabContent key={0} eventKey={0} id={`tabContent${0}`} activeKey={activeTabKey} hidden={0 !== activeTabKey}>
+          <TabContentBody>
+            <Tabs
+              isSecondary
+              activeKey={activeTabKeySecondary}
+              onSelect={handleTabClickSecondary}
+              usePageInsets
+              id="open-with-secondary-tabs-example-tabs-list-secondary"
+            >
+              <Tab
+                eventKey={10}
+                title={<TabTitleText>Pod information</TabTitleText>}
+                tabContentId={`tabContent${10}`}
+              />
+              <Tab
+                eventKey={11}
+                title={<TabTitleText>Editable aspects</TabTitleText>}
+                tabContentId={`tabContent${11}`}
+              />
+            </Tabs>
+            <TabContent
+              key={10}
+              eventKey={10}
+              id={`tabContent${10}`}
+              activeKey={activeTabKeySecondary}
+              hidden={10 !== activeTabKeySecondary}
+            >
+              <TabContentBody hasPadding>{tabContent}</TabContentBody>
+            </TabContent>
+            <TabContent
+              key={11}
+              eventKey={11}
+              id={`tabContent${11}`}
+              activeKey={activeTabKeySecondary}
+              hidden={11 !== activeTabKeySecondary}
+            >
+              <TabContentBody>Editable aspects</TabContentBody>
+            </TabContent>
+          </TabContentBody>
+        </TabContent>
+        <TabContent key={1} eventKey={1} id={`tabContent${1}`} activeKey={activeTabKey} hidden={1 !== activeTabKey}>
+          <TabContentBody>YAML panel</TabContentBody>
+        </TabContent>
+        <TabContent key={2} eventKey={2} id={`tabContent${2}`} activeKey={activeTabKey} hidden={2 !== activeTabKey}>
+          <TabContentBody>Environment panel</TabContentBody>
+        </TabContent>
+        <TabContent key={3} eventKey={3} id={`tabContent${3}`} activeKey={activeTabKey} hidden={3 !== activeTabKey}>
+          <TabContentBody>Events panel</TabContentBody>
+        </TabContent>
+        <TabContent key={4} eventKey={4} id={`tabContent${4}`} activeKey={activeTabKey} hidden={4 !== activeTabKey}>
+          <TabContentBody>Terminal panel</TabContentBody>
+        </TabContent>
+      </PageSection>
+    </DashboardWrapper>
+  );
+};

package/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx

@@ -14,7 +14,7 @@ import {
   LabelGroup
 } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 export const AttributeValueFiltering: React.FunctionComponent = () => {
   const [inputValue, setInputValue] = useState('');
@@ -239,7 +239,7 @@ export const AttributeValueFiltering: React.FunctionComponent = () => {
                 variant="plain"
                 onClick={clearChipsAndInput}
                 aria-label="Clear button and input"
-                icon={<TimesIcon />}
+                icon={<RhMicronsCloseIcon />}
               />
             )}
           </TextInputGroupUtilities>

package/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx

@@ -14,7 +14,7 @@ import {
   LabelGroup
 } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 export const AutoCompleteSearch: React.FunctionComponent = () => {
   const [inputValue, setInputValue] = useState('');
@@ -233,7 +233,7 @@ export const AutoCompleteSearch: React.FunctionComponent = () => {
                 variant="plain"
                 onClick={clearChipsAndInput}
                 aria-label="Clear button for chips and input"
-                icon={<TimesIcon />}
+                icon={<RhMicronsCloseIcon />}
               />
             )}
           </TextInputGroupUtilities>