@patternfly/react-core 6.6.0 → 6.6.1-prerelease.1

package/src/components/Popover/Popover.tsx

@@ -205,9 +205,11 @@ export interface PopoverProps {
   shouldOpen?: (event: MouseEvent | KeyboardEvent, showFunction?: () => void) => void;
   /** Flag indicating whether the close button should be shown. */
   showClose?: boolean;
-  /** Sets an interaction to open popover, defaults to "click" */
+  /** @deprecated Sets an interaction to open popover, defaults to "click" */
   triggerAction?: 'click' | 'hover';
-  /** Whether to trap focus in the popover. */
+  /** Whether to trap focus in the popover. When using a triggerAction of "hover", this will be set to false
+   * by default and must remain false.
+   */
   withFocusTrap?: boolean;
   /** The z-index of the popover. */
   zIndex?: number;
@@ -267,7 +269,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
   ],
   animationDuration = 300,
   id,
-  withFocusTrap: propWithFocusTrap,
+  withFocusTrap: propWithFocusTrap = triggerAction === 'hover' ? false : undefined,
   triggerRef,
   hasNoPadding = false,
   hasAutoWidth = false,

package/src/components/Popover/examples/Popover.md

@@ -25,7 +25,11 @@ By default, the `appendTo` prop of the popover will append to the document body
 
 ### Hoverable
 
