@patternfly/react-core 6.6.2 → 6.7.0-prerelease.1

package/src/components/Popover/Popover.tsx

@@ -11,9 +11,8 @@ import { PopoverCloseButton } from './PopoverCloseButton';
 import { PopoverArrow } from './PopoverArrow';
 import popoverMaxWidth from '@patternfly/react-tokens/dist/esm/c_popover_MaxWidth';
 import popoverMinWidth from '@patternfly/react-tokens/dist/esm/c_popover_MinWidth';
-import { FocusTrap } from '../../helpers';
+import { FocusTrap, useSSRSafeId, useOUIAProps, OUIAProps } from '../../helpers';
 import { Popper } from '../../helpers/Popper/Popper';
-import { useSSRSafeId } from '../../helpers';
 
 export enum PopoverPosition {
   auto = 'auto',
@@ -35,7 +34,7 @@ export enum PopoverPosition {
  * that has a property specifically for passing in popover properties.
  */
 
-export interface PopoverProps {
+export interface PopoverProps extends OUIAProps {
   /** Text announced by screen reader when alert severity variant is set to indicate
    * severity level.
    */
@@ -213,6 +212,10 @@ export interface PopoverProps {
   withFocusTrap?: boolean;
   /** The z-index of the popover. */
   zIndex?: number;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 const alertStyle = {
@@ -274,12 +277,15 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
   hasNoPadding = false,
   hasAutoWidth = false,
   elementToFocus,
+  ouiaId,
+  ouiaSafe = true,
   ...rest
 }: PopoverProps) => {
   // could make this a prop in the future (true | false | 'toggle')
   // const hideOnClick = true;
   const generatedId = useSSRSafeId();
   const uniqueId = id || generatedId;
+  const ouiaProps = useOUIAProps(Popover.displayName, ouiaId, ouiaSafe);
   const triggerManually = isVisible !== null;
   const [visible, setVisible] = useState(false);
   const [focusTrapActive, setFocusTrapActive] = useState(Boolean(propWithFocusTrap));
@@ -475,6 +481,7 @@ export const Popover: React.FunctionComponent<PopoverProps> = ({
         maxWidth: hasCustomMaxWidth ? maxWidth : null
       }}
       {...rest}
+      {...ouiaProps}
     >
       <PopoverArrow />
       <PopoverContent>

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

@@ -1,5 +1,5 @@
 import { StrictMode } from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
 import { Popover, PopoverPosition } from '../Popover';
 
 test('popover renders close-button, header and body', () => {
@@ -9,6 +9,7 @@ test('popover renders close-button, header and body', () => {
       position="top"
       isVisible
       hideOnOutsideClick
+      ouiaId="ouia-id"
       headerContent={<div>Popover Header</div>}
       bodyContent={
         <div>
@@ -114,3 +115,45 @@ test('popover renders in strict mode', () => {
   expect(consoleError).not.toHaveBeenCalled();
   expect(asFragment()).toMatchSnapshot();
 });
+
+test('Renders with custom ouiaId', () => {
+  render(
+    <Popover isVisible ouiaId="test-id" headerContent={<div>Popover Header</div>} bodyContent={<div>Popover body</div>}>
+      <div>Toggle Popover</div>
+    </Popover>
+  );
+  expect(screen.getByRole('dialog')).toHaveAttribute('data-ouia-component-id', 'test-id');
+});
+
+test('Renders with expected ouia component type', () => {
+  render(
+    <Popover isVisible ouiaId="test-id" headerContent={<div>Popover Header</div>} bodyContent={<div>Popover body</div>}>
+      <div>Toggle Popover</div>
+    </Popover>
+  );
+  expect(screen.getByRole('dialog')).toHaveAttribute('data-ouia-component-type', 'PF6/Popover');
+});
+
+test('Renders with ouiaSafe defaulting to true', () => {
+  render(
+    <Popover isVisible ouiaId="test-id" headerContent={<div>Popover Header</div>} bodyContent={<div>Popover body</div>}>
+      <div>Toggle Popover</div>
+    </Popover>
+  );
+  expect(screen.getByRole('dialog')).toHaveAttribute('data-ouia-safe', 'true');
+});
+
+test('Renders with ouiaSafe=false when specified', () => {
+  render(
+    <Popover
+      isVisible
+      ouiaId="test-id"
+      ouiaSafe={false}
+      headerContent={<div>Popover Header</div>}
+      bodyContent={<div>Popover body</div>}
+    >
+      <div>Toggle Popover</div>
+    </Popover>
+  );
+  expect(screen.getByRole('dialog')).toHaveAttribute('data-ouia-safe', 'false');
+});

package/src/components/Progress/Progress.tsx

@@ -3,7 +3,7 @@ import styles from '@patternfly/react-styles/css/components/Progress/progress';
 import { css } from '@patternfly/react-styles';
 import { ProgressContainer, ProgressMeasureLocation } from './ProgressContainer';
 import { AriaProps } from './ProgressBar';
-import { GenerateId } from '../../helpers';
+import { GenerateId, getOUIAProps, OUIAProps } from '../../helpers';
 
 export enum ProgressSize {
   sm = 'sm',
@@ -11,7 +11,7 @@ export enum ProgressSize {
   lg = 'lg'
 }
 
-export interface ProgressProps extends Omit<React.HTMLProps<HTMLDivElement>, 'size' | 'label' | 'title'> {
+export interface ProgressProps extends Omit<React.HTMLProps<HTMLDivElement>, 'size' | 'label' | 'title'>, OUIAProps {
   /** Classname for progress component. */
   className?: string;
   /** Size variant of progress. */
@@ -50,6 +50,10 @@ export interface ProgressProps extends Omit<React.HTMLProps<HTMLDivElement>, 'si
   helperText?: React.ReactNode;
   /** Flag indicating whether the status icon should be hidden, helpful when space is limited (such as within table cells). When set to true, you must ensure the context of the status is provided in another way, such as via the progress measure. */
   hideStatusIcon?: boolean;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
 }
 
 class Progress extends Component<ProgressProps> {
@@ -70,7 +74,8 @@ class Progress extends Component<ProgressProps> {
     tooltipPosition: 'top' as 'auto' | 'top' | 'bottom' | 'left' | 'right',
     'aria-label': null as string,
     'aria-labelledby': null as string,
-    'aria-describedby': null as string
+    'aria-describedby': null as string,
+    ouiaSafe: true
   };
 
   render() {
@@ -94,6 +99,8 @@ class Progress extends Component<ProgressProps> {
       'aria-describedby': ariaDescribedBy,
       helperText,
       hideStatusIcon,
+      ouiaId,
+      ouiaSafe,
       ...props
     } = this.props;
 
@@ -147,6 +154,7 @@ class Progress extends Component<ProgressProps> {
                 className
               )}
               id={id}
+              {...getOUIAProps(Progress.displayName, ouiaId, ouiaSafe)}
             >
               <ProgressContainer
                 parentId={id}

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

@@ -3,7 +3,7 @@ import { Progress, ProgressSize } from '../Progress';
 import { ProgressVariant, ProgressMeasureLocation } from '../ProgressContainer';
 
 test('Simple progress', () => {
-  const { asFragment } = render(<Progress value={33} id="progress-simple-example" />);
+  const { asFragment } = render(<Progress value={33} id="progress-simple-example" ouiaId="ouia-id" />);
   expect(asFragment()).toMatchSnapshot();
 });
 
@@ -109,6 +109,26 @@ test('Renders passed helper text', () => {
   expect(screen.getByText('Test helper text')).toBeVisible();
 });
 
+test('Renders with custom ouiaId', () => {
+  render(<Progress value={33} id="progress-ouia-id" ouiaId="test-id" title="Test" />);
+  expect(document.getElementById('progress-ouia-id')).toHaveAttribute('data-ouia-component-id', 'test-id');
+});
+
+test('Renders with expected ouia component type', () => {
+  render(<Progress value={33} id="progress-ouia-type" ouiaId="test-id" title="Test" />);
+  expect(document.getElementById('progress-ouia-type')).toHaveAttribute('data-ouia-component-type', 'PF6/Progress');
+});
+
+test('Renders with ouiaSafe defaulting to true', () => {
+  render(<Progress value={33} id="progress-ouia-safe" ouiaId="test-id" title="Test" />);
+  expect(document.getElementById('progress-ouia-safe')).toHaveAttribute('data-ouia-safe', 'true');
+});
+
+test('Renders with ouiaSafe=false when specified', () => {
+  render(<Progress value={33} id="progress-ouia-unsafe" ouiaId="test-id" ouiaSafe={false} title="Test" />);
+  expect(document.getElementById('progress-ouia-unsafe')).toHaveAttribute('data-ouia-safe', 'false');
+});
+
 describe('hideStatusIcon prop behavior', () => {
   test('shows status icon by default when hideStatusIcon is not set', () => {
     render(<Progress id="default-status-icon-test" value={100} variant="success" />);

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

@@ -4,6 +4,8 @@ exports[`Progress measure location inside 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress pf-m-inside pf-m-lg pf-m-singleline"
+    data-ouia-component-type="PF6/Progress"
+    data-ouia-safe="true"
     id="inside-progress"
   >
     <div
@@ -36,6 +38,8 @@ exports[`Progress measure location inside and small should render large 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress pf-m-inside pf-m-lg pf-m-singleline"
+    data-ouia-component-type="PF6/Progress"
+    data-ouia-safe="true"
     id="large-progress"
   >
     <div
@@ -68,6 +72,8 @@ exports[`Progress measure location none 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress pf-m-singleline"
+    data-ouia-component-type="PF6/Progress"
+    data-ouia-safe="true"
     id="none-progress"
   >
     <div
@@ -94,6 +100,8 @@ exports[`Progress measure location outside 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress pf-m-outside pf-m-singleline"
+    data-ouia-component-type="PF6/Progress"
+    data-ouia-safe="true"
     id="outside-progress"
   >
     <div
@@ -130,6 +138,8 @@ exports[`Progress measure location top 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress pf-m-singleline"
+    data-ouia-component-type="PF6/Progress"
+    data-ouia-safe="true"
     id="top-progress"
   >
     <div
@@ -166,6 +176,8 @@ exports[`Progress size lg 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress pf-m-lg pf-m-singleline"
+    data-ouia-component-type="PF6/Progress"
+    data-ouia-safe="true"
     id="lg-progress"
   >
     <div
@@ -202,6 +214,8 @@ exports[`Progress size md 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress pf-m-singleline"
+    data-ouia-component-type="PF6/Progress"
+    data-ouia-safe="true"
     id="md-progress"
   >
     <div
@@ -238,6 +252,8 @@ exports[`Progress size sm 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress pf-m-sm pf-m-singleline"
+    data-ouia-component-type="PF6/Progress"
+    data-ouia-safe="true"
     id="sm-progress"
   >
     <div
@@ -274,6 +290,8 @@ exports[`Progress variant danger 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress pf-m-danger pf-m-singleline"
+    data-ouia-component-type="PF6/Progress"
+    data-ouia-safe="true"
     id="danger-progress"
   >
     <div
@@ -327,6 +345,8 @@ exports[`Progress variant success 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress pf-m-success pf-m-singleline"
+    data-ouia-component-type="PF6/Progress"
+    data-ouia-safe="true"
     id="success-progress"
   >
     <div
@@ -380,6 +400,8 @@ exports[`Progress variant warning 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress pf-m-warning pf-m-singleline"
+    data-ouia-component-type="PF6/Progress"
+    data-ouia-safe="true"
     id="warning-progress"
   >
     <div
@@ -433,6 +455,8 @@ exports[`Progress with aria-valuetext 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress pf-m-singleline"
+    data-ouia-component-type="PF6/Progress"
+    data-ouia-safe="true"
     id="progress-aria-valuetext"
   >
     <div
@@ -470,6 +494,9 @@ exports[`Simple progress 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress pf-m-singleline"
+    data-ouia-component-id="ouia-id"
+    data-ouia-component-type="PF6/Progress"
+    data-ouia-safe="true"
     id="progress-simple-example"
   >
     <div
@@ -506,6 +533,8 @@ exports[`additional label 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress pf-m-singleline"
+    data-ouia-component-type="PF6/Progress"
+    data-ouia-safe="true"
     id="additional-label"
   >
     <div
@@ -542,6 +571,8 @@ exports[`no value specified 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress pf-m-singleline"
+    data-ouia-component-type="PF6/Progress"
+    data-ouia-safe="true"
     id="no-value"
   >
     <div
@@ -578,6 +609,8 @@ exports[`value higher than maxValue 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress pf-m-singleline"
+    data-ouia-component-type="PF6/Progress"
+    data-ouia-safe="true"
     id="higher-max-value"
   >
     <div
@@ -614,6 +647,8 @@ exports[`value lower than minValue 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress pf-m-singleline"
+    data-ouia-component-type="PF6/Progress"
+    data-ouia-safe="true"
     id="lower-min-value"
   >
     <div
@@ -650,6 +685,8 @@ exports[`value scaled between minValue and maxValue 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress pf-m-singleline"
+    data-ouia-component-type="PF6/Progress"
+    data-ouia-safe="true"
     id="scaled-range-value"
   >
     <div
@@ -686,6 +723,8 @@ exports[`value scaled with maxValue 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress pf-m-singleline"
+    data-ouia-component-type="PF6/Progress"
+    data-ouia-safe="true"
     id="scaled-max-value"
   >
     <div
@@ -722,6 +761,8 @@ exports[`value scaled with minValue 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-progress pf-m-singleline"
+    data-ouia-component-type="PF6/Progress"
+    data-ouia-safe="true"
     id="scaled-min-value"
   >
     <div

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>
             }
           />