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

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.59","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.61","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.59","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.61","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.59","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.61","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.5.0-prerelease.60",
+  "version": "6.5.0-prerelease.62",
   "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",
@@ -46,15 +46,15 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.5.0-prerelease.25",
-    "@patternfly/react-styles": "^6.5.0-prerelease.19",
-    "@patternfly/react-tokens": "^6.5.0-prerelease.18",
+    "@patternfly/react-icons": "^6.5.0-prerelease.27",
+    "@patternfly/react-styles": "^6.5.0-prerelease.20",
+    "@patternfly/react-tokens": "^6.5.0-prerelease.19",
     "focus-trap": "7.6.6",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.5.0-prerelease.72",
+    "@patternfly/patternfly": "6.5.0-prerelease.75",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
     "fs-extra": "^11.3.3"
@@ -63,5 +63,5 @@
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "30db3d99f05b39b6478ed7ed48baeb29bfb895cd"
+  "gitHead": "be84c3eebc2aeff7b86dc28b4a553ad140553c3a"
 }

package/src/components/Button/Button.tsx

@@ -4,8 +4,8 @@ import { css } from '@patternfly/react-styles';
 import { Spinner, spinnerSize } from '../Spinner';
 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 RhUiStarFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-star-fill-icon';
+import RhUiStarIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-star-icon';
 import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
 import { hamburgerIcon } from './hamburgerIcon';
 