-```ts file="./PopoverHover.tsx"
+Pass the `triggerAction="hover"` property to make a `<Popover>` that is triggered via hover and focus rather than on click. When using a hoverable Popover, you **must not** include any interactive or semantic content (e.g. buttons, links, headings, lists, etc), as focus is not intended to enter a hoverable `<Popover>`. Including such content may cause an inaccessible UI for users who are not able to reach the content when navigating via assistive tech.
+
+It is instead recommended to use our [tooltip component](/components/tooltip).
+
+```ts isDeprecated file="./PopoverHover.tsx"
 
 ```
 

package/src/components/ProgressStepper/ProgressStep.tsx

@@ -2,7 +2,7 @@ import { useRef } from 'react';
 import styles from '@patternfly/react-styles/css/components/ProgressStepper/progress-stepper';
 import { css } from '@patternfly/react-styles';
 import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
-import ResourcesFullIcon from '@patternfly/react-icons/dist/esm/icons/resources-full-icon';
+import RhUiResourcesFullIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-resources-full-icon';
 import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
 import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
 
@@ -44,7 +44,7 @@ const variantIcons = {
   default: undefined as any,
   pending: undefined as any,
   success: <RhUiCheckCircleFillIcon />,
-  info: <ResourcesFullIcon />,
+  info: <RhUiResourcesFullIcon />,
   warning: <RhUiWarningFillIcon />,
   danger: <RhUiErrorFillIcon />
 };

package/src/components/ProgressStepper/__tests__/ProgressStep.test.tsx

@@ -4,7 +4,7 @@ import { capitalize } from '../../../helpers';
 import styles from '@patternfly/react-styles/css/components/ProgressStepper/progress-stepper';
 
 jest.mock('@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon', () => () => 'Success icon mock');
-jest.mock('@patternfly/react-icons/dist/esm/icons/resources-full-icon', () => () => 'Info icon mock');
+jest.mock('@patternfly/react-icons/dist/esm/icons/rh-ui-resources-full-icon', () => () => 'Info icon mock');
 jest.mock('@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon', () => () => 'Warning icon mock');
 jest.mock('@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon', () => () => 'Danger icon mock');
 

package/src/components/SearchInput/AdvancedSearchMenu.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { Button } from '../Button';
-import { ActionGroup, Form, FormGroup } from '../Form';
+import { ActionList, ActionListGroup, ActionListItem } from '../ActionList';
+import { Form, FormGroup } from '../Form';
 import { TextInput } from '../TextInput';
 import { useSSRSafeId } from '../../helpers';
 import { SearchInputSearchAttribute } from './SearchInput';
@@ -202,16 +203,24 @@ export const AdvancedSearchMenu: React.FunctionComponent<AdvancedSearchMenuProps
           <Form>
             {buildFormGroups()}
             {formAdditionalItems ? formAdditionalItems : null}
-            <ActionGroup>
-              <Button variant="primary" type="submit" onClick={onSearchHandler} isDisabled={!value}>
-                {submitSearchButtonLabel}
-              </Button>
-              {!!onClear && (
-                <Button variant="link" type="reset" onClick={onClear}>
-                  {resetButtonLabel}
-                </Button>
-              )}
-            </ActionGroup>
+            <FormGroup isActionGroup>
+              <ActionList>
+                <ActionListGroup>
+                  <ActionListItem>
+                    <Button variant="primary" type="submit" onClick={onSearchHandler} isDisabled={!value}>
+                      {submitSearchButtonLabel}
+                    </Button>
+                  </ActionListItem>
+                  {!!onClear && (
+                    <ActionListItem>
+                      <Button variant="link" type="reset" onClick={onClear}>
+                        {resetButtonLabel}
+                      </Button>
+                    </ActionListItem>
+                  )}
+                </ActionListGroup>
+              </ActionList>
+            </FormGroup>
           </Form>
         </PanelMainBody>
       </PanelMain>

package/src/components/SearchInput/SearchInput.tsx

@@ -3,10 +3,11 @@ import { css } from '@patternfly/react-styles';
 import { Button, ButtonVariant } from '../Button';
 import { Badge } from '../Badge';
 import { Icon } from '../Icon';
-import AngleUpIcon from '@patternfly/react-icons/dist/esm/icons/angle-up-icon';
+import RhMicronsCaretUpIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-up-icon';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
+import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
+import RhMicronsArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-arrow-right-icon';
+import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
 import RhMicronsCaretDownFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-fill-icon';
 import { AdvancedSearchMenu } from './AdvancedSearchMenu';
 import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities } from '../TextInputGroup';
@@ -15,6 +16,7 @@ import { Popper } from '../../helpers';
 import { useHasAnimations } from '../../helpers';
 import textInputGroupStyles from '@patternfly/react-styles/css/components/TextInputGroup/text-input-group';
 import inputGroupStyles from '@patternfly/react-styles/css/components/InputGroup/input-group';
+import { IS_INERT } from '../../helpers/inert';
 
 /** Properties for adding search attributes to an advanced search input. These properties must
  * be passed in as an object within an array to the search input component's attribute property.
@@ -307,7 +309,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
     <TextInputGroup isDisabled={isDisabled} {...searchInputProps}>
       <TextInputGroupMain
         hint={hint}
-        icon={<SearchIcon />}
+        icon={<RhMicronsSearchIcon />}
         innerRef={searchInputInputRef}
         value={searchValue}
         placeholder={placeholder}
@@ -332,14 +334,14 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
                 aria-label={previousNavigationButtonAriaLabel}
                 isDisabled={isDisabled || isPreviousNavigationButtonDisabled}
                 onClick={onPreviousClick}
-                icon={<AngleUpIcon />}
+                icon={<RhMicronsCaretUpIcon />}
               />
               <Button
                 variant={ButtonVariant.plain}
                 aria-label={nextNavigationButtonAriaLabel}
                 isDisabled={isDisabled || isNextNavigationButtonDisabled}
                 onClick={onNextClick}
-                icon={<RhMicronsCaretDownFillIcon />}
+                icon={<RhMicronsCaretDownIcon />}
               />
             </div>
           )}
@@ -362,7 +364,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
       variant={ButtonVariant.plain}
       aria-label={toggleAriaLabel}
       aria-expanded={isExpanded}
-      icon={<SearchIcon />}
+      icon={<RhMicronsSearchIcon />}
       onClick={onExpandHandler}
       ref={searchInputExpandableToggleRef}
     />
@@ -383,7 +385,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
       variant={ButtonVariant.plain}
       aria-label={toggleAriaLabel}
       aria-expanded={isExpanded}
-      icon={isExpanded ? <RhMicronsCloseIcon /> : <SearchIcon />}
+      icon={isExpanded ? <RhMicronsCloseIcon /> : <RhMicronsSearchIcon />}
       onClick={onExpandHandler}
       ref={searchInputExpandableToggleRef}
     />
@@ -403,14 +405,14 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
             className={inputGroupStyles.modifiers.searchExpand}
             isPlain
             onTransitionEnd={onTransitionEnd}
-            {...(isExpanded && { inert: '' })}
+            {...(isExpanded && { inert: IS_INERT })}
           >
             {expandToggleButton}
           </InputGroupItem>
           <InputGroupItem
             className={inputGroupStyles.modifiers.searchAction}
             isPlain
-            {...(!isExpanded && { inert: '' })}
+            {...(!isExpanded && { inert: IS_INERT })}
           >
             {collapseToggleButton}
           </InputGroupItem>
@@ -425,7 +427,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
         {...(!hasAnimations && { isFill: true })}
         {...(hasAnimations && { className: inputGroupStyles.modifiers.searchInput })}
         {...(!isExpanded && {
-          inert: ''
+          inert: IS_INERT
         })}
       >
         {buildTextInputGroup()}
@@ -450,7 +452,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
         {...(expandableInput &&
           hasAnimations &&
           !isExpanded && {
-            inert: ''
+            inert: IS_INERT
           })}
       >
         {buildTextInputGroup()}
@@ -478,7 +480,7 @@ const SearchInputBase: React.FunctionComponent<SearchInputProps> = ({
             isDisabled={isDisabled}
             icon={
               <Icon shouldMirrorRTL>
-                <RhMicronsCaretRightIcon />
+                <RhMicronsArrowRightIcon />
               </Icon>
             }
           />

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

@@ -29,24 +29,12 @@ exports[`SearchInput advanced search 1`] = `
                   fill="currentColor"
                   height="1em"
                   role="img"
