@patternfly/react-core 6.5.0-prerelease.6 → 6.5.0-prerelease.60

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/DashboardHeader.tsx

@@ -23,7 +23,7 @@ import {
   ToolbarItem,
   PageToggleButton
 } from '../components';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
@@ -87,7 +87,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
   const kebabDropdownItems = (
     <>
       <DropdownItem>
-        <CogIcon /> Settings
+        <RhUiSettingsFillIcon /> Settings
       </DropdownItem>
       <DropdownItem>
         <HelpIcon /> Help

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

package/src/demos/DateTimePicker.md

@@ -14,96 +14,12 @@ In this demo, learn how to use a [CalendarMonth](/components/date-and-time/calen
 
 ### Date and time picker
 
-```ts file="./examples/DateTimePicker/DateTimePicker.tsx"
+```ts file="examples/DateTimePicker/DateTimePicker.tsx"
 
 ```
 
 ### Date and time range picker
 
-```js
-import { useState } from 'react';
-import { Flex, FlexItem, InputGroup, InputGroupItem, DatePicker, isValidDate, TimePicker, yyyyMMddFormat, updateDateTime } from '@patternfly/react-core';
-
-DateTimeRangePicker = () => {
-  const [from, setFrom] = useState();
-  const [to, setTo] = useState();
-
-  const toValidator = (date) => {
-    return isValidDate(from) && yyyyMMddFormat(date) >= yyyyMMddFormat(from)
-      ? ''
-      : 'The "to" date must be after the "from" date';
-  };
-
-  const onFromDateChange = (_event, inputDate, newFromDate) => {
-    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, time, hour, minute) => {
-    if (isValidDate(from)) {
-      const updatedFromDate = new Date(from);
-      updatedFromDate.setHours(hour);
-      updatedFromDate.setMinutes(minute);
-      setFrom(updatedFromDate);
-    }
-  };
-
-  const onToDateChange = (_event, inputDate, newToDate) => {
-    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, time, hour, minute) => {
-    if (isValidDate(to)) {
-      const updatedToDate = new Date(to);
-      updatedToDate.setHours(hour);
-      updatedToDate.setMinutes(minute);
-      setTo(updatedToDate);
-    }
-  };
+```ts file="examples/DateTimePicker/DateTimeRangePicker.tsx"
 
-  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>
-  );
-}
 ```

package/src/demos/DescriptionList/DescriptionList.md

@@ -4,7 +4,7 @@ section: components
 ---
 
 import { useRef, useState } from 'react';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
@@ -13,9 +13,11 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 ### Basic
 
 ```ts file="examples/DescriptionListBasic.tsx" isFullscreen
+
 ```
 
 ### In drawer
 
 ```ts file="examples/DescriptionListInDrawer.tsx" isFullscreen
+
 ```

package/src/demos/DescriptionList/examples/DescriptionListBasic.tsx

@@ -13,7 +13,7 @@ import {
   Flex,
   FlexItem
 } from '@patternfly/react-core';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 
 export const DescriptionListBasic: React.FunctionComponent = () => (
@@ -43,7 +43,7 @@ export const DescriptionListBasic: React.FunctionComponent = () => (
               <DescriptionListDescription>
                 <Flex>
                   <FlexItem spacer={{ lg: 'spacerSm' }}>
-                    <CheckCircleIcon color="green" />
+                    <RhUiCheckCircleFillIcon color="green" />
                   </FlexItem>
                   <FlexItem>Active</FlexItem>
                 </Flex>

package/src/demos/HelperText.md

@@ -5,11 +5,11 @@ section: components
 
 import { useEffect, useState } from 'react';
 import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import 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 CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-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';
 
 ## Demos
 

package/src/demos/JumpLinks.md

@@ -21,134 +21,7 @@ JumpLinks has a scrollspy built-in to make your implementation easier. When impl
 
 This demo expands on the previous to show the JumpLinks in a vertical layout with subsections. It scrolls the [Page](/components/page)'s `mainContainerId` with an `offset` calculated based on the height of the masthead and the nav list when it appears above the content. The headings are given a tab index to allow the jump links to focus on them.
 
-```js isFullscreen
-import { useEffect, useState } from 'react';
-import {
-  PageSection,
-  JumpLinks,
-  JumpLinksItem,
-  JumpLinksList,
-  PageGroup,
-  Sidebar,
-  SidebarContent,
-  SidebarPanel,
-  Switch,
-  Title,
-  Content,
-  getResizeObserver
-} from '@patternfly/react-core';
-import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
-import mastheadStyles from '@patternfly/react-styles/css/components/Masthead/masthead';
-
-ScrollspyH2 = () => {
-  const headings = [1, 2, 3, 4, 5];
-
-  const [isVertical, setIsVertical] = useState(true);
-  const [offsetHeight, setOffsetHeight] = useState(10);
-  const offsetForPadding = 10;
-  let masthead;
-
-  // Update offset based on the masthead and jump links nav heights.
-  useEffect(() => {
-    masthead = document.getElementsByClassName(mastheadStyles.masthead)[0];
-
-    if (isVertical) {
-      setOffsetHeight(masthead.offsetHeight + offsetForPadding);
-    } else {
-      // Append jump links nav height to the masthead height when value exists.
-      const jumpLinksHeaderHeight = document.getElementsByClassName('pf-m-sticky')[0].offsetHeight;
-      jumpLinksHeaderHeight && setOffsetHeight(masthead.offsetHeight + jumpLinksHeaderHeight + offsetForPadding);
-    }
-
-    
-  }, [isVertical]);
-
-  getResizeObserver(
-    document.getElementsByClassName(mastheadStyles.masthead)[0],
-    () => {
-      if (isVertical) {
-        setOffsetHeight(masthead.offsetHeight + offsetForPadding);
-      } else {
-        // Append jump links nav height to the masthead height when value exists.
-        const jumpLinksHeaderHeight = document.getElementsByClassName('pf-m-sticky')[0].offsetHeight;
-        jumpLinksHeaderHeight && setOffsetHeight(masthead.offsetHeight + jumpLinksHeaderHeight + offsetForPadding);
-      }
-    },
-    true
-  );
-
-  return (
-    <DashboardWrapper breadcrumb={null} mainContainerId="scrollable-element">
-      <PageSection aria-labelledby='main-title'>
-        <Title headingLevel="h1" size="2xl" id='main-title'>
-          Main title
-        </Title>
-        <Switch
-          id="is-vertical"
-          label="Vertical jump links"
-          isChecked={isVertical}
-          onChange={(_event, check) => setIsVertical(check)}
-        />
-      </PageSection>
-      <PageSection padding={{ default: 'noPadding' }} >
-        <Sidebar hasGutter orientation={!isVertical && 'stack'}>
-          <SidebarPanel variant="sticky">
-            <PageSection aria-label='Jump links navigation'>
-              <JumpLinks
-                isVertical={isVertical}
-                isCentered={!isVertical}
-                label="Jump to section"
-                scrollableSelector=".pf-v6-c-page__main-container"
-                offset={offsetHeight}
-                expandable={{ default: isVertical ? 'expandable' : 'nonExpandable', md: 'nonExpandable' }}
-                isExpanded
-              >
-                {headings.map(i => (
-                  <JumpLinksItem key={i} href={`#heading-${i}`}>
-                    {`Heading ${i}`}
-                    <JumpLinksList></JumpLinksList>
-                  </JumpLinksItem>
-                ))}
-              </JumpLinks>
-            </PageSection>
-          </SidebarPanel>
-          <SidebarContent hasNoBackground>
-            <PageSection aria-label='Main content'>
-              <Content>
-                {headings.map(i => (
-                  <div key={i} style={{ maxWidth: '800px', marginBottom: '32px' }}>
-                    <h2 id={`heading-${i}`} tabIndex={-1}>
-                      {`Heading ${i}`}
-                    </h2>
-                    <p>
-                      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
-                      labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
-                      nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit
-                      esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
-                      in culpa qui officia deserunt mollit anim id est laborum.
-                    </p>
-                    <br />
-                    <p>
-                      At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum
-                      deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non
-                      provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum
-                      fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta
-                      nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus,
-                      omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis
-                      debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non
-                      recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus
-                      maiores alias consequatur aut perferendis doloribus asperiores repellat.
-                    </p>
-                  </div>
-                ))}
-              </Content>
-            </PageSection>
-          </SidebarContent>
-        </Sidebar>
-      </PageSection>
-    </DashboardWrapper>
-  );
-};
+```ts file="examples/JumpLinks/JumpLinksScrollspy.tsx" isFullscreen 
 ```
 
 ### With drawer
@@ -157,5 +30,5 @@ This demo shows how jump links can be used in combination with a drawer.
 
 This demo uses a `scrollableRef` prop on the JumpLinks component, which is a React ref to the `DrawerContent` component.
 
-```js isFullscreen file="./examples/JumpLinks/JumpLinksWithDrawer.js"
+```ts file="examples/JumpLinks/JumpLinksWithDrawer.tsx" isFullscreen
 ```

package/src/demos/LabelGroupDemos.md

@@ -5,7 +5,7 @@ section: components
 
 import { Fragment, useEffect, useRef, useState } from 'react';
 import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
-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';
 
 ## Demos
 

package/src/demos/Masthead.md

@@ -6,8 +6,8 @@ section: components
 import { cloneElement, Fragment, useEffect, useRef, useState } from 'react';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
+import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
@@ -24,7 +24,9 @@ Many mastheads contain utilities which collapse into a dropdown at smaller viewp
 ```ts file='./examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx' isFullscreen
 
 ```
+
 ### Horizontal nav
+
 ```ts file='./examples/Masthead/MastheadWithHorizontalNav.tsx' isFullscreen
 
-```
+```