diff --git a/packages/terra-form-input/CHANGELOG.md b/packages/terra-form-input/CHANGELOG.md index 4f21bba1cd5..93fd93cb238 100644 --- a/packages/terra-form-input/CHANGELOG.md +++ b/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) ------------------ diff --git a/packages/terra-form-input/src/Input.jsx b/packages/terra-form-input/src/Input.jsx index 40e762014cd..a10ace2efec 100644 --- a/packages/terra-form-input/src/Input.jsx +++ b/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 ( { 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 ( { isIncomplete={isIncomplete} type={inputType} onChange={onChange} - placeholder={placeholder || inputAttrs.placeholder} value={value} defaultValue={defaultValue} refCallback={refCallback} diff --git a/packages/terra-form-input/src/clinical-lowlight-theme/Input.module.scss b/packages/terra-form-input/src/clinical-lowlight-theme/Input.module.scss index c01150eeba2..7742e36a54c 100644 --- a/packages/terra-form-input/src/clinical-lowlight-theme/Input.module.scss +++ b/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; diff --git a/packages/terra-form-input/src/orion-fusion-theme/Input.module.scss b/packages/terra-form-input/src/orion-fusion-theme/Input.module.scss index 331ca7b6a1e..e82fdc8c59d 100644 --- a/packages/terra-form-input/src/orion-fusion-theme/Input.module.scss +++ b/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; diff --git a/packages/terra-form-input/src/terra-dev-site/doc/common/NumberInputExample.jsx b/packages/terra-form-input/src/terra-dev-site/doc/common/NumberInputExample.jsx index d3e37842a7d..b5e89a0961c 100644 --- a/packages/terra-form-input/src/terra-dev-site/doc/common/NumberInputExample.jsx +++ b/packages/terra-form-input/src/terra-dev-site/doc/common/NumberInputExample.jsx @@ -5,7 +5,7 @@ import Input from 'terra-form-input'; const NumberInputExample = () => (
- +
); diff --git a/packages/terra-form-input/src/terra-dev-site/doc/common/PlaceholderExample.jsx b/packages/terra-form-input/src/terra-dev-site/doc/common/PlaceholderExample.jsx deleted file mode 100644 index 52e40c7be8b..00000000000 --- a/packages/terra-form-input/src/terra-dev-site/doc/common/PlaceholderExample.jsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import Field from 'terra-form-field'; -import Input from 'terra-form-input'; - -const PlaceholderExample = () => ( -
- - - -
-); - -export default PlaceholderExample; diff --git a/packages/terra-form-input/src/terra-dev-site/doc/example/InputField.jsx b/packages/terra-form-input/src/terra-dev-site/doc/example/InputField.jsx index 2ba10a07db6..e37bdcf983d 100644 --- a/packages/terra-form-input/src/terra-dev-site/doc/example/InputField.jsx +++ b/packages/terra-form-input/src/terra-dev-site/doc/example/InputField.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', }} diff --git a/packages/terra-form-input/src/terra-dev-site/doc/example/NumberInputField.jsx b/packages/terra-form-input/src/terra-dev-site/doc/example/NumberInputField.jsx index 8ee98552ab5..0da6327dd72 100644 --- a/packages/terra-form-input/src/terra-dev-site/doc/example/NumberInputField.jsx +++ b/packages/terra-form-input/src/terra-dev-site/doc/example/NumberInputField.jsx @@ -6,7 +6,7 @@ const NumberInputField = () => ( inputId="numeric-input" label="Numeric Value" type="number" - placeholder="Enter Digits" + help="Enter Digits" inputAttrs={{ name: 'numeric', }} diff --git a/packages/terra-form-input/src/terra-dev-site/doc/form-input/Input.1.doc.mdx b/packages/terra-form-input/src/terra-dev-site/doc/form-input/Input.1.doc.mdx index d5f319f43d1..f1099ad1eed 100644 --- a/packages/terra-form-input/src/terra-dev-site/doc/form-input/Input.1.doc.mdx +++ b/packages/terra-form-input/src/terra-dev-site/doc/form-input/Input.1.doc.mdx @@ -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 - diff --git a/packages/terra-form-input/src/terra-dev-site/doc/form-input/InputField.2.doc.mdx b/packages/terra-form-input/src/terra-dev-site/doc/form-input/InputField.2.doc.mdx index 12cecc94f39..152be640a60 100644 --- a/packages/terra-form-input/src/terra-dev-site/doc/form-input/InputField.2.doc.mdx +++ b/packages/terra-form-input/src/terra-dev-site/doc/form-input/InputField.2.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): diff --git a/packages/terra-form-input/src/terra-dev-site/doc/form-input/UpgradeGuide.3.doc.mdx b/packages/terra-form-input/src/terra-dev-site/doc/form-input/UpgradeGuide.3.doc.mdx index 12653a13dee..29b3aa1bfd5 100644 --- a/packages/terra-form-input/src/terra-dev-site/doc/form-input/UpgradeGuide.3.doc.mdx +++ b/packages/terra-form-input/src/terra-dev-site/doc/form-input/UpgradeGuide.3.doc.mdx @@ -3,6 +3,27 @@ import { Badge } from 'terra-form-input/package.json?dev-site-package'; # 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 diff --git a/packages/terra-form-input/src/terra-dev-site/test/form-input/DisabledPlaceholderInput.test.jsx b/packages/terra-form-input/src/terra-dev-site/test/form-input/DisabledPlaceholderInput.test.jsx deleted file mode 100644 index 6635ed508ab..00000000000 --- a/packages/terra-form-input/src/terra-dev-site/test/form-input/DisabledPlaceholderInput.test.jsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import classNames from 'classnames/bind'; -import Input from '../../../Input'; -import styles from './common/Input.test.module.scss'; - -const cx = classNames.bind(styles); - -const DisabledPlaceholderInput = () => ( -
- -
-); - -export default DisabledPlaceholderInput; diff --git a/packages/terra-form-input/src/terra-dev-site/test/form-input/PlaceholderFormInput.test.jsx b/packages/terra-form-input/src/terra-dev-site/test/form-input/PlaceholderFormInput.test.jsx deleted file mode 100644 index 9e00e62cbb0..00000000000 --- a/packages/terra-form-input/src/terra-dev-site/test/form-input/PlaceholderFormInput.test.jsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import classNames from 'classnames/bind'; -import Input from '../../../Input'; -import styles from './common/Input.test.module.scss'; - -const cx = classNames.bind(styles); - -const PlaceholderInput = () => ( -
- -
-); - -export default PlaceholderInput; diff --git a/packages/terra-form-input/tests/jest/Input.test.jsx b/packages/terra-form-input/tests/jest/Input.test.jsx index ed9d914f746..c50a44ff14b 100644 --- a/packages/terra-form-input/tests/jest/Input.test.jsx +++ b/packages/terra-form-input/tests/jest/Input.test.jsx @@ -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 = ; - 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 = { }} />; const wrapper = shallow(input); diff --git a/packages/terra-form-input/tests/jest/InputField.test.jsx b/packages/terra-form-input/tests/jest/InputField.test.jsx index 91663f75621..006f251ca34 100644 --- a/packages/terra-form-input/tests/jest/InputField.test.jsx +++ b/packages/terra-form-input/tests/jest/InputField.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 = ; - const wrapper = shallow(textarea); - expect(wrapper).toMatchSnapshot(); - }); - - it('should render a placeholder within the InputField component when passed as an input attribute', () => { - const textarea = ; - const wrapper = shallow(textarea); - expect(wrapper).toMatchSnapshot(); - }); }); diff --git a/packages/terra-form-input/tests/jest/__snapshots__/Input.test.jsx.snap b/packages/terra-form-input/tests/jest/__snapshots__/Input.test.jsx.snap index d8a0413546c..1920363d936 100644 --- a/packages/terra-form-input/tests/jest/__snapshots__/Input.test.jsx.snap +++ b/packages/terra-form-input/tests/jest/__snapshots__/Input.test.jsx.snap @@ -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`] = ` - -`; - exports[`Input should render with a type of password and pattern prop value 1`] = ` `; -exports[`InputField should render a placeholder within the InputField component 1`] = ` - - } - help={null} - hideRequired={false} - htmlFor="test-input" - isInline={false} - isInvalid={false} - isLabelHidden={false} - label="Label" - labelAttrs={Object {}} - required={false} - showOptional={false} -> - - -`; - -exports[`InputField should render a placeholder within the InputField component when passed as an input attribute 1`] = ` - - } - help={null} - hideRequired={false} - htmlFor="test-input" - isInline={false} - isInvalid={false} - isLabelHidden={false} - label="Label" - labelAttrs={Object {}} - required={false} - showOptional={false} -> - - -`; - exports[`InputField should render a valid InputField with props 1`] = ` { Terra.it.validatesElement(); }); - describe('Enabled Placeholder', () => { - before(() => { - browser.url('/#/raw/tests/terra-form-input/form-input/placeholder-form-input'); - browser.moveToObject('#root', 0, 700); // add to ensure consistent hover styles - }); - - // TODO: remove disabled color-contrast rule: https://github.com/cerner/terra-core/issues/2992 - Terra.it.validatesElement({ rules: { 'color-contrast': { enabled: false } } }); - }); - describe('Enabled Value', () => { before(() => { browser.url('/#/raw/tests/terra-form-input/form-input/value-form-input'); @@ -94,15 +84,6 @@ Terra.describeViewports('Form-Input', ['tiny', 'large'], () => { Terra.it.validatesElement(); }); - describe('Disabled Placeholder', () => { - before(() => { - browser.url('/#/raw/tests/terra-form-input/form-input/disabled-placeholder-input'); - browser.moveToObject('#root', 0, 700); // add to ensure consistent hover styles - }); - - Terra.it.validatesElement(); - }); - describe('Disabled Value', () => { before(() => { browser.url('/#/raw/tests/terra-form-input/form-input/disabled-value-input'); diff --git a/packages/terra-form-textarea/CHANGELOG.md b/packages/terra-form-textarea/CHANGELOG.md index 6e41680e4fd..7d554e7eb4f 100644 --- a/packages/terra-form-textarea/CHANGELOG.md +++ b/packages/terra-form-textarea/CHANGELOG.md @@ -3,6 +3,15 @@ ChangeLog Unreleased ---------- +### Breaking Changes +* Removed `placeholder` prop. + +### Changed +* Updated examples to not use `placeholder` prop + +### Removed +* Removed theme variables - see UPGRADEGUIDE.md +* Removed tests specifically for `placeholder` prop 4.8.0 - (July 7, 2020) ------------------ diff --git a/packages/terra-form-textarea/src/Textarea.jsx b/packages/terra-form-textarea/src/Textarea.jsx index d1b66a41bda..b8f7d50e2c6 100644 --- a/packages/terra-form-textarea/src/Textarea.jsx +++ b/packages/terra-form-textarea/src/Textarea.jsx @@ -66,10 +66,6 @@ const propTypes = { * Function to trigger when user focuses on this textarea. */ onFocus: PropTypes.func, - /** - * Placeholder text. - */ - placeholder: PropTypes.string, /** * Whether the input is required or not. */ @@ -108,7 +104,6 @@ const defaultProps = { isIncomplete: false, isInvalid: false, onChange: undefined, - placeholder: undefined, required: false, rows: null, size: 'small', @@ -198,7 +193,6 @@ class Textarea extends React.Component { required, onChange, onFocus, - placeholder, isAutoResizable, isIncomplete, isInvalid, @@ -255,6 +249,10 @@ class Textarea extends React.Component { additionalTextareaProps.defaultValue = defaultValue; } + if (additionalTextareaProps.placeholder) { + additionalTextareaProps.placeholder = null; + } + return (