+                  viewBox="0 0 20 20"
                   width="1em"
                 >
-                  <svg
-                    class="pf-v6-icon-default"
-                    viewBox="0 0 512 512"
-                  >
-                    <path
-                      d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-                    />
-                  </svg>
-                  <svg
-                    class="pf-v6-icon-rh-ui"
-                    viewBox="0 0 32 32"
-                  >
-                    <path
-                      d="m30.796 29.205-8.557-8.557A11.945 11.945 0 0 0 25 13c0-6.617-5.383-12-12-12S1 6.383 1 13s5.383 12 12 12c2.904 0 5.57-1.038 7.648-2.761l8.556 8.556a1.122 1.122 0 0 0 1.592 0 1.127 1.127 0 0 0 0-1.591ZM3 13C3 7.486 7.486 3 13 3s10 4.486 10 10-4.486 10-10 10S3 18.514 3 13Z"
-                    />
-                  </svg>
+                  <path
+                    d="m18.8 17.21-4.41-4.41A7.906 7.906 0 0 0 16 8c0-4.41-3.59-8-8-8S0 3.59 0 8s3.59 8 8 8c1.73 0 3.42-.57 4.8-1.61l4.41 4.41c.44.44 1.15.44 1.59 0 .44-.44.44-1.15 0-1.59ZM8 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6Z"
+                  />
                 </svg>
               </span>
               <input
