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

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/Card/CardAggregateStatus.tsx

@@ -12,9 +12,9 @@ import {
   Stack,
   Icon
 } from '@patternfly/react-core';
-import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-check-circle-fill-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-error-fill-icon';
+import RhUiWarningFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-warning-fill-icon';
 import cssGridTemplateColumnsMin from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
 
 interface ContentType {
@@ -44,7 +44,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="success">
-              <CheckCircleIcon />
+              <RhUiCheckCircleFillIcon />
             </Icon>
           )
         }
@@ -57,7 +57,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="warning">
-              <ExclamationTriangleIcon />
+              <RhUiWarningFillIcon />
             </Icon>
           )
         }
@@ -70,7 +70,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="danger">
-              <ExclamationCircleIcon />
+              <RhUiErrorFillIcon />
             </Icon>
           )
         }
@@ -85,7 +85,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="success">
-              <CheckCircleIcon />
+              <RhUiCheckCircleFillIcon />
             </Icon>
           ),
           count: 2
@@ -93,7 +93,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="warning">
-              <ExclamationTriangleIcon />
+              <RhUiWarningFillIcon />
             </Icon>
           ),
           count: 1
@@ -107,7 +107,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="success">
-              <CheckCircleIcon />
+              <RhUiCheckCircleFillIcon />
             </Icon>
           ),
           count: 5
@@ -115,7 +115,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="danger">
-              <ExclamationCircleIcon />
+              <RhUiErrorFillIcon />
             </Icon>
           ),
           count: 12
@@ -129,7 +129,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="warning">
-              <ExclamationTriangleIcon />
+              <RhUiWarningFillIcon />
             </Icon>
           ),
           count: 3
@@ -137,7 +137,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="danger">
-              <ExclamationCircleIcon />
+              <RhUiErrorFillIcon />
             </Icon>
           ),
           count: 7
@@ -153,7 +153,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="danger">
-              <ExclamationCircleIcon />
+              <RhUiErrorFillIcon />
             </Icon>
           ),
           status: '2 errors',
@@ -162,7 +162,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="warning">
-              <ExclamationTriangleIcon />
+              <RhUiWarningFillIcon />
             </Icon>
           ),
           status: '1 warning',
@@ -177,7 +177,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="success">
-              <CheckCircleIcon />
+              <RhUiCheckCircleFillIcon />
             </Icon>
           ),
           status: '2 successes',
@@ -186,7 +186,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="warning">
-              <ExclamationTriangleIcon />
+              <RhUiWarningFillIcon />
             </Icon>
           ),
           status: '3 warnings',
@@ -201,7 +201,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="warning">
-              <ExclamationTriangleIcon />
+              <RhUiWarningFillIcon />
             </Icon>
           ),
           status: '7 warnings',
