Merge pull request #743 from lumapps/fix/CMS-2064

fix(textfield): show maxlength counter  when there is no label

Author: gcornut

CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Fixed
+
+-   Textfield: show the maxlength counter on textfields with no label
+
 ## [2.1.6][] - 2021-12-03
 
 ### Fixed

packages/lumx-core/src/scss/components/text-field/_index.scss

@@ -39,7 +39,7 @@
         display: flex;
         flex-shrink: 0;
         align-items: center;
-        margin-left: $lumx-spacing-unit;
+        margin-left: auto;
 
         span {
             font-size: var(--lumx-material-text-field-header-label-font-size);

packages/lumx-react/src/components/text-field/TextField.stories.tsx

@@ -137,3 +137,33 @@ export const WithAfterElement = ({ theme }: any) => {
         />
     );
 };
+
+export const WithMaxLengthNoLabel = ({ theme }: any) => {
+    const [value, onChange] = React.useState('Value');
+    const multiline = boolean('Multiline', true);
+    const minimumRows = number('Minimum number of rows', 2, { min: 0, max: 100 });
+    const isClearable = boolean('Clearable', true);
+    const hasError = boolean('Has error', true);
+    return (
+        <TextField
+            value={value}
+            placeholder={text('Placeholder', 'Placeholder')}
+            theme={theme}
+            onChange={onChange}
+            multiline={multiline}
+            minimumRows={minimumRows}
+            hasError={hasError}
+            maxLength={200}
+            clearButtonProps={isClearable ? { label: 'Clear' } : undefined}
+            helper={<span>{text('Helper', 'Helper')}</span>}
+            afterElement={
+                <IconButton
+                    label="foo"
+                    emphasis={emphasis('Button emphasis', Emphasis.medium, 'After element')}
+                    size={buttonSize('Button size', Size.s, 'After element')}
+                    icon={mdiTranslate}
+                />
+            }
+        />
+    );
+};

packages/lumx-react/src/components/text-field/TextField.tsx

@@ -307,16 +307,18 @@ export const TextField: Comp<TextFieldProps, HTMLDivElement> = forwardRef((props
                 }),
             )}
         >
-            {label && (
+            {(label || maxLength) && (
                 <div className={`${CLASSNAME}__header`}>
-                    <InputLabel
-                        htmlFor={textFieldId}
-                        className={`${CLASSNAME}__label`}
-                        isRequired={isRequired}
-                        theme={theme}
-                    >
-                        {label}
-                    </InputLabel>
+                    {label && (
+                        <InputLabel
+                            htmlFor={textFieldId}
+                            className={`${CLASSNAME}__label`}
+                            isRequired={isRequired}
+                            theme={theme}
+                        >
+                            {label}
+                        </InputLabel>
+                    )}
 
                     {maxLength && (
                         <div className={`${CLASSNAME}__char-counter`}>