fix: reduce helper text and char counter gap

carbon-design-system · May 20, 2019 · 1dbc2c2 · 1dbc2c2
1 parent 0682c12
commit 1dbc2c2
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 9 deletions.
diff --git a/packages/react/src/components/TextArea/TextArea.js b/packages/react/src/components/TextArea/TextArea.js
@@ -76,9 +76,9 @@ const TextArea = ({
         {labelText}
       </label>
     ) : null;
-    if (charCount) {
+    if (labelContent && charCount) {
       return (
-        <div className={`${prefix}--text-input__character-counter-title`}>
+        <div className={`${prefix}--text-area__character-counter-title`}>
           {labelContent}
           <CharCounter
             disabled={other.disabled}
@@ -95,9 +95,25 @@ const TextArea = ({
     [`${prefix}--form__helper-text--disabled`]: other.disabled,
   });
 
-  const helper = helperText ? (
-    <div className={helperTextClasses}>{helperText}</div>
-  ) : null;
+  const helper = (() => {
+    const helperContent = helperText ? (
+      <div className={helperTextClasses}>{helperText}</div>
+    ) : null;
+    if (!labelText && charCount) {
+      return (
+        <div className={`${prefix}--text-area__character-counter-title`}>
+          {helperContent}
+          <CharCounter
+            disabled={other.disabled}
+            count={textareaVal.length}
+            maxLength={maxLength}
+          />
+        </div>
+      );
+    }
+
+    return helperContent;
+  })();
 
   const errorId = id + '-error-msg';
 

diff --git a/packages/react/src/components/TextInput/TextInput.js b/packages/react/src/components/TextInput/TextInput.js
@@ -93,7 +93,7 @@ const TextInput = React.forwardRef(function TextInput(
         {labelText}
       </label>
     );
-    if (charCount) {
+    if (labelContent && charCount) {
       return (
         <div className={`${prefix}--text-input__character-counter-title`}>
           {labelContent}
@@ -119,9 +119,25 @@ const TextInput = React.forwardRef(function TextInput(
       onInput={e => setInput(e.target.value)}
     />
   );
-  const helper = helperText ? (
-    <div className={helperTextClasses}>{helperText}</div>
-  ) : null;
+  const helper = (() => {
+    const helperContent = helperText ? (
+      <div className={helperTextClasses}>{helperText}</div>
+    ) : null;
+    if (!labelText && charCount) {
+      return (
+        <div className={`${prefix}--text-input__character-counter-title`}>
+          {helperContent}
+          <CharCounter
+            disabled={other.disabled}
+            count={inputVal.length}
+            maxLength={maxLength}
+          />
+        </div>
+      );
+    }
+
+    return helperContent;
+  })();
 
   return (
     <div className={`${prefix}--form-item ${prefix}--text-input-wrapper`}>