[CORL-550] More stable css classes (#2515)

* feat: more stable css classes

* chore: renamee ValidationMessageHelper to FormValidationMessage

* chore: Rename FormValidationMessage to FieldValidationMessage

* feat: more css classes, icons use <i> tag

* feat: stable classnames for gdpr features

* feat: more css stable classnames
This commit is contained in:
Vinh
2019-09-04 12:34:42 -04:00
committed by Kim Gardner
parent fcf3640adc
commit aa32fcaea6
157 changed files with 2965 additions and 1531 deletions
@@ -67,12 +67,12 @@ exports[`accepts valid email 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -137,12 +137,12 @@ exports[`checks for invalid email 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
Please enter a valid email address.
</span>
@@ -176,12 +176,12 @@ exports[`checks for invalid email 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
Emails do not match. Try again.
</span>
@@ -363,12 +363,12 @@ exports[`shows error when submitting empty form 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -402,12 +402,12 @@ exports[`shows error when submitting empty form 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -57,24 +57,24 @@ we require users to create a password.
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
Password must contain at least 8 characters.
</span>
@@ -184,12 +184,12 @@ we require users to create a password.
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
@@ -274,24 +274,24 @@ we require users to create a password.
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -386,12 +386,12 @@ GraphQL request (4:3)
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
@@ -471,12 +471,12 @@ we require users to create a password.
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
@@ -46,12 +46,12 @@ exports[`checks for invalid username 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
Username must contain at least 3 characters.
</span>
@@ -217,12 +217,12 @@ exports[`shows error when submitting empty form 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -81,12 +81,12 @@ exports[`show restricted screen for commenters and staff 1`] = `
<div
className="Box-root Flex-root Flex-flex Flex-justifyCenter"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg Restricted-lockIcon"
>
lock
</span>
</i>
</div>
<h1
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Typography-alignCenter Restricted-noPermission"
@@ -216,12 +216,12 @@ exports[`show restricted screen for commenters and staff 2`] = `
<div
className="Box-root Flex-root Flex-flex Flex-justifyCenter"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-lg Restricted-lockIcon"
>
lock
</span>
</i>
</div>
<h1
className="Box-root Typography-root Typography-heading3 Typography-colorTextPrimary Typography-alignCenter Restricted-noPermission"
@@ -36,12 +36,12 @@ exports[`accepts correct password 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -85,12 +85,12 @@ exports[`accepts correct password 1`] = `
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
@@ -107,12 +107,12 @@ exports[`accepts correct password 1`] = `
onTouchEnd={[Function]}
type="submit"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
>
email
</span>
</i>
<span>
Sign in with Email
</span>
@@ -193,24 +193,24 @@ exports[`accepts valid email 1`] = `
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -228,12 +228,12 @@ exports[`accepts valid email 1`] = `
onTouchEnd={[Function]}
type="submit"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
>
email
</span>
</i>
<span>
Sign in with Email
</span>
@@ -278,12 +278,12 @@ exports[`checks for invalid email 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
Please enter a valid email address.
</span>
@@ -327,24 +327,24 @@ exports[`checks for invalid email 1`] = `
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -362,12 +362,12 @@ exports[`checks for invalid email 1`] = `
onTouchEnd={[Function]}
type="submit"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
>
email
</span>
</i>
<span>
Sign in with Email
</span>
@@ -525,12 +525,12 @@ exports[`renders sign in form 1`] = `
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
@@ -547,12 +547,12 @@ exports[`renders sign in form 1`] = `
onTouchEnd={[Function]}
type="submit"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
>
email
</span>
</i>
<span>
Sign in with Email
</span>
@@ -611,12 +611,12 @@ exports[`shows error when submitting empty form 1`] = `
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -660,24 +660,24 @@ exports[`shows error when submitting empty form 1`] = `
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
<div
className="Message-root Message-colorError Message-fullWidth"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm MessageIcon-root"
>
warning
</span>
</i>
<span>
This field is required.
</span>
@@ -695,12 +695,12 @@ exports[`shows error when submitting empty form 1`] = `
onTouchEnd={[Function]}
type="submit"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
>
email
</span>
</i>
<span>
Sign in with Email
</span>
@@ -788,12 +788,12 @@ exports[`shows server error 1`] = `
tabIndex={0}
title="Show password"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-sm"
>
visibility
</span>
</i>
</div>
</div>
</div>
@@ -810,12 +810,12 @@ exports[`shows server error 1`] = `
onTouchEnd={[Function]}
type="submit"
>
<span
<i
aria-hidden="true"
className="Icon-root Icon-md ButtonIcon-root"
>
email
</span>
</i>
<span>
Sign in with Email
</span>