@@ -210,7 +210,7 @@ const cardData: CardData = {
         {
           icon: (
             <Icon status="danger">
-              <ExclamationCircleIcon />
+              <RhUiErrorFillIcon />
             </Icon>
           ),
           status: '1 error',

package/src/demos/examples/Card/CardEventsView.tsx

@@ -22,8 +22,8 @@ import {
   Timestamp,
   Title
 } from '@patternfly/react-core';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
 import flex from '@patternfly/react-styles/css/utilities/Flex/flex';
 import cssGridTemplateColumnsMin from '@patternfly/react-tokens/dist/esm/l_gallery_GridTemplateColumns_min';
 
@@ -77,7 +77,7 @@ export const CardEventsView: React.FunctionComponent = () => {
                   <Flex flexWrap={{ default: 'nowrap' }}>
                     <FlexItem>
                       <Icon status="danger">
-                        <ExclamationCircleIcon />
+                        <RhUiErrorFillIcon />
                       </Icon>
                     </FlexItem>
                     <FlexItem>
@@ -98,7 +98,7 @@ export const CardEventsView: React.FunctionComponent = () => {
                   <Flex flexWrap={{ default: 'nowrap' }}>
                     <FlexItem>
                       <Icon status="success">
-                        <CheckCircleIcon />
+                        <RhUiCheckCircleFillIcon />
                       </Icon>
                     </FlexItem>
                     <FlexItem>
@@ -134,7 +134,7 @@ export const CardEventsView: React.FunctionComponent = () => {
                   <Flex flexWrap={{ default: 'nowrap' }}>
                     <FlexItem>
                       <Icon status="success">
-                        <CheckCircleIcon />
+                        <RhUiCheckCircleFillIcon />
                       </Icon>
                     </FlexItem>
                     <FlexItem>

package/src/demos/examples/Card/CardHorizontalGrid.tsx

@@ -19,7 +19,7 @@ import {
   MenuToggle,
   MenuToggleElement
 } from '@patternfly/react-core';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
+import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
 import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
@@ -88,16 +88,16 @@ export const CardHorizontalGrid: React.FunctionComponent = () => {
           <Level hasGutter>
             <CardTitle id="titleId">Getting Started</CardTitle>
             <LabelGroup isCompact>
-              <Label isCompact icon={<InfoCircleIcon />} color="blue">
+              <Label isCompact icon={<RhUiInformationFillIcon />} color="blue">
                 Set up your cluster
               </Label>
-              <Label isCompact icon={<InfoCircleIcon />} color="purple">
+              <Label isCompact icon={<RhUiInformationFillIcon />} color="purple">
                 Guided tours
               </Label>
-              <Label isCompact icon={<InfoCircleIcon />} color="green">
+              <Label isCompact icon={<RhUiInformationFillIcon />} color="green">
                 Quick starts
               </Label>
-              <Label isCompact icon={<InfoCircleIcon />} color="orange">
+              <Label isCompact icon={<RhUiInformationFillIcon />} color="orange">
                 Learning resources
               </Label>
             </LabelGroup>
@@ -118,7 +118,7 @@ export const CardHorizontalGrid: React.FunctionComponent = () => {
                 direction={{ default: 'column' }}
                 grow={{ default: 'grow' }}
               >
-                <Label icon={<InfoCircleIcon />} color="blue">
+                <Label icon={<RhUiInformationFillIcon />} color="blue">
                   Set up your cluster
                 </Label>
                 <p>Continue setting up your cluster to access all you cain in the Console</p>
@@ -149,7 +149,7 @@ export const CardHorizontalGrid: React.FunctionComponent = () => {
                 direction={{ default: 'column' }}
                 grow={{ default: 'grow' }}
               >
-                <Label icon={<InfoCircleIcon />} color="purple">
+                <Label icon={<RhUiInformationFillIcon />} color="purple">
                   Guided tours
                 </Label>
                 <p>Tour some of the key features around the console</p>
@@ -177,7 +177,7 @@ export const CardHorizontalGrid: React.FunctionComponent = () => {
                 direction={{ default: 'column' }}
                 grow={{ default: 'grow' }}
               >
-                <Label icon={<InfoCircleIcon />} color="green">
+                <Label icon={<RhUiInformationFillIcon />} color="green">
                   Quick starts
                 </Label>
                 <p>Get started with features using our step-by-step documentation</p>
@@ -208,7 +208,7 @@ export const CardHorizontalGrid: React.FunctionComponent = () => {
                 direction={{ default: 'column' }}
                 grow={{ default: 'grow' }}
               >
-                <Label icon={<InfoCircleIcon />} color="orange">
+                <Label icon={<RhUiInformationFillIcon />} color="orange">
                   Learning resources
                 </Label>
                 <p>Learn about new features within the Console and get started with demo apps</p>

package/src/demos/examples/Card/CardStatus.tsx

@@ -22,10 +22,8 @@ import {
   Icon
 } from '@patternfly/react-core';
 import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
-import BellIcon from '@patternfly/react-icons/dist/js/icons/bell-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-check-circle-fill-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-error-fill-icon';
 import t_global_text_color_subtle from '@patternfly/react-tokens/dist/esm/t_global_text_color_subtle';
 
 export const CardStatus: React.FunctionComponent = () => {
@@ -139,7 +137,7 @@ export const CardStatus: React.FunctionComponent = () => {
           <Flex spaceItems={{ default: 'spaceItemsSm' }}>
             <FlexItem>
               <Icon status="success">
-                <CheckCircleIcon />
+                <RhUiCheckCircleFillIcon />
               </Icon>
             </FlexItem>
             <FlexItem>
@@ -151,7 +149,7 @@ export const CardStatus: React.FunctionComponent = () => {
           <Flex spaceItems={{ default: 'spaceItemsSm' }}>
             <FlexItem>
               <Icon status="danger">
-                <ExclamationCircleIcon />
+                <RhUiErrorFillIcon />
               </Icon>
             </FlexItem>
             <FlexItem>
@@ -167,7 +165,7 @@ export const CardStatus: React.FunctionComponent = () => {
           <Flex spaceItems={{ default: 'spaceItemsSm' }}>
             <FlexItem>
               <Icon status="danger">
-                <ExclamationCircleIcon />
+                <RhUiErrorFillIcon />
               </Icon>
             </FlexItem>
             <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsNone' }}>
@@ -184,7 +182,7 @@ export const CardStatus: React.FunctionComponent = () => {
           <Flex spaceItems={{ default: 'spaceItemsSm' }}>
             <FlexItem>
               <Icon status="success">
-                <CheckCircleIcon />
+                <RhUiCheckCircleFillIcon />
               </Icon>
             </FlexItem>
             <Flex direction={{ default: 'column' }} spaceItems={{ default: 'spaceItemsNone' }}>
@@ -206,21 +204,11 @@ export const CardStatus: React.FunctionComponent = () => {
       <FlexItem spacer={{ default: 'spacerMd' }}>
         <span>Notifications</span>
       </FlexItem>
-      <Label color="red" icon={<ExclamationCircleIcon />}>
-        1
-      </Label>
-      <Label color="orange" icon={<ExclamationTriangleIcon />}>
-        3
-      </Label>
-      <Label color="green" icon={<CheckCircleIcon />}>
-        3
-      </Label>
-      <Label color="blue" icon={<ExclamationCircleIcon />}>
-        3
-      </Label>
-      <Label color="green" icon={<BellIcon />}>
-        3
-      </Label>
+      <Label status="danger">1</Label>
+      <Label status="warning">3</Label>
+      <Label status="success">3</Label>
+      <Label status="danger">3</Label>
+      <Label status="info">3</Label>
     </Flex>
   );
 

package/src/demos/examples/Card/CardStatusTabbed.tsx

@@ -16,8 +16,8 @@ import {
   TabTitleText,
   Title
 } from '@patternfly/react-core';
-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 RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
 
 const descriptionListData = [
   {
@@ -26,7 +26,7 @@ const descriptionListData = [
     detail: '121 Systems',
     icon: (
       <Icon status="success">
-        <CheckCircleIcon />
+        <RhUiCheckCircleFillIcon />
       </Icon>
     )
   },
@@ -36,7 +36,7 @@ const descriptionListData = [
     detail: '123 Systems',
     icon: (
       <Icon status="danger">
-        <ExclamationCircleIcon />
+        <RhUiErrorFillIcon />
       </Icon>
     )
   },
@@ -46,7 +46,7 @@ const descriptionListData = [
     detail: '122 Systems',
     icon: (
       <Icon status="success">
-        <CheckCircleIcon />
+        <RhUiCheckCircleFillIcon />
       </Icon>
     )
   },
@@ -56,7 +56,7 @@ const descriptionListData = [
     detail: '124 Systems',
     icon: (
       <Icon status="danger">
-        <ExclamationCircleIcon />
+        <RhUiErrorFillIcon />
       </Icon>
     )
   }

package/src/demos/examples/Card/CardUtilizationDemo3.tsx

@@ -17,7 +17,7 @@ import {
   MenuToggleElement,
   Icon
 } from '@patternfly/react-core';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
 import { Chart, ChartStack, ChartBar, ChartTooltip } from '@patternfly/react-charts/victory';
 import chart_color_yellow_100 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_100';
 import chart_color_yellow_300 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_300';
@@ -80,7 +80,7 @@ export const CardUtilizationDemo3: React.FunctionComponent = () => {
                 </FlexItem>
                 <Flex>
                   <Icon status="danger">
-                    <ExclamationCircleIcon />
+                    <RhUiErrorFillIcon />
                   </Icon>
                   <a href="#">25 incidents detected</a>
                 </Flex>

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>
+  );
+};