fix(text-input): add class for inline validation (#12231)

* fix(text-input): add class for inline validation

* chore(text-input): rename invalid classname

* chore(text-input): update classname for inline invalid

* Update TextInput.stories.js

Author: aledavila

packages/react/src/components/TextInput/TextInput.js

@@ -114,6 +114,8 @@ const TextInput = React.forwardRef(function TextInput(
       [`${prefix}--text-input-wrapper--readonly`]: readOnly,
       [`${prefix}--text-input-wrapper--light`]: light,
       [`${prefix}--text-input-wrapper--inline`]: inline,
+      [`${prefix}--text-input-wrapper--inline--invalid`]:
+        inline && normalizedProps.invalid,
     }
   );
   const labelClasses = classNames(`${prefix}--label`, {
@@ -195,7 +197,7 @@ const TextInput = React.forwardRef(function TextInput(
       ) : (
         <div className={`${prefix}--text-input__label-helper-wrapper`}>
           {labelWrapper}
-          {!isFluid && helper}
+          {!isFluid && (normalizedProps.validation || helper)}
         </div>
       )}
       <div className={fieldOuterWrapperClasses}>

packages/react/src/components/TextInput/TextInput.stories.js

@@ -132,7 +132,7 @@ Playground.argTypes = {
     control: {
       type: 'text',
     },
-    defaultValue: 'Invalid text',
+    defaultValue: 'Error message goes here',
   },
   disabled: {
     control: {

packages/styles/scss/components/text-input/_text-input.scss

@@ -392,6 +392,17 @@
     flex-direction: column;
   }
 
+  .#{$prefix}--text-input-wrapper--inline .cds--form-requirement {
+    display: block;
+    overflow: visible;
+    max-height: rem(200px);
+    font-weight: 400;
+  }
+
+  .#{$prefix}--text-input-wrapper--inline--invalid .cds--form-requirement {
+    color: $text-error;
+  }
+
   //-----------------------------
   // Readonly
   //-----------------------------