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

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.5.0-prerelease.49","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.5.0-prerelease.50","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.5.0-prerelease.49","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.5.0-prerelease.50","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.5.0-prerelease.49","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.5.0-prerelease.50","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.5.0-prerelease.50",
+  "version": "6.5.0-prerelease.51",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "911223aa1a6b9309d90d31245bc29f3e1a9c675c"
+  "gitHead": "a0b9ac014defa883b866ff864ae857be51d7c6fe"
 }

package/src/components/Button/Button.tsx

@@ -6,7 +6,7 @@ import { useOUIAProps, OUIAProps } from '../../helpers/OUIA/ouia';
 import { Badge } from '../Badge';
 import StarIcon from '@patternfly/react-icons/dist/esm/icons/star-icon';
 import OutlinedStarIcon from '@patternfly/react-icons/dist/esm/icons/outlined-star-icon';
-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 { hamburgerIcon } from './hamburgerIcon';
 
 export enum ButtonVariant {
@@ -215,7 +215,7 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
     }
 
     if (isSettings) {
-      iconContent = <CogIcon />;
+      iconContent = <RhUiSettingsFillIcon />;
     }
     if (isHamburger) {
       iconContent = hamburgerIcon;

package/src/components/Icon/examples/Icon.md

@@ -9,7 +9,7 @@ import { Fragment, useState } from 'react';
 import LongArrowAltDownIcon from '@patternfly/react-icons/dist/esm/icons/long-arrow-alt-down-icon';
 import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
 import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
-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 PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
 import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
@@ -22,6 +22,7 @@ import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-
 ### Basic
 
 ```ts file="IconBasic.tsx"
+
 ```
 
 ### Standalone icon sizes
@@ -29,6 +30,7 @@ import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-
 These are the standard options for sizing icons.
 
 ```ts file="StandaloneIconSizes.tsx"
+
 ```
 
 ### Body sizes
@@ -36,6 +38,7 @@ These are the standard options for sizing icons.
 These size options are meant to make icons match the size of body text.
 
 ```ts file="BodyIconSizes.tsx"
+
 ```
 
 ### Heading sizes
@@ -43,6 +46,7 @@ These size options are meant to make icons match the size of body text.
 These size options are meant to make icons match the size of heading text.
 
 ```ts file="HeadingIconSizes.tsx"
+
 ```
 
 ### Status colors
@@ -50,6 +54,7 @@ These size options are meant to make icons match the size of heading text.
 The following example demonstrates the various status variants of an icon. Keep in mind that these icons are displayed out of a typical context, and that you should not rely on color alone to convey status to users.
 
 ```ts file="IconStatus.tsx"
+
 ```
 
 ### Sizing an icon within the icon container
@@ -57,11 +62,13 @@ The following example demonstrates the various status variants of an icon. Keep
 Providing both size and iconSize properties allows the icon container to maintain a consistent size, even if the icon changes in size.
 
 ```ts file="IconContentSizes.tsx"
+
 ```
 
 ### Inline
 
 ```ts file="IconInline.tsx"
+
 ```
 
 ### In progress
@@ -69,9 +76,11 @@ Providing both size and iconSize properties allows the icon container to maintai
 Passing the `isInProgress` property will swap the icon to a progress icon. By default this progress icon will be a `Spinner` but may be customized or overriden using the `progressIcon` property.
 
 ```ts file="IconProgress.tsx"
+
 ```
 
 ### Custom in progress icon
 
 ```ts file="IconCustomProgress.tsx"
+
 ```

package/src/components/Icon/examples/IconBasic.tsx

@@ -3,7 +3,7 @@ import { Icon } from '@patternfly/react-core';
 import LongArrowAltDownIcon from '@patternfly/react-icons/dist/esm/icons/long-arrow-alt-down-icon';
 import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
 import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
-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';
 
 export const IconBasic: React.FunctionComponent = () => (
   <Fragment>
@@ -17,7 +17,7 @@ export const IconBasic: React.FunctionComponent = () => (
       <RhMicronsCaretDownIcon />
     </Icon>{' '}
     <Icon>
-      <CogIcon />
+      <RhUiSettingsFillIcon />
     </Icon>
   </Fragment>
 );

package/src/components/MenuToggle/MenuToggle.tsx

@@ -3,7 +3,7 @@ import styles from '@patternfly/react-styles/css/components/MenuToggle/menu-togg
 import { css } from '@patternfly/react-styles';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 import { BadgeProps } from '../Badge';
-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 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 RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
@@ -150,7 +150,7 @@ class MenuToggleBase extends Component<MenuToggleProps> {
           const content = (
             <>
               {(icon || isSettings) && (
-                <span className={css(styles.menuToggleIcon)}>{isSettings ? <CogIcon /> : icon}</span>
+                <span className={css(styles.menuToggleIcon)}>{isSettings ? <RhUiSettingsFillIcon /> : icon}</span>
               )}
               {isTypeahead ? children : children && <span className={css(styles.menuToggleText)}>{children}</span>}
               {isValidElement(badge) && <span className={css(styles.menuToggleCount)}>{badge}</span>}

package/src/components/MenuToggle/__tests__/MenuToggle.test.tsx

@@ -1,7 +1,7 @@
 import { MenuToggle } from '../MenuToggle';
 import { MenuToggleCheckbox } from '../MenuToggleCheckbox';
 import { Badge } from '../../Badge';
-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 EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import userEvent from '@testing-library/user-event';
 import { render, screen } from '@testing-library/react';
@@ -45,7 +45,7 @@ describe('Old Snapshot tests - remove when refactoring', () => {
   });
 
   test('shows icon', () => {
-    const { asFragment } = render(<MenuToggle icon={<CogIcon />}>Toggle</MenuToggle>);
+    const { asFragment } = render(<MenuToggle icon={<RhUiSettingsFillIcon />}>Toggle</MenuToggle>);
     expect(asFragment()).toMatchSnapshot();
   });
 

package/src/components/MenuToggle/__tests__/__snapshots__/MenuToggle.test.tsx.snap

@@ -184,24 +184,12 @@ exports[`Old Snapshot tests - remove when refactoring shows icon 1`] = `
         fill="currentColor"
         height="1em"
         role="img"
+        viewBox="0 0 32 32"
         width="1em"
       >
-        <svg
-          class="pf-v6-icon-default"
-          viewBox="0 0 512 512"
-        >
-          <path
-            d="M487.4 315.7l-42.6-24.6c4.3-23.2 4.3-47 0-70.2l42.6-24.6c4.9-2.8 7.1-8.6 5.5-14-11.1-35.6-30-67.8-54.7-94.6-3.8-4.1-10-5.1-14.8-2.3L380.8 110c-17.9-15.4-38.5-27.3-60.8-35.1V25.8c0-5.6-3.9-10.5-9.4-11.7-36.7-8.2-74.3-7.8-109.2 0-5.5 1.2-9.4 6.1-9.4 11.7V75c-22.2 7.9-42.8 19.8-60.8 35.1L88.7 85.5c-4.9-2.8-11-1.9-14.8 2.3-24.7 26.7-43.6 58.9-54.7 94.6-1.7 5.4.6 11.2 5.5 14L67.3 221c-4.3 23.2-4.3 47 0 70.2l-42.6 24.6c-4.9 2.8-7.1 8.6-5.5 14 11.1 35.6 30 67.8 54.7 94.6 3.8 4.1 10 5.1 14.8 2.3l42.6-24.6c17.9 15.4 38.5 27.3 60.8 35.1v49.2c0 5.6 3.9 10.5 9.4 11.7 36.7 8.2 74.3 7.8 109.2 0 5.5-1.2 9.4-6.1 9.4-11.7v-49.2c22.2-7.9 42.8-19.8 60.8-35.1l42.6 24.6c4.9 2.8 11 1.9 14.8-2.3 24.7-26.7 43.6-58.9 54.7-94.6 1.5-5.5-.7-11.3-5.6-14.1zM256 336c-44.1 0-80-35.9-80-80s35.9-80 80-80 80 35.9 80 80-35.9 80-80 80z"
-          />
-        </svg>
-        <svg
-          class="pf-v6-icon-rh-ui"
-          viewBox="0 0 32 32"
-        >
-          <path
-            d="M16 11c-2.757 0-5 2.243-5 5s2.243 5 5 5 5-2.243 5-5-2.243-5-5-5Zm0 8c-1.654 0-3-1.346-3-3s1.346-3 3-3 3 1.346 3 3-1.346 3-3 3Zm14.657-6.211c-.1-.46-.507-.789-.978-.789h-2.373c-.141-.4-.302-.791-.481-1.168l1.677-1.676a1 1 0 0 0 .134-1.249 15.23 15.23 0 0 0-4.543-4.542 1 1 0 0 0-1.248.134l-1.677 1.676c-.378-.18-.768-.341-1.168-.481V2.32a1 1 0 0 0-.788-.978 15.32 15.32 0 0 0-6.424 0A1 1 0 0 0 12 2.32v2.374c-.4.141-.79.302-1.168.481L9.155 3.499a1 1 0 0 0-1.248-.134 15.246 15.246 0 0 0-4.543 4.541 1 1 0 0 0 .134 1.249l1.677 1.676c-.18.378-.341.769-.481 1.168H2.321a1 1 0 0 0-.978.789 15.17 15.17 0 0 0 0 6.422c.1.46.507.789.978.789h2.373c.141.4.302.791.481 1.168l-1.677 1.676a1 1 0 0 0-.134 1.249 15.253 15.253 0 0 0 4.543 4.542 1 1 0 0 0 1.248-.134l1.677-1.676c.378.18.768.341 1.168.481v2.374a1 1 0 0 0 .788.978 15.23 15.23 0 0 0 6.424 0 1 1 0 0 0 .788-.978v-2.374c.4-.141.79-.302 1.168-.481l1.677 1.676a1 1 0 0 0 1.248.134 15.2 15.2 0 0 0 4.543-4.542 1 1 0 0 0-.134-1.249l-1.677-1.676c.18-.378.341-.769.481-1.168h2.373a1 1 0 0 0 .978-.789 15.177 15.177 0 0 0 0-6.422ZM28.848 18h-2.272a1 1 0 0 0-.962.727 9.963 9.963 0 0 1-.885 2.144 1 1 0 0 0 .166 1.195l1.604 1.604a13.234 13.234 0 0 1-2.828 2.829l-1.604-1.604a1 1 0 0 0-1.195-.166 9.96 9.96 0 0 1-2.144.884 1 1 0 0 0-.728.962v2.273a13.277 13.277 0 0 1-4 0v-2.273a1 1 0 0 0-.728-.962 9.96 9.96 0 0 1-2.144-.884 1.001 1.001 0 0 0-1.195.166l-1.604 1.604a13.196 13.196 0 0 1-2.828-2.829l1.604-1.604c.316-.316.384-.805.166-1.195a9.963 9.963 0 0 1-.885-2.144A1 1 0 0 0 5.424 18H3.152a13.126 13.126 0 0 1 0-4h2.272a1 1 0 0 0 .962-.727 9.963 9.963 0 0 1 .885-2.144 1 1 0 0 0-.166-1.195L5.501 8.33a13.163 13.163 0 0 1 2.828-2.829l1.604 1.604c.316.316.805.383 1.195.166a9.96 9.96 0 0 1 2.144-.884A1 1 0 0 0 14 5.425V3.152a13.277 13.277 0 0 1 4 0v2.273a1 1 0 0 0 .728.962 9.96 9.96 0 0 1 2.144.884 1 1 0 0 0 1.195-.166l1.604-1.604a13.196 13.196 0 0 1 2.828 2.828l-1.604 1.604a1.001 1.001 0 0 0-.166 1.195c.372.665.67 1.386.885 2.144a1 1 0 0 0 .962.727h2.272a13.245 13.245 0 0 1 0 4Z"
-          />
-        </svg>
+        <path
+          d="M30.168 12.894a.5.5 0 0 0-.488-.394h-2.732a11.512 11.512 0 0 0-.729-1.769l1.931-1.93a.5.5 0 0 0 .066-.625 14.693 14.693 0 0 0-4.393-4.392.498.498 0 0 0-.624.067l-1.93 1.93a11.512 11.512 0 0 0-1.769-.729V2.319a.5.5 0 0 0-.395-.489 14.81 14.81 0 0 0-6.211 0 .5.5 0 0 0-.395.489v2.733c-.614.196-1.207.439-1.769.729L8.8 3.851a.498.498 0 0 0-.624-.067 14.714 14.714 0 0 0-4.393 4.392.5.5 0 0 0 .066.625l1.931 1.93a11.512 11.512 0 0 0-.729 1.769H2.319a.5.5 0 0 0-.488.394 14.652 14.652 0 0 0 0 6.212.5.5 0 0 0 .488.394h2.732c.196.615.44 1.207.729 1.769l-1.931 1.93a.5.5 0 0 0-.066.625 14.673 14.673 0 0 0 4.393 4.392.498.498 0 0 0 .624-.067l1.93-1.93c.562.289 1.154.533 1.769.729v2.733a.5.5 0 0 0 .395.489 14.686 14.686 0 0 0 6.21 0 .5.5 0 0 0 .395-.489v-2.733a11.454 11.454 0 0 0 1.769-.729l1.93 1.93a.5.5 0 0 0 .624.067 14.714 14.714 0 0 0 4.393-4.392.5.5 0 0 0-.066-.625l-1.931-1.93c.289-.562.533-1.154.729-1.769h2.732a.5.5 0 0 0 .488-.394 14.652 14.652 0 0 0 0-6.212ZM16 21.25c-2.895 0-5.25-2.355-5.25-5.25s2.355-5.25 5.25-5.25 5.25 2.355 5.25 5.25-2.355 5.25-5.25 5.25Z"
+        />
       </svg>
     </span>
     <span

package/src/demos/CustomMenus/CustomMenus.md

@@ -6,7 +6,7 @@ subsection: menus
 
 import { cloneElement, Fragment, useEffect, useRef, useState } from 'react';
 
-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 EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import TableIcon from '@patternfly/react-icons/dist/esm/icons/table-icon';
 import StorageDomainIcon from '@patternfly/react-icons/dist/esm/icons/storage-domain-icon';

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/Masthead.md

@@ -7,7 +7,7 @@ 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 RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
-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 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
 
-```
+```

package/src/demos/Nav.md

@@ -4,7 +4,7 @@ section: components
 ---
 
 import { Fragment, useState } from 'react';
-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';
@@ -20,44 +20,53 @@ import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardH
 ### Default nav
 
 ```ts file="./examples/Nav/NavDefault.tsx" isFullscreen
+
 ```
 
 ### Grouped nav
 
 ```ts file="./examples/Nav/NavGrouped.tsx" isFullscreen
+
 ```
 
 ### Expandable nav
 
 ```ts file="./examples/Nav/NavExpandable.tsx" isFullscreen
+
 ```
 
 ### Horizontal nav
 
 ```ts file="./examples/Nav/NavHorizontal.tsx" isFullscreen
+
 ```
 
 ### Horizontal subnav
 
 ```ts file="./examples/Nav/NavWithSubnav.tsx" isFullscreen
+
 ```
 
 ### Horizontal nav with horizontal subnav
 
 ```ts file="./examples/Nav/NavHorizontalWithSubnav.tsx" isFullscreen
+
 ```
 
 ### Manual nav
 
 ```ts file="./examples/Nav/NavManual.tsx" isFullscreen
+
 ```
 
 ### Flyout nav
 
 ```ts file="./examples/Nav/NavFlyout.tsx" isFullscreen
+
 ```
 
 ### Drilldown nav
 
 ```ts isFullscreen file="./examples/Nav/NavDrilldown.tsx"
+
 ```

package/src/demos/NotificationDrawer/NotificationDrawer.md

@@ -6,7 +6,7 @@ section: components
 import { Fragment, useRef, useState } from 'react';
 
 import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
-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 BarsIcon from '@patternfly/react-icons/dist/js/icons/bars-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
@@ -18,7 +18,6 @@ import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Co
 ## Demos
 
 - Focus must be manually managed when the NotificationDrawer component is opened:
-
   1. Create a React `ref` and pass it into the NotificationDrawer component's `ref` attribute
   2. Pass in a function to the `onNotificationDrawerExpand` prop of the Page component that will place focus on the first interact-able element inside the NotificationDrawer component via the previously created `ref`
 

package/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx

@@ -45,7 +45,7 @@ import {
   ToolbarGroup,
   ToolbarContent
 } from '@patternfly/react-core';
-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';
@@ -157,7 +157,7 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
   const kebabDropdownItems = (
     <>
       <DropdownItem>
-        <CogIcon /> Settings
+        <RhUiSettingsFillIcon /> Settings
       </DropdownItem>
       <DropdownItem>
         <HelpIcon /> Help

package/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx

@@ -47,7 +47,7 @@ import {
   ToolbarGroup,
   ToolbarContent
 } from '@patternfly/react-core';
-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 SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
@@ -207,7 +207,7 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
   const kebabDropdownItems = (
     <>
       <DropdownItem>
-        <CogIcon /> Settings
+        <RhUiSettingsFillIcon /> Settings
       </DropdownItem>
       <DropdownItem>
         <HelpIcon /> Help

package/src/demos/Page.md

@@ -5,7 +5,7 @@ section: components
 
 import { useState, useRef, useEffect } from 'react';
 import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
-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 imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';

package/src/demos/RTL/RTL.md

@@ -12,7 +12,7 @@ import ClockIcon from '@patternfly/react-icons/dist/esm/icons/clock-icon';
 import WalkingIcon from '@patternfly/react-icons/dist/esm/icons/walking-icon';
 import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
-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 QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';

package/src/demos/RTL/examples/PaginatedTable.tsx

@@ -48,7 +48,7 @@ import ToolsIcon from '@patternfly/react-icons/dist/esm/icons/tools-icon';
 import ClockIcon from '@patternfly/react-icons/dist/esm/icons/clock-icon';
 import WalkingIcon from '@patternfly/react-icons/dist/esm/icons/walking-icon';
 import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
-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 QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
@@ -279,7 +279,7 @@ export const PaginatedTableAction: React.FunctionComponent = () => {
 
   const kebabDropdownItems = (
     <>
-      <DropdownItem icon={<CogIcon />}>{translation.kebabDropdown.settings}</DropdownItem>
+      <DropdownItem icon={<RhUiSettingsFillIcon />}>{translation.kebabDropdown.settings}</DropdownItem>
       <DropdownItem icon={<HelpIcon />}>{translation.kebabDropdown.help}</DropdownItem>
     </>
   );

package/src/demos/Toolbar.md

@@ -9,7 +9,7 @@ import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
 import DownloadIcon from '@patternfly/react-icons/dist/esm/icons/download-icon';
-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 SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
@@ -21,4 +21,5 @@ import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/Dashboard
 This is an example of toolbar usage in log viewer.
 
 ```ts file="examples/Toolbar/ConsoleLogViewerToolbar.tsx" isFullscreen
+
 ```

package/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx

@@ -37,7 +37,7 @@ import {
   ToolbarItem
 } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-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 imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
@@ -129,7 +129,7 @@ export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
   const kebabDropdownItems = (
     <>
       <DropdownItem key="settings">
-        <CogIcon /> Settings
+        <RhUiSettingsFillIcon /> Settings
       </DropdownItem>
       <DropdownItem key="help">
         <HelpIcon /> Help

package/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx

@@ -50,7 +50,7 @@ import {
   Tooltip
 } from '@patternfly/react-core';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-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 ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
@@ -372,7 +372,7 @@ export const MastheadWithUtilitiesAndUserDropdownMenu: React.FunctionComponent =
   const kebabDropdownItems = (
     <>
       <DropdownItem key="settings">
-        <CogIcon /> Settings
+        <RhUiSettingsFillIcon /> Settings
       </DropdownItem>
       <DropdownItem key="help">
         <HelpIcon /> Help

package/src/demos/examples/Nav/NavFlyout.tsx

@@ -36,7 +36,7 @@ import {
   ToolbarGroup,
   ToolbarItem
 } from '@patternfly/react-core';
-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 EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
@@ -110,7 +110,7 @@ export const NavFlyout: React.FunctionComponent = () => {
   const kebabDropdownItems = (
     <>
       <DropdownItem>
-        <CogIcon /> Settings
+        <RhUiSettingsFillIcon /> Settings
       </DropdownItem>
       <DropdownItem>
         <HelpIcon /> Help

package/src/demos/examples/Nav/NavHorizontal.tsx

@@ -33,7 +33,7 @@ import {
   ToolbarGroup,
   ToolbarItem
 } from '@patternfly/react-core';
-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';
@@ -88,7 +88,7 @@ export const NavHorizontal: React.FunctionComponent = () => {
   const kebabDropdownItems = (
     <>
       <DropdownItem>
-        <CogIcon /> Settings
+        <RhUiSettingsFillIcon /> Settings
       </DropdownItem>
       <DropdownItem>
         <HelpIcon /> Help

package/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx

@@ -36,7 +36,7 @@ import {
   ToolbarGroup,
   ToolbarItem
 } from '@patternfly/react-core';
-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';
@@ -107,7 +107,7 @@ export const NavHorizontalWithSubnav: React.FunctionComponent = () => {
   const kebabDropdownItems = (
     <>
       <DropdownItem>
-        <CogIcon /> Settings
+        <RhUiSettingsFillIcon /> Settings
       </DropdownItem>
       <DropdownItem>
         <HelpIcon /> Help

package/src/demos/examples/Nav/NavManual.tsx

@@ -37,7 +37,7 @@ import {
   ToolbarGroup,
   ToolbarItem
 } from '@patternfly/react-core';
-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';
@@ -104,7 +104,7 @@ export const NavManual: React.FunctionComponent = () => {
   const kebabDropdownItems = (
     <>
       <DropdownItem>
-        <CogIcon /> Settings
+        <RhUiSettingsFillIcon /> Settings
       </DropdownItem>
       <DropdownItem>
         <HelpIcon /> Help

package/src/demos/examples/Page/PageContextSelector.tsx

@@ -40,7 +40,7 @@ import {
   ToolbarGroup,
   ToolbarItem
 } from '@patternfly/react-core';
-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';
@@ -114,7 +114,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
   const kebabDropdownItems = (
     <>
       <DropdownItem>
-        <CogIcon /> Settings
+        <RhUiSettingsFillIcon /> Settings
       </DropdownItem>
       <DropdownItem>
         <HelpIcon /> Help

package/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx

@@ -40,7 +40,7 @@ import {
   ToolbarGroup,
   ToolbarItem
 } from '@patternfly/react-core';
-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';
@@ -100,7 +100,7 @@ export const PageStickySectionBreadcrumb: React.FunctionComponent = () => {
   const kebabDropdownItems = (
     <>
       <DropdownItem>
-        <CogIcon /> Settings
+        <RhUiSettingsFillIcon /> Settings
       </DropdownItem>
       <DropdownItem>
         <HelpIcon /> Help

package/src/demos/examples/Page/PageStickySectionGroup.tsx

@@ -40,7 +40,7 @@ import {
   ToolbarGroup,
   ToolbarItem
 } from '@patternfly/react-core';
-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';
@@ -100,7 +100,7 @@ export const PageStickySectionGroup: React.FunctionComponent = () => {
   const kebabDropdownItems = (
     <>
       <DropdownItem>
-        <CogIcon /> Settings
+        <RhUiSettingsFillIcon /> Settings
       </DropdownItem>
       <DropdownItem>
         <HelpIcon /> Help