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

### Props

#### Updated
* Form Fields allowed the `label` to be a node, which potentially breaks the display when injecting other non-inline-only text elements (terra-text) or has the potential to completely break accessibility if something non-text based would be passed in.
* `label` prop's type changed from node to string.

##### Steps to Upgrade
To upgrade from 2.0 to 3.0 each existing Input must be reviewed and updated to ensure only a string is being passed to the `label` prop. Solutions passing node data types need to be reworked to provide only a string.

## Changes from version 1 to version 2

### Changes to CSS Custom Properties

#### Renamed
| Previous | New |
|-|-|
| --terra-form-input-focus-animation-background | --terra-form-input-background-image |
| --terra-form-input-focus-background-start | --terra-form-input-background-size |
| --terra-form-input-focus-keyboard-animation-size | --terra-form-input-focus-background-size |
| --terra-form-input-focus-keyboard-box-shadow-ltr | --terra-form-input-focus-ltr-box-shadow |
| --terra-form-input-focus-keyboard-box-shadow-rtl | --terra-form-input-focus-rtl-box-shadow |
| --terra-form-input-error-focus-animation-background | --terra-form-input-error-background-image |
| --terra-form-input-error-focus-keyboard-animation-size | --terra-form-input-error-focus-background-size |
| --terra-form-input-error-focus-keyboard-box-shadow-ltr | --terra-form-input-error-focus-ltr-box-shadow |
| --terra-form-input-error-focus-keyboard-box-shadow-rtl | --terra-form-input-error-focus-rtl-box-shadow |

#### Added
* --terra-form-input-hover-background-color
* --terra-form-input-hover-color
* --terra-form-input-focus-color
* --terra-form-input-error-background-color
* --terra-form-input-error-hover-background-color