[major] Fix length error messages

apps/website/screens/guidelines/localization/LocalizationPage.tsx

@@ -82,21 +82,25 @@ const sections = [
                 </tr>
                 <tr>
                   <td>
-                    <Code>lengthErrorMessage</Code>
+                    <Code>maxLengthErrorMessage</Code>
                   </td>
                   <td>
-                    Min length <Code>minLength</Code>, max length <Code>maxLength</Code>.
+                    The maximum length is <Code>maxLength</Code>.
                   </td>
                   <td>
-                    It is a function that receives two parameters (minlength and maxlength) and returns the text with
-                    those parameters.
+                    It is a function that receives a parameter (maxlength) and returns the text with this parameter.
                   </td>
                 </tr>
                 <tr>
                   <td>
-                    <Code>logoAlternativeText</Code>
+                    <Code>minLengthErrorMessage</Code>
+                  </td>
+                  <td>
+                    The minimum length is <Code>minLength</Code>.
+                  </td>
+                  <td>
+                    It is a function that receives a parameter (minlength) and returns the text with this parameter.
                   </td>
-                  <td>Logo</td>
                 </tr>
               </tbody>
             </DxcTable>

packages/lib/src/common/variables.ts

@@ -75,8 +75,8 @@ export const defaultTranslatedComponentLabels = {
     requiredSelectionErrorMessage: "This field is required. Please, choose an option.",
     requiredValueErrorMessage: "This field is required. Please, enter a value.",
     formatRequestedErrorMessage: "Please match the format requested.",
-    lengthErrorMessage: (minLength?: number, maxLength?: number) => `Min length ${minLength}, max length ${maxLength}.`,
-    logoAlternativeText: "Logo",
+    minLengthErrorMessage: (minLength: number) => `The minimum length is ${minLength}.`,
+    maxLengthErrorMessage: (maxLength: number) => `The maximum length is ${maxLength}.`,
   },
   header: {
     closeIcon: "Close menu",

packages/lib/src/text-input/TextInput.test.tsx

@@ -2,6 +2,7 @@ import { act, fireEvent, render, waitForElementToBeRemoved } from "@testing-libr
 import userEvent from "@testing-library/user-event";
 import DxcTextInput from "./TextInput";
 import MockDOMRect from "../../test/mocks/domRectMock";
+import { HalstackProvider } from "../HalstackContext";
 
 // Mocking DOMRect for Radix Primitive Popover
 global.DOMRect = MockDOMRect;
@@ -157,23 +158,30 @@ describe("TextInput component tests", () => {
     );
     const input = getByRole("textbox");
     fireEvent.change(input, { target: { value: "test" } });
-    expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith({
       value: "test",
-      error: "Min length 5, max length 10.",
+      error: "The minimum length is 5.",
     });
     fireEvent.blur(input);
-    expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "test",
-      error: "Min length 5, max length 10.",
+      error: "The minimum length is 5.",
     });
-    userEvent.clear(input);
+
+    fireEvent.change(input, { target: { value: "test-maximum-length" } });
+    expect(onChange).toHaveBeenCalledWith({
+      value: "test-maximum-length",
+      error: "The maximum length is 10.",
+    });
+    fireEvent.blur(input);
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "test-maximum-length",
+      error: "The maximum length is 10.",
+    });
+
     fireEvent.change(input, { target: { value: "length" } });
-    expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith({ value: "length" });
     fireEvent.blur(input);
-    expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({ value: "length" });
   });
 
@@ -195,34 +203,38 @@ describe("TextInput component tests", () => {
     );
     const input = getByRole("textbox");
     fireEvent.change(input, { target: { value: "test" } });
-    expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith({
       value: "test",
-      error: "Min length 5, max length 10.",
+      error: "The minimum length is 5.",
     });
     fireEvent.blur(input);
-    expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "test",
-      error: "Min length 5, max length 10.",
+      error: "The minimum length is 5.",
+    });
+    fireEvent.change(input, { target: { value: "test-maximum-length" } });
+    expect(onChange).toHaveBeenCalledWith({
+      value: "test-maximum-length",
+      error: "The maximum length is 10.",
+    });
+    fireEvent.blur(input);
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "test-maximum-length",
+      error: "The maximum length is 10.",
     });
     fireEvent.change(input, { target: { value: "tests" } });
-    expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith({
       value: "tests",
       error: "Please match the format requested.",
     });
     fireEvent.blur(input);
-    expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "tests",
       error: "Please match the format requested.",
     });
     fireEvent.change(input, { target: { value: "tests4&" } });
-    expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith({ value: "tests4&" });
     fireEvent.blur(input);
-    expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({ value: "tests4&" });
   });
 
