fix(helper-text): update PR after downshift updates

carbon-design-system · May 12, 2020 · 4346f81 · 4346f81
1 parent 404a9bf
commit 4346f81
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 12 deletions.
diff --git a/packages/react/src/components/ComboBox/ComboBox.js b/packages/react/src/components/ComboBox/ComboBox.js
@@ -338,11 +338,6 @@ export default class ComboBox extends React.Component {
                 {titleText}
               </label>
             )}
-            {helperText && (
-              <div id={comboBoxHelperId} className={helperClasses}>
-                {helperText}
-              </div>
-            )}
             <ListBox
               className={className}
               disabled={disabled}
@@ -431,6 +426,11 @@ export default class ComboBox extends React.Component {
                 </ListBox.Menu>
               )}
             </ListBox>
+            {helperText && !invalid && (
+              <div id={comboBoxHelperId} className={helperClasses}>
+                {helperText}
+              </div>
+            )}
           </div>
         )}
       </Downshift>

diff --git a/packages/react/src/components/Dropdown/Dropdown.js b/packages/react/src/components/Dropdown/Dropdown.js
@@ -118,7 +118,6 @@ function Dropdown({
           {titleText}
         </label>
       )}
-      {!inline && helper}
       <ListBox
         aria-label={ariaLabel}
         size={size}
@@ -169,6 +168,7 @@ function Dropdown({
             })}
         </ListBox.Menu>
       </ListBox>
+      {!inline && !invalid && helper}
     </div>
   );
 }

diff --git a/packages/react/src/components/MultiSelect/MultiSelect.js b/packages/react/src/components/MultiSelect/MultiSelect.js
@@ -176,11 +176,6 @@ function MultiSelect({
           {titleText}
         </label>
       )}
-      {!inline && helperText && (
-        <div id={helperId} className={helperClasses}>
-          {helperText}
-        </div>
-      )}
       <ListBox
         id={id}
         type={type}
@@ -245,6 +240,11 @@ function MultiSelect({
             })}
         </ListBox.Menu>
       </ListBox>
+      {!inline && !invalid && helperText && (
+        <div id={helperId} className={helperClasses}>
+          {helperText}
+        </div>
+      )}
     </div>
   );
 }

diff --git a/packages/react/src/components/TextInput/TextInput.js b/packages/react/src/components/TextInput/TextInput.js
@@ -96,7 +96,6 @@ const TextInput = React.forwardRef(function TextInput(
   return (
     <div className={inputWrapperClasses}>
       {label}
-      {helper}
       <div
         className={`${prefix}--text-input__field-wrapper`}
         data-invalid={invalid || null}>
@@ -109,6 +108,7 @@ const TextInput = React.forwardRef(function TextInput(
         {isFluid ? error : null}
       </div>
       {isFluid ? null : error}
+      {!invalid && !isFluid && helper}
     </div>
   );
 });