fix(TextField): avoid right helper text from wrapping, fix spacing and aria label for maxCount text when multiline is true

src/__screenshot_tests__/input-fields-screenshot-test.tsx

@@ -65,6 +65,24 @@ test('TextField - multiline and maxLength', async () => {
     expect(image).toMatchImageSnapshot();
 });
 
+test('TextField - multiline and maxLength with long helperText', async () => {
+    await openStoryPage({
+        id: 'components-input-fields-textfield--uncontrolled',
+        device: 'MOBILE_IOS',
+        args: {
+            defaultValue: '',
+            maxLength: true,
+            multiline: true,
+            helperText: 'This is a very long helper text to test that the maxLength text is not wrapping',
+        },
+    });
+
+    const fieldWrapper = await screen.findByTestId('text-field');
+    const image = await fieldWrapper.screenshot();
+
+    expect(image).toMatchImageSnapshot();
+});
+
 test('TextField - long label', async () => {
     await openStoryPage({
         id: 'components-input-fields-textfield--uncontrolled',

src/text-field-components.css.ts

@@ -126,6 +126,8 @@ export const leftHelperText = style([
     },
 ]);
 
+export const rightHelperText = sprinkles({paddingLeft: 16});
+
 export const helperText = sprinkles({
     flexGrow: 1,
     paddingTop: 4,

src/text-field-components.tsx

@@ -106,8 +106,8 @@ export const HelperText = ({leftText, rightText, error, id}: HelperTextProps): J
                 </p>
             )}
             {rightText && (
-                <div className={classnames(styles.helperText)}>
-                    <Text1 color={rightColor} regular as="p" textAlign="right">
+                <div className={classnames(styles.helperText, {[styles.rightHelperText]: !!leftText})}>
+                    <Text1 color={rightColor} regular as="p" textAlign="right" wordBreak={false}>
                         {rightText}
                     </Text1>
                 </div>