@openshift-assisted/ui-lib 2.16.4-cim → 2.16.5-cim

package/lib/common/components/ui/SectionTitle.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Content, ContentVariants, GridItem } from '@patternfly/react-core';
+import { TextContent, Text, TextVariants, GridItem } from '@patternfly/react-core';
 import { WithTestID } from '../../types';
 
 interface SectionTitleProps extends WithTestID {
@@ -8,9 +8,11 @@ interface SectionTitleProps extends WithTestID {
 
 const SectionTitle = ({ title, testId }: SectionTitleProps) => (
   <GridItem>
-    <Content data-testid={testId} component={ContentVariants.h3}>
-      {title}
-    </Content>
+    <TextContent>
+      <Text data-testid={testId} component={TextVariants.h3}>
+        {title}
+      </Text>
+    </TextContent>
   </GridItem>
 );
 

package/lib/common/components/ui/SimpleDropdown.tsx

@@ -52,7 +52,6 @@ export const SimpleDropdown = ({
       onClick={() => setOpen(!isOpen)}
       isDisabled={isDisabled}
       isExpanded={isOpen}
-      data-testid="simple-dropdown-toggle"
     >
       {current || defaultValue}
     </MenuToggle>

package/lib/common/components/ui/StaticTextField.tsx

@@ -2,7 +2,8 @@ import * as React from 'react';
 import { useField } from 'formik';
 import {
   FormGroup,
-  Content,
+  TextContent,
+  Text,
   FormHelperText,
   HelperText,
   HelperTextItem,
@@ -45,7 +46,6 @@ export const StaticField: React.FC<StaticFieldProps> = ({
               icon={<ExclamationCircleIcon />}
               variant={isValid ? 'default' : 'error'}
               id={isValid ? `${fieldId}-helper` : `${fieldId}-helper-error`}
-              data-testid="static-text-field-helper-text"
             >
               {isValid ? helperText : helperTextInvalid}
             </HelperTextItem>
@@ -82,9 +82,11 @@ export const StaticTextField: React.FC<StaticFieldProps> = ({ children, ...props
 
   return (
     <StaticField {...props}>
-      <Content component="p" id={fieldId} aria-describedby={`${fieldId}-helper`}>
-        {children}
-      </Content>
+      <TextContent>
+        <Text component="p" id={fieldId} aria-describedby={`${fieldId}-helper`}>
+          {children}
+        </Text>
+      </TextContent>
     </StaticField>
   );
 };

package/lib/common/components/ui/Toolbar/ToolbarSecondaryGroup.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { ToolbarGroup } from '@patternfly/react-core';
 
 const ToolbarSecondaryGroup: React.FC = ({ children }) => (
-  <ToolbarGroup align={{ md: 'alignEnd' }}>{children}</ToolbarGroup>
+  <ToolbarGroup align={{ md: 'alignRight' }}>{children}</ToolbarGroup>
 );
 
 export default ToolbarSecondaryGroup;

package/lib/common/components/ui/Toolbar/ToolbarText.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 
-import { ToolbarItem, Content } from '@patternfly/react-core';
+import { ToolbarItem, Text } from '@patternfly/react-core';
 
-const ToolbarText: React.FC<React.ComponentProps<typeof Content>> = (props) => (
+const ToolbarText: React.FC<React.ComponentProps<typeof Text>> = (props) => (
   <ToolbarItem>
-    <Content component="p" {...props} />
+    <Text {...props} />
   </ToolbarItem>
 );
 

package/lib/common/components/ui/WizardFooter.tsx

@@ -8,8 +8,8 @@ import {
   SplitItem,
   Stack,
   StackItem,
-  Content,
-  ContentVariants,
+  Text,
+  TextVariants,
 } from '@patternfly/react-core';
 import { useTranslation } from '../../hooks/use-translation-wrapper';
 import { Cluster } from '@openshift-assisted/types/assisted-installer-service';
@@ -69,7 +69,7 @@ export const WizardFooter: React.FC<WizardFooterProps> = ({
                 variant={ButtonVariant.primary}
                 name="next"
                 onClick={onNext}
-                isDisabled={isNextDisabled || isSubmitting}
+                isDisabled={isNextDisabled}
                 isLoading={isNextButtonLoading}
               >
                 {nextButtonText || t('ai:Next')}
@@ -114,9 +114,9 @@ export const WizardFooter: React.FC<WizardFooterProps> = ({
           )}
           {isSubmitting && (
             <ActionListItem>
-              <Content component={ContentVariants.small}>
-                <Spinner size="sm" data-testid="wizard-footer-spinner" /> {submittingText}
-              </Content>
+              <Text component={TextVariants.small}>
+                <Spinner size="sm" /> {submittingText}
+              </Text>
             </ActionListItem>
           )}
           <SplitItem isFilled />

package/lib/common/components/ui/WizardNavItem.tsx

@@ -29,11 +29,7 @@ const NavItem = ({ isValid = () => true, children, ...props }: NavItemProps) =>
   const { content, isDisabled, isCurrent } = props;
 
   return (
-    <WizardNavItem
-      {...props}
-      content={getNavItemContent(content, isValid, isDisabled, isCurrent)}
-      data-testid="cluster-wizard-navitem"
-    >
+    <WizardNavItem {...props} content={getNavItemContent(content, isValid, isDisabled, isCurrent)}>
       {children}
     </WizardNavItem>
   );

package/lib/common/components/ui/eventsModal.tsx

@@ -1,16 +1,15 @@
 import React from 'react';
 import {
   Button,
-  ButtonVariant,
   Modal,
-  ModalBody,
-  ModalFooter,
-  ModalHeader,
+  ButtonVariant,
   ModalVariant,
+  ModalBoxBody,
   Spinner,
+  Title,
 } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
-import { t_global_icon_color_status_warning_default as globalIconColorWarning } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_warning_default';
+import { global_warning_color_100 as globalWarningColor100 } from '@patternfly/react-tokens/dist/js/global_warning_color_100';
 import { ToolbarButton } from './Toolbar';
 import { Cluster, Event } from '@openshift-assisted/types/assisted-installer-service';
 import { EventListFetchProps, EventsEntityKind } from '../../types';
@@ -90,21 +89,25 @@ export const EventsModal = ({
 
   return (
     <Modal
+      header={
+        <Title headingLevel={'h1'}>
+          {title} {isLoading && <Spinner size="lg" />}
+        </Title>
+      }
       isOpen={isOpen}
       aria-label={t('ai:Displays events')}
+      hasNoBodyWrapper
+      actions={[
+        <Button key="close" variant={ButtonVariant.primary} onClick={onClose}>
+          {t('ai:Close')}
+        </Button>,
+      ]}
       onClose={onClose}
       variant={ModalVariant.large}
       className="events-modal"
       id={'events-modal'}
     >
-      <ModalHeader
-        title={
-          <>
-            {title} {isLoading && <Spinner size="lg" data-testid="events-modal-spinner" />}
-          </>
-        }
-      />
-      <ModalBody className="events-modal__body">
+      <ModalBoxBody className="events-modal__body">
         {fallbackEventsURL ? (
           <ErrorState
             title={t('ai:Could not load events')}
@@ -117,22 +120,12 @@ export const EventsModal = ({
               </>
             }
             icon={ExclamationTriangleIcon}
-            iconColor={globalIconColorWarning.value}
+            iconColor={globalWarningColor100.value}
           />
         ) : (
           <EventListFetch className="events-modal__event-list" setLoading={setLoading} {...rest} />
         )}
-      </ModalBody>
-      <ModalFooter>
-        <Button
-          key="close"
-          variant={ButtonVariant.primary}
-          onClick={onClose}
-          data-testid="close-events-modal"
-        >
-          {t('ai:Close')}
-        </Button>
-      </ModalFooter>
+      </ModalBoxBody>
     </Modal>
   );
 };

package/lib/common/components/ui/formik/AlertFormikError.tsx

@@ -14,14 +14,16 @@ export const AlertFormikError = ({ status, onClose }: AlertFormikErrorProps) =>
   const actionClose = onClose ? <AlertActionCloseButton onClose={onClose} /> : undefined;
 
   return (
-    <Alert
-      variant={AlertVariant.danger}
-      title={status.error.title}
-      isInline
-      actionClose={actionClose}
-    >
-      {status.error.message}
-    </Alert>
+    <>
+      <Alert
+        variant={AlertVariant.danger}
+        title={status.error.title}
+        isInline
+        actionClose={actionClose}
+      >
+        {status.error.message}
+      </Alert>
+    </>
   );
 };
 

package/lib/common/components/ui/formik/CertificatesUploadField.tsx

@@ -89,7 +89,7 @@ const CertificatesUploadField: React.FC<UploadFieldProps> = ({
   };
 
   return (
-    <FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelHelp={labelIcon}>
+    <FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelIcon={labelIcon}>
       {children}
       <FileUpload
         filenamePlaceholder={t('ai:Drag a file here or browse to upload')}
@@ -125,7 +125,6 @@ const CertificatesUploadField: React.FC<UploadFieldProps> = ({
               icon={errorMessage && <ExclamationCircleIcon />}
               variant={errorMessage ? 'error' : 'default'}
               id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
-              data-testid="certificates-upload-field-helper-text"
             >
               {errorMessage ? errorMessage : helperText}
             </HelperTextItem>

package/lib/common/components/ui/formik/CheckboxField.tsx

@@ -48,7 +48,6 @@ const CheckboxField: React.FC<CheckboxFieldProps> = ({
               icon={<ExclamationCircleIcon />}
               variant="error"
               id={`${fieldId}-helper-error`}
-              data-testid="checkbox-field-helper-text"
             >
               {errorMessage}
             </HelperTextItem>

package/lib/common/components/ui/formik/CodeField.tsx

@@ -72,14 +72,12 @@ const CodeField = ({
       fieldId={fieldId}
       label={label}
       isRequired={isRequired}
-      labelHelp={labelIcon}
+      labelIcon={labelIcon}
       data-testid={dataTestid ? dataTestid : `${fieldId}-testid`}
     >
       {description && (
         <HelperText>
-          <HelperTextItem variant="indeterminate" data-testid="code-field-description-helper-text">
-            {description}
-          </HelperTextItem>
+          <HelperTextItem variant="indeterminate">{description}</HelperTextItem>
         </HelperText>
       )}
       <CodeEditor
@@ -105,7 +103,6 @@ const CodeField = ({
               icon={errorMessage && <ExclamationCircleIcon />}
               variant={errorMessage ? 'error' : 'default'}
               id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
-              data-testid="code-field-helper-text"
             >
               {errorMessage ? errorMessage : helperText}
             </HelperTextItem>

package/lib/common/components/ui/formik/InputField.tsx

@@ -51,17 +51,12 @@ const InputField: React.FC<
         fieldId={fieldId}
         label={label}
         isRequired={isRequired}
-        labelHelp={labelIcon}
+        labelIcon={labelIcon}
         labelInfo={labelInfo}
       >
         {description && (
           <HelperText>
-            <HelperTextItem
-              variant="indeterminate"
-              data-testid=" input-field-description-${fieldId}-helper-text"
-            >
-              {description}
-            </HelperTextItem>
+            <HelperTextItem variant="indeterminate">{description}</HelperTextItem>
           </HelperText>
         )}
         <Split>
@@ -88,14 +83,9 @@ const InputField: React.FC<
           <FormHelperText>
             <HelperText>
               <HelperTextItem
-                icon={errorMessage && errorMessage.trim() !== '' ? <ExclamationCircleIcon /> : null}
-                variant={errorMessage && errorMessage.trim() !== '' ? 'error' : 'default'}
-                id={
-                  errorMessage && errorMessage.trim() !== ''
-                    ? `${fieldId}-helper-error`
-                    : `${fieldId}-helper`
-                }
-                data-testid={`input-field-${fieldId}-helper-text`}
+                icon={errorMessage && <ExclamationCircleIcon />}
+                variant={showErrorMessage ? 'error' : 'default'}
+                id={showErrorMessage && !isValid ? `${fieldId}-helper-error` : `${fieldId}-helper`}
               >
                 {showErrorMessage ? errorMessage : helperText}
               </HelperTextItem>

package/lib/common/components/ui/formik/LabelField.css

@@ -1,5 +1,5 @@
 .label-field__value {
-  margin: 0 var(--pf-v6-global--spacer--sm) 0 0;
+  margin: 0 var(--pf-v5-global--spacer--sm) 0 0;
 }
 
 .label-field__input {
@@ -10,13 +10,13 @@
 }
 
 .label-field__input::placeholder {
-  color: var(--pf-v6-c-form-control--m-placeholder--Color);
+  color: var(--pf-v5-c-form-control--m-placeholder--Color);
 }
 
 .label-field .react-autosuggest__suggestions-list {
-  margin-left: var(--pf-v6-global--spacer-xs);
-  margin-right: var(--pf-v6-global--spacer-xs);
-  box-shadow: var(--pf-v6-global--BoxShadow--lg);
+  margin-left: var(--pf-v5-global--spacer-xs);
+  margin-right: var(--pf-v5-global--spacer-xs);
+  box-shadow: var(--pf-v5-global--BoxShadow--lg);
 
   max-height: 10rem;
   overflow: auto;
@@ -29,13 +29,13 @@
 
 .label-field .react-autosuggest__suggestion--highlighted {
   /* TODO(mlibra): maybe a lighter color would be better */
-  background-color: var(--pf-v6-global--primary-color--light-100);
+  background-color: var(--pf-v5-global--primary-color--light-100);
 }
 
 .label-field .react-autosuggest__section-title {
   padding: 10px 0 0 10px;
-  font-size: var(--pf-v6-global--FontSize--sm);
-  color: var(--pf-v6-global--Color--200);
+  font-size: var(--pf-v5-global--FontSize--sm);
+  color: var(--pf-v5-global--Color--200);
 }
 
 .label-field .react-tagsinput {

package/lib/common/components/ui/formik/LabelField.tsx

@@ -52,9 +52,9 @@ export const LabelField: React.FC<LabelFieldProps> = ({
   const errorMessage = !isValid ? error : '';
 
   return (
-    <FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelHelp={labelIcon}>
+    <FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelIcon={labelIcon}>
       {t("ai:Enter key=value and then press 'enter' or 'space' or use a ',' to input the label.")}
-      <div className="co-search-input pf-v6-c-form-control">
+      <div className="co-search-input pf-v5-c-form-control">
         <TagsInput
           {...field}
           onChange={(tags) => {
@@ -89,7 +89,6 @@ export const LabelField: React.FC<LabelFieldProps> = ({
               icon={errorMessage && <ExclamationCircleIcon />}
               variant={errorMessage ? 'error' : 'default'}
               id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
-              data-testid={`input-label-${fieldId}-helper-text`}
             >
               {errorMessage ? errorMessage : helperText}
             </HelperTextItem>

package/lib/common/components/ui/formik/MultiSelectField.tsx

@@ -76,8 +76,8 @@ const MultiSelectField: React.FC<MultiSelectFieldProps> = ({
     onChange && onChange(newValue);
   };
 
-  const deleteLabel = (label: string) => {
-    const newValue = field.value.filter((val) => val !== label);
+  const deleteChip = (chip: string) => {
+    const newValue = field.value.filter((val) => val !== chip);
     setValue(newValue);
     setTextValue('');
     onChange && onChange(newValue);
@@ -101,7 +101,7 @@ const MultiSelectField: React.FC<MultiSelectFieldProps> = ({
   });
 
   return (
-    <FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelHelp={labelIcon}>
+    <FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelIcon={labelIcon}>
       <Dropdown
         id={fieldId}
         isOpen={isOpen}
@@ -114,17 +114,16 @@ const MultiSelectField: React.FC<MultiSelectFieldProps> = ({
             onClick={() => onToggle(!isOpen)}
             isExpanded={isOpen}
             variant="typeahead"
-            data-testid="multi-select-field-toggle"
           >
             <TextInputGroup>
               <LabelGroup>
-                {field.value.map((currentLabel) => (
+                {field.value.map((currentChip) => (
                   <Label
-                    key={currentLabel}
+                    key={currentChip}
                     variant="outline"
-                    onClose={() => deleteLabel(currentLabel)}
+                    onClose={() => deleteChip(currentChip)}
                   >
-                    {currentLabel}
+                    {currentChip}
                   </Label>
                 ))}
               </LabelGroup>
@@ -168,7 +167,6 @@ const MultiSelectField: React.FC<MultiSelectFieldProps> = ({
               icon={<ExclamationCircleIcon />}
               variant={errorMessage ? 'error' : 'default'}
               id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
-              data-testid={`input-multiselectfield-${fieldId}-helper-text`}
             >
               {errorMessage ? errorMessage : hText}
             </HelperTextItem>

package/lib/common/components/ui/formik/NumberInputField.tsx

@@ -65,7 +65,7 @@ const NumberInputField: React.FC<NumberInputFieldProps> = React.forwardRef(
     };
 
     return (
-      <FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelHelp={labelIcon}>
+      <FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelIcon={labelIcon}>
         <Split>
           <SplitItem isFilled>
             <NumberInput
@@ -90,7 +90,6 @@ const NumberInputField: React.FC<NumberInputFieldProps> = React.forwardRef(
                 icon={errorMessage && <ExclamationCircleIcon />}
                 variant={errorMessage ? 'error' : 'default'}
                 id={errorMessage ? `${fieldId}-helper-error` : `${fieldId}-helper`}
-                data-testid={`input-numberinput-${fieldId}-helper-text`}
               >
                 {errorMessage ? errorMessage : helperText}
               </HelperTextItem>

package/lib/common/components/ui/formik/PencilEditField.css

@@ -1,3 +1,3 @@
 .ai-pencil-field__text {
-  padding-right: var(--pf-v6-global--spacer--sm);
+  padding-right: var(--pf-v5-global--spacer--sm);
 }

package/lib/common/components/ui/formik/PencilEditField.tsx

@@ -57,7 +57,7 @@ const PencilEditField = ({ name, isRequired, showErrorMessage }: PencilEditField
           </Split>
         </>
       )}
-      <div className="pf-v6-c-form__helper-text pf-m-error">{errrMsg}</div>
+      <div className="pf-v5-c-form__helper-text pf-m-error">{errrMsg}</div>
     </>
   );
 };

package/lib/common/components/ui/formik/PullSecretField.tsx

@@ -67,7 +67,6 @@ const GetPullSecretHelperText: React.FC<{ isOcm: boolean }> = ({ isOcm }) => {
 
 const PullSecretField: React.FC<{ isOcm: boolean }> = ({ isOcm }) => {
   const { t } = useTranslation();
-
   return (
     <TextAreaField
       name="pullSecret"

package/lib/common/components/ui/formik/RemovableField.css

@@ -1,11 +1,11 @@
 .ai-remove-button__tooltip {
-  --pf-v6-c-tooltip__content--BackgroundColor: rgba(0, 0, 0, 0) !important;
-  --pf-v6-c-tooltip__arrow--BackgroundColor: rgba(0, 0, 0, 0) !important;
-  --pf-v6-c-tooltip__arrow--BoxShadow: rgba(0, 0, 0, 0) !important;
-  --pf-v6-c-tooltip--BoxShadow: rgba(0, 0, 0, 0) !important;
-  --pf-v6-c-tooltip__content--PaddingTop: 2.25em !important;
+  --pf-v5-c-tooltip__content--BackgroundColor: rgba(0, 0, 0, 0) !important;
+  --pf-v5-c-tooltip__arrow--BackgroundColor: rgba(0, 0, 0, 0) !important;
+  --pf-v5-c-tooltip__arrow--BoxShadow: rgba(0, 0, 0, 0) !important;
+  --pf-v5-c-tooltip--BoxShadow: rgba(0, 0, 0, 0) !important;
+  --pf-v5-c-tooltip__content--PaddingTop: 2.25em !important;
 }
 
 .ai-remove-button__tooltip--padding-none {
-  --pf-v6-c-tooltip__content--PaddingTop: 0 !important;
+  --pf-v5-c-tooltip__content--PaddingTop: 0 !important;
 }

package/lib/common/components/ui/formik/RemovableField.tsx

@@ -30,11 +30,12 @@ const RemovableField: React.FC<RemovableFieldProps & Omit<TooltipProps, 'content
       distance={0}
       content={
         <Button
-          icon={<UiIcon size="sm" icon={<MinusCircleIcon />} />}
           variant={ButtonVariant.plain}
           onClick={onRemove}
           data-testid={removeButtonDataTestId}
-        />
+        >
+          <UiIcon size="sm" icon={<MinusCircleIcon />} />
+        </Button>
       }
       className={classnames('ai-remove-button__tooltip ', className)}
       {...props}

package/lib/common/components/ui/formik/RichInputField.css

@@ -1,9 +1,16 @@
 .rich-input__rules {
-  padding-top: var(--pf-v6-c-helper-text--Gap);
+  padding-top: var(--pf-v5-c-helper-text--Gap);
+}
+
+.rich-input__group {
+  border-color: var(--pf-v5-global--BorderColor--300) var(--pf-v5-global--BorderColor--300)
+    var(--pf-v5-global--BorderColor--200) var(--pf-v5-global--BorderColor--300);
+  border-width: 1px;
+  border-style: solid;
 }
 
 .rich-input__group--invalid {
-  border-bottom-color: var(--pf-v6-global--danger-color--100);
+  border-bottom-color: var(--pf-v5-global--danger-color--100);
 }
 
 .rich-input__text {

package/lib/common/components/ui/formik/RichInputField.tsx

@@ -14,16 +14,15 @@ import {
   InputGroupItem,
   FormHelperText,
   HelperText,
-  ButtonVariant,
 } from '@patternfly/react-core';
 import { CheckCircleIcon } from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import { CheckIcon } from '@patternfly/react-icons/dist/js/icons/check-icon';
 import { ExclamationCircleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
 import { InfoCircleIcon } from '@patternfly/react-icons/dist/js/icons/info-circle-icon';
 import { TimesIcon } from '@patternfly/react-icons/dist/js/icons/times-icon';
-import { t_global_color_status_success_default as okColor } from '@patternfly/react-tokens/dist/js/t_global_color_status_success_default';
-import { t_global_icon_color_status_danger_default as dangerColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_danger_default';
-import { t_global_icon_color_status_info_default as blueInfoColor } from '@patternfly/react-tokens/dist/js/t_global_icon_color_status_info_default';
+import { global_palette_green_500 as okColor } from '@patternfly/react-tokens/dist/js/global_palette_green_500';
+import { global_danger_color_100 as dangerColor } from '@patternfly/react-tokens/dist/js/global_danger_color_100';
+import { global_palette_blue_300 as blueInfoColor } from '@patternfly/react-tokens/dist/js/global_palette_blue_300';
 
 import { InputFieldProps as BaseInputProps } from './types';
 import { getFieldId } from './utils';
@@ -51,26 +50,19 @@ type RichValidationProps = {
   value: any;
   error: string | undefined;
   richValidationMessages: { [key: string]: string };
-  fieldId: string;
 };
 
 export const RichValidation: React.FC<RichValidationProps> = ({
   value,
   error,
   richValidationMessages,
-  fieldId,
 }) => {
   return (
     <PFHelperText component="ul" className="rich-input__rules">
       {Object.keys(richValidationMessages).map((key) => {
         const variant = getHelperTextVariant(richValidationMessages[key], value, error);
         return (
-          <HelperTextItem
-            key={key}
-            component="li"
-            {...variant}
-            data-testid={`input-richinputvalidation-${fieldId}-helper-text`}
-          >
+          <HelperTextItem key={key} isDynamic component="li" {...variant}>
             {richValidationMessages[key]}
           </HelperTextItem>
         );
@@ -116,7 +108,7 @@ const RichInputField: React.FC<RichInputFieldPropsProps> = React.forwardRef(
         fieldId={fieldId}
         label={label}
         isRequired={isRequired}
-        labelHelp={labelIcon}
+        labelIcon={labelIcon}
       >
         <InputGroup
           className={classNames('rich-input__group', { 'rich_input__group--invalid': !isValid })}
@@ -156,24 +148,19 @@ const RichInputField: React.FC<RichInputFieldPropsProps> = React.forwardRef(
                   value={value}
                   error={error}
                   richValidationMessages={richValidationMessages as Record<string, string>}
-                  fieldId={fieldId}
                 />
               }
               withFocusTrap={false}
             >
-              <Button
-                icon={
-                  !isValid ? (
-                    <ExclamationCircleIcon color={dangerColor.value} />
-                  ) : value ? (
-                    <CheckCircleIcon color={okColor.value} />
-                  ) : (
-                    <InfoCircleIcon color={blueInfoColor.value} />
-                  )
-                }
-                variant={ButtonVariant.control}
-                aria-label="Validation"
-              />
+              <Button variant="plain" aria-label="Validation">
+                {!isValid ? (
+                  <ExclamationCircleIcon color={dangerColor.value} />
+                ) : value ? (
+                  <CheckCircleIcon color={okColor.value} />
+                ) : (
+                  <InfoCircleIcon color={blueInfoColor.value} />
+                )}
+              </Button>
             </Popover>
           </InputGroupItem>
         </InputGroup>
@@ -184,7 +171,6 @@ const RichInputField: React.FC<RichInputFieldPropsProps> = React.forwardRef(
                 icon={errorMessage && <ExclamationCircleIcon />}
                 variant={isValid ? 'default' : 'error'}
                 id={isValid ? `${fieldId}-helper` : `${fieldId}-helper-error`}
-                data-testid={`input-richinput-${fieldId}-helper-text`}
               >
                 {errorMessage ? errorMessage : helperText}
               </HelperTextItem>