Refined Error and Help Message Display in Input Component

This pull request introduces significant improvements to the input component, focusing on the refactoring and enhancement of error and help message displays. Additionally, it addresses fixes in the counter container. The modifications span across the introduction of new prop types, updates to styled components, and revisions in style definitions, aiming to enhance flexibility and maintainability

Author: Hector Arce De Las Heras

src/components/input/input.styled.ts

@@ -14,6 +14,7 @@ import { getStyles } from '@/utils/getStyles/getStyles';
 import { InputCounterStateProps } from '../inputCounter/types/inputCounterTheme';
 import { InputIconPosition, InputState } from './types';
 import {
+  ErrorAndHelpMessageWrapperStyledProps,
   ErrorMessageStyledProps,
   HelpMessageStyledProps,
   InformationAssociatedStyledProps,
@@ -49,10 +50,8 @@ export const InfoAssociatedTextAndDecorativeStyled = styled.div<InformationAssoc
 
 export const InfoAssociatedButtonStyled = styled.div<InformationAssociatedStyledProps>``;
 
-export const InputErrorAndHelpMessageWrapperStyled = styled.div`
-  display: flex;
-  flex-direction: column;
-  width: 100%;
+export const InputErrorAndHelpMessageWrapperStyled = styled.div<ErrorAndHelpMessageWrapperStyledProps>`
+  ${({ styles }) => getStyles(styles?.errorAndHelpMessageContainer)};
 `;
 
 export const InputErrorStyled = styled.div<ErrorMessageStyledProps>`

src/components/input/inputStandAlone.tsx

@@ -96,7 +96,6 @@ const InputStandAloneComponent = (
         iconPosition={props.iconPosition}
         id={props.inputId}
         inputMode={inputMode}
-        labelType={styles?.[state]?.label?.type}
         leftIcon={props.leftIcon}
         max={props.max}
         maxLength={props.maxLength}
@@ -201,7 +200,7 @@ const InputStandAloneComponent = (
         styles={styles?.[state]}
       />
       <MessagesAndCounterWrapperStyled>
-        <InputErrorAndHelpMessageWrapperStyled>
+        <InputErrorAndHelpMessageWrapperStyled styles={styles?.[state]}>
           <ErrorMessageStandAlone
             dataTestId={props.dataTestId}
             errorAriaLiveType={props.errorAriaLiveType}

src/components/input/types/inputStyledPropsType.ts

@@ -22,6 +22,10 @@ export type InformationAssociatedStyledProps = {
   styles?: InputStateProps;
 };
 
+export type ErrorAndHelpMessageWrapperStyledProps = {
+  styles?: InputStateProps;
+};
+
 export type ErrorMessageStyledProps = {
   styles?: InputStateProps;
 };
@@ -69,7 +73,6 @@ export type InputStyledProps = {
 };
 
 export type InputWrapperStyledProps = {
-  iconPosition?: InputIconPosition;
   styles?: InputStateProps;
   labelType?: LABEL_TYPE;
 };

src/components/input/types/inputTheme.ts

@@ -73,6 +73,7 @@ export type InputBasicStateProps = {
     size: string;
   };
   informationAssociatedButtonContainer?: CommonStyleType;
+  errorAndHelpMessageContainer?: CommonStyleType;
   errorMessage?: TypographyTypes;
   errorMessageContainer?: CommonStyleType;
   errorMessageIcon?: IconTypes;