@@ -732,12 +744,29 @@ describe("TextInput component synchronous autosuggest tests", () => {
     });
     expect(onChange).toHaveBeenCalledWith({
       value: "Cha",
-      error: "Min length 5, max length 10.",
+      error: "The minimum length is 5.",
     });
     fireEvent.blur(input);
     expect(onBlur).toHaveBeenCalledWith({
       value: "Chad",
-      error: "Min length 5, max length 10.",
+      error: "The minimum length is 5.",
+    });
+
+    userEvent.clear(input);
+    fireEvent.focus(input);
+    fireEvent.change(input, { target: { value: "Democratic Rep" } });
+    expect(getByText("Democratic Rep")).toBeTruthy();
+    act(() => {
+      userEvent.click(getByRole("option"));
+    });
+    expect(onChange).toHaveBeenCalledWith({
+      value: "Democratic Rep",
+      error: "The maximum length is 10.",
+    });
+    fireEvent.blur(input);
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "Democratic Republic of the Congo",
+      error: "The maximum length is 10.",
     });
   });
 
@@ -1156,4 +1185,52 @@ describe("TextInput component asynchronous autosuggest tests", () => {
     await waitForElementToBeRemoved(() => getByText("Searching..."));
     expect(getByText("Error fetching data")).toBeTruthy();
   });
+
+  test("Maximum and minimum error messages change within HalstackProvider", () => {
+    const onChange = jest.fn();
+    const onBlur = jest.fn();
+    const { getByRole } = render(
+      <HalstackProvider
+        labels={{
+          formFields: {
+            maxLengthErrorMessage: (maxLength: number) => `Please do not enter more than ${maxLength} characters.`,
+            minLengthErrorMessage: (minLegth: number) => `Please do not enter less than ${minLegth} characters.`,
+          },
+        }}
+      >
+        <DxcTextInput
+          label="Input label"
+          placeholder="Placeholder"
+          onChange={onChange}
+          onBlur={onBlur}
+          margin={{ left: "medium", right: "medium" }}
+          clearable
+          minLength={5}
+          maxLength={10}
+        />
+      </HalstackProvider>
+    );
+    const input = getByRole("textbox");
+    fireEvent.change(input, { target: { value: "test" } });
+    expect(onChange).toHaveBeenCalledWith({
+      value: "test",
+      error: "Please do not enter less than 5 characters.",
+    });
+    fireEvent.blur(input);
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "test",
+      error: "Please do not enter less than 5 characters.",
+    });
+
+    fireEvent.change(input, { target: { value: "test-maximum-length" } });
+    expect(onChange).toHaveBeenCalledWith({
+      value: "test-maximum-length",
+      error: "Please do not enter more than 10 characters.",
+    });
+    fireEvent.blur(input);
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "test-maximum-length",
+      error: "Please do not enter more than 10 characters.",
+    });
+  });
 });

packages/lib/src/text-input/TextInput.tsx

@@ -25,7 +25,6 @@ import TextInputPropsType, { AutosuggestWrapperProps, RefType } from "./types";
 import {
   calculateWidth,
   hasSuggestions,
-  isLengthIncorrect,
   isNumberIncorrect,
   isRequired,
   makeCancelable,
@@ -160,6 +159,16 @@ const DxcTextInput = forwardRef<RefType, TextInputPropsType>(
       setPortalContainer(document?.getElementById(`${inputId}-portal`));
     }, []);
 
