fix: APP-2817 - Remove brackets from maxlength tip, only show tip if …

…no alert (#65)

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
 

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();
+    });
 });

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} />}