@@ -141,7 +129,7 @@ exports[`SearchInput advanced search 1`] = `
                   width="1em"
                 >
                   <path
-                    d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
+                    d="M18.35 8.94 12.7 3.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 4.29 4.29H2c-.55 0-1 .45-1 1s.45 1 1 1h13.59l-4.29 4.29a.987.987 0 0 0-.02 1.41c.38.4 1.02.41 1.41.02l.02-.02 5.65-5.65c.59-.59.59-1.53 0-2.12Z"
                   />
                 </svg>
               </span>
@@ -184,24 +172,12 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                   fill="currentColor"
                   height="1em"
                   role="img"
+                  viewBox="0 0 20 20"
                   width="1em"
                 >
-                  <svg
-                    class="pf-v6-icon-default"
-                    viewBox="0 0 512 512"
-                  >
-                    <path
-                      d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-                    />
-                  </svg>
-                  <svg
-                    class="pf-v6-icon-rh-ui"
-                    viewBox="0 0 32 32"
-                  >
-                    <path
-                      d="m30.796 29.205-8.557-8.557A11.945 11.945 0 0 0 25 13c0-6.617-5.383-12-12-12S1 6.383 1 13s5.383 12 12 12c2.904 0 5.57-1.038 7.648-2.761l8.556 8.556a1.122 1.122 0 0 0 1.592 0 1.127 1.127 0 0 0 0-1.591ZM3 13C3 7.486 7.486 3 13 3s10 4.486 10 10-4.486 10-10 10S3 18.514 3 13Z"
-                    />
-                  </svg>
+                  <path
+                    d="m18.8 17.21-4.41-4.41A7.906 7.906 0 0 0 16 8c0-4.41-3.59-8-8-8S0 3.59 0 8s3.59 8 8 8c1.73 0 3.42-.57 4.8-1.61l4.41 4.41c.44.44 1.15.44 1.59 0 .44-.44.44-1.15 0-1.59ZM8 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6Z"
+                  />
                 </svg>
               </span>
               <input
@@ -296,7 +272,7 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                   width="1em"
                 >
                   <path
-                    d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
+                    d="M18.35 8.94 12.7 3.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 4.29 4.29H2c-.55 0-1 .45-1 1s.45 1 1 1h13.59l-4.29 4.29a.987.987 0 0 0-.02 1.41c.38.4 1.02.41 1.41.02l.02-.02 5.65-5.65c.59-.59.59-1.53 0-2.12Z"
                   />
                 </svg>
               </span>
@@ -466,28 +442,40 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
                   class="pf-v6-c-form__group-control"
                 >
                   <div
-                    class="pf-v6-c-form__actions"
+                    class="pf-v6-c-action-list"
                   >
-                    <button
-                      class="pf-v6-c-button pf-m-primary"
-                      type="submit"
+                    <div
+                      class="pf-v6-c-action-list__group"
                     >
-                      <span
-                        class="pf-v6-c-button__text"
+                      <div
+                        class="pf-v6-c-action-list__item"
                       >
-                        Search
-                      </span>
-                    </button>
-                    <button
-                      class="pf-v6-c-button pf-m-link"
-                      type="reset"
-                    >
-                      <span
-                        class="pf-v6-c-button__text"
+                        <button
+                          class="pf-v6-c-button pf-m-primary"
+                          type="submit"
+                        >
+                          <span
+                            class="pf-v6-c-button__text"
+                          >
+                            Search
+                          </span>
+                        </button>
+                      </div>
+                      <div
+                        class="pf-v6-c-action-list__item"
                       >
-                        Reset
-                      </span>
-                    </button>
+                        <button
+                          class="pf-v6-c-button pf-m-link"
+                          type="reset"
+                        >
+                          <span
+                            class="pf-v6-c-button__text"
+                          >
+                            Reset
+                          </span>
+                        </button>
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -529,24 +517,12 @@ exports[`SearchInput renders search input in strict mode 1`] = `
                   fill="currentColor"
                   height="1em"
                   role="img"
+                  viewBox="0 0 20 20"
                   width="1em"
                 >
