feat(text-input): add readonly variant (#8806)

* feat(text-input): add readonly variant * fix(text-input): correct padding-right when in readonly mode * Update packages/react/src/components/TextInput/TextInput.js Co-authored-by: Scott Strubberg <sstrubberg@protonmail.com> * fix: update public api snapshot * docs(use-normalized-props): add guidance to useNormalizedProps hook * feat(text-input): ensure readonly takes precedence over disabled Co-authored-by: Scott Strubberg <sstrubberg@protonmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Jun 17, 2021 · 8f6ba79 · 8f6ba79
1 parent 8813252
commit 8f6ba79
Show file tree

Hide file tree

Showing 8 changed files with 223 additions and 106 deletions.
diff --git a/packages/components/src/components/text-input/_text-input.scss b/packages/components/src/components/text-input/_text-input.scss
@@ -85,15 +85,19 @@
     width: 100%;
   }
 
-  .#{$prefix}--text-input__invalid-icon {
+  .#{$prefix}--text-input__invalid-icon,
+  .#{$prefix}--text-input__readonly-icon {
     position: absolute;
     // top/transform used to center invalid icon in IE11
     top: 50%;
     right: $carbon--spacing-05;
-    fill: $support-error;
     transform: translateY(-50%);
   }
 
+  .#{$prefix}--text-input__invalid-icon {
+    fill: $support-error;
+  }
+
   .#{$prefix}--text-input__invalid-icon--warning {
     fill: $support-warning;
   }
@@ -164,7 +168,8 @@
   }
 
   .#{$prefix}--text-input--invalid,
-  .#{$prefix}--text-input--warning {
+  .#{$prefix}--text-input--warning,
+  .#{$prefix}--text-input-wrapper--readonly .#{$prefix}--text-input {
     padding-right: $carbon--spacing-08;
   }
 
@@ -370,6 +375,15 @@
     flex-direction: column;
   }
 
