From bb49d33b016200dbf6fb7222aedecbd00a5b4db2 Mon Sep 17 00:00:00 2001
From: Kevin Davis <65736142+thekidnamedkd@users.noreply.github.com>
Date: Tue, 23 Jan 2024 15:43:36 +0100
Subject: [PATCH] fix: APP-2817 - Remove brackets from maxlength tip, only show
 tip if no alert (#65)

---
 CHANGELOG.md                                  |  1 +
 .../inputContainer/inputContainer.test.tsx    | 20 +++++++++++++++++--
 .../input/inputContainer/inputContainer.tsx   |  4 ++--
 3 files changed, 21 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b2c047d5..f8e18f47 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 -   Minimum `tailwindcss` version required
 -   Fix disabled input style on Firefox
+-   Max Length on inputs is restyle, only shows if no alert
 
 ### Added
 
diff --git a/src/components/input/inputContainer/inputContainer.test.tsx b/src/components/input/inputContainer/inputContainer.test.tsx
index da9022db..461a4e0f 100644
--- a/src/components/input/inputContainer/inputContainer.test.tsx
+++ b/src/components/input/inputContainer/inputContainer.test.tsx
@@ -40,14 +40,14 @@ describe('<InputContainer /> component', () => {
         const maxLength = 100;
         const inputLength = 47;
         render(createTestComponent({ maxLength, inputLength }));
-        expect(screen.getByText(`[${inputLength}/${maxLength}]`)).toBeInTheDocument();
+        expect(screen.getByText(`${inputLength}/${maxLength}`)).toBeInTheDocument();
     });
 
     it('adds a shake animation when the input length is equal to the max length property', () => {
         const maxLength = 10;
         const inputLength = 10;
         render(createTestComponent({ maxLength, inputLength }));
-        expect(screen.getByText(`[${inputLength}/${maxLength}]`).className).toContain('shake');
+        expect(screen.getByText(`${inputLength}/${maxLength}`).className).toContain('shake');
     });
 
     it('renders the input alert when defined', () => {
@@ -59,4 +59,20 @@ describe('<InputContainer /> component', () => {
         expect(screen.getByRole('alert')).toBeInTheDocument();
         expect(screen.getByText(alert.message)).toBeInTheDocument();
     });
+
+    it('renders the input alert when both alert and maxLength properties are set, and only displays the Alert', () => {
+        const alert = {
+            message: 'input-alert-message',
+            variant: 'critical' as const,
+        };
+        const maxLength = 100;
+        const inputLength = 47;
+
+        render(createTestComponent({ alert, maxLength, inputLength }));
+
+        expect(screen.getByRole('alert')).toBeInTheDocument();
+        expect(screen.getByText(alert.message)).toBeInTheDocument();
+
+        expect(screen.queryByText(`${inputLength}/${maxLength}`)).not.toBeInTheDocument();
+    });
 });
diff --git a/src/components/input/inputContainer/inputContainer.tsx b/src/components/input/inputContainer/inputContainer.tsx
index 8b02344c..da7e806d 100644
--- a/src/components/input/inputContainer/inputContainer.tsx
+++ b/src/components/input/inputContainer/inputContainer.tsx
@@ -75,9 +75,9 @@ export const InputContainer: React.FC<IInputContainerProps> = (props) => {
                 </label>
             )}
             <div className={containerClasses}>{children}</div>
-            {maxLength != null && (
+            {maxLength != null && !alert && (
                 <p className={counterClasses}>
-                    [{inputLength}/{maxLength}]
+                    {inputLength}/{maxLength}
                 </p>
             )}
             {alert && <AlertInline variant={alert.variant} message={alert.message} />}