-                  <svg
-                    class="pf-v6-icon-default"
-                    viewBox="0 0 512 512"
-                  >
-                    <path
-                      d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-                    />
-                  </svg>
-                  <svg
-                    class="pf-v6-icon-rh-ui"
-                    viewBox="0 0 32 32"
-                  >
-                    <path
-                      d="m30.796 29.205-8.557-8.557A11.945 11.945 0 0 0 25 13c0-6.617-5.383-12-12-12S1 6.383 1 13s5.383 12 12 12c2.904 0 5.57-1.038 7.648-2.761l8.556 8.556a1.122 1.122 0 0 0 1.592 0 1.127 1.127 0 0 0 0-1.591ZM3 13C3 7.486 7.486 3 13 3s10 4.486 10 10-4.486 10-10 10S3 18.514 3 13Z"
-                    />
-                  </svg>
+                  <path
+                    d="m18.8 17.21-4.41-4.41A7.906 7.906 0 0 0 16 8c0-4.41-3.59-8-8-8S0 3.59 0 8s3.59 8 8 8c1.73 0 3.42-.57 4.8-1.61l4.41 4.41c.44.44 1.15.44 1.59 0 .44-.44.44-1.15 0-1.59ZM8 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6Z"
+                  />
                 </svg>
               </span>
               <input
@@ -641,7 +617,7 @@ exports[`SearchInput renders search input in strict mode 1`] = `
                   width="1em"
                 >
                   <path
-                    d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
+                    d="M18.35 8.94 12.7 3.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 4.29 4.29H2c-.55 0-1 .45-1 1s.45 1 1 1h13.59l-4.29 4.29a.987.987 0 0 0-.02 1.41c.38.4 1.02.41 1.41.02l.02-.02 5.65-5.65c.59-.59.59-1.53 0-2.12Z"
                   />
                 </svg>
               </span>
@@ -687,24 +663,12 @@ exports[`SearchInput search input with hint 1`] = `
                 fill="currentColor"
                 height="1em"
                 role="img"
+                viewBox="0 0 20 20"
                 width="1em"
               >
-                <svg
-                  class="pf-v6-icon-default"
-                  viewBox="0 0 512 512"
-                >
-                  <path
-                    d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-                  />
-                </svg>
-                <svg
-                  class="pf-v6-icon-rh-ui"
-                  viewBox="0 0 32 32"
-                >
-                  <path
-                    d="m30.796 29.205-8.557-8.557A11.945 11.945 0 0 0 25 13c0-6.617-5.383-12-12-12S1 6.383 1 13s5.383 12 12 12c2.904 0 5.57-1.038 7.648-2.761l8.556 8.556a1.122 1.122 0 0 0 1.592 0 1.127 1.127 0 0 0 0-1.591ZM3 13C3 7.486 7.486 3 13 3s10 4.486 10 10-4.486 10-10 10S3 18.514 3 13Z"
-                  />
-                </svg>
+                <path
+                  d="m18.8 17.21-4.41-4.41A7.906 7.906 0 0 0 16 8c0-4.41-3.59-8-8-8S0 3.59 0 8s3.59 8 8 8c1.73 0 3.42-.57 4.8-1.61l4.41 4.41c.44.44 1.15.44 1.59 0 .44-.44.44-1.15 0-1.59ZM8 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6Z"
+                />
               </svg>
             </span>
             <input
@@ -735,24 +699,12 @@ exports[`SearchInput search input with hint 1`] = `
                   fill="currentColor"
                   height="1em"
                   role="img"
+                  viewBox="0 0 20 20"
                   width="1em"
                 >
-                  <svg
-                    class="pf-v6-icon-default"
-                    viewBox="0 0 320 512"
-                  >
-                    <path
-                      d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"
-                    />
-                  </svg>
-                  <svg
-                    class="pf-v6-icon-rh-ui"
-                    viewBox="0 0 32 32"
-                  >
-                    <path
-                      d="M29 22a.997.997 0 0 1-.707-.293L16 9.414 3.707 21.707a.999.999 0 1 1-1.414-1.414L14.939 7.646a1.501 1.501 0 0 1 2.121 0l12.646 12.646a.999.999 0 0 1-.707 1.707Z"
-                    />
-                  </svg>
+                  <path
+                    d="m18.71 13.29-7.65-7.65a1.49 1.49 0 0 0-2.12 0l-7.65 7.65-.02.02c-.38.4-.37 1.03.02 1.41.4.38 1.03.37 1.41-.02l7.29-7.29 7.29 7.29c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41Z"
+                  />
                 </svg>
               </span>
             </button>
@@ -774,7 +726,7 @@ exports[`SearchInput search input with hint 1`] = `
                   width="1em"
                 >
                   <path