+  //-----------------------------
+  // Readonly
+  //-----------------------------
+
+  .#{$prefix}--form--fluid .#{$prefix}--text-input-wrapper--readonly,
+  .#{$prefix}--text-input-wrapper--readonly .#{$prefix}--text-input {
+    background: transparent;
+  }
+
   // Windows HCM fix
   .#{$prefix}--text-input--password__visibility,
     // TODO: remove selector above

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -5625,6 +5625,9 @@ Map {
       "placeholder": Object {
         "type": "string",
       },
+      "readonly": Object {
+        "type": "bool",
+      },
       "size": Object {
         "args": Array [
           Array [

diff --git a/packages/react/src/components/TextInput/ControlledPasswordInput.js b/packages/react/src/components/TextInput/ControlledPasswordInput.js
@@ -111,7 +111,11 @@ const ControlledPasswordInput = React.forwardRef(
     const input = (
       <>
         <input
-          {...textInputProps({ invalid, sharedTextInputProps, errorId })}
+          {...textInputProps({
+            invalid,
+            sharedTextInputProps,
+            invalidId: errorId,
+          })}
           data-toggle-password-visibility={type === 'password'}
         />
         <button

diff --git a/packages/react/src/components/TextInput/PasswordInput.js b/packages/react/src/components/TextInput/PasswordInput.js
@@ -2,12 +2,8 @@ import React, { useContext, useEffect, useState } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { settings } from 'carbon-components';
-import {
-  View16,
-  ViewOff16,
-  WarningAltFilled16,
-  WarningFilled16,
-} from '@carbon/icons-react';
+import { View16, ViewOff16 } from '@carbon/icons-react';
+import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps';
 import { textInputProps } from './util';
 import { FormContext } from '../FluidForm';
 
@@ -42,19 +38,27 @@ const PasswordInput = React.forwardRef(function PasswordInput(
   ref
 ) {
   const [inputType, setInputType] = useState(type);
+
+  const normalizedProps = useNormalizedInputProps({
+    id,
+    invalid,
+    invalidText,
+    warn,
+    warnText,
+  });
+
   const handleTogglePasswordVisibility = (event) => {
     setInputType(inputType === 'password' ? 'text' : 'password');
     onTogglePasswordVisibility && onTogglePasswordVisibility(event);
   };
-  const errorId = id + '-error-msg';
-  const warnId = id + '-warn-msg';
   const textInputClasses = classNames(
     `${prefix}--text-input`,
     `${prefix}--password-input`,
     className,
     {
       [`${prefix}--text-input--light`]: light,
-      [`${prefix}--text-input--invalid`]: invalid,
+      [`${prefix}--text-input--invalid`]: normalizedProps.invalid,
+      [`${prefix}--text-input--warning`]: normalizedProps.warn,
       [`${prefix}--text-input--${size}`]: size,
     }
   );
@@ -104,29 +108,23 @@ const PasswordInput = React.forwardRef(function PasswordInput(
   const fieldWrapperClasses = classNames(
     `${prefix}--text-input__field-wrapper`,
     {
-      [`${prefix}--text-input__field-wrapper--warning`]: !invalid && warn,
+      [`${prefix}--text-input__field-wrapper--warning`]: normalizedProps.warn,
     }
   );
+  const iconClasses = classNames({
+    [`${prefix}--text-input__invalid-icon`]:
+      normalizedProps.invalid || normalizedProps.warn,
+    [`${prefix}--text-input__invalid-icon--warning`]: normalizedProps.warn,
+  });
+
   const label = labelText ? (
     <label htmlFor={id} className={labelClasses}>
       {labelText}
     </label>
   ) : null;
-
-  let error = null;
-  if (invalid) {
-    error = (
-      <div className={`${prefix}--form-requirement`} id={errorId}>
-        {invalidText}
-      </div>
-    );
-  } else if (warn) {
-    error = (
-      <div className={`${prefix}--form-requirement`} id={warnId}>
-        {warnText}
-      </div>
-    );
-  }
+  const helper = helperText ? (
+    <div className={helperTextClasses}>{helperText}</div>
+  ) : null;
 
   const passwordIsVisible = inputType === 'text';
   const passwordVisibilityIcon = passwordIsVisible ? (
@@ -150,11 +148,11 @@ const PasswordInput = React.forwardRef(function PasswordInput(
     <>
       <input
         {...textInputProps({
-          invalid,
           sharedTextInputProps,
-          errorId,
-          warn,
-          warnId,
+          invalid: normalizedProps.invalid,
+          invalidId: normalizedProps.invalidId,
+          warn: normalizedProps.warn,
+          warnId: normalizedProps.warnId,
         })}
         disabled={disabled}
         data-toggle-password-visibility={inputType === 'password'}
@@ -173,9 +171,6 @@ const PasswordInput = React.forwardRef(function PasswordInput(
       </button>
     </>
   );
-  const helper = helperText ? (
-    <div className={helperTextClasses}>{helperText}</div>
-  ) : null;
 
   const { isFluid } = useContext(FormContext);
 
@@ -194,22 +189,16 @@ const PasswordInput = React.forwardRef(function PasswordInput(
         </div>
       )}
       <div className={fieldOuterWrapperClasses}>
-        <div className={fieldWrapperClasses} data-invalid={invalid || null}>
-          {invalid && (
-            <WarningFilled16
-              className={`${prefix}--text-input__invalid-icon`}
-            />
-          )}
-          {!invalid && warn && (
-            <WarningAltFilled16
-              className={`${prefix}--text-input__invalid-icon ${prefix}--text-input__invalid-icon--warning`}
-            />
+        <div
+          className={fieldWrapperClasses}
+          data-invalid={normalizedProps.invalid || null}>
+          {normalizedProps.icon && (
+            <normalizedProps.icon className={iconClasses} />
           )}
           {input}
-          {isFluid && !inline && error}
+          {isFluid && !inline && normalizedProps.validation}
         </div>
-        {!isFluid && error}
-        {!invalid && !warn && !isFluid && !inline && helper}
+        {!isFluid && !inline && (normalizedProps.validation || helper)}
       </div>
     </div>
   );

diff --git a/packages/react/src/components/TextInput/TextInput-story.js b/packages/react/src/components/TextInput/TextInput-story.js
@@ -52,7 +52,7 @@ const ControlledPasswordInputApp = React.forwardRef(
 );
 
 const props = {
-  TextInputProps: () => ({
+  SharedInputProps: () => ({
     className: 'some-class',
     id: 'test2',
     defaultValue: text(
@@ -80,6 +80,9 @@ const props = {
     onClick: action('onClick'),
     onChange: action('onChange'),
   }),
+  TextInputProps: () => ({
+    readonly: boolean('Readonly variant (readonly)', false),
+  }),
   PasswordInputProps: () => ({
     tooltipPosition: select(
       'Tooltip position (tooltipPosition)',
@@ -123,6 +126,7 @@ export default {
 export const Default = () => (
   <TextInput
     type={select('Form control type (type)', types, 'text')}
+    {...props.SharedInputProps()}
     {...props.TextInputProps()}
   />
 );
@@ -142,6 +146,7 @@ export const Fluid = () => (
   <FluidForm>
     <TextInput
       type={select('Form control type (type)', types, 'text')}
+      {...props.SharedInputProps()}
       {...props.TextInputProps()}
     />
   </FluidForm>
@@ -161,7 +166,7 @@ Fluid.parameters = {
 export const TogglePasswordVisibility = () => {
   return (
     <TextInput.PasswordInput
-      {...props.TextInputProps()}
+      {...props.SharedInputProps()}
       {...props.PasswordInputProps()}
     />
   );
@@ -187,7 +192,7 @@ export const FullyControlledTogglePasswordVisibility = () => {
 
   return (
     <ControlledPasswordInputApp
-      {...props.TextInputProps()}
+      {...props.SharedInputProps()}
       {...props.PasswordInputProps()}
     />
   );