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

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

@@ -1,5 +1,5 @@
 import React, { ReactNode, MouseEvent } from 'react';
-import { Text } from '@patternfly/react-core';
+import { Content } from '@patternfly/react-core';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 
 interface ExternalLinkProps {
@@ -16,9 +16,15 @@ const ExternalLink: React.FC<ExternalLinkProps> = ({ href, onClick, children })
   };
 
   return (
-    <Text component="a" href={href} onClick={handleClick} target="_blank" rel="noopener noreferrer">
+    <Content
+      component="a"
+      href={href}
+      onClick={handleClick}
+      target="_blank"
+      rel="noopener noreferrer"
+    >
       {children ? children : href} <ExternalLinkAltIcon color="rgb(0, 123, 186)" />
-    </Text>
+    </Content>
   );
 };
 export default ExternalLink;

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

@@ -4,6 +4,6 @@ import React from 'react';
  * This component allows to maintain grid gap behaviour of PF Form by wrapping
  * FormGroup components which are inside of Grid
  */
-const GridGap: React.FC = (props) => <div {...props} className="pf-v5-c-form" />;
+const GridGap: React.FC = (props) => <div {...props} className="pf-v6-c-form" />;
 
 export default GridGap;

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

@@ -1,12 +1,10 @@
 import React from 'react';
-import { EmptyState, EmptyStateBody, EmptyStateIcon, Title } from '@patternfly/react-core';
+import { EmptyState, EmptyStateBody, Title } from '@patternfly/react-core';
 import { ExclamationTriangleIcon } from '@patternfly/react-icons/dist/js/icons/exclamation-triangle-icon';