-                    d="m17.65 8.76-6.674 5.72a1.496 1.496 0 0 1-.976.365c-.347 0-.694-.122-.978-.366l-6.673-5.72A1 1 0 0 1 3 7h14a1 1 0 0 1 .65 1.76Z"
+                    d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
                   />
                 </svg>
               </span>
@@ -833,7 +785,7 @@ exports[`SearchInput search input with hint 1`] = `
                 width="1em"
               >
                 <path
-                  d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
+                  d="M18.35 8.94 12.7 3.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 4.29 4.29H2c-.55 0-1 .45-1 1s.45 1 1 1h13.59l-4.29 4.29a.987.987 0 0 0-.02 1.41c.38.4 1.02.41 1.41.02l.02-.02 5.65-5.65c.59-.59.59-1.53 0-2.12Z"
                 />
               </svg>
             </span>
@@ -871,24 +823,12 @@ exports[`SearchInput simple search input 1`] = `
                 fill="currentColor"
                 height="1em"
                 role="img"
+                viewBox="0 0 20 20"
                 width="1em"
               >
-                <svg
-                  class="pf-v6-icon-default"
-                  viewBox="0 0 512 512"
-                >
-                  <path
-                    d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-                  />
-                </svg>
-                <svg
-                  class="pf-v6-icon-rh-ui"
-                  viewBox="0 0 32 32"
-                >
-                  <path
-                    d="m30.796 29.205-8.557-8.557A11.945 11.945 0 0 0 25 13c0-6.617-5.383-12-12-12S1 6.383 1 13s5.383 12 12 12c2.904 0 5.57-1.038 7.648-2.761l8.556 8.556a1.122 1.122 0 0 0 1.592 0 1.127 1.127 0 0 0 0-1.591ZM3 13C3 7.486 7.486 3 13 3s10 4.486 10 10-4.486 10-10 10S3 18.514 3 13Z"
-                  />
-                </svg>
+                <path
+                  d="m18.8 17.21-4.41-4.41A7.906 7.906 0 0 0 16 8c0-4.41-3.59-8-8-8S0 3.59 0 8s3.59 8 8 8c1.73 0 3.42-.57 4.8-1.61l4.41 4.41c.44.44 1.15.44 1.59 0 .44-.44.44-1.15 0-1.59ZM8 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6Z"
+                />
               </svg>
             </span>
             <input
@@ -919,24 +859,12 @@ exports[`SearchInput simple search input 1`] = `
                   fill="currentColor"
                   height="1em"
                   role="img"
+                  viewBox="0 0 20 20"
                   width="1em"
                 >
-                  <svg
-                    class="pf-v6-icon-default"
-                    viewBox="0 0 320 512"
-                  >
-                    <path
-                      d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"
-                    />
-                  </svg>
-                  <svg
-                    class="pf-v6-icon-rh-ui"
-                    viewBox="0 0 32 32"
-                  >
-                    <path
-                      d="M29 22a.997.997 0 0 1-.707-.293L16 9.414 3.707 21.707a.999.999 0 1 1-1.414-1.414L14.939 7.646a1.501 1.501 0 0 1 2.121 0l12.646 12.646a.999.999 0 0 1-.707 1.707Z"
-                    />
-                  </svg>
+                  <path
+                    d="m18.71 13.29-7.65-7.65a1.49 1.49 0 0 0-2.12 0l-7.65 7.65-.02.02c-.38.4-.37 1.03.02 1.41.4.38 1.03.37 1.41-.02l7.29-7.29 7.29 7.29c.19.19.44.29.71.29.27 0 .52-.11.71-.29a.996.996 0 0 0 0-1.41Z"
+                  />
                 </svg>
               </span>
             </button>
@@ -958,7 +886,7 @@ exports[`SearchInput simple search input 1`] = `
                   width="1em"
                 >
                   <path
