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
carbon-design-system · Oct 21, 2022 · 5e676fd · 5e676fd
1 parent d30eb9c
commit 5e676fd
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 2 deletions.
diff --git a/packages/react/src/components/TextInput/TextInput.js b/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}>

diff --git a/packages/react/src/components/TextInput/TextInput.stories.js b/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: {

diff --git a/packages/styles/scss/components/text-input/_text-input.scss b/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
   //-----------------------------