From 5a5798df9c8ffbac3a5c9788d2eccebd2306c442 Mon Sep 17 00:00:00 2001 From: Waheed Ahmed Date: Fri, 26 Mar 2021 21:08:58 +0500 Subject: [PATCH] Revert "Add 3:1 contrast to all form text field." (#222) --- package-lock.json | 12 +-- package.json | 2 +- .../AuthnValidationFormGroup.jsx | 5 +- .../tests/AuthnValidationFormGroup.test.jsx | 8 +- src/forgot-password/ForgotPasswordPage.jsx | 1 + .../ForgotPasswordPage.test.jsx.snap | 15 ++-- src/login/LoginPage.jsx | 2 + .../__snapshots__/LoginPage.test.jsx.snap | 50 ++++++----- src/register/OptionalFields.jsx | 1 + src/register/RegistrationPage.jsx | 5 ++ .../RegistrationPage.test.jsx.snap | 84 +++++++++++-------- src/reset-password/ResetPasswordPage.jsx | 2 + .../ResetPasswordPage.test.jsx.snap | 40 +++++---- 13 files changed, 140 insertions(+), 87 deletions(-) diff --git a/package-lock.json b/package-lock.json index 8fa9757d..5727e799 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3828,9 +3828,9 @@ } }, "@edx/paragon": { - "version": "13.17.3", - "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-13.17.3.tgz", - "integrity": "sha512-fUjrfNmeWIpEsroK0JuajIBHHh0BIvZTnBusTRqzvl5fFivNuhEdcG33oEZSVvfyRYtCgtnWmSRbvN5vGhjK6g==", + "version": "13.16.1", + "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-13.16.1.tgz", + "integrity": "sha512-8GxeS0OQLKJKrkqUa6HRk+wi/96IvhuY6JjjQYIf4+SA6TXLu57SwvtsQN6sLuB3PTxnW64WQF3MepvpNo9VpQ==", "requires": { "@fortawesome/fontawesome-svg-core": "^1.2.30", "@fortawesome/free-solid-svg-icons": "^5.14.0", @@ -21304,9 +21304,9 @@ } }, "react-popper": { - "version": "2.2.5", - "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.5.tgz", - "integrity": "sha512-kxGkS80eQGtLl18+uig1UIf9MKixFSyPxglsgLBxlYnyDf65BiY9B3nZSc6C9XUNDgStROB0fMQlTEz1KxGddw==", + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.2.4.tgz", + "integrity": "sha512-NacOu4zWupdQjVXq02XpTD3yFPSfg5a7fex0wa3uGKVkFK7UN6LvVxgcb+xYr56UCuWiNPMH20tntdVdJRwYew==", "requires": { "react-fast-compare": "^3.0.1", "warning": "^4.0.2" diff --git a/package.json b/package.json index fd4317f3..d7177e8f 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "@edx/frontend-component-cookie-policy-banner": "2.1.11", "@edx/frontend-component-header": "2.2.4", "@edx/frontend-platform": "1.8.4", - "@edx/paragon": "13.17.3", + "@edx/paragon": "13.16.1", "@fortawesome/fontawesome-svg-core": "1.2.32", "@fortawesome/free-brands-svg-icons": "5.15.1", "@fortawesome/free-regular-svg-icons": "5.15.1", diff --git a/src/common-components/AuthnValidationFormGroup.jsx b/src/common-components/AuthnValidationFormGroup.jsx index 2cd1ebf7..97f9c4ae 100644 --- a/src/common-components/AuthnValidationFormGroup.jsx +++ b/src/common-components/AuthnValidationFormGroup.jsx @@ -61,6 +61,7 @@ const AuthnCustomValidationFormGroup = (props) => { id: props.for, type: props.type, value: props.value, + className: props.inputFieldStyle, 'aria-invalid': props.ariaInvalid, }; inputProps.onChange = (e) => onChangeHandler(e, onChange); @@ -70,7 +71,7 @@ const AuthnCustomValidationFormGroup = (props) => { if (props.type === 'select') { inputProps.options = props.selectOptions; - inputProps.className = props.value === '' ? 'text-muted' : null; + inputProps.className = props.value === '' ? 'text-muted border-gray-600' : null; } if (props.type === 'checkbox') { inputProps.checked = props.isChecked; @@ -114,6 +115,7 @@ AuthnCustomValidationFormGroup.defaultProps = { invalid: false, ariaInvalid: false, invalidMessage: '', + inputFieldStyle: '', helpText: '', className: '', onClick: null, @@ -138,6 +140,7 @@ AuthnCustomValidationFormGroup.propTypes = { invalidMessage: PropTypes.string, helpText: PropTypes.string, className: PropTypes.string, + inputFieldStyle: PropTypes.string, isChecked: PropTypes.bool, optionalFieldCheckbox: PropTypes.bool, onClick: PropTypes.func, diff --git a/src/common-components/tests/AuthnValidationFormGroup.test.jsx b/src/common-components/tests/AuthnValidationFormGroup.test.jsx index 0c765e54..88f3dfbf 100644 --- a/src/common-components/tests/AuthnValidationFormGroup.test.jsx +++ b/src/common-components/tests/AuthnValidationFormGroup.test.jsx @@ -15,14 +15,14 @@ describe('AuthnCustomValidationFormGroup', () => { it('should show label in place of placeholder when field is empty', () => { const validationFormGroup = mount(); - expect(validationFormGroup.find('label').prop('className')).toEqual('pgn__form-label pt-10 focus-out'); + expect(validationFormGroup.find('label').prop('className')).toEqual('pt-10 focus-out form-label'); }); it('should show label on top of field when field is focused in', () => { const validationFormGroup = mount(); validationFormGroup.find('input').simulate('focus'); - expect(validationFormGroup.find('label').prop('className')).toEqual('pgn__form-label pt-10 h6'); + expect(validationFormGroup.find('label').prop('className')).toEqual('pt-10 h6 form-label'); }); it('should keep label hidden for checkbox field', () => { @@ -32,7 +32,7 @@ describe('AuthnCustomValidationFormGroup', () => { optionalFieldCheckbox: true, }; const validationFormGroup = mount(); - expect(validationFormGroup.find('label').prop('className')).toEqual('pgn__form-label sr-only'); + expect(validationFormGroup.find('label').prop('className')).toEqual('sr-only form-label'); }); it('should keep label hidden when input field is not empty', () => { @@ -41,6 +41,6 @@ describe('AuthnCustomValidationFormGroup', () => { value: 'test', }; const validationFormGroup = mount(); - expect(validationFormGroup.find('label').prop('className')).toEqual('pgn__form-label sr-only'); + expect(validationFormGroup.find('label').prop('className')).toEqual('sr-only form-label'); }); }); diff --git a/src/forgot-password/ForgotPasswordPage.jsx b/src/forgot-password/ForgotPasswordPage.jsx index ae31596a..6e13b100 100644 --- a/src/forgot-password/ForgotPasswordPage.jsx +++ b/src/forgot-password/ForgotPasswordPage.jsx @@ -117,6 +117,7 @@ const ForgotPasswordPage = (props) => { onChange={e => setFieldValue('email', e.target.value)} helpText={intl.formatMessage(messages['forgot.password.email.help.text'], { platformName })} className="mb-0 w-100" + inputFieldStyle="border-gray-600" /> this.setState({ email: e.target.value, isSubmitted: false })} + inputFieldStyle="border-gray-600" /> this.setState({ password: e.target.value, isSubmitted: false })} + inputFieldStyle="border-gray-600" /> diff --git a/src/login/tests/__snapshots__/LoginPage.test.jsx.snap b/src/login/tests/__snapshots__/LoginPage.test.jsx.snap index f19ef4b2..cd86e364 100644 --- a/src/login/tests/__snapshots__/LoginPage.test.jsx.snap +++ b/src/login/tests/__snapshots__/LoginPage.test.jsx.snap @@ -37,14 +37,15 @@ exports[`LoginPage should match TPA provider snapshot 1`] = ` className="form-group" > { value={values.goals} className="mb-20" onChange={(e) => onChangeHandler('goals', e.target.value)} + inputFieldStyle="border-gray-600" /> ); diff --git a/src/register/RegistrationPage.jsx b/src/register/RegistrationPage.jsx index 7fc4447a..ec832e99 100644 --- a/src/register/RegistrationPage.jsx +++ b/src/register/RegistrationPage.jsx @@ -480,6 +480,7 @@ class RegistrationPage extends React.Component { onBlur={(e) => this.handleOnBlur(e)} onChange={(e) => this.handleOnChange(e)} helpText={intl.formatMessage(messages['helptext.name'])} + inputFieldStyle="border-gray-600" /> this.handleOnBlur(e)} onChange={(e) => this.handleOnChange(e)} helpText={intl.formatMessage(messages['helptext.username'])} + inputFieldStyle="border-gray-600" /> this.handleOnBlur(e)} onChange={(e) => this.handleOnChange(e)} helpText={intl.formatMessage(messages['helptext.email'])} + inputFieldStyle="border-gray-600" /> {!currentProvider && ( this.handleOnBlur(e)} onChange={(e) => this.handleOnChange(e)} helpText={intl.formatMessage(messages['helptext.password'])} + inputFieldStyle="border-gray-600" /> )} this.handleOnBlur(e)} onChange={(e) => this.handleOnChange(e)} selectOptions={this.getCountryOptions()} + inputFieldStyle="border-gray-600" />