[terra-form-input][terra-form-textarea] Remove prop placeholder (#3075)

* removed placeholder prop from input

* removed placeholder prop from textarea

* Removed/Updated tests and examples

* Updated search field due to changes in form-input

* minor changes

* minor changes

* updated documentation

* minor changes

* comments

* reverted changes made to search-field

Co-authored-by: Matt Henkes <[email protected]>

Author: pranav300

packages/terra-form-input/CHANGELOG.md

@@ -3,6 +3,15 @@ ChangeLog
 
 Unreleased
 ----------
+### Breaking Changes
+* Removed `placeholder` prop.
+
+### Changed
+* Updated tests and examples to not use `placeholder` prop
+
+### Removed
+* Removed theme variables - see UPGRADEGUIDE.md
+* Removed tests and examples specifically for `placeholder` prop
 
 3.7.0 - (July 7, 2020)
 ------------------

packages/terra-form-input/src/Input.jsx

@@ -50,10 +50,6 @@ const propTypes = {
    * NOTE: The pattern attribute works with the following input types: text, date, search, url, tel, email, and password.
    */
   pattern: PropTypes.string,
-  /**
-   * Placeholder text.
-   */
-  placeholder: PropTypes.string,
   /**
    * Callback ref to pass into the input dom element.
    */
@@ -90,7 +86,6 @@ const defaultProps = {
   onFocus: undefined,
   name: null,
   pattern: undefined,
-  placeholder: undefined,
   required: false,
   refCallback: undefined,
   type: undefined,
@@ -109,7 +104,6 @@ class Input extends React.Component {
       onFocus,
       name,
       pattern,
-      placeholder,
       refCallback,
       required,
       type,
@@ -154,6 +148,10 @@ class Input extends React.Component {
       attributes.defaultValue = defaultValue;
     }
 
+    if (attributes.placeholder) {
+      attributes.placeholder = null;
+    }
+
     return (
       <input
         {...attributes}
@@ -163,7 +161,6 @@ class Input extends React.Component {
         name={name}
         type={type}
         pattern={pattern}
-        placeholder={placeholder}
         onBlur={onBlur}
         onChange={onChange}
         onFocus={onFocus}

packages/terra-form-input/src/Input.module.scss

@@ -26,12 +26,6 @@
     transition-timing-function: var(--terra-form-input-transition-timing-function, ease);
     width: 100%;
 
-    &::placeholder {
-      color: var(--terra-form-input-placeholder-color, rgba(25, 32, 35, 0.53));
-      font-style: var(--terra-form-input-placeholder-font-style);
-      opacity: 1;
-    }
-
     &:hover {
       background-color: var(--terra-form-input-hover-background-color, #fff);
       border: var(--terra-form-input-hover-border, 1px solid #dedfe0);
@@ -51,11 +45,6 @@
       pointer-events: none;
     }
 
-    &[disabled]::placeholder {
-      color: var(--terra-form-input-placeholder-disabled-color, rgba(25, 32, 35, 0.53));
-      font-style: var(--terra-form-input-placeholder-disabled-font-style);
-    }
-
     &:focus {
       background-color: var(--terra-form-input-focus-background-color, #fff);
       background-size: var(--terra-form-input-focus-background-size);

packages/terra-form-input/src/InputField.jsx

@@ -75,10 +75,6 @@ const propTypes = {
    * Function to trigger when user changes the input value. Provide a function to create a controlled input.
    */
   onChange: PropTypes.func,
-  /**
-   * Placeholder text.
-   */
-  placeholder: PropTypes.string,
   /**
    * Ref callback to pass into the ref attribute of the html input element.
    */
@@ -118,7 +114,6 @@ const defaultProps = {
   isLabelHidden: false,
   labelAttrs: {},
   onChange: undefined,
-  placeholder: undefined,
   maxWidth: undefined,
   refCallback: undefined,
   required: false,
@@ -145,7 +140,6 @@ const InputField = (props) => {
     labelAttrs,
     maxWidth,
     onChange,
-    placeholder,
     refCallback,
     required,
     showOptional,
@@ -170,6 +164,10 @@ const InputField = (props) => {
 
   const inputType = type || inputAttrs.type;
 
+  if (customProps.placeholder) {
+    customProps.placeholder = null;
+  }
+
   return (
     <Field
       label={label}
@@ -194,7 +192,6 @@ const InputField = (props) => {
         isIncomplete={isIncomplete}
         type={inputType}
         onChange={onChange}
-        placeholder={placeholder || inputAttrs.placeholder}
         value={value}
         defaultValue={defaultValue}
         refCallback={refCallback}

packages/terra-form-input/src/clinical-lowlight-theme/Input.module.scss

@@ -20,7 +20,6 @@
     --terra-form-input-disabled-border: 1px solid #242b2b;
     --terra-form-input-disabled-color: #404344;
     --terra-form-input-disabled-opacity: 0.25;
-    --terra-form-input-placeholder-disabled-font-style: normal;
 
     --terra-form-input-focus-background-color: #222a2e;
     --terra-form-input-focus-border: 1px solid #004c76;
@@ -34,10 +33,6 @@
     --terra-form-input-error-focus-border: 1px solid #004c76;
     --terra-form-input-error-hover-border: 1px solid #181b1d;
 
-    --terra-form-input-placeholder-color: #6f7477;
-    --terra-form-input-placeholder-disabled-color: #6f7477;
-    --terra-form-input-placeholder-font-style: normal;
-
     --terra-form-input-background-image: none;
     --terra-form-input-background-size: auto;
 

packages/terra-form-input/src/orion-fusion-theme/Input.module.scss

@@ -32,14 +32,6 @@
     --terra-form-input-focus-ltr-box-shadow: 0 0 8px #a6d9f4;
     --terra-form-input-focus-rtl-box-shadow: 0 0 8px #a6d9f4;
 
-    // Placeholder
-    --terra-form-input-placeholder-color: #767676;
-    --terra-form-input-placeholder-font-style: normal;
-  
-    // Placeholder - Disabled
-    --terra-form-input-placeholder-disabled-color: #c4c6c7;
-    --terra-form-input-placeholder-disabled-font-style: normal;
-
     // Disabled
     --terra-form-input-disabled-background-color: #f4f4f4;
     --terra-form-input-disabled-border: 1px solid #b2b5b6;

packages/terra-form-input/src/terra-dev-site/doc/common/NumberInputExample.jsx

@@ -5,7 +5,7 @@ import Input from 'terra-form-input';
 const NumberInputExample = () => (
   <div>
     <Field label="Numeric Input" htmlFor="numeric">
-      <Input name="number input" placeholder="Enter Digits" id="numeric" type="number" ariaLabel="Numeric Input" />
+      <Input name="number input" id="numeric" type="number" ariaLabel="Numeric Input" />
     </Field>
   </div>
 );

packages/terra-form-input/src/terra-dev-site/doc/common/PlaceholderExample.jsx

@@ -7,7 +7,6 @@ const DefaultInputField = () => (
     label="Profile Name"
     help="Note: This can not be changed in the future"
     type="text"
-    placeholder="Profile Name"
     inputAttrs={{
       name: 'profile',
     }}

packages/terra-form-input/src/terra-dev-site/doc/example/InputField.jsx

@@ -6,7 +6,7 @@ const NumberInputField = () => (
     inputId="numeric-input"
     label="Numeric Value"
     type="number"
-    placeholder="Enter Digits"
+    help="Enter Digits"
     inputAttrs={{
       name: 'numeric',
     }}

packages/terra-form-input/src/terra-dev-site/doc/example/NumberInputField.jsx

@@ -1,7 +1,6 @@
 import { Badge } from 'terra-form-input/package.json?dev-site-package';
 
 import BlankExample from '../common/BlankExample?dev-site-example';
-import PlaceholderExample from '../common/PlaceholderExample?dev-site-example';
 import NumberInputExample from '../common/NumberInputExample?dev-site-example';
 import ControlledDefaultExample from '../example/controlled/DefaultExample?dev-site-example';
 import ControlledDisabledExample from '../example/controlled/DisabledExample?dev-site-example';
@@ -24,6 +23,8 @@ import FormInputPropsTable from 'terra-form-input/src/Input?dev-site-props-table
 
 Generic input which represents an HTML input element directly.
 
+**Note:** To follow [UX Best Practices](https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Placeholder_Research), this component does not allow `placeholder`.
+
 ## Getting Started
 
 - Install with [npmjs](https://www.npmjs.com):
@@ -55,7 +56,6 @@ import Input from 'terra-form-input';
 
 ## Examples
 <BlankExample title="Default Input" />
-<PlaceholderExample title="Placeholder Input" />
 <NumberInputExample title="Numeric Input" />
 <ControlledDefaultExample title="Controlled Example - Valid" />
 <ControlledDisabledExample title="Controlled Example - Valid Disabled" />

packages/terra-form-input/src/terra-dev-site/doc/form-input/Input.1.doc.mdx

@@ -14,6 +14,8 @@ import FormInputFieldPropsTable from 'terra-form-input/src/InputField?dev-site-p
 [terra-form-input](https://github.com/cerner/terra-core/tree/main/packages/terra-form-input) component that is wrapped inside a
 [terra-form-field](https://github.com/cerner/terra-core/tree/main/packages/terra-form-field) component.
 
+**Note:** To follow [UX Best Practices](https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Placeholder_Research), this component does not allow `placeholder`.
+
 ## Getting Started
 
 - Install with [npmjs](https://www.npmjs.com):

packages/terra-form-input/src/terra-dev-site/doc/form-input/InputField.2.doc.mdx

@@ -3,6 +3,27 @@ import { Badge } from 'terra-form-input/package.json?dev-site-package';
 <Badge />
 
 # Terra Form Input Upgrade Guide
+## Changes from version 3 to version 4
+
+### Props
+
+#### Removed
+* Removed `placeholder` prop from `Input` and  `InputField`.
+
+### Changes to CSS Custom Properties
+
+#### Removed
+* --terra-form-input-placeholder-color
+* --terra-form-input-placeholder-font-style
+* --terra-form-input-placeholder-disabled-color
+* --terra-form-input-placeholder-disabled-font-style
+
+##### Steps to Upgrade
+To upgrade from 3.0 to 4.0 each existing Input and InputField must be reviewed and updated to ensure no `placeholder` prop is passed to it. This is done to follow WCAG ([for more info](https://www.w3.org/WAI/GL/low-vision-a11y-tf/wiki/Placeholder_Research)).
+
+* `Input` component will not be supporting `placeholder` prop and `native placeholder`. If consumers want to provide a detailed text guidance they can upgrade to `InputField`.
+
+* `InputField` component will not be supporting `placeholder` prop and `native placeholder`. But consumers may utilize the `help` text field properties to provide similar guidance to the user using `help` prop.
 
 ## Changes from version 2 to version 3
 

packages/terra-form-input/src/terra-dev-site/doc/form-input/UpgradeGuide.3.doc.mdx

@@ -23,12 +23,6 @@ describe('Input', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
-  it('should render w/ placeholder text when just a placeholder prop is passed into the Input', () => {
-    const input = <Input placeholder="foo" ariaLabel="label" />;
-    const wrapper = shallow(input);
-    expect(wrapper).toMatchSnapshot();
-  });
-
   it('should render as controlled when just a default value and `onChange()` is passed into the Input', () => {
     const input = <Input value="foo" onChange={() => { }} />;
     const wrapper = shallow(input);

packages/terra-form-input/src/terra-dev-site/test/form-input/DisabledPlaceholderInput.test.jsx

@@ -145,16 +145,4 @@ describe('InputField', () => {
     const wrapper = shallow(textarea);
     expect(wrapper).toMatchSnapshot();
   });
-
-  it('should render a placeholder within the InputField component', () => {
-    const textarea = <InputField inputId="test-input" label="Label" placeholder="Placeholder" />;
-    const wrapper = shallow(textarea);
-    expect(wrapper).toMatchSnapshot();
-  });
-
-  it('should render a placeholder within the InputField component when passed as an input attribute', () => {
-    const textarea = <InputField inputId="test-input" label="Label" inputAttrs={{ placeholder: 'Placeholder' }} />;
-    const wrapper = shallow(textarea);
-    expect(wrapper).toMatchSnapshot();
-  });
 });

packages/terra-form-input/src/terra-dev-site/test/form-input/PlaceholderFormInput.test.jsx

@@ -115,17 +115,6 @@ exports[`Input should render as uncontrolled when just a default value is passed
 />
 `;
 
-exports[`Input should render w/ placeholder text when just a placeholder prop is passed into the Input 1`] = `
-<input
-  aria-label="label"
-  className="form-input"
-  disabled={false}
-  name={null}
-  placeholder="foo"
-  required={false}
-/>
-`;
-
 exports[`Input should render with a type of password and pattern prop value 1`] = `
 <input
   aria-label="label"