From 0758cab290eb466b47d20a02609c1cd202a16ef3 Mon Sep 17 00:00:00 2001 From: Waheed Ahmed Date: Tue, 13 Apr 2021 19:07:48 +0500 Subject: [PATCH] Revert "fix(deps): update dependency @edx/paragon to v13.17.5" (#243) * Revert "fix(deps): update dependency @edx/paragon to v13.17.5 (#223)" This reverts commit 913e8399868a3b09e278699bc2c0967aab665a4a. * fix dropdown icon size --- package-lock.json | 12 ++-- package.json | 2 +- src/_style.scss | 4 ++ .../AuthnValidationFormGroup.jsx | 2 +- .../tests/AuthnValidationFormGroup.test.jsx | 8 +-- .../ForgotPasswordPage.test.jsx.snap | 9 ++- .../__snapshots__/LoginPage.test.jsx.snap | 30 ++++++---- src/register/OptionalFields.jsx | 5 +- src/register/RegistrationPage.jsx | 2 +- .../RegistrationPage.test.jsx.snap | 60 ++++++++++++------- .../ResetPasswordPage.test.jsx.snap | 24 +++++--- 11 files changed, 102 insertions(+), 56 deletions(-) diff --git a/package-lock.json b/package-lock.json index b8be729c..c833280b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3924,9 +3924,9 @@ } }, "@edx/paragon": { - "version": "13.17.5", - "resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-13.17.5.tgz", - "integrity": "sha512-ZLgZU/8kQBfHT3gd1s3w6AQZIOfufqMU4hItB4dSaqVcCX8ECmtE/AAMdwasTNxyhGCzfITuVe8xB9wYOnU/Xw==", + "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", @@ -20980,9 +20980,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 ebe17162..3a601ce5 100644 --- a/package.json +++ b/package.json @@ -38,7 +38,7 @@ "@edx/frontend-component-cookie-policy-banner": "2.1.12", "@edx/frontend-component-header": "2.2.5", "@edx/frontend-platform": "1.8.4", - "@edx/paragon": "13.17.5", + "@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/_style.scss b/src/_style.scss index 96ce2902..c7c43c4e 100644 --- a/src/_style.scss +++ b/src/_style.scss @@ -329,3 +329,7 @@ $apple-focus-black: $apple-black; } } } + +.custom-select-size { + background-size: 8px 10px; +} diff --git a/src/common-components/AuthnValidationFormGroup.jsx b/src/common-components/AuthnValidationFormGroup.jsx index 9f2feb33..3cbcc551 100644 --- a/src/common-components/AuthnValidationFormGroup.jsx +++ b/src/common-components/AuthnValidationFormGroup.jsx @@ -72,7 +72,7 @@ const AuthnCustomValidationFormGroup = (props) => { if (props.type === 'select') { inputProps.options = props.selectOptions; - inputProps.className = props.value === '' ? 'text-muted border-gray-600' : null; + inputProps.className = props.value === '' ? `${props.inputFieldStyle} text-muted` : null; } if (props.type === 'checkbox') { inputProps.checked = props.isChecked; 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/tests/__snapshots__/ForgotPasswordPage.test.jsx.snap b/src/forgot-password/tests/__snapshots__/ForgotPasswordPage.test.jsx.snap index 244a95f9..3e4d3052 100644 --- a/src/forgot-password/tests/__snapshots__/ForgotPasswordPage.test.jsx.snap +++ b/src/forgot-password/tests/__snapshots__/ForgotPasswordPage.test.jsx.snap @@ -24,7 +24,8 @@ exports[`ForgotPasswordPage should match default section snapshot 1`] = ` className="form-group mb-0 w-100" > @@ -146,7 +147,8 @@ exports[`ForgotPasswordPage should match forbidden section snapshot 1`] = ` className="form-group mb-0 w-100" > @@ -253,7 +255,8 @@ exports[`ForgotPasswordPage should match pending section snapshot 1`] = ` className="form-group mb-0 w-100" > diff --git a/src/login/tests/__snapshots__/LoginPage.test.jsx.snap b/src/login/tests/__snapshots__/LoginPage.test.jsx.snap index 566ee00e..01680d3c 100644 --- a/src/login/tests/__snapshots__/LoginPage.test.jsx.snap +++ b/src/login/tests/__snapshots__/LoginPage.test.jsx.snap @@ -37,7 +37,8 @@ exports[`LoginPage should match TPA provider snapshot 1`] = ` className="form-group" > @@ -62,7 +63,8 @@ exports[`LoginPage should match TPA provider snapshot 1`] = ` className="form-group" > @@ -233,7 +235,8 @@ exports[`LoginPage should match default section snapshot 1`] = ` className="form-group" > @@ -258,7 +261,8 @@ exports[`LoginPage should match default section snapshot 1`] = ` className="form-group" > @@ -427,7 +431,8 @@ exports[`LoginPage should match forget password alert message snapshot 1`] = ` className="form-group" > @@ -452,7 +457,8 @@ exports[`LoginPage should match forget password alert message snapshot 1`] = ` className="form-group" > @@ -581,7 +587,8 @@ exports[`LoginPage should match pending button state snapshot 1`] = ` className="form-group" > @@ -606,7 +613,8 @@ exports[`LoginPage should match pending button state snapshot 1`] = ` className="form-group" > @@ -772,7 +780,8 @@ exports[`LoginPage should show error message 1`] = ` className="form-group" > @@ -797,7 +806,8 @@ exports[`LoginPage should show error message 1`] = ` className="form-group" > diff --git a/src/register/OptionalFields.jsx b/src/register/OptionalFields.jsx index 642db0f8..d20d4a30 100644 --- a/src/register/OptionalFields.jsx +++ b/src/register/OptionalFields.jsx @@ -38,6 +38,7 @@ const OptionalFields = (props) => { className="mb-20 opt-inline-field data-hj-suppress" onChange={(e) => onChangeHandler('gender', e.target.value)} selectOptions={getOptions().genderOptions} + inputFieldStyle="border-gray-600 custom-select-size" /> { className="mb-20 opt-inline-field opt-year-field data-hj-suppress" onChange={(e) => onChangeHandler('yearOfBirth', e.target.value)} selectOptions={getOptions().yearOfBirthOptions} + inputFieldStyle="border-gray-600 custom-select-size" /> { className="mb-20 data-hj-suppress" onChange={(e) => onChangeHandler('levelOfEducation', e.target.value)} selectOptions={getOptions().educationLevelOptions} + inputFieldStyle="border-gray-600 custom-select-size" /> { value={values.goals} className="mb-20" onChange={(e) => onChangeHandler('goals', e.target.value)} - inputFieldStyle="border-gray-600" + inputFieldStyle="border-gray-600 custom-select-size" /> ); diff --git a/src/register/RegistrationPage.jsx b/src/register/RegistrationPage.jsx index 4012813c..d0647243 100644 --- a/src/register/RegistrationPage.jsx +++ b/src/register/RegistrationPage.jsx @@ -549,7 +549,7 @@ class RegistrationPage extends React.Component { onBlur={(e) => this.handleOnBlur(e)} onChange={(e) => this.handleOnChange(e)} selectOptions={this.getCountryOptions()} - inputFieldStyle="border-gray-600" + inputFieldStyle="border-gray-600 custom-select-size" />
@@ -61,7 +62,8 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = ` className="form-group data-hj-suppress" > @@ -86,7 +88,8 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = ` className="form-group data-hj-suppress" > @@ -111,7 +114,8 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = ` className="form-group" > @@ -136,7 +140,8 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = ` className="form-group mb-0 data-hj-suppress" > @@ -144,7 +149,7 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = ` aria-describedby="" aria-invalid={false} autoComplete="on" - className="form-control text-muted border-gray-600" + className="form-control border-gray-600 custom-select-size text-muted" id="country" name="country" onBlur={[Function]} @@ -1466,7 +1471,8 @@ exports[`RegistrationPageTests should match TPA provider snapshot 1`] = ` className="form-group custom-control pt-10 mb-0" > @@ -1599,7 +1605,8 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = ` className="form-group" > @@ -1624,7 +1631,8 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = ` className="form-group data-hj-suppress" > @@ -1649,7 +1657,8 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = ` className="form-group data-hj-suppress" > @@ -1674,7 +1683,8 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = ` className="form-group" > @@ -1699,7 +1709,8 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = ` className="form-group mb-0 data-hj-suppress" > @@ -1707,7 +1718,7 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = ` aria-describedby="" aria-invalid={false} autoComplete="on" - className="form-control text-muted border-gray-600" + className="form-control border-gray-600 custom-select-size text-muted" id="country" name="country" onBlur={[Function]} @@ -3029,7 +3040,8 @@ exports[`RegistrationPageTests should match default section snapshot 1`] = ` className="form-group custom-control pt-10 mb-0" > @@ -3117,7 +3129,8 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] = className="form-group" > @@ -3142,7 +3155,8 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] = className="form-group data-hj-suppress" > @@ -3167,7 +3181,8 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] = className="form-group data-hj-suppress" > @@ -3192,7 +3207,8 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] = className="form-group" > @@ -3217,7 +3233,8 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] = className="form-group mb-0 data-hj-suppress" > @@ -3225,7 +3242,7 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] = aria-describedby="" aria-invalid={false} autoComplete="on" - className="form-control text-muted border-gray-600" + className="form-control border-gray-600 custom-select-size text-muted" id="country" name="country" onBlur={[Function]} @@ -4547,7 +4564,8 @@ exports[`RegistrationPageTests should match pending button state snapshot 1`] = className="form-group custom-control pt-10 mb-0" > diff --git a/src/reset-password/tests/__snapshots__/ResetPasswordPage.test.jsx.snap b/src/reset-password/tests/__snapshots__/ResetPasswordPage.test.jsx.snap index a59cf3f4..fcb2f904 100644 --- a/src/reset-password/tests/__snapshots__/ResetPasswordPage.test.jsx.snap +++ b/src/reset-password/tests/__snapshots__/ResetPasswordPage.test.jsx.snap @@ -25,7 +25,8 @@ exports[`ResetPasswordPage should match invalid token message section snapshot 1 className="form-group w-100" > @@ -50,7 +51,8 @@ exports[`ResetPasswordPage should match invalid token message section snapshot 1 className="form-group w-100" > @@ -124,7 +126,8 @@ exports[`ResetPasswordPage should match pending reset message section snapshot 1 className="form-group w-100" > @@ -149,7 +152,8 @@ exports[`ResetPasswordPage should match pending reset message section snapshot 1 className="form-group w-100" > @@ -244,7 +248,8 @@ exports[`ResetPasswordPage should match reset password default section snapshot className="form-group w-100" > @@ -269,7 +274,8 @@ exports[`ResetPasswordPage should match reset password default section snapshot className="form-group w-100" > @@ -381,7 +387,8 @@ exports[`ResetPasswordPage show spinner component during token validation 1`] = className="form-group w-100" > @@ -406,7 +413,8 @@ exports[`ResetPasswordPage show spinner component during token validation 1`] = className="form-group w-100" >