-import { global_disabled_color_100 as iconColor } from '@patternfly/react-tokens/dist/js/global_disabled_color_100';
 
 const NoPermissionsError = () => (
-  <EmptyState id="not-found">
+  <EmptyState id="not-found" icon={ExclamationTriangleIcon}>
     <EmptyStateBody>
-      <EmptyStateIcon icon={ExclamationTriangleIcon} color={iconColor.value} />
       <Title headingLevel="h2">Access permissions needed</Title>
       <EmptyStateBody>
         To create a cluster using the Assisted Installer, ask your organization administrator to

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

@@ -107,7 +107,10 @@ export const OpenShiftVersionDropdown = ({
         <Button
           variant="link"
           isInline
-          onClick={() => showOpenshiftVersionModal()}
+          onClick={() => {
+            setOpen(false);
+            showOpenshiftVersionModal();
+          }}
           id="show-all-versions"
         >
           {t('ai:Show all available versions')}
@@ -132,11 +135,13 @@ export const OpenShiftVersionDropdown = ({
   const dropdownToggle = (toggleRef: React.Ref<MenuToggleElement>) => (
     <MenuToggle
       id={fieldId}
-      className="pf-v5-u-w-100"
+      className="pf-v6-u-w-100"
+      style={{ minWidth: '420px' }}
       ref={toggleRef}
       isFullWidth
       onClick={() => setOpen(!isOpen)}
       isExpanded={isOpen}
+      data-testid="openshift-version-dropdown-toggle"
     >
       {current || t('ai:OpenShift version')}
     </MenuToggle>
@@ -166,16 +171,20 @@ export const OpenShiftVersionDropdown = ({
       {helperText && (
         <FormHelperText>
           <HelperText>
-            <HelperTextItem variant="default">{helperText}</HelperTextItem>
+            <HelperTextItem variant="default" data-testid="openshift-version-dropdown-helper-text">
+              {helperText}
+            </HelperTextItem>
           </HelperText>
         </FormHelperText>
       )}
       {showReleasesLink && (
-        <ExternalLink href={`${window.location.origin}/${OCP_RELEASES_PAGE}`}>
-          <span data-ouia-id="openshift-releases-link">
-            {t('ai:Learn more about OpenShift releases')}
-          </span>
-        </ExternalLink>
+        <div className="pf-v6-u-mt-sm">
+          <ExternalLink href={`${window.location.origin}/${OCP_RELEASES_PAGE}`}>
+            <span data-ouia-id="openshift-releases-link">
+              {t('ai:Learn more about OpenShift releases')}
+            </span>
+          </ExternalLink>
+        </div>
       )}
     </FormGroup>
   );

package/lib/common/components/ui/OpenShiftVersionModal.css

@@ -2,6 +2,6 @@
   height: 44vh;
   display: flex;
 }
-#customOpenshiftSelect .pf-v5-c-menu__content {
+#customOpenshiftSelect .pf-v6-c-menu__content {
   max-height: 22vh;
 }

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

@@ -1,5 +1,14 @@
 import React from 'react';
-import { Button, ButtonVariant, FormGroup, Modal, ModalVariant } from '@patternfly/react-core';
+import {
+  Button,
+  ButtonVariant,
+  FormGroup,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalVariant,
+} from '@patternfly/react-core';
 import { OpenShiftSelectWithSearch } from './OpenShiftSelectWithSearch';
 import { HelperTextType } from './OpenShiftVersionDropdown';
 import { useFormikContext } from 'formik';
@@ -26,32 +35,34 @@ export const OpenShiftVersionModal = ({
 
   return (
     <Modal
-      title="Available OpenShift Versions"
       id="available-openshift-versions-modal"
       isOpen
-      actions={[
+      onClose={() => setOpenshiftVersionModalOpen(false)}
+      variant={ModalVariant.small}
+    >
+      <ModalHeader title="Available OpenShift Versions" />
+      <ModalBody>
+        <FormGroup
+          id={`form-control__customOpenshiftSelect`}
+          fieldId={'customOpenshiftSelect'}
+          label={'OpenShift version'}
+          isRequired
+        >
+          <OpenShiftSelectWithSearch versions={allVersions} getHelperText={getHelperText} />
+        </FormGroup>
+      </ModalBody>
+      <ModalFooter>
         <Button
           key="select-custom-ocp"
           variant={ButtonVariant.primary}
           onClick={() => setOpenshiftVersionModalOpen(false)}
         >
           Select
-        </Button>,
+        </Button>
         <Button key="close-custom-ocp" variant={ButtonVariant.link} onClick={onCancel}>
           Cancel
-        </Button>,
-      ]}
-      onClose={onCancel}
-      variant={ModalVariant.small}
-    >
-      <FormGroup
-        id={`form-control__customOpenshiftSelect`}
-        fieldId={'customOpenshiftSelect'}
-        label={'OpenShift version'}
-        isRequired
-      >
-        <OpenShiftSelectWithSearch versions={allVersions} getHelperText={getHelperText} />
-      </FormGroup>
+        </Button>
+      </ModalFooter>
     </Modal>
   );
 };

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

@@ -27,17 +27,18 @@ const PopoverIcon: React.FC<PopoverIconProps> = ({
 }) => (
   <Popover {...props}>
     <Button
+      icon={
+        <Icon isInline={noVerticalAlign}>
+          <IconComponent />
+        </Icon>
+      }
       component={component}
       variant={variant}
       onClick={(e) => e.preventDefault()}
-      className={classNames('pf-v5-c-form__group-label-help', 'pf-v5-u-p-0', buttonClassName)}
+      className={classNames('pf-v6-c-form__group-label-help', 'pf-v6-u-p-0', buttonClassName)}
       ouiaId={buttonOuiaId}
       style={buttonStyle}
-    >
-      <Icon isInline={noVerticalAlign}>
-        <IconComponent />
-      </Icon>
-    </Button>
+    />
   </Popover>
 );
 

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

@@ -21,7 +21,7 @@ export type PreviewBadgeProps = {
 
 export const PreviewBadge: React.FC<PreviewBadgeProps> = ({
   position = PreviewBadgePosition.inline,
-  className = 'pf-v5-u-ml-md',
+  className = 'pf-v6-u-ml-md',
   text,
   popoverContent,
   externalLink,
@@ -31,15 +31,15 @@ export const PreviewBadge: React.FC<PreviewBadgeProps> = ({
   const { t } = useTranslation();
   switch (position) {
     case PreviewBadgePosition.inlineRight:
-      clsName += ' pf-v5-u-float-right';
+      clsName += ' pf-v6-u-float-right';
       break;
     case PreviewBadgePosition.inline:
-      clsName += ' pf-v5-u-display-inline';
+      clsName += ' pf-v6-u-display-inline';
       break;
   }
   const bodyContent = (
     <>
-      <div style={{ marginBottom: 'var(--pf-v5-global--spacer--sm)' }}>{popoverContent}</div>
+      <div style={{ marginBottom: 'var(--pf-t--global--spacer--sm)' }}>{popoverContent}</div>
       {externalLink && (
         <>
           <ExternalLink href={externalLink}>{t('ai:Learn more')}</ExternalLink>
@@ -53,7 +53,7 @@ export const PreviewBadge: React.FC<PreviewBadgeProps> = ({
         <Label
           style={{ cursor: 'pointer' }}
           color="orange"
-          icon={<InfoCircleIcon color="var(--pf-v5-c-label__content--Color)" />}
+          icon={<InfoCircleIcon />}
           className={clsName}
           {...(testId ? { 'data-testid': testId } : {})}
         >

package/lib/common/components/ui/PrismCode.css

@@ -1,4 +1,4 @@
 pre.prism-code {
-  padding: var(--pf-v5-global--spacer--sm) var(--pf-v5-global--spacer--md);
+  padding: var(--pf-v6-global--spacer--sm) var(--pf-v6-global--spacer--md);
   overflow-x: auto;
 }

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

@@ -1,14 +1,13 @@
 import React from 'react';
 import Highlight, { defaultProps, Language, PrismTheme } from 'prism-react-renderer';
-import { Text, TextVariants, ClipboardCopy, clipboardCopyFunc } from '@patternfly/react-core';
-import { global_Color_100 } from '@patternfly/react-tokens/dist/js/global_Color_100';
-import { global_palette_purple_400 } from '@patternfly/react-tokens/dist/js/global_palette_purple_400';
-import { global_palette_blue_300 } from '@patternfly/react-tokens/dist/js/global_palette_blue_300';
+import { Content, ClipboardCopy, clipboardCopyFunc } from '@patternfly/react-core';
+import { t_global_color_nonstatus_purple_300 } from '@patternfly/react-tokens/dist/js/t_global_color_nonstatus_purple_300';
+import { t_global_color_nonstatus_blue_default as globalBlue } from '@patternfly/react-tokens/dist/js/t_global_color_nonstatus_blue_default';
 import defaultTheme from 'prism-react-renderer/themes/github';
 import './PrismCode.css';
 export const SimpleAIPrismTheme = {
   plain: {
-    color: global_Color_100.value,
+    color: '#333333',
     backgroundColor: defaultTheme.plain.backgroundColor,
     fontSize: '.93em',
   },
@@ -16,13 +15,13 @@ export const SimpleAIPrismTheme = {
     {
       types: ['variable'],
       style: {
-        color: global_palette_blue_300.value,
+        color: globalBlue.value,
       },
     },
     {
       types: ['class-name', 'function', 'tag', 'attr-name'],
       style: {
-        color: global_palette_purple_400.value,
+        color: t_global_color_nonstatus_purple_300.value,
       },
     },
   ],
@@ -41,7 +40,7 @@ const PrismCode: React.FC<PrismCodeProps> = ({
 }) => (
   <Highlight {...defaultProps} code={code} language={language} theme={theme}>
     {({ className, style, tokens, getLineProps, getTokenProps }) => (
-      <Text component={TextVariants.pre} className={className} style={style}>
+      <Content component="pre" className={className} style={style}>
         {copiable && (
           <ClipboardCopy
             isReadOnly
@@ -59,7 +58,7 @@ const PrismCode: React.FC<PrismCodeProps> = ({
             ))}
           </div>
         ))}
-      </Text>
+      </Content>
     )}
   </Highlight>
 );

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

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

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

@@ -52,6 +52,7 @@ 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,8 +2,7 @@ import * as React from 'react';
 import { useField } from 'formik';
 import {
   FormGroup,
-  TextContent,
-  Text,
+  Content,
   FormHelperText,
   HelperText,
   HelperTextItem,
@@ -46,6 +45,7 @@ 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,11 +82,9 @@ export const StaticTextField: React.FC<StaticFieldProps> = ({ children, ...props
 
   return (
     <StaticField {...props}>
-      <TextContent>
-        <Text component="p" id={fieldId} aria-describedby={`${fieldId}-helper`}>
-          {children}
-        </Text>
-      </TextContent>
+      <Content component="p" id={fieldId} aria-describedby={`${fieldId}-helper`}>
+        {children}
+      </Content>
     </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: 'alignRight' }}>{children}</ToolbarGroup>
+  <ToolbarGroup align={{ md: 'alignEnd' }}>{children}</ToolbarGroup>
 );
 
 export default ToolbarSecondaryGroup;

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

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

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

@@ -8,8 +8,8 @@ import {
   SplitItem,
   Stack,
   StackItem,
-  Text,
-  TextVariants,
+  Content,
+  ContentVariants,
 } 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}
+                isDisabled={isNextDisabled || isSubmitting}
                 isLoading={isNextButtonLoading}
               >
                 {nextButtonText || t('ai:Next')}
@@ -114,9 +114,9 @@ export const WizardFooter: React.FC<WizardFooterProps> = ({
           )}
           {isSubmitting && (
             <ActionListItem>
-              <Text component={TextVariants.small}>
-                <Spinner size="sm" /> {submittingText}
-              </Text>
+              <Content component={ContentVariants.small}>
+                <Spinner size="sm" data-testid="wizard-footer-spinner" /> {submittingText}
+              </Content>
             </ActionListItem>
           )}
           <SplitItem isFilled />

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

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

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

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

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

@@ -14,16 +14,14 @@ 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} labelIcon={labelIcon}>
+    <FormGroup fieldId={fieldId} label={label} isRequired={isRequired} labelHelp={labelIcon}>
       {children}
       <FileUpload
         filenamePlaceholder={t('ai:Drag a file here or browse to upload')}
@@ -125,6 +125,7 @@ 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,6 +48,7 @@ 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,12 +72,14 @@ const CodeField = ({
       fieldId={fieldId}
       label={label}
       isRequired={isRequired}
-      labelIcon={labelIcon}
+      labelHelp={labelIcon}
       data-testid={dataTestid ? dataTestid : `${fieldId}-testid`}
     >
       {description && (
         <HelperText>
-          <HelperTextItem variant="indeterminate">{description}</HelperTextItem>
+          <HelperTextItem variant="indeterminate" data-testid="code-field-description-helper-text">
+            {description}
+          </HelperTextItem>
         </HelperText>
       )}
       <CodeEditor
@@ -103,6 +105,7 @@ 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

@@ -32,6 +32,7 @@ const InputField: React.FC<
       description,
       labelInfo,
       showErrorMessage = true,
+      type = 'text',
       ...props
     },
     ref: React.Ref<HTMLInputElement>,
@@ -51,12 +52,17 @@ const InputField: React.FC<
         fieldId={fieldId}
         label={label}
         isRequired={isRequired}
-        labelIcon={labelIcon}
+        labelHelp={labelIcon}
         labelInfo={labelInfo}
       >
         {description && (
           <HelperText>
-            <HelperTextItem variant="indeterminate">{description}</HelperTextItem>
+            <HelperTextItem
+              variant="indeterminate"
+              data-testid=" input-field-description-${fieldId}-helper-text"
+            >
+              {description}
+            </HelperTextItem>
           </HelperText>
         )}
         <Split>
@@ -75,6 +81,7 @@ const InputField: React.FC<
                   onChange && onChange(event);
                 }
               }}
+              type={type}
             />
           </SplitItem>
           <SplitItem>{children}</SplitItem>
@@ -82,13 +89,20 @@ const InputField: React.FC<
         {((showErrorMessage && !isValid) || helperText) && (
           <FormHelperText>
             <HelperText>
-              <HelperTextItem
-                icon={errorMessage && <ExclamationCircleIcon />}
-                variant={showErrorMessage ? 'error' : 'default'}
-                id={showErrorMessage && !isValid ? `${fieldId}-helper-error` : `${fieldId}-helper`}
-              >
-                {showErrorMessage ? errorMessage : helperText}
-              </HelperTextItem>
+              {showErrorMessage && !isValid && (
+                <HelperTextItem
+                  icon={<ExclamationCircleIcon />}
+                  variant={'error'}
+                  id={`${fieldId}-helper-error`}
+                >
+                  {errorMessage}
+                </HelperTextItem>
+              )}
+              {helperText && (
+                <HelperTextItem variant={'default'} id={`${fieldId}-helper`}>
+                  {helperText}
+                </HelperTextItem>
+              )}
             </HelperText>
           </FormHelperText>
         )}