From 59203989b014eb827832cbed802ddd628bd02cfc Mon Sep 17 00:00:00 2001
From: KD <whomst@kevind.xyz>
Date: Tue, 23 Jan 2024 13:33:35 +0100
Subject: [PATCH 1/3] chore: remove brackets from maxlength tip, only show tip
 if no alert

---
 .../inputContainer/inputContainer.test.tsx    | 20 +++++++++++++++++--
 .../input/inputContainer/inputContainer.tsx   |  4 ++--
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/src/components/input/inputContainer/inputContainer.test.tsx b/src/components/input/inputContainer/inputContainer.test.tsx
index da9022db6..66b1fedd0 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}`)).toBeNull();
+    });
 });
diff --git a/src/components/input/inputContainer/inputContainer.tsx b/src/components/input/inputContainer/inputContainer.tsx
index 8b02344ca..da7e806d3 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} />}

From f30adcfea6e25a110a8c6ed880b749e8b01cf810 Mon Sep 17 00:00:00 2001
From: KD <whomst@kevind.xyz>
Date: Tue, 23 Jan 2024 13:53:03 +0100
Subject: [PATCH 2/3] chore: add notes to changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index bd8f72430..264813aa7 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
 

From 8c0e8dd36e137a6ce21e03cd55837b72e11fdebb Mon Sep 17 00:00:00 2001
From: KD <whomst@kevind.xyz>
Date: Tue, 23 Jan 2024 15:32:10 +0100
Subject: [PATCH 3/3] test: refine tests based on PR suggestions

---
 src/components/input/inputContainer/inputContainer.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/input/inputContainer/inputContainer.test.tsx b/src/components/input/inputContainer/inputContainer.test.tsx
index 66b1fedd0..461a4e0f4 100644
--- a/src/components/input/inputContainer/inputContainer.test.tsx
+++ b/src/components/input/inputContainer/inputContainer.test.tsx
@@ -73,6 +73,6 @@ describe('<InputContainer /> component', () => {
         expect(screen.getByRole('alert')).toBeInTheDocument();
         expect(screen.getByText(alert.message)).toBeInTheDocument();
 
-        expect(screen.queryByText(`${inputLength}/${maxLength}`)).toBeNull();
+        expect(screen.queryByText(`${inputLength}/${maxLength}`)).not.toBeInTheDocument();
     });
 });