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

package/src/{components → demos}/Compass/examples/CompassDemo.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable no-console */
+
 import { useRef, useState } from 'react';
 import {
   Compass,
@@ -7,6 +9,11 @@ import {
   CompassMainHeader,
   CompassPanel,
   CompassMessageBar,
+  CompassNavContent,
+  CompassNavHome,
+  CompassNavMain,
+  CompassNavSearch,
+  Hero,
   Tabs,
   TabsComponent,
   Tab,
@@ -31,49 +38,57 @@ export const CompassBasic: React.FunctionComponent = () => {
 
   const navContent = (
     <>
-      <CompassPanel isPill hasNoPadding>
-        <Tabs
-          activeKey={activeTab}
-          isNav
-          onSelect={(_event, tabIndex) => setActiveTab(tabIndex as number)}
-          component={TabsComponent.nav}
-          aria-label="Compass navigation tabs"
-          inset={{ default: 'insetXl' }}
-        >
-          <Tab
-            tabContentId="subtabs"
-            tabContentRef={subTabsRef}
-            eventKey={0}
-            title={<TabTitleText>Tab 1</TabTitleText>}
-            aria-label="Compass tab with subtabs"
-          />
-          <Tab eventKey={1} title={<TabTitleText>Tab 2</TabTitleText>} />
-          <Tab eventKey={2} title={<TabTitleText>Tab 3</TabTitleText>} />
-          <Tab eventKey={3} title={<TabTitleText>Disabled Tab 4</TabTitleText>} isDisabled />
-        </Tabs>
+      <CompassPanel isPill>
+        <CompassNavContent>
+          <CompassNavHome onClick={() => console.log('Home')} />
+          <CompassNavMain>
+            <Tabs
+              activeKey={activeTab}
+              isNav
+              onSelect={(_event, tabIndex) => setActiveTab(tabIndex as number)}
+              component={TabsComponent.nav}
+              aria-label="Compass navigation tabs"
+            >
+              <Tab
+                tabContentId="subtabs"
+                tabContentRef={subTabsRef}
+                eventKey={0}
+                title={<TabTitleText>Tab 1</TabTitleText>}
+                aria-label="Compass tab with subtabs"
+              />
+              <Tab eventKey={1} title={<TabTitleText>Tab 2</TabTitleText>} />
+              <Tab eventKey={2} title={<TabTitleText>Tab 3</TabTitleText>} />
+              <Tab eventKey={3} title={<TabTitleText>Disabled Tab 4</TabTitleText>} isDisabled />
+            </Tabs>
+          </CompassNavMain>
+          <CompassNavSearch onClick={() => console.log('Search')} />
+        </CompassNavContent>
       </CompassPanel>
       <CompassPanel isPill hasNoPadding>
         <TabContent id="subtabs" ref={subTabsRef}>
-          <Tabs
-            activeKey={activeSubtab}
-            isSubtab
-            isNav
-            onSelect={(_event, tabIndex) => setActiveSubtab(tabIndex as number)}
-            aria-label="Compass navigation subtabs"
-            inset={{ default: 'insetXl' }}
-          >
-            <Tab
-              tabContentId="subtab-1"
-              eventKey={0}
-              title={
-                <TabTitleText>
-                  <div id="subtab-1">Subtab 1</div>
-                </TabTitleText>
-              }
-            />
-            <Tab eventKey={1} title={<TabTitleText>Subtab 2</TabTitleText>} />
-            <Tab eventKey={2} title={<TabTitleText>Disabled Subtab 3</TabTitleText>} isDisabled />
-          </Tabs>
+          <CompassNavContent>
+            <CompassNavMain>
+              <Tabs
+                activeKey={activeSubtab}
+                isSubtab
+                isNav
+                onSelect={(_event, tabIndex) => setActiveSubtab(tabIndex as number)}
+                aria-label="Compass navigation subtabs"
+              >
+                <Tab
+                  tabContentId="subtab-1"
+                  eventKey={0}
+                  title={
+                    <TabTitleText>
+                      <div id="subtab-1">Subtab 1</div>
+                    </TabTitleText>
+                  }
+                />
+                <Tab eventKey={1} title={<TabTitleText>Subtab 2</TabTitleText>} />
+                <Tab eventKey={2} title={<TabTitleText>Disabled Subtab 3</TabTitleText>} isDisabled />
+              </Tabs>
+            </CompassNavMain>
+          </CompassNavContent>
         </TabContent>
       </CompassPanel>
     </>
@@ -81,33 +96,33 @@ export const CompassBasic: React.FunctionComponent = () => {
 
   const sidebarContent = (
     <CompassPanel isPill>
-      <ActionList isIconList className="pf-m-vertical" /* isVertical */>
+      <ActionList isIconList isVertical>
         <ActionListGroup>
           <ActionListItem>
             <Tooltip content="Play">
-              <Button variant="plain" icon={<PlayIcon />} aria-label="Play" />
+              <Button isCircle variant="plain" icon={<PlayIcon />} aria-label="Play" />
             </Tooltip>
           </ActionListItem>
           <ActionListItem>
             <Tooltip content="Add">
-              <Button variant="plain" icon={<OutlinedPlusSquare />} aria-label="Add" />
+              <Button isCircle variant="plain" icon={<OutlinedPlusSquare />} aria-label="Add" />
             </Tooltip>
           </ActionListItem>
         </ActionListGroup>
         <ActionListItem>
           <Tooltip content="Copy">
-            <Button variant="plain" icon={<OutlinedCopy />} aria-label="Copy" />
+            <Button isCircle variant="plain" icon={<OutlinedCopy />} aria-label="Copy" />
           </Tooltip>
         </ActionListItem>
         <ActionListGroup>
           <ActionListItem>
             <Tooltip content="Help">
-              <Button variant="plain" icon={<OutlinedQuestionCircleIcon />} aria-label="Help" />
+              <Button isCircle variant="plain" icon={<OutlinedQuestionCircleIcon />} aria-label="Help" />
             </Tooltip>
           </ActionListItem>
           <ActionListItem>
             <Tooltip content="Second copy">
-              <Button variant="plain" icon={<OutlinedCopy />} aria-label="Copy2" />
+              <Button isCircle variant="plain" icon={<OutlinedCopy />} aria-label="Copy2" />
             </Tooltip>
           </ActionListItem>
         </ActionListGroup>
@@ -119,8 +134,8 @@ export const CompassBasic: React.FunctionComponent = () => {
   const sidebarStartContent = sidebarContent;
   const mainContent = (
     <>
-      <CompassHero gradientDark={{ stop1: '#000', stop2: '#1b0d33', stop3: '#3d2785' }}>
-        <div>Hero</div>
+      <CompassHero>
+        <Hero gradientDark={{ stop1: '#000', stop2: '#1b0d33', stop3: '#3d2785' }}>Hero</Hero>
       </CompassHero>
       <CompassMainHeader title={<Title headingLevel="h1">Content title</Title>} />
       <CompassContent>

package/src/demos/Compass/examples/CompassDockDemo.tsx

@@ -0,0 +1,215 @@
+import { useRef, useState } from 'react';
+import {
+  Compass,
+  CompassContent,
+  CompassMainHeader,
+  CompassPanel,
+  Title,
+  NavItem,
+  NavList,
+  Nav,
+  Brand,
+  MastheadLogo,
+  MastheadBrand,
+  MastheadContent,
+  MastheadMain,
+  Masthead,
+  Toolbar,
+  ToolbarContent,
+  ToolbarItem,
+  ToolbarGroup,
+  Dropdown,
+  DropdownList,
+  MenuToggle,
+  DropdownItem,
+  Button,
+  ButtonVariant,
+  Avatar,
+  Tooltip,
+  Divider
+} from '@patternfly/react-core';
+import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
+import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';
+import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
+import pfLogo from '../../assets/PF-IconLogo-color.svg';
+import imgAvatar from '../../assets/avatarImg.svg';
+
+interface NavOnSelectProps {
+  groupId: number | string;
+  itemId: number | string;
+  to: string;
+}
+
+export const CompassDockDemo: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = useState<number>(0);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+  const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, selectedItem: NavOnSelectProps) => {
+    typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
+  };
+
+  const onDropdownToggle = () => {
+    setIsDropdownOpen((prevIsOpen) => !prevIsOpen);
+  };
+
+  const onDropdownSelect = () => {
+    setIsDropdownOpen(false);
+  };
+
+  const userDropdownItems = [
+    <>
+      <DropdownItem key="group 2 profile">My profile</DropdownItem>
+      <DropdownItem key="group 2 user">User management</DropdownItem>
+      <DropdownItem key="group 2 logout">Logout</DropdownItem>
+    </>
+  ];
+
+  const navItem1Ref = useRef<HTMLAnchorElement>(null);
+  const navItem2Ref = useRef<HTMLAnchorElement>(null);
+  const navItem3Ref = useRef<HTMLAnchorElement>(null);
+  const navItem4Ref = useRef<HTMLAnchorElement>(null);
+  const settingsRef = useRef<HTMLButtonElement>(null);
+  const helpRef = useRef<HTMLButtonElement>(null);
+  const userMenuRef = useRef<HTMLButtonElement>(null);
+
+  const dockContent = (
+    <Masthead id="icon-router-link" variant="docked">
+      <MastheadMain>
+        <MastheadBrand>
+          <MastheadLogo component={(props) => <a {...props} href="#" />}>
+            <Brand src={pfLogo} alt="PatternFly" heights={{ default: '37px' }} />
+          </MastheadLogo>
+        </MastheadBrand>
+      </MastheadMain>
+      <Divider />
+      <MastheadContent>
+        <Toolbar id="toolbar" isVertical>
+          <ToolbarContent>
+            <ToolbarItem>
+              <Nav onSelect={onNavSelect} variant="docked" aria-label="Icon global" ouiaId="IconNav">
+                <NavList>
+                  <NavItem
+                    key="nav-icon-link1"
+                    preventDefault
+                    id="nav-icon-link1"
+                    to="#nav-icon-link1"
+                    itemId={0}
+                    isActive={activeItem === 0}
+                    icon={<CubeIcon />}
+                    anchorRef={navItem1Ref}
+                    aria-label="Link 1"
+                  />
+                  <NavItem
+                    key="nav-icon-link2"
+                    preventDefault
+                    id="nav-icon-link2"
+                    to="#nav-icon-link2"
+                    itemId={1}
+                    isActive={activeItem === 1}
+                    icon={<FolderIcon />}
+                    anchorRef={navItem2Ref}
+                    aria-label="Link 2"
+                  />
+                  <NavItem
+                    key="nav-icon-link3"
+                    preventDefault
+                    id="nav-icon-link3"
+                    to="#nav-icon-link3"
+                    itemId={2}
+                    isActive={activeItem === 2}
+                    icon={<CloudIcon />}
+                    anchorRef={navItem3Ref}
+                    aria-label="Link 3"
+                  />
+                  <NavItem
+                    key="nav-icon-link4"
+                    preventDefault
+                    id="nav-icon-link4"
+                    to="#nav-icon-link4"
+                    itemId={3}
+                    isActive={activeItem === 3}
+                    icon={<CodeIcon />}
+                    anchorRef={navItem4Ref}
+                    aria-label="Link 4"
+                  />
+                </NavList>
+              </Nav>
+              <Tooltip aria="none" aria-live="off" triggerRef={navItem1Ref} content="Link 1"></Tooltip>
+              <Tooltip aria="none" aria-live="off" triggerRef={navItem2Ref} content="Link 2"></Tooltip>
+              <Tooltip aria="none" aria-live="off" triggerRef={navItem3Ref} content="Link 3"></Tooltip>
+              <Tooltip aria="none" aria-live="off" triggerRef={navItem4Ref} content="Link 4"></Tooltip>
+            </ToolbarItem>
+            <ToolbarGroup
+              variant="action-group-plain"
+              align={{ default: 'alignEnd' }}
+              gap={{ default: 'gapNone', md: 'gapMd' }}
+            >
+              <ToolbarGroup variant="action-group-plain" visibility={{ default: 'hidden', lg: 'visible' }}>
+                <ToolbarItem>
+                  <Tooltip aria="none" aria-live="off" triggerRef={settingsRef} content="Settings">
+                    <Button ref={settingsRef} aria-label="Settings" isSettings variant="plain" />
+                  </Tooltip>
+                </ToolbarItem>
+                <ToolbarItem>
+                  <Tooltip aria="none" aria-live="off" triggerRef={helpRef} content="Help">
+                    <Button
+                      ref={helpRef}
+                      aria-label="Help"
+                      variant={ButtonVariant.plain}
+                      icon={<QuestionCircleIcon />}
+                    />
+                  </Tooltip>
+                </ToolbarItem>
+              </ToolbarGroup>
+            </ToolbarGroup>
+            <ToolbarItem>
+              <Dropdown
+                isOpen={isDropdownOpen}
+                shouldFocusToggleOnSelect
+                onSelect={onDropdownSelect}
+                onOpenChange={(isOpen: boolean) => setIsDropdownOpen(isOpen)}
+                toggle={{
+                  toggleNode: (
+                    <Tooltip content="User menu" aria="none" aria-live="off" triggerRef={userMenuRef}>
+                      <MenuToggle
+                        ref={userMenuRef}
+                        onClick={onDropdownToggle}
+                        isExpanded={isDropdownOpen}
+                        icon={<Avatar src={imgAvatar} alt="" size="sm" />}
+                        variant="plain"
+                        aria-label="User menu"
+                      />
+                    </Tooltip>
+                  ),
+                  toggleRef: userMenuRef
+                }}
+              >
+                <DropdownList>{userDropdownItems}</DropdownList>
+              </Dropdown>
+            </ToolbarItem>
+          </ToolbarContent>
+        </Toolbar>
+      </MastheadContent>
+    </Masthead>
+  );
+
+  const mainContent = (
+    <>
+      <CompassMainHeader title={<Title headingLevel="h1">Content title</Title>} />
+      <CompassContent>
+        <CompassPanel>Content</CompassPanel>
+      </CompassContent>
+    </>
+  );
+
+  return (
+    <Compass
+      dock={dockContent}
+      main={mainContent}
+      backgroundSrcDark="/assets/images/pf-background.svg"
+      backgroundSrcLight="/assets/images/pf-background.svg"
+    />
+  );
+};

package/src/demos/CustomMenus/CustomMenus.md

@@ -15,7 +15,7 @@ import LayerGroupIcon from '@patternfly/react-icons/dist/esm/icons/layer-group-i
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
 import brandImg from '../assets/PF-IconLogo.svg';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';

package/src/demos/CustomMenus/examples/ActionsMenuDemo.tsx

@@ -3,7 +3,7 @@ import { MenuToggle, MenuItemAction, Select, SelectGroup, SelectList, SelectOpti
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 
 export const ActionsMenuDemo: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = useState<boolean>(false);
@@ -61,7 +61,7 @@ export const ActionsMenuDemo: React.FunctionComponent = () => {
           <SelectOption
             isDisabled
             isSelected={selectedItems.includes(1)}
-            actions={<MenuItemAction icon={<BellIcon />} actionId="alert" aria-label="Alert" />}
+            actions={<MenuItemAction icon={<RhUiNotificationFillIcon />} actionId="alert" aria-label="Alert" />}
             description="This is a description"
             value={1}
           >

package/src/demos/DataList/examples/DataListBasic.tsx

@@ -27,9 +27,9 @@ 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 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 RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-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';
 
 export const DataListBasic: React.FunctionComponent = () => {
   const renderPagination = () => <Pagination itemCount={5} page={1} variant="top" isCompact />;
@@ -169,20 +169,20 @@ export const DataListBasic: React.FunctionComponent = () => {
                             </FlexItem>
                             <FlexItem>
                               <Icon status="success">
-                                <CheckCircleIcon />
+                                <RhUiCheckCircleFillIcon />
                               </Icon>
                               11
                               <span className="pf-v6-screen-reader">Completed</span>
                             </FlexItem>
                             <FlexItem>
                               <Icon status="warning">
-                                <ExclamationTriangleIcon />
+                                <RhUiWarningFillIcon />
                               </Icon>
                               4 <span className="pf-v6-screen-reader">Warnings</span>
                             </FlexItem>
                             <FlexItem>
                               <Icon status="danger">
-                                <ExclamationCircleIcon />
+                                <RhUiErrorFillIcon />
                               </Icon>
                               1 <span className="pf-v6-screen-reader">Error</span>
                             </FlexItem>
@@ -319,19 +319,19 @@ export const DataListBasic: React.FunctionComponent = () => {
                             </FlexItem>
                             <FlexItem>
                               <Icon status="success">
-                                <CheckCircleIcon />
+                                <RhUiCheckCircleFillIcon />
                               </Icon>
                               11 <span className="pf-v6-screen-reader">Completed</span>
                             </FlexItem>
                             <FlexItem>
                               <Icon status="warning">
-                                <ExclamationTriangleIcon />
+                                <RhUiWarningFillIcon />
                               </Icon>
                               4 <span className="pf-v6-screen-reader">Warnings</span>
                             </FlexItem>
                             <FlexItem>
                               <Icon status="danger">
-                                <ExclamationCircleIcon />
+                                <RhUiErrorFillIcon />
                               </Icon>
                               1 <span className="pf-v6-screen-reader">Error</span>
                             </FlexItem>

package/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx

@@ -29,7 +29,7 @@ import {
 import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper';
 
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 export const DataListExpandableControlInToolbar: React.FunctionComponent = () => {
@@ -96,7 +96,7 @@ export const DataListExpandableControlInToolbar: React.FunctionComponent = () =>
                   icon={
                     <Icon shouldMirrorRTL>
                       <ToolbarExpandIconWrapper>
-                        <AngleRightIcon />
+                        <RhMicronsCaretDownIcon />
                       </ToolbarExpandIconWrapper>
                     </Icon>
                   }

package/src/demos/DataListDemo.md

@@ -6,16 +6,16 @@ section: components
 import { Fragment, useState } from 'react';
 
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
-import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
+import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import { css } from '@patternfly/react-styles';
 
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-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 RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-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';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import { rows } from '@patternfly/react-core/dist/esm/demos/sampleData';
 

package/src/demos/DatePicker/DatePicker.md

@@ -13,53 +13,7 @@ import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from
 
 This is intended to be used as a filter. After selecting a start date, the next date is automatically selected.
 
-```js
-import { useState } from 'react';
-import { Split, SplitItem, DatePicker, isValidDate, yyyyMMddFormat } from '@patternfly/react-core';
-
-DateRangePicker = () => {
-  const [from, setFrom] = useState();
-  const [to, setTo] = useState();
-
-  const toValidator = (date) =>
-    isValidDate(from) && date >= from ? '' : 'The "to" date must be after the "from" date';
-
-  const onFromChange = (_event, _value, date) => {
-    setFrom(new Date(date));
-    if (isValidDate(date)) {
-      date.setDate(date.getDate() + 1);
-      setTo(yyyyMMddFormat(date));
-    } else {
-      setTo('');
-    }
-  };
-
-  const onToChange = (_event, _value, date) => {
-    if (isValidDate(date)) {
-      setTo(yyyyMMddFormat(date));
-    }
-  };
-
-  return (
-    <Split>
-      <SplitItem>
-        <DatePicker onChange={onFromChange} aria-label="Start date" placeholder="YYYY-MM-DD" />
-      </SplitItem>
-      <SplitItem style={{ padding: '6px 12px 0 12px' }}>to</SplitItem>
-      <SplitItem>
-        <DatePicker
-          value={to}
-          onChange={onToChange}
-          isDisabled={!isValidDate(from)}
-          rangeStart={from}
-          validators={[toValidator]}
-          aria-label="End date"
-          placeholder="YYYY-MM-DD"
-        />
-      </SplitItem>
-    </Split>
-  );
-};
+```ts file="./examples/DatePickerRange.tsx"
 ```
 
 ### Date and time pickers in modal

package/src/demos/DatePicker/examples/DatePickerRange.tsx

@@ -0,0 +1,46 @@
+import { useState } from 'react';
+import { Split, SplitItem, DatePicker, isValidDate, yyyyMMddFormat } from '@patternfly/react-core';
+
+export const DatePickerRange: React.FunctionComponent = () => {
+  const [from, setFrom] = useState<Date | undefined>();
+  const [to, setTo] = useState<string>('');
+
+  const toValidator = (date: Date) =>
+    isValidDate(from) && date >= from ? '' : 'The "to" date must be after the "from" date';
+
+  const onFromChange = (_event: React.MouseEvent<HTMLElement>, _value: string, date: Date) => {
+    setFrom(new Date(date));
+    if (isValidDate(date)) {
+      date.setDate(date.getDate() + 1);
+      setTo(yyyyMMddFormat(date));
+    } else {
+      setTo('');
+    }
+  };
+
+  const onToChange = (_event: React.MouseEvent<HTMLElement>, _value: string, date: Date) => {
+    if (isValidDate(date)) {
+      setTo(yyyyMMddFormat(date));
+    }
+  };
+
+  return (
+    <Split>
+      <SplitItem>
+        <DatePicker onChange={onFromChange} aria-label="Start date" placeholder="YYYY-MM-DD" />
+      </SplitItem>
+      <SplitItem style={{ padding: '6px 12px 0 12px' }}>to</SplitItem>
+      <SplitItem>
+        <DatePicker
+          value={to}
+          onChange={onToChange}
+          isDisabled={!isValidDate(from)}
+          rangeStart={from}
+          validators={[toValidator]}
+          aria-label="End date"
+          placeholder="YYYY-MM-DD"
+        />
+      </SplitItem>
+    </Split>
+  );
+};