@@ -211,10 +211,10 @@ const ButtonBase: React.FunctionComponent<ButtonProps> = ({
       iconContent = (
         <>
           <span className={css('pf-v6-c-button__icon-favorite')}>
-            <OutlinedStarIcon />
+            <RhUiStarIcon />
           </span>
           <span className={css('pf-v6-c-button__icon-favorited')}>
-            <StarIcon />
+            <RhUiStarFillIcon />
           </span>
         </>
       );

package/src/components/Button/examples/Button.md

@@ -9,12 +9,12 @@ ouia: true
 import { Fragment, useState } from 'react';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
-import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
+import RhUiExternalLinkFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-external-link-fill-icon';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
-import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 
 ## Examples
 

package/src/components/Button/examples/ButtonPlainHasNoPadding.tsx

@@ -1,10 +1,10 @@
 import { Button } from '@patternfly/react-core';
-import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 
 export const ButtonPlainHasNoPadding: React.FunctionComponent = () => (
   <p>
     This is an example of a button
-    <Button variant="plain" hasNoPadding aria-label="More info" icon={<QuestionCircleIcon />} />
+    <Button variant="plain" hasNoPadding aria-label="More info" icon={<RhUiQuestionMarkCircleFillIcon />} />
     which is placed inline with text
   </p>
 );

package/src/components/Button/examples/ButtonVariations.tsx

@@ -1,7 +1,7 @@
 import { Button, Flex } from '@patternfly/react-core';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
-import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
+import RhUiExternalLinkFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-external-link-fill-icon';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 
@@ -32,7 +32,7 @@ export const ButtonVariations: React.FunctionComponent = () => (
       <Button variant="link" icon={<PlusCircleIcon />}>
         Link
       </Button>
-      <Button variant="link" icon={<ExternalLinkSquareAltIcon />} iconPosition="end">
+      <Button variant="link" icon={<RhUiExternalLinkFillIcon />} iconPosition="end">
         Link
       </Button>
       <Button variant="link" isInline>

package/src/components/Compass/examples/Compass.md

@@ -20,7 +20,7 @@ import { useRef, useState, useEffect } from 'react';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 import OutlinedPlusSquare from '@patternfly/react-icons/dist/esm/icons/outlined-plus-square-icon';
 import OutlinedCopy from '@patternfly/react-icons/dist/esm/icons/outlined-copy-icon';
-import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
+import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
 
 import './compass.css';
 

package/src/components/InputGroup/examples/InputGroup.md

@@ -9,7 +9,7 @@ import { Fragment, useRef, useState } from 'react';
 import AtIcon from '@patternfly/react-icons/dist/esm/icons/at-icon';
 import DollarSignIcon from '@patternfly/react-icons/dist/esm/icons/dollar-sign-icon';
 import CalendarAltIcon from '@patternfly/react-icons/dist/esm/icons/calendar-alt-icon';
-import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 
 ## Examples
 

package/src/components/InputGroup/examples/InputGroupWithPopover.tsx

@@ -1,5 +1,5 @@
 import { Fragment, useRef } from 'react';
-import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 import { Button, InputGroup, InputGroupItem, TextInput, Popover, PopoverPosition } from '@patternfly/react-core';
 
 export const InputGroupWithPopover: React.FunctionComponent = () => {
@@ -23,7 +23,7 @@ export const InputGroupWithPopover: React.FunctionComponent = () => {
             bodyContent="This field is an example of an input group with a popover."
             appendTo={() => inputGroupRef1.current}
           >
-            <Button variant="control" aria-label="popover for input" icon={<QuestionCircleIcon />} />
+            <Button variant="control" aria-label="popover for input" icon={<RhUiQuestionMarkCircleFillIcon />} />
           </Popover>
         </InputGroupItem>
       </InputGroup>
@@ -44,7 +44,7 @@ export const InputGroupWithPopover: React.FunctionComponent = () => {
             bodyContent="This field is an example of an input group with a popover."
             appendTo={() => inputGroupRef2.current}
           >
-            <Button variant="plain" aria-label="Popover for input" icon={<QuestionCircleIcon />} />
+            <Button variant="plain" aria-label="Popover for input" icon={<RhUiQuestionMarkCircleFillIcon />} />
           </Popover>
         </InputGroupItem>
       </InputGroup>

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

@@ -6,7 +6,7 @@ import { SearchInput } from '../SearchInput';
 import { FormGroup } from '../../Form';
 import { Button } from '../../Button';
 import { AnimationsProvider } from '../../../helpers/AnimationsProvider';
-import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
+import RhUiExternalLinkFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-external-link-fill-icon';
 import badgeStyles from '@patternfly/react-styles/css/components/Badge/badge';
 import textInputGroupStyles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
 import inputGroupStyles from '@patternfly/react-styles/css/components/InputGroup/input-group';
@@ -128,7 +128,7 @@ describe('SearchInput', () => {
         advancedSearchDelimiter=":"
         formAdditionalItems={
           <FormGroup fieldId="test-form-group">
-            <Button variant="link" isInline icon={<ExternalLinkSquareAltIcon />} iconPosition="right">
+            <Button variant="link" isInline icon={<RhUiExternalLinkFillIcon />} iconPosition="right">
               Link
             </Button>
           </FormGroup>

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

@@ -496,11 +496,11 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                         fill="currentColor"
                         height="1em"
                         role="img"
-                        viewBox="0 0 448 512"
+                        viewBox="0 0 32 32"
                         width="1em"
                       >
                         <path
-                          d="M448 80v352c0 26.51-21.49 48-48 48H48c-26.51 0-48-21.49-48-48V80c0-26.51 21.49-48 48-48h352c26.51 0 48 21.49 48 48zm-88 16H248.029c-21.313 0-32.08 25.861-16.971 40.971l31.984 31.987L67.515 364.485c-4.686 4.686-4.686 12.284 0 16.971l31.029 31.029c4.687 4.686 12.285 4.686 16.971 0l195.526-195.526 31.988 31.991C358.058 263.977 384 253.425 384 231.979V120c0-13.255-10.745-24-24-24z"
+                          d="M28.5 2h-25C2.673 2 2 2.673 2 3.5v25c0 .827.673 1.5 1.5 1.5h25c.827 0 1.5-.673 1.5-1.5v-25c0-.827-.673-1.5-1.5-1.5Zm-3.375 17a1.125 1.125 0 0 1-2.25 0v-8.284L11.796 21.795a1.122 1.122 0 0 1-1.592 0 1.127 1.127 0 0 1 0-1.591l11.08-11.08H13a1.125 1.125 0 0 1 0-2.25h10.5c.896 0 1.625.729 1.625 1.625v10.5Z"
                         />
                       </svg>
                     </span>

package/src/components/SearchInput/examples/SearchInput.md

@@ -6,7 +6,7 @@ propComponents: ['SearchInput', 'SearchInputSearchAttribute', 'SearchInputExpand
 ---
 
 import { useRef, useState } from 'react';
-import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons';
+import RhUiExternalLinkFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-external-link-fill-icon';
 
 ## Examples
 

package/src/components/SearchInput/examples/SearchInputAdvanced.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Button, Checkbox, FormGroup, SearchInput } from '@patternfly/react-core';
-import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
+import RhUiExternalLinkFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-external-link-fill-icon';
 
 export const SearchInputAdvanced: React.FunctionComponent = () => {
   const [value, setValue] = useState('username:player firstname:john');
@@ -45,7 +45,7 @@ export const SearchInputAdvanced: React.FunctionComponent = () => {
         formAdditionalItems={
           useCustomFooter ? (
             <FormGroup>
-              <Button variant="link" isInline icon={<ExternalLinkSquareAltIcon />} iconPosition="end">
+              <Button variant="link" isInline icon={<RhUiExternalLinkFillIcon />} iconPosition="end">
                 Link
               </Button>
             </FormGroup>

package/src/components/ToggleGroup/ToggleGroup.tsx

@@ -10,6 +10,8 @@ export interface ToggleGroupProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;
   /** Modifies the toggle group to include compact styling. */
   isCompact?: boolean;
+  /** Modifies the toggle group items to fill the available space. */
+  isFill?: boolean;
   /** Disable all toggle group items under this component. */
   areAllGroupsDisabled?: boolean;
   /** Accessible label for the toggle group */
@@ -20,6 +22,7 @@ export const ToggleGroup: React.FunctionComponent<ToggleGroupProps> = ({
   className,
   children,
   isCompact = false,
+  isFill = false,
   areAllGroupsDisabled = false,
   'aria-label': ariaLabel,
   ...props
@@ -32,7 +35,12 @@ export const ToggleGroup: React.FunctionComponent<ToggleGroupProps> = ({
 
   return (
     <div
-      className={css(styles.toggleGroup, isCompact && styles.modifiers.compact, className)}
+      className={css(
+        styles.toggleGroup,
+        isCompact && styles.modifiers.compact,
+        isFill && styles.modifiers.fill,
+        className
+      )}
       role="group"
       aria-label={ariaLabel}
       {...props}

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

@@ -3,6 +3,7 @@ import userEvent from '@testing-library/user-event';
 
 import { ToggleGroup } from '../ToggleGroup';
 import { ToggleGroupItem } from '../ToggleGroupItem';
+import styles from '@patternfly/react-styles/css/components/ToggleGroup/toggle-group';
 
 const props = {
   onChange: jest.fn(),
@@ -59,6 +60,28 @@ describe('ToggleGroup', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  test(`does not apply ${styles.modifiers.fill} modifier class by default`, () => {
+    render(
+      <ToggleGroup aria-label="Default toggle group">
+        <ToggleGroupItem text="Test" />
+        <ToggleGroupItem text="Test" />
+      </ToggleGroup>
+    );
+    const toggleGroup = screen.getByRole('group');
+    expect(toggleGroup).not.toHaveClass(styles.modifiers.fill);
+  });
+
+  test(`applies ${styles.modifiers.fill} modifier class when isFill is true`, () => {
+    render(
+      <ToggleGroup isFill aria-label="Fill toggle group">
+        <ToggleGroupItem text="Test" />
+        <ToggleGroupItem text="Test" />
+      </ToggleGroup>
+    );
+    const toggleGroup = screen.getByRole('group');
+    expect(toggleGroup).toHaveClass(styles.modifiers.fill);
+  });
+
   test('should render non-ToggleGroupItem children', () => {
     const { asFragment } = render(
       <ToggleGroup isCompact aria-label="non-element children">

package/src/components/ToggleGroup/examples/ToggleGroup.md

@@ -4,6 +4,7 @@ section: components
 cssPrefix: pf-v6-c-toggle-group
 propComponents: ['ToggleGroup', 'ToggleGroupItem']
 ---
+
 import './toggleGroup.css';
 
 import { useRef, useState } from 'react';
@@ -21,6 +22,7 @@ A single select toggle group allows users to toggle between multiple items.
 To indicate whether a `<ToggleGroupItem>` is selected or not, use the `isSelected` property.
 
 ```ts file="./ToggleGroupDefaultSingle.tsx"
+
 ```
 
 ### Multi select toggle group
@@ -30,6 +32,7 @@ A multi select toggle group allows users to select multiple items at once.
 When a toggle item is disabled it cannot be selected. Click the "Disable all" button in the following example to see this in action.
 
 ```ts file="./ToggleGroupDefaultMultiple.tsx"
+
 ```
 
 ### With icons
@@ -39,6 +42,7 @@ You can use a recognizable icon as a toggle item label.
 To do this, pass an imported icon to the `icon` property of a `<ToggleGroupItem>`.
 
 ```ts file="./ToggleGroupIcon.tsx"
+
 ```
 
 ### With text and icons
@@ -50,13 +54,23 @@ To do this, pass a descriptive label to the `text` property of a `<ToggleGroupIt
 When passing both `text` and `icon` properties to a `<ToggleGroupItem>`, you can also pass in `iconPosition` to determine whether the icon is rendered at the start or end of the item.
 
 ```ts file="./ToggleGroupTextIcon.tsx"
+
 ```
 
 ### Compact toggle group
 
-When space in a UI is limited, you can use a compact toggle group. 
+When space in a UI is limited, you can use a compact toggle group.
 
 To apply compact styling to a `<ToggleGroup>`, use `isCompact`.
 
 ```ts file="./ToggleGroupCompact.tsx"
+
+```
+
+### Full-width toggle group
+
+To make toggle group items fill the available horizontal space, use `isFill` on a `<ToggleGroup>`. The following example shows full-width toggle groups for a single-select, multi-select, and single-select with disabled item.
+
+```ts file="./ToggleGroupFill.tsx"
+
 ```

package/src/components/ToggleGroup/examples/ToggleGroupFill.tsx

@@ -0,0 +1,92 @@
+import { useState } from 'react';
+import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
+
+export const ToggleGroupFill: React.FunctionComponent = () => {
+  const [isSelectedBasic, setIsSelectedBasic] = useState('toggle-group-fill-1');
+  const [isSelectedMulti, setIsSelectedMulti] = useState({
+    'toggle-group-fill-multi-1': false,
+    'toggle-group-fill-multi-2': false,
+    'toggle-group-fill-multi-3': false
+  });
+  const [isSelectedDisabled, setIsSelectedDisabled] = useState('toggle-group-fill-disabled-1');
+
+  const handleItemClickBasic = (event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
+    const id = event.currentTarget.id;
+    setIsSelectedBasic(id);
+  };
+
+  const handleItemClickMulti = (
+    event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent,
+    isSelected: boolean
+  ) => {
+    const id = event.currentTarget.id;
+    setIsSelectedMulti((prevIsSelected) => ({ ...prevIsSelected, [id]: isSelected }));
+  };
+
+  const handleItemClickDisabled = (event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent) => {
+    const id = event.currentTarget.id;
+    setIsSelectedDisabled(id);
+  };
+
+  return (
+    <>
+      <ToggleGroup isFill aria-label="Full width toggle group">
+        <ToggleGroupItem
+          text="Option 1"
+          buttonId="toggle-group-fill-1"
+          isSelected={isSelectedBasic === 'toggle-group-fill-1'}
+          onChange={handleItemClickBasic}
+        />
+        <ToggleGroupItem
+          text="Option 2"
+          buttonId="toggle-group-fill-2"
+          isSelected={isSelectedBasic === 'toggle-group-fill-2'}
+          onChange={handleItemClickBasic}
+        />
+        <ToggleGroupItem
+          text="Option 3"
+          buttonId="toggle-group-fill-3"
+          isSelected={isSelectedBasic === 'toggle-group-fill-3'}
+          onChange={handleItemClickBasic}
+        />
+      </ToggleGroup>
+      <br />
+      <ToggleGroup isFill aria-label="Full width multi-select toggle group">
+        <ToggleGroupItem
+          text="Option 1"
+          buttonId="toggle-group-fill-multi-1"
+          isSelected={isSelectedMulti['toggle-group-fill-multi-1']}
+          onChange={handleItemClickMulti}
+        />
+        <ToggleGroupItem
+          text="Option 2"
+          buttonId="toggle-group-fill-multi-2"
+          isSelected={isSelectedMulti['toggle-group-fill-multi-2']}
+          onChange={handleItemClickMulti}
+        />
+        <ToggleGroupItem
+          text="Option 3"
+          buttonId="toggle-group-fill-multi-3"
+          isSelected={isSelectedMulti['toggle-group-fill-multi-3']}
+          onChange={handleItemClickMulti}
+        />
+      </ToggleGroup>
+      <br />
+      <ToggleGroup isFill aria-label="Full width toggle group with disabled item">
+        <ToggleGroupItem
+          text="Option 1"
+          buttonId="toggle-group-fill-disabled-1"
+          isSelected={isSelectedDisabled === 'toggle-group-fill-disabled-1'}
+          onChange={handleItemClickDisabled}
+        />
+        <ToggleGroupItem
+          text="Option 2"
+          buttonId="toggle-group-fill-disabled-2"
+          isSelected={isSelectedDisabled === 'toggle-group-fill-disabled-2'}
+          onChange={handleItemClickDisabled}
+        />
+        <ToggleGroupItem text="Option 3" isDisabled />
+      </ToggleGroup>
+    </>
+  );
+};

package/src/components/Tooltip/examples/Tooltip.md

@@ -6,7 +6,7 @@ propComponents: ['Tooltip']
 ---
 
 import { useEffect, useRef, useState } from 'react';
-import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
+import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
 import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
 import './TooltipExamples.css';
 

package/src/demos/Compass/Compass.md

@@ -8,10 +8,10 @@ import { useRef, useState } from 'react';
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 import OutlinedPlusSquare from '@patternfly/react-icons/dist/esm/icons/outlined-plus-square-icon';
 import OutlinedCopy from '@patternfly/react-icons/dist/esm/icons/outlined-copy-icon';
-import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
+import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
 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 RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import imgAvatar from '../assets/avatarImg.svg';

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

@@ -31,7 +31,7 @@ import {
 import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
 import OutlinedPlusSquare from '@patternfly/react-icons/dist/esm/icons/outlined-plus-square-icon';
 import OutlinedCopy from '@patternfly/react-icons/dist/esm/icons/outlined-copy-icon';
-import OutlinedQuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon';
+import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
 
 export const CompassBasic: React.FunctionComponent = () => {
   const [activeTab, setActiveTab] = useState<number>(0);
@@ -129,7 +129,7 @@ export const CompassBasic: React.FunctionComponent = () => {
             <ActionListGroup>
               <ActionListItem>
                 <Tooltip content="Help">
-                  <Button isCircle variant="plain" icon={<OutlinedQuestionCircleIcon />} aria-label="Help" />
+                  <Button isCircle variant="plain" icon={<RhUiQuestionMarkCircleIcon />} aria-label="Help" />
                 </Tooltip>
               </ActionListItem>
               <ActionListItem>

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

@@ -32,7 +32,7 @@ import {
 } 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 RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-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';
@@ -160,7 +160,7 @@ export const CompassDockDemo: React.FunctionComponent = () => {
                       ref={helpRef}
                       aria-label="Help"
                       variant={ButtonVariant.plain}
-                      icon={<QuestionCircleIcon />}
+                      icon={<RhUiQuestionMarkCircleFillIcon />}
                     />
                   </Tooltip>
                 </ToolbarItem>

package/src/demos/DashboardHeader.tsx

@@ -25,7 +25,7 @@ import {
 } from '../components';
 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 RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 
@@ -159,7 +159,7 @@ export const DashboardHeader: React.FC<DashboardHeaderProps> = ({ notificationBa
                   <Button aria-label="Settings" isSettings variant="plain" />
                 </ToolbarItem>
                 <ToolbarItem>
-                  <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
+                  <Button aria-label="Help" variant={ButtonVariant.plain} icon={<RhUiQuestionMarkCircleFillIcon />} />
                 </ToolbarItem>
               </ToolbarGroup>
               <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>

package/src/demos/Masthead.md

@@ -9,7 +9,7 @@ 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 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 RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import pfIcon from './assets/pf-logo-small.svg';

package/src/demos/Nav.md

@@ -6,7 +6,7 @@ section: components
 import { Fragment, useState, useRef } from 'react';
 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 RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';

package/src/demos/NotificationDrawer/NotificationDrawer.md

@@ -9,7 +9,7 @@ import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-
 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';
+import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';

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

@@ -47,7 +47,7 @@ import {
 } from '@patternfly/react-core';
 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 RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
@@ -195,7 +195,11 @@ export const NotificationDrawerBasic: React.FunctionComponent = () => {
                 <Button aria-label="Settings actions" isSettings variant="plain" />
               </ToolbarItem>
               <ToolbarItem>
-                <Button aria-label="Help actions" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
+                <Button
+                  aria-label="Help actions"
+                  variant={ButtonVariant.plain}
+                  icon={<RhUiQuestionMarkCircleFillIcon />}
+                />
               </ToolbarItem>
             </ToolbarGroup>
           </ToolbarGroup>

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

@@ -50,7 +50,7 @@ import {
 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';
+import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.PF-HorizontalLogo-Color.svg';
@@ -245,7 +245,11 @@ export const NotificationDrawerGrouped: React.FunctionComponent = () => {
                 <Button aria-label="Settings actions" isSettings variant="plain" />
               </ToolbarItem>
               <ToolbarItem>
-                <Button aria-label="Help actions" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
+                <Button
+                  aria-label="Help actions"
+                  variant={ButtonVariant.plain}
+                  icon={<RhUiQuestionMarkCircleFillIcon />}
+                />
               </ToolbarItem>
             </ToolbarGroup>
           </ToolbarGroup>

package/src/demos/Page.md

@@ -7,7 +7,7 @@ import { useState, useRef, useEffect } from 'react';
 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 RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon';
 import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import LightbulbIcon from '@patternfly/react-icons/dist/esm/icons/lightbulb-icon';