-                    d="m17.65 8.76-6.674 5.72a1.496 1.496 0 0 1-.976.365c-.347 0-.694-.122-.978-.366l-6.673-5.72A1 1 0 0 1 3 7h14a1 1 0 0 1 .65 1.76Z"
+                    d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
                   />
                 </svg>
               </span>
@@ -1017,7 +945,7 @@ exports[`SearchInput simple search input 1`] = `
                 width="1em"
               >
                 <path
-                  d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
+                  d="M18.35 8.94 12.7 3.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 4.29 4.29H2c-.55 0-1 .45-1 1s.45 1 1 1h13.59l-4.29 4.29a.987.987 0 0 0-.02 1.41c.38.4 1.02.41 1.41.02l.02-.02 5.65-5.65c.59-.59.59-1.53 0-2.12Z"
                 />
               </svg>
             </span>

package/src/components/Select/examples/SelectBasic.tsx

@@ -20,6 +20,7 @@ export const SelectBasic: React.FunctionComponent = () => {
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
+      aria-haspopup="listbox"
       ref={toggleRef}
       onClick={onToggleClick}
       isExpanded={isOpen}

package/src/components/Select/examples/SelectCheckbox.tsx

@@ -22,6 +22,7 @@ export const SelectCheckbox: React.FunctionComponent = () => {
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
+      aria-haspopup="listbox"
       ref={toggleRef}
       onClick={onToggleClick}
       isExpanded={isOpen}

package/src/components/Select/examples/SelectFooter.tsx

@@ -11,6 +11,7 @@ export const SelectFooter: React.FunctionComponent = () => {
 
   const toggle = (toggleRef) => (
     <MenuToggle
+      aria-haspopup="listbox"
       ref={toggleRef}
       onClick={onToggleClick}
       isExpanded={isOpen}

package/src/components/Select/examples/SelectGrouped.tsx

@@ -27,6 +27,7 @@ export const SelectGrouped: React.FunctionComponent = () => {
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
+      aria-haspopup="listbox"
       ref={toggleRef}
       onClick={onToggleClick}
       isExpanded={isOpen}

package/src/components/Select/examples/SelectMultiTypeahead.tsx

@@ -188,6 +188,7 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => {
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
+      aria-haspopup="listbox"
       variant="typeahead"
       aria-label="Multi typeahead menu toggle"
       onClick={onToggleClick}

package/src/components/Select/examples/SelectMultiTypeaheadCheckbox.tsx

@@ -196,6 +196,7 @@ export const SelectMultiTypeaheadCheckbox: React.FunctionComponent = () => {
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
+      aria-haspopup="listbox"
       variant="typeahead"
       aria-label="Multi typeahead checkbox menu toggle"
       onClick={onToggleClick}

package/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx

@@ -201,6 +201,7 @@ export const SelectMultiTypeaheadCreatable: React.FunctionComponent = () => {
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
+      aria-haspopup="listbox"
       variant="typeahead"
       aria-label="Multi typeahead creatable menu toggle"
       onClick={onToggleClick}

package/src/components/Select/examples/SelectOptionVariations.tsx

@@ -20,6 +20,7 @@ export const SelectOptionVariations: React.FunctionComponent = () => {
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
+      aria-haspopup="listbox"
       ref={toggleRef}
       onClick={onToggleClick}
       isExpanded={isOpen}

package/src/components/Select/examples/SelectTypeahead.tsx

@@ -199,6 +199,7 @@ export const SelectTypeahead: React.FunctionComponent = () => {
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
+      aria-haspopup="listbox"
       ref={toggleRef}
       variant="typeahead"
       aria-label="Typeahead menu toggle"

package/src/components/Select/examples/SelectTypeaheadCreatable.tsx

@@ -206,6 +206,7 @@ export const SelectTypeaheadCreatable: React.FunctionComponent = () => {
 
   const toggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
+      aria-haspopup="listbox"
       ref={toggleRef}
       variant="typeahead"
       aria-label="Typeahead creatable menu toggle"