@patternfly/react-core 6.5.0-prerelease.25 → 6.5.0-prerelease.26

package/src/demos/Tabs.md

@@ -21,447 +21,36 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 
 ### Open tabs
 
-```js isFullscreen
-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 CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
-import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
-import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
-import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
-
-TabsOpenDemo = () => {
-  const [activeTabKey, setActiveTabKey] = useState(0);
+```ts file="examples/Tabs/TabsOpen.tsx" isFullscreen
 
-  // Toggle currently active tab
-  const handleTabClick = (event, tabIndex) => {
-    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>
-                  <CheckCircleIcon />
-                </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={<InfoCircleIcon />}>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>
-  );
-};
 ```
 
 ### Open tabs with secondary tabs
 
-```js isFullscreen
-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 CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
-import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
-import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
-import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
-
-TabsOpenWithSecondaryTabsDemo = () => {
-  const [activeTabKey, setActiveTabKey] = useState(0);
-  const [activeTabKeySecondary, setActiveTabKeySecondary] = useState(10);
-
-  // Toggle currently active tab
-  const handleTabClick = (event, tabIndex) => {
-    setActiveTabKey(tabIndex);
-  };
-
-  // Toggle currently active secondary tab
-  const handleTabClickSecondary = (event, tabIndex) => {
-    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>
-                  <CheckCircleIcon />
-                </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>
-  );
+```ts file="examples/Tabs/TabsOpenWithSecondaryTabs.tsx" isFullscreen
 
-  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={<InfoCircleIcon />}>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>
-  );
-};
 ```
 
 ### Nested tabs
 
-```js isFullscreen file="./examples/Tabs/NestedTabs.tsx"
+```ts isFullscreen file="examples/Tabs/NestedTabs.tsx"
 
 ```
 
 ### Nested, unindented tabs
 
-```js isFullscreen file="./examples/Tabs/NestedUnindentedTabs.tsx"
+```ts isFullscreen file="examples/Tabs/NestedUnindentedTabs.tsx"
 
 ```
 
 ### Tables and tabs
 
-```js isFullscreen file="./examples/Tabs/TabsAndTable.tsx"
+```ts isFullscreen file="examples/Tabs/TabsAndTable.tsx"
 
 ```
 
 ### Modal tabs
 
-```js isFullscreen file="./examples/Tabs/ModalTabs.tsx"
+```ts isFullscreen file="examples/Tabs/ModalTabs.tsx"
 
 ```

package/src/demos/examples/Banner/BannerBasicSticky.tsx

@@ -0,0 +1,55 @@
+import { Fragment } from 'react';
+import { Banner, Card, CardBody, Flex, Gallery, GalleryItem, PageSection, Content } from '@patternfly/react-core';
+
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import { css } from '@patternfly/react-styles';
+import display from '@patternfly/react-styles/css/utilities/Display/display';
+
+export const BannerBasicSticky: React.FunctionComponent = () => {
+  const banner = (
+    <Banner isSticky>
+      <Flex
+        justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
+        flexWrap={{ default: 'nowrap' }}
+      >
+        <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
+
+        <div className={css(display.displayNone, display.displayBlockOnLg)}>
+          This message is sticky to the top of the page.
+        </div>
+
+        <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
+
+        <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
+      </Flex>
+    </Banner>
+  );
+
+  return (
+    <Fragment>
+      <DashboardWrapper banner={banner} breadcrumb={null}>
+        <PageSection aria-labelledby="main-title">
+          <Content>
+            <h1 id="main-title">Main title</h1>
+            <p>
+              Body text should be Red Hat Text at 1rem (16px). It should have leading of 1.5rem (24px) because <br />
+              of its relative line height of 1.5.
+            </p>
+          </Content>
+        </PageSection>
+
+        <PageSection aria-label="Cards gallery">
+          <Gallery hasGutter>
+            {Array.from({ length: 30 }).map((_value, index) => (
+              <GalleryItem key={index}>
+                <Card>
+                  <CardBody>This is a card</CardBody>
+                </Card>
+              </GalleryItem>
+            ))}
+          </Gallery>
+        </PageSection>
+      </DashboardWrapper>
+    </Fragment>
+  );
+};

package/src/demos/examples/Banner/BannerTopBottom.tsx

@@ -0,0 +1,81 @@
+import { Fragment } from 'react';
+import {
+  Banner,
+  Card,
+  CardBody,
+  Flex,
+  FlexItem,
+  Gallery,
+  GalleryItem,
+  PageSection,
+  Content
+} from '@patternfly/react-core';
+import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
+import { css } from '@patternfly/react-styles';
+import display from '@patternfly/react-styles/css/utilities/Display/display';
+
+export const BannerTopBottom: React.FunctionComponent = () => (
+  <Fragment>
+    <Flex
+      direction={{ default: 'column' }}
+      flexWrap={{ default: 'nowrap' }}
+      spaceItems={{ default: 'spaceItemsNone' }}
+      style={{ height: '100%' }}
+    >
+      <FlexItem>
+        <Banner isSticky>
+          <Flex
+            justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
+            flexWrap={{ default: 'nowrap' }}
+          >
+            <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
+            <div className={css(display.displayNone, display.displayBlockOnLg)}>
+              This message is sticky to the top of the page.
+            </div>
+            <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
+            <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
+          </Flex>
+        </Banner>
+      </FlexItem>
+      <FlexItem grow={{ default: 'grow' }} style={{ minHeight: 0 }}>
+        <DashboardWrapper breadcrumb={null}>
+          <PageSection aria-labelledby="main-title">
+            <Content>
+              <h1 id="main-title">Main title</h1>
+              <p>
+                Body text should be Red Hat Text at 1rem (16px). It should have leading of 1.5rem(24px) because <br />
+                of it's relative line height of 1.5.
+              </p>
+            </Content>
+          </PageSection>
+          <PageSection aria-label="Cards gallery">
+            <Gallery hasGutter>
+              {Array.from({ length: 30 }).map((_value, index) => (
+                <GalleryItem key={index}>
+                  <Card key={index}>
+                    <CardBody>This is a card</CardBody>
+                  </Card>
+                </GalleryItem>
+              ))}
+            </Gallery>
+          </PageSection>
+        </DashboardWrapper>
+      </FlexItem>
+      <FlexItem>
+        <Banner isSticky>
+          <Flex
+            justifyContent={{ default: 'justifyContentCenter', lg: 'justifyContentSpaceBetween' }}
+            flexWrap={{ default: 'nowrap' }}
+          >
+            <div className={css(display.displayNone, display.displayBlockOnLg)}>Localhost</div>
+            <div className={css(display.displayNone, display.displayBlockOnLg)}>
+              This message is sticky to the bottom of the page.
+            </div>
+            <div className={css(display.displayNoneOnLg)}>Drop some text on mobile, truncate if needed.</div>
+            <div className={css(display.displayNone, display.displayBlockOnLg)}>Ned Username</div>
+          </Flex>
+        </Banner>
+      </FlexItem>
+    </Flex>
+  </Fragment>
+);

package/src/demos/examples/DateTimePicker/DateTimeRangePicker.tsx

@@ -0,0 +1,93 @@
+import { useState } from 'react';
+import {
+  Flex,
+  FlexItem,
+  InputGroup,
+  InputGroupItem,
+  DatePicker,
+  isValidDate,
+  TimePicker,
+  yyyyMMddFormat
+} from '@patternfly/react-core';
+
+export const DateTimeRangePicker: React.FunctionComponent = () => {
+  const [from, setFrom] = useState<Date | undefined>(undefined);
+  const [to, setTo] = useState<Date | undefined>(undefined);
+
+  const toValidator = (date: Date) =>
+    isValidDate(from) && yyyyMMddFormat(date) >= yyyyMMddFormat(from)
+      ? ''
+      : 'The "to" date must be after the "from" date';
+
+  const onFromDateChange = (_event: React.FormEvent<HTMLInputElement>, inputDate: string, newFromDate: Date) => {
+    if (isValidDate(from) && isValidDate(newFromDate) && inputDate === yyyyMMddFormat(newFromDate)) {
+      newFromDate.setHours(from.getHours());
+      newFromDate.setMinutes(from.getMinutes());
+    }
+    if (isValidDate(newFromDate) && inputDate === yyyyMMddFormat(newFromDate)) {
+      setFrom(new Date(newFromDate));
+    }
+  };
+
+  const onFromTimeChange = (_event: React.FormEvent<HTMLInputElement>, _time: string, hour: number, minute: number) => {
+    if (isValidDate(from)) {
+      const updatedFromDate = new Date(from);
+      updatedFromDate.setHours(hour);
+      updatedFromDate.setMinutes(minute);
+      setFrom(updatedFromDate);
+    }
+  };
+
+  const onToDateChange = (_event: React.FormEvent<HTMLInputElement>, inputDate: string, newToDate: Date) => {
+    if (isValidDate(to) && isValidDate(newToDate) && inputDate === yyyyMMddFormat(newToDate)) {
+      newToDate.setHours(to.getHours());
+      newToDate.setMinutes(to.getMinutes());
+    }
+    if (isValidDate(newToDate) && inputDate === yyyyMMddFormat(newToDate)) {
+      setTo(newToDate);
+    }
+  };
+
+  const onToTimeChange = (_event: React.FormEvent<HTMLInputElement>, _time: string, hour: number, minute: number) => {
+    if (isValidDate(to)) {
+      const updatedToDate = new Date(to);
+      updatedToDate.setHours(hour);
+      updatedToDate.setMinutes(minute);
+      setTo(updatedToDate);
+    }
+  };
+
+  return (
+    <Flex direction={{ default: 'column', lg: 'row' }}>
+      <FlexItem>
+        <InputGroup>
+          <InputGroupItem>
+            <DatePicker onChange={onFromDateChange} aria-label="Start date" placeholder="YYYY-MM-DD" />
+          </InputGroupItem>
+          <InputGroupItem>
+            <TimePicker aria-label="Start time" style={{ width: '150px' }} onChange={onFromTimeChange} />
+          </InputGroupItem>
+        </InputGroup>
+      </FlexItem>
+      <FlexItem>to</FlexItem>
+      <FlexItem>
+        <InputGroup>
+          <InputGroupItem>
+            <DatePicker
+              value={isValidDate(to) ? yyyyMMddFormat(to) : to}
+              onChange={onToDateChange}
+              isDisabled={!isValidDate(from)}
+              rangeStart={from}
+              validators={[toValidator]}
+              aria-label="End date"
+              placeholder="YYYY-MM-DD"
+            />
+          </InputGroupItem>
+          <InputGroupItem>
+            <TimePicker style={{ width: '150px' }} onChange={onToTimeChange} isDisabled={!isValidDate(from)} />
+          </InputGroupItem>
+        </InputGroup>
+      </FlexItem>
+    </Flex>
+  );
+};