+    const getLengthErrorMessage = (value: string) => {
+      if (minLength != null && value.length < minLength) {
+        return translatedLabels.formFields.minLengthErrorMessage(minLength);
+      }
+      if (maxLength != null && value.length > maxLength) {
+        return translatedLabels.formFields.maxLengthErrorMessage(maxLength);
+      }
+      return undefined;
+    };
+
     const autosuggestWrapperFunction = (children: ReactNode) => (
       <Popover.Root open={isOpen && (filteredSuggestions.length > 0 || isSearching || isAutosuggestError)}>
         <Popover.Trigger
@@ -232,15 +241,17 @@ const DxcTextInput = forwardRef<RefType, TextInputPropsType>(
         setInnerValue(formattedValue);
       }
 
+      const lengthError = getLengthErrorMessage(formattedValue);
+
       if (isRequired(formattedValue, optional)) {
         onChange?.({
           value: formattedValue,
           error: translatedLabels.formFields.requiredValueErrorMessage,
         });
-      } else if (isLengthIncorrect(formattedValue, minLength, maxLength)) {
+      } else if (lengthError) {
         onChange?.({
           value: formattedValue,
-          error: translatedLabels.formFields.lengthErrorMessage?.(minLength, maxLength),
+          error: lengthError,
         });
       } else if (patternMismatch(pattern, formattedValue)) {
         onChange?.({ value: formattedValue, error: translatedLabels.formFields.formatRequestedErrorMessage });
@@ -331,12 +342,14 @@ const DxcTextInput = forwardRef<RefType, TextInputPropsType>(
     const handleInputOnBlur = (event: FocusEvent<HTMLInputElement>) => {
       closeSuggestions();
 
+      const lengthError = getLengthErrorMessage(event.target.value);
+
       if (isRequired(event.target.value, optional)) {
         onBlur?.({ value: event.target.value, error: translatedLabels.formFields.requiredValueErrorMessage });
-      } else if (isLengthIncorrect(event.target.value, minLength, maxLength)) {
+      } else if (lengthError) {
         onBlur?.({
           value: event.target.value,
-          error: translatedLabels.formFields.lengthErrorMessage?.(minLength, maxLength),
+          error: lengthError,
         });
       } else if (patternMismatch(pattern, event.target.value)) {
         onBlur?.({ value: event.target.value, error: translatedLabels.formFields.formatRequestedErrorMessage });

packages/lib/src/text-input/utils.ts

@@ -48,13 +48,6 @@ export const hasSuggestions = (suggestions: TextInputPropsType["suggestions"]) =
 
 export const isRequired = (value: string, optional: boolean) => value === "" && !optional;
 
-export const isLengthIncorrect = (
-  value: string,
-  minLength: TextInputPropsType["minLength"],
-  maxLength: TextInputPropsType["maxLength"]
-) =>
-  value != null && ((minLength != null && value.length < minLength) || (maxLength != null && value.length > maxLength));
-
 export const isNumberIncorrect = (
   value: number,
   minNumber: TextInputPropsType["minLength"],

packages/lib/src/textarea/Textarea.test.tsx

@@ -196,13 +196,26 @@ describe("Textarea component tests", () => {
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith({
       value: "test",
-      error: "Min length 5, max length 10.",
+      error: "The minimum length is 5.",
     });
     fireEvent.blur(textarea);
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "test",
-      error: "Min length 5, max length 10.",
+      error: "The minimum length is 5.",
+    });
+    userEvent.clear(textarea);
+    fireEvent.change(textarea, { target: { value: "this is a longer value" } });
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith({
+      value: "this is a longer value",
+      error: "The maximum length is 10.",
+    });
+    fireEvent.blur(textarea);
+    expect(onBlur).toHaveBeenCalled();
+    expect(onBlur).toHaveBeenCalledWith({
+      value: "this is a longer value",
+      error: "The maximum length is 10.",
     });
     userEvent.clear(textarea);
     fireEvent.change(textarea, { target: { value: "length" } });
@@ -233,13 +246,13 @@ describe("Textarea component tests", () => {
     expect(onChange).toHaveBeenCalled();
     expect(onChange).toHaveBeenCalledWith({
       value: "test",
-      error: "Min length 5, max length 10.",
+      error: "The minimum length is 5.",
     });
     fireEvent.blur(textarea);
     expect(onBlur).toHaveBeenCalled();
     expect(onBlur).toHaveBeenCalledWith({
       value: "test",
-      error: "Min length 5, max length 10.",
+      error: "The minimum length is 5.",
     });
     fireEvent.change(textarea, { target: { value: "tests" } });
     expect(onChange).toHaveBeenCalled();

packages/lib/src/textarea/Textarea.tsx

@@ -99,21 +99,30 @@ const DxcTextarea = forwardRef<RefType, TextareaPropsType>(
     const textareaRef = useRef<HTMLTextAreaElement | null>(null);
     const prevValueRef = useRef<string | null>(null);
 
-    const isLengthOutOfRange = (value: string) =>
-      value !== "" && minLength && maxLength && (value.length < minLength || value.length > maxLength);
+    const getLengthErrorMessage = (value: string) => {
+      if (minLength != null && value.length < minLength) {
+        return translatedLabels.formFields.minLengthErrorMessage?.(minLength);
+      }
+      if (maxLength != null && value.length > maxLength) {
+        return translatedLabels.formFields.maxLengthErrorMessage?.(maxLength);
+      }
+      return undefined;
+    };
 
     const changeValue = (newValue: string) => {
       if (value == null) setInnerValue(newValue);
 
+      const lengthError = getLengthErrorMessage(newValue);
+
       if (newValue === "" && !optional) {
         onChange?.({
           value: newValue,
           error: translatedLabels.formFields.requiredValueErrorMessage,
         });
-      } else if (isLengthOutOfRange(newValue)) {
+      } else if (lengthError) {
         onChange?.({
           value: newValue,
-          error: translatedLabels.formFields.lengthErrorMessage?.(minLength, maxLength),
+          error: lengthError,
         });
       } else if (newValue && pattern && !patternMatch(pattern, newValue)) {
         onChange?.({
@@ -124,15 +133,17 @@ const DxcTextarea = forwardRef<RefType, TextareaPropsType>(
     };
 
     const handleOnBlur = (event: FocusEvent<HTMLTextAreaElement>) => {
+      const lengthError = getLengthErrorMessage(event.target.value);
+
       if (event.target.value === "" && !optional) {
         onBlur?.({
           value: event.target.value,
           error: translatedLabels.formFields.requiredValueErrorMessage,
         });
-      } else if (isLengthOutOfRange(event.target.value)) {
+      } else if (lengthError) {
         onBlur?.({
           value: event.target.value,
-          error: translatedLabels.formFields.lengthErrorMessage?.(minLength, maxLength),
+          error: lengthError,
         });
       } else if (event.target.value && pattern && !patternMatch(pattern, event.target.value)) {
         onBlur?.({