diff --git a/.claude/rules/frontend.md b/.claude/rules/frontend.md index 2f3e34d0b..5921a1ba5 100644 --- a/.claude/rules/frontend.md +++ b/.claude/rules/frontend.md @@ -71,7 +71,7 @@ Components are `.tsx` files. They: element. 6. Declare `Props` in `.types.ts` (extending the matching `*HTMLAttributes` type) and export it from `index.ts`. Reuse shared unions - from `src/types` (`Color`, `Priority`, `Size`, `Layout`, `ValidationState`, + from `src/types` (`Color`, `Priority`, `Size`, `Layout`, `State`, …); component-specific unions stay in the component directory. Every type lives in a `.types.ts` file next to its implementation — including context values (`ContextValue`), provider props and helper diff --git a/src/components/CheckboxField/CheckboxField.module.scss b/src/components/CheckboxField/CheckboxField.module.scss index d8625888c..7ac85e26e 100644 --- a/src/components/CheckboxField/CheckboxField.module.scss +++ b/src/components/CheckboxField/CheckboxField.module.scss @@ -35,16 +35,20 @@ } // States + .isRootStateChanged { + @include variants.state(changed); + } + .isRootStateInvalid { - @include variants.validation(invalid); + @include variants.state(invalid); } .isRootStateValid { - @include variants.validation(valid); + @include variants.state(valid); } .isRootStateWarning { - @include variants.validation(warning); + @include variants.state(warning); } // Invisible label diff --git a/src/components/CheckboxField/CheckboxField.tsx b/src/components/CheckboxField/CheckboxField.tsx index 58c4b402a..392c44978 100644 --- a/src/components/CheckboxField/CheckboxField.tsx +++ b/src/components/CheckboxField/CheckboxField.tsx @@ -2,7 +2,7 @@ import React, { useContext } from 'react'; import { withGlobalProps } from '../../providers/globalProps'; import { classNames } from '../../helpers/classNames/classNames'; import { transferProps } from '../../helpers/transferProps'; -import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName'; +import { getRootStateClassName } from '../_helpers/getRootStateClassName'; import { FormLayoutContext } from '../FormLayout/FormLayoutContext'; import styles from './CheckboxField.module.scss'; import type { CheckboxFieldProps } from './CheckboxField.types'; @@ -16,7 +16,7 @@ export const CheckboxField = React.forwardRef { @@ -31,7 +31,7 @@ export const CheckboxField = React.forwardRef, 'ty */ required?: boolean; /** - * Alter the field to provide feedback based on validation result. + * Alter the field to reflect the state of its data, e.g. a validation result or a change + * against the saved value. */ - validationState?: ValidationState; + state?: State; /** * Validation message to be displayed. */ diff --git a/src/components/CheckboxField/README.md b/src/components/CheckboxField/README.md index 084fb0c26..7511c043b 100644 --- a/src/components/CheckboxField/README.md +++ b/src/components/CheckboxField/README.md @@ -146,7 +146,7 @@ React.createElement(() => { )} onChange={() => setAgree(!agree)} - validationState="valid" + state="valid" /> { )} onChange={() => setAgree(!agree)} - validationState="warning" + state="warning" validationText={( <> Please wait 10 minutes until we verify your data. @@ -178,7 +178,7 @@ React.createElement(() => { )} onChange={() => setAgree(!agree)} required - validationState="invalid" + state="invalid" validationText="You must agree to be able to proceed." /> @@ -186,6 +186,28 @@ React.createElement(() => { }); ``` +### Changed State + +Changed state highlights fields whose value differs from the saved one, so users +can review their edits before saving. + +A field shows one state at a time. When a changed value is also invalid, it's +up to you to pick the state that matters more to the user. + +```docoff-react-preview +React.createElement(() => { + const [newsletter, setNewsletter] = React.useState(true); + return ( + setNewsletter(!newsletter)} + state="changed" + /> + ); +}); +``` + ### Required State The required state indicates that the input is mandatory. Required fields diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx index fbceb43fa..0496cbade 100644 --- a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx +++ b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx @@ -18,17 +18,17 @@ test.describe('CheckboxField', () => { ...mixPropTests([ propTests.disabledPropTest, propTests.checkedPropTest, - propTests.validationStatePropTest, + propTests.statePropTest, ]), ...mixPropTests([ propTests.checkedPropTest, propTests.requiredPropTest, - propTests.validationStatePropTest, + propTests.statePropTest, ]), ...mixPropTests([ propTests.checkedPropTest, propTests.renderAsRequiredPropTest, - propTests.validationStatePropTest, + propTests.statePropTest, ]), ...mixPropTests([ propTests.checkedPropTest, diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-024b2-Required-boolean-false-state-string-warning-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-024b2-Required-boolean-false-state-string-warning-1-chromium-linux.png new file mode 100644 index 000000000..7e567d3f8 Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-024b2-Required-boolean-false-state-string-warning-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-06df7--boolean-false-validationState-string-valid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-06df7--boolean-false-validationState-string-valid-1-chromium-linux.png deleted file mode 100644 index c792dc8c0..000000000 Binary files a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-06df7--boolean-false-validationState-string-valid-1-chromium-linux.png and /dev/null differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-0e4b8-sRequired-boolean-true-state-string-warning-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-0e4b8-sRequired-boolean-true-state-string-warning-1-chromium-linux.png new file mode 100644 index 000000000..cc3889fd0 Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-0e4b8-sRequired-boolean-true-state-string-warning-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-0e7c4-boolean-true-validationState-string-warning-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-0e7c4-boolean-true-validationState-string-warning-1-chromium-linux.png deleted file mode 100644 index 569797858..000000000 Binary files a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-0e7c4-boolean-true-validationState-string-warning-1-chromium-linux.png and /dev/null differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-23372-rAsRequired-boolean-true-state-string-valid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-23372-rAsRequired-boolean-true-state-string-valid-1-chromium-linux.png new file mode 100644 index 000000000..001c0a7e3 Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-23372-rAsRequired-boolean-true-state-string-valid-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-28331-boolean-true-validationState-string-invalid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-28331-boolean-true-validationState-string-invalid-1-chromium-linux.png deleted file mode 100644 index 53efdef87..000000000 Binary files a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-28331-boolean-true-validationState-string-invalid-1-chromium-linux.png and /dev/null differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-3053a-sRequired-boolean-true-state-string-changed-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-3053a-sRequired-boolean-true-state-string-changed-1-chromium-linux.png new file mode 100644 index 000000000..e0fce01d0 Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-3053a-sRequired-boolean-true-state-string-changed-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-4bca8-Required-boolean-false-state-string-changed-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-4bca8-Required-boolean-false-state-string-changed-1-chromium-linux.png new file mode 100644 index 000000000..f545cad08 Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-4bca8-Required-boolean-false-state-string-changed-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-4de74-sRequired-boolean-true-state-string-invalid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-4de74-sRequired-boolean-true-state-string-invalid-1-chromium-linux.png new file mode 100644 index 000000000..c2cdef229 Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-4de74-sRequired-boolean-true-state-string-invalid-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-53679-boolean-true-validationState-string-warning-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-53679-boolean-true-validationState-string-warning-1-chromium-linux.png deleted file mode 100644 index 569797858..000000000 Binary files a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-53679-boolean-true-validationState-string-warning-1-chromium-linux.png and /dev/null differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-5f378-AsRequired-boolean-false-state-string-valid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-5f378-AsRequired-boolean-false-state-string-valid-1-chromium-linux.png new file mode 100644 index 000000000..01f6d9cc9 Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-5f378-AsRequired-boolean-false-state-string-valid-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-6f470-oolean-false-validationState-string-invalid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-6f470-oolean-false-validationState-string-invalid-1-chromium-linux.png deleted file mode 100644 index 82f6f8bbd..000000000 Binary files a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-6f470-oolean-false-validationState-string-invalid-1-chromium-linux.png and /dev/null differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-7acb3-d-boolean-true-validationState-string-valid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-7acb3-d-boolean-true-validationState-string-valid-1-chromium-linux.png deleted file mode 100644 index 93159f6a2..000000000 Binary files a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-7acb3-d-boolean-true-validationState-string-valid-1-chromium-linux.png and /dev/null differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-8f15a-oolean-false-validationState-string-invalid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-8f15a-oolean-false-validationState-string-invalid-1-chromium-linux.png deleted file mode 100644 index 82f6f8bbd..000000000 Binary files a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-8f15a-oolean-false-validationState-string-invalid-1-chromium-linux.png and /dev/null differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-967c9--boolean-false-validationState-string-valid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-967c9--boolean-false-validationState-string-valid-1-chromium-linux.png deleted file mode 100644 index c792dc8c0..000000000 Binary files a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-967c9--boolean-false-validationState-string-valid-1-chromium-linux.png and /dev/null differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-aa513-oolean-false-validationState-string-warning-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-aa513-oolean-false-validationState-string-warning-1-chromium-linux.png deleted file mode 100644 index 516db65ee..000000000 Binary files a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-aa513-oolean-false-validationState-string-warning-1-chromium-linux.png and /dev/null differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-aebbc-boolean-true-validationState-string-invalid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-aebbc-boolean-true-validationState-string-invalid-1-chromium-linux.png deleted file mode 100644 index 53efdef87..000000000 Binary files a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-aebbc-boolean-true-validationState-string-invalid-1-chromium-linux.png and /dev/null differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-cafe1-d-boolean-true-validationState-string-valid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-cafe1-d-boolean-true-validationState-string-valid-1-chromium-linux.png deleted file mode 100644 index 93159f6a2..000000000 Binary files a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-cafe1-d-boolean-true-validationState-string-valid-1-chromium-linux.png and /dev/null differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-eb421-Required-boolean-false-state-string-invalid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-eb421-Required-boolean-false-state-string-invalid-1-chromium-linux.png new file mode 100644 index 000000000..9ce6855b2 Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-eb421-Required-boolean-false-state-string-invalid-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-fdbdd-oolean-false-validationState-string-warning-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-fdbdd-oolean-false-validationState-string-warning-1-chromium-linux.png deleted file mode 100644 index 516db65ee..000000000 Binary files a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-fdbdd-oolean-false-validationState-string-warning-1-chromium-linux.png and /dev/null differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-1921b-red-boolean-false-validationState-undefined-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-renderAsRequired-boolean-false-state-undefined-1-chromium-linux.png similarity index 100% rename from src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-1921b-red-boolean-false-validationState-undefined-1-chromium-linux.png rename to src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-renderAsRequired-boolean-false-state-undefined-1-chromium-linux.png diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-7abd3-ired-boolean-true-validationState-undefined-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-renderAsRequired-boolean-true-state-undefined-1-chromium-linux.png similarity index 100% rename from src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-7abd3-ired-boolean-true-validationState-undefined-1-chromium-linux.png rename to src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-renderAsRequired-boolean-true-state-undefined-1-chromium-linux.png diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-false-state-string-changed-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-false-state-string-changed-1-chromium-linux.png new file mode 100644 index 000000000..f545cad08 Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-false-state-string-changed-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-false-state-string-invalid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-false-state-string-invalid-1-chromium-linux.png new file mode 100644 index 000000000..9ce6855b2 Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-false-state-string-invalid-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-false-state-string-valid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-false-state-string-valid-1-chromium-linux.png new file mode 100644 index 000000000..01f6d9cc9 Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-false-state-string-valid-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-false-state-string-warning-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-false-state-string-warning-1-chromium-linux.png new file mode 100644 index 000000000..7e567d3f8 Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-false-state-string-warning-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-7822c-red-boolean-false-validationState-undefined-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-false-state-undefined-1-chromium-linux.png similarity index 100% rename from src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-7822c-red-boolean-false-validationState-undefined-1-chromium-linux.png rename to src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-false-state-undefined-1-chromium-linux.png diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-true-state-string-changed-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-true-state-string-changed-1-chromium-linux.png new file mode 100644 index 000000000..e0fce01d0 Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-true-state-string-changed-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-true-state-string-invalid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-true-state-string-invalid-1-chromium-linux.png new file mode 100644 index 000000000..c2cdef229 Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-true-state-string-invalid-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-true-state-string-valid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-true-state-string-valid-1-chromium-linux.png new file mode 100644 index 000000000..001c0a7e3 Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-true-state-string-valid-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-true-state-string-warning-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-true-state-string-warning-1-chromium-linux.png new file mode 100644 index 000000000..cc3889fd0 Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-true-state-string-warning-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-7f13d-ired-boolean-true-validationState-undefined-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-true-state-undefined-1-chromium-linux.png similarity index 100% rename from src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-7f13d-ired-boolean-true-validationState-undefined-1-chromium-linux.png rename to src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-true-state-undefined-1-chromium-linux.png diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-143b9--boolean-false-validationState-string-valid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-143b9--boolean-false-validationState-string-valid-1-chromium-linux.png deleted file mode 100644 index 29d023054..000000000 Binary files a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-143b9--boolean-false-validationState-string-valid-1-chromium-linux.png and /dev/null differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-3e921-d-boolean-true-validationState-string-valid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-3e921-d-boolean-true-validationState-string-valid-1-chromium-linux.png deleted file mode 100644 index b0d1d853c..000000000 Binary files a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-3e921-d-boolean-true-validationState-string-valid-1-chromium-linux.png and /dev/null differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-4c12e--boolean-false-validationState-string-valid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-4c12e--boolean-false-validationState-string-valid-1-chromium-linux.png deleted file mode 100644 index 29d023054..000000000 Binary files a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-4c12e--boolean-false-validationState-string-valid-1-chromium-linux.png and /dev/null differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-59db8-oolean-false-validationState-string-warning-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-59db8-oolean-false-validationState-string-warning-1-chromium-linux.png deleted file mode 100644 index 902ac845a..000000000 Binary files a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-59db8-oolean-false-validationState-string-warning-1-chromium-linux.png and /dev/null differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-668ea-Required-boolean-false-state-string-invalid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-668ea-Required-boolean-false-state-string-invalid-1-chromium-linux.png new file mode 100644 index 000000000..ef4e5707d Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-668ea-Required-boolean-false-state-string-invalid-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-6db80-oolean-false-validationState-string-warning-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-6db80-oolean-false-validationState-string-warning-1-chromium-linux.png deleted file mode 100644 index 902ac845a..000000000 Binary files a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-6db80-oolean-false-validationState-string-warning-1-chromium-linux.png and /dev/null differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-7eda3-oolean-false-validationState-string-invalid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-7eda3-oolean-false-validationState-string-invalid-1-chromium-linux.png deleted file mode 100644 index 58b6ec8b8..000000000 Binary files a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-7eda3-oolean-false-validationState-string-invalid-1-chromium-linux.png and /dev/null differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-8907f-Required-boolean-false-state-string-changed-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-8907f-Required-boolean-false-state-string-changed-1-chromium-linux.png new file mode 100644 index 000000000..0592b0bc6 Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-8907f-Required-boolean-false-state-string-changed-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-903c6-sRequired-boolean-true-state-string-changed-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-903c6-sRequired-boolean-true-state-string-changed-1-chromium-linux.png new file mode 100644 index 000000000..accd953ae Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-903c6-sRequired-boolean-true-state-string-changed-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-a32f5-boolean-true-validationState-string-warning-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-a32f5-boolean-true-validationState-string-warning-1-chromium-linux.png deleted file mode 100644 index 7249f5613..000000000 Binary files a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-a32f5-boolean-true-validationState-string-warning-1-chromium-linux.png and /dev/null differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-b8490-Required-boolean-false-state-string-warning-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-b8490-Required-boolean-false-state-string-warning-1-chromium-linux.png new file mode 100644 index 000000000..7a9ccd4de Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-b8490-Required-boolean-false-state-string-warning-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-c118a-sRequired-boolean-true-state-string-invalid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-c118a-sRequired-boolean-true-state-string-invalid-1-chromium-linux.png new file mode 100644 index 000000000..56592f8d8 Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-c118a-sRequired-boolean-true-state-string-invalid-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-c299b-oolean-false-validationState-string-invalid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-c299b-oolean-false-validationState-string-invalid-1-chromium-linux.png deleted file mode 100644 index 58b6ec8b8..000000000 Binary files a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-c299b-oolean-false-validationState-string-invalid-1-chromium-linux.png and /dev/null differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-cce1a-rAsRequired-boolean-true-state-string-valid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-cce1a-rAsRequired-boolean-true-state-string-valid-1-chromium-linux.png new file mode 100644 index 000000000..d9c005bc7 Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-cce1a-rAsRequired-boolean-true-state-string-valid-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-cfcfe-d-boolean-true-validationState-string-valid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-cfcfe-d-boolean-true-validationState-string-valid-1-chromium-linux.png deleted file mode 100644 index b0d1d853c..000000000 Binary files a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-cfcfe-d-boolean-true-validationState-string-valid-1-chromium-linux.png and /dev/null differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-d5738-AsRequired-boolean-false-state-string-valid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-d5738-AsRequired-boolean-false-state-string-valid-1-chromium-linux.png new file mode 100644 index 000000000..a12495470 Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-d5738-AsRequired-boolean-false-state-string-valid-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-d8c8f-boolean-true-validationState-string-invalid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-d8c8f-boolean-true-validationState-string-invalid-1-chromium-linux.png deleted file mode 100644 index f2552a439..000000000 Binary files a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-d8c8f-boolean-true-validationState-string-invalid-1-chromium-linux.png and /dev/null differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-db84c-boolean-true-validationState-string-warning-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-db84c-boolean-true-validationState-string-warning-1-chromium-linux.png deleted file mode 100644 index 7249f5613..000000000 Binary files a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-db84c-boolean-true-validationState-string-warning-1-chromium-linux.png and /dev/null differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-dc349-sRequired-boolean-true-state-string-warning-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-dc349-sRequired-boolean-true-state-string-warning-1-chromium-linux.png new file mode 100644 index 000000000..ee90c5d36 Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-dc349-sRequired-boolean-true-state-string-warning-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-f3c63-boolean-true-validationState-string-invalid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-f3c63-boolean-true-validationState-string-invalid-1-chromium-linux.png deleted file mode 100644 index f2552a439..000000000 Binary files a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-f3c63-boolean-true-validationState-string-invalid-1-chromium-linux.png and /dev/null differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-c6af0-red-boolean-false-validationState-undefined-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-renderAsRequired-boolean-false-state-undefined-1-chromium-linux.png similarity index 100% rename from src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-c6af0-red-boolean-false-validationState-undefined-1-chromium-linux.png rename to src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-renderAsRequired-boolean-false-state-undefined-1-chromium-linux.png diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-e5548-ired-boolean-true-validationState-undefined-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-renderAsRequired-boolean-true-state-undefined-1-chromium-linux.png similarity index 100% rename from src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-e5548-ired-boolean-true-validationState-undefined-1-chromium-linux.png rename to src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-renderAsRequired-boolean-true-state-undefined-1-chromium-linux.png diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-false-state-string-changed-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-false-state-string-changed-1-chromium-linux.png new file mode 100644 index 000000000..0592b0bc6 Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-false-state-string-changed-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-false-state-string-invalid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-false-state-string-invalid-1-chromium-linux.png new file mode 100644 index 000000000..ef4e5707d Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-false-state-string-invalid-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-false-state-string-valid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-false-state-string-valid-1-chromium-linux.png new file mode 100644 index 000000000..a12495470 Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-false-state-string-valid-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-false-state-string-warning-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-false-state-string-warning-1-chromium-linux.png new file mode 100644 index 000000000..7a9ccd4de Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-false-state-string-warning-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-d72f4-red-boolean-false-validationState-undefined-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-false-state-undefined-1-chromium-linux.png similarity index 100% rename from src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-d72f4-red-boolean-false-validationState-undefined-1-chromium-linux.png rename to src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-false-state-undefined-1-chromium-linux.png diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-true-state-string-changed-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-true-state-string-changed-1-chromium-linux.png new file mode 100644 index 000000000..accd953ae Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-true-state-string-changed-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-true-state-string-invalid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-true-state-string-invalid-1-chromium-linux.png new file mode 100644 index 000000000..56592f8d8 Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-true-state-string-invalid-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-true-state-string-valid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-true-state-string-valid-1-chromium-linux.png new file mode 100644 index 000000000..d9c005bc7 Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-true-state-string-valid-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-true-state-string-warning-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-true-state-string-warning-1-chromium-linux.png new file mode 100644 index 000000000..ee90c5d36 Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-true-state-string-warning-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-true-validationState-undefined-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-true-state-undefined-1-chromium-linux.png similarity index 100% rename from src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-true-validationState-undefined-1-chromium-linux.png rename to src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-true-state-undefined-1-chromium-linux.png diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-3802d-d-boolean-true-validationState-string-valid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-3802d-d-boolean-true-validationState-string-valid-1-chromium-linux.png deleted file mode 100644 index 29d023054..000000000 Binary files a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-3802d-d-boolean-true-validationState-string-valid-1-chromium-linux.png and /dev/null differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-43fbf--boolean-false-validationState-string-valid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-43fbf--boolean-false-validationState-string-valid-1-chromium-linux.png deleted file mode 100644 index c792dc8c0..000000000 Binary files a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-43fbf--boolean-false-validationState-string-valid-1-chromium-linux.png and /dev/null differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-a7f59-oolean-false-validationState-string-invalid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-a7f59-oolean-false-validationState-string-invalid-1-chromium-linux.png deleted file mode 100644 index 82f6f8bbd..000000000 Binary files a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-a7f59-oolean-false-validationState-string-invalid-1-chromium-linux.png and /dev/null differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-a874a-oolean-false-validationState-string-warning-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-a874a-oolean-false-validationState-string-warning-1-chromium-linux.png deleted file mode 100644 index 516db65ee..000000000 Binary files a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-a874a-oolean-false-validationState-string-warning-1-chromium-linux.png and /dev/null differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-b4487-boolean-true-validationState-string-invalid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-b4487-boolean-true-validationState-string-invalid-1-chromium-linux.png deleted file mode 100644 index 58b6ec8b8..000000000 Binary files a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-b4487-boolean-true-validationState-string-invalid-1-chromium-linux.png and /dev/null differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-f80fd-boolean-true-validationState-string-warning-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-f80fd-boolean-true-validationState-string-warning-1-chromium-linux.png deleted file mode 100644 index 902ac845a..000000000 Binary files a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-f80fd-boolean-true-validationState-string-warning-1-chromium-linux.png and /dev/null differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-false-checked-boolean-false-state-string-changed-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-false-checked-boolean-false-state-string-changed-1-chromium-linux.png new file mode 100644 index 000000000..f545cad08 Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-false-checked-boolean-false-state-string-changed-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-false-checked-boolean-false-state-string-invalid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-false-checked-boolean-false-state-string-invalid-1-chromium-linux.png new file mode 100644 index 000000000..9ce6855b2 Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-false-checked-boolean-false-state-string-invalid-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-false-checked-boolean-false-state-string-valid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-false-checked-boolean-false-state-string-valid-1-chromium-linux.png new file mode 100644 index 000000000..01f6d9cc9 Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-false-checked-boolean-false-state-string-valid-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-false-checked-boolean-false-state-string-warning-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-false-checked-boolean-false-state-string-warning-1-chromium-linux.png new file mode 100644 index 000000000..7e567d3f8 Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-false-checked-boolean-false-state-string-warning-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-215d0-ked-boolean-false-validationState-undefined-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-false-checked-boolean-false-state-undefined-1-chromium-linux.png similarity index 100% rename from src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-215d0-ked-boolean-false-validationState-undefined-1-chromium-linux.png rename to src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-false-checked-boolean-false-state-undefined-1-chromium-linux.png diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-false-checked-boolean-true-state-string-changed-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-false-checked-boolean-true-state-string-changed-1-chromium-linux.png new file mode 100644 index 000000000..0592b0bc6 Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-false-checked-boolean-true-state-string-changed-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-false-checked-boolean-true-state-string-invalid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-false-checked-boolean-true-state-string-invalid-1-chromium-linux.png new file mode 100644 index 000000000..ef4e5707d Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-false-checked-boolean-true-state-string-invalid-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-false-checked-boolean-true-state-string-valid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-false-checked-boolean-true-state-string-valid-1-chromium-linux.png new file mode 100644 index 000000000..a12495470 Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-false-checked-boolean-true-state-string-valid-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-false-checked-boolean-true-state-string-warning-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-false-checked-boolean-true-state-string-warning-1-chromium-linux.png new file mode 100644 index 000000000..7a9ccd4de Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-false-checked-boolean-true-state-string-warning-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-ed561-cked-boolean-true-validationState-undefined-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-false-checked-boolean-true-state-undefined-1-chromium-linux.png similarity index 100% rename from src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-ed561-cked-boolean-true-validationState-undefined-1-chromium-linux.png rename to src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-false-checked-boolean-true-state-undefined-1-chromium-linux.png diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-29bef-d-boolean-true-validationState-string-valid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-29bef-d-boolean-true-validationState-string-valid-1-chromium-linux.png deleted file mode 100644 index 4484814e0..000000000 Binary files a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-29bef-d-boolean-true-validationState-string-valid-1-chromium-linux.png and /dev/null differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-2f43d-boolean-true-validationState-string-warning-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-2f43d-boolean-true-validationState-string-warning-1-chromium-linux.png deleted file mode 100644 index 9c14652d9..000000000 Binary files a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-2f43d-boolean-true-validationState-string-warning-1-chromium-linux.png and /dev/null differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-4123f--boolean-false-validationState-string-valid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-4123f--boolean-false-validationState-string-valid-1-chromium-linux.png deleted file mode 100644 index 139bf4d37..000000000 Binary files a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-4123f--boolean-false-validationState-string-valid-1-chromium-linux.png and /dev/null differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-e78cd-boolean-true-validationState-string-invalid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-e78cd-boolean-true-validationState-string-invalid-1-chromium-linux.png deleted file mode 100644 index 8a24be218..000000000 Binary files a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-e78cd-boolean-true-validationState-string-invalid-1-chromium-linux.png and /dev/null differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-f350b-oolean-false-validationState-string-invalid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-f350b-oolean-false-validationState-string-invalid-1-chromium-linux.png deleted file mode 100644 index 33c1d47f5..000000000 Binary files a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-f350b-oolean-false-validationState-string-invalid-1-chromium-linux.png and /dev/null differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-ff2f5-oolean-false-validationState-string-warning-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-ff2f5-oolean-false-validationState-string-warning-1-chromium-linux.png deleted file mode 100644 index 818e35aec..000000000 Binary files a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-ff2f5-oolean-false-validationState-string-warning-1-chromium-linux.png and /dev/null differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-false-state-string-changed-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-false-state-string-changed-1-chromium-linux.png new file mode 100644 index 000000000..0312d6a06 Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-false-state-string-changed-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-false-state-string-invalid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-false-state-string-invalid-1-chromium-linux.png new file mode 100644 index 000000000..aa6057b12 Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-false-state-string-invalid-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-false-state-string-valid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-false-state-string-valid-1-chromium-linux.png new file mode 100644 index 000000000..b9c883a55 Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-false-state-string-valid-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-false-state-string-warning-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-false-state-string-warning-1-chromium-linux.png new file mode 100644 index 000000000..54af96cf3 Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-false-state-string-warning-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-e8026-ked-boolean-false-validationState-undefined-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-false-state-undefined-1-chromium-linux.png similarity index 100% rename from src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-e8026-ked-boolean-false-validationState-undefined-1-chromium-linux.png rename to src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-false-state-undefined-1-chromium-linux.png diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-true-state-string-changed-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-true-state-string-changed-1-chromium-linux.png new file mode 100644 index 000000000..d90ef1f6f Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-true-state-string-changed-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-true-state-string-invalid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-true-state-string-invalid-1-chromium-linux.png new file mode 100644 index 000000000..17522d5c4 Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-true-state-string-invalid-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-true-state-string-valid-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-true-state-string-valid-1-chromium-linux.png new file mode 100644 index 000000000..93bbcb6e3 Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-true-state-string-valid-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-true-state-string-warning-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-true-state-string-warning-1-chromium-linux.png new file mode 100644 index 000000000..8f43c6933 Binary files /dev/null and b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-true-state-string-warning-1-chromium-linux.png differ diff --git a/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-true-validationState-undefined-1-chromium-linux.png b/src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-true-state-undefined-1-chromium-linux.png similarity index 100% rename from src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-true-validationState-undefined-1-chromium-linux.png rename to src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-true-state-undefined-1-chromium-linux.png diff --git a/src/components/FileInputField/FileInputField.module.scss b/src/components/FileInputField/FileInputField.module.scss index 0ba3f4956..9bfdeb5a6 100644 --- a/src/components/FileInputField/FileInputField.module.scss +++ b/src/components/FileInputField/FileInputField.module.scss @@ -100,16 +100,20 @@ cursor: inherit; } + .isRootStateChanged { + @include variants.state(changed); + } + .isRootStateInvalid { - @include variants.validation(invalid); + @include variants.state(invalid); } .isRootStateValid { - @include variants.validation(valid); + @include variants.state(valid); } .isRootStateWarning { - @include variants.validation(warning); + @include variants.state(warning); } // Invisible label diff --git a/src/components/FileInputField/FileInputField.tsx b/src/components/FileInputField/FileInputField.tsx index bb7dbe69f..61dc9064c 100644 --- a/src/components/FileInputField/FileInputField.tsx +++ b/src/components/FileInputField/FileInputField.tsx @@ -15,7 +15,7 @@ import { classNames } from '../../helpers/classNames'; import { transferProps } from '../../helpers/transferProps'; import { TranslationsContext } from '../../providers/translations'; import { getRootSizeClassName } from '../_helpers/getRootSizeClassName'; -import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName'; +import { getRootStateClassName } from '../_helpers/getRootStateClassName'; import { resolveContextOrProp } from '../_helpers/resolveContextOrProp'; import { InputGroupContext } from '../InputGroup/InputGroupContext'; import { Text } from '../Text'; @@ -42,7 +42,7 @@ export const FileInputField = React.forwardRef { @@ -170,7 +170,7 @@ export const FileInputField = React.forwardRef | DragEvent | Event | null; @@ -87,9 +87,10 @@ export type FileInputFieldProps = Omit, 'i */ size?: Size; /** - * Alter the field to provide feedback based on validation result. + * Alter the field to reflect the state of its data, e.g. a validation result or a change + * against the saved value. */ - validationState?: ValidationState; + state?: State; /** * Validation message to be displayed. * diff --git a/src/components/FileInputField/README.md b/src/components/FileInputField/README.md index fee69f31f..f44e4aadc 100644 --- a/src/components/FileInputField/README.md +++ b/src/components/FileInputField/README.md @@ -166,21 +166,21 @@ have. id="my-file-valid" label="Attachment" onFilesChanged={() => {}} - validationState="valid" + state="valid" validationText="Looks good!" /> {}} - validationState="invalid" + state="invalid" validationText="Your file is too big. Please select something smaller." /> {}} - validationState="warning" + state="warning" validationText={` You selected more than 10 files. It may take some time before we process them. @@ -188,6 +188,23 @@ have. /> ``` +### Changed State + +Changed state highlights fields whose value differs from the saved one, so users +can review their edits before saving. + +A field shows one state at a time. When a changed value is also invalid, it's +up to you to pick the state that matters more to the user. + +```docoff-react-preview + {}} + state="changed" +/> +``` + ### Disabled State It's possible to disable the whole input. diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx b/src/components/FileInputField/__tests__/FileInputField.spec.tsx index 27f9440df..8a62a79c6 100644 --- a/src/components/FileInputField/__tests__/FileInputField.spec.tsx +++ b/src/components/FileInputField/__tests__/FileInputField.spec.tsx @@ -13,7 +13,7 @@ test.describe('FileInputField', () => { ...propTests.defaultComponentPropTest, ...mixPropTests([ propTests.disabledPropTest, - propTests.validationStatePropTest, + propTests.statePropTest, ]), ...fileSelectedPropTest, ...mixPropTests([ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-false-state-string-changed-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-false-state-string-changed-1-chromium-linux.png new file mode 100644 index 000000000..8e999c157 Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-false-state-string-changed-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-false-state-string-invalid-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-false-state-string-invalid-1-chromium-linux.png new file mode 100644 index 000000000..0a905ed49 Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-false-state-string-invalid-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-false-state-string-valid-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-false-state-string-valid-1-chromium-linux.png new file mode 100644 index 000000000..b6fcaf6c8 Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-false-state-string-valid-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-false-state-string-warning-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-false-state-string-warning-1-chromium-linux.png new file mode 100644 index 000000000..58b8ce9be Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-false-state-string-warning-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-false-validationState-undefined-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-false-state-undefined-1-chromium-linux.png similarity index 100% rename from src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-false-validationState-undefined-1-chromium-linux.png rename to src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-false-state-undefined-1-chromium-linux.png diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-false-validationState-string-invalid-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-false-validationState-string-invalid-1-chromium-linux.png deleted file mode 100644 index 5cc4a78a5..000000000 Binary files a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-false-validationState-string-invalid-1-chromium-linux.png and /dev/null differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-false-validationState-string-valid-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-false-validationState-string-valid-1-chromium-linux.png deleted file mode 100644 index 2c3f3faaf..000000000 Binary files a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-false-validationState-string-valid-1-chromium-linux.png and /dev/null differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-false-validationState-string-warning-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-false-validationState-string-warning-1-chromium-linux.png deleted file mode 100644 index 21f238a6c..000000000 Binary files a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-false-validationState-string-warning-1-chromium-linux.png and /dev/null differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-state-string-changed-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-state-string-changed-1-chromium-linux.png new file mode 100644 index 000000000..a80c83eff Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-state-string-changed-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-state-string-invalid-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-state-string-invalid-1-chromium-linux.png new file mode 100644 index 000000000..2e555cf32 Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-state-string-invalid-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-state-string-valid-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-state-string-valid-1-chromium-linux.png new file mode 100644 index 000000000..bce445118 Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-state-string-valid-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-state-string-warning-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-state-string-warning-1-chromium-linux.png new file mode 100644 index 000000000..758b81d13 Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-state-string-warning-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-validationState-undefined-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-state-undefined-1-chromium-linux.png similarity index 100% rename from src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-validationState-undefined-1-chromium-linux.png rename to src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-state-undefined-1-chromium-linux.png diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-validationState-string-invalid-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-validationState-string-invalid-1-chromium-linux.png deleted file mode 100644 index 9a0d44b57..000000000 Binary files a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-validationState-string-invalid-1-chromium-linux.png and /dev/null differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-validationState-string-valid-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-validationState-string-valid-1-chromium-linux.png deleted file mode 100644 index 216b40457..000000000 Binary files a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-validationState-string-valid-1-chromium-linux.png and /dev/null differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-validationState-string-warning-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-validationState-string-warning-1-chromium-linux.png deleted file mode 100644 index e7fb77aa3..000000000 Binary files a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-validationState-string-warning-1-chromium-linux.png and /dev/null differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-state-string-changed-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-state-string-changed-1-chromium-linux.png new file mode 100644 index 000000000..2b52e92ff Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-state-string-changed-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-state-string-invalid-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-state-string-invalid-1-chromium-linux.png new file mode 100644 index 000000000..a3318ec12 Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-state-string-invalid-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-state-string-valid-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-state-string-valid-1-chromium-linux.png new file mode 100644 index 000000000..2f6dc2ee3 Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-state-string-valid-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-state-string-warning-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-state-string-warning-1-chromium-linux.png new file mode 100644 index 000000000..9585d4d10 Binary files /dev/null and b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-state-string-warning-1-chromium-linux.png differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-validationState-undefined-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-state-undefined-1-chromium-linux.png similarity index 100% rename from src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-validationState-undefined-1-chromium-linux.png rename to src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-state-undefined-1-chromium-linux.png diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-validationState-string-invalid-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-validationState-string-invalid-1-chromium-linux.png deleted file mode 100644 index 0822b7e8c..000000000 Binary files a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-validationState-string-invalid-1-chromium-linux.png and /dev/null differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-validationState-string-valid-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-validationState-string-valid-1-chromium-linux.png deleted file mode 100644 index cae9911cb..000000000 Binary files a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-validationState-string-valid-1-chromium-linux.png and /dev/null differ diff --git a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-validationState-string-warning-1-chromium-linux.png b/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-validationState-string-warning-1-chromium-linux.png deleted file mode 100644 index 58114b207..000000000 Binary files a/src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-validationState-string-warning-1-chromium-linux.png and /dev/null differ diff --git a/src/components/FileInputField/__tests__/_propTests/fileSelectedPropTest.ts b/src/components/FileInputField/__tests__/_propTests/fileSelectedPropTest.ts index 77d720e5d..a41401ccb 100644 --- a/src/components/FileInputField/__tests__/_propTests/fileSelectedPropTest.ts +++ b/src/components/FileInputField/__tests__/_propTests/fileSelectedPropTest.ts @@ -22,7 +22,7 @@ export const fileSelectedPropTest: PropTests = [ onBeforeSnapshot, props, })), - ...propTests.validationStatePropTest.map(({ + ...propTests.statePropTest.map(({ name, props, }) => ({ diff --git a/src/components/FormLayout/FormLayoutCustomField.module.scss b/src/components/FormLayout/FormLayoutCustomField.module.scss index e41383e57..2c2d4f9da 100644 --- a/src/components/FormLayout/FormLayoutCustomField.module.scss +++ b/src/components/FormLayout/FormLayoutCustomField.module.scss @@ -19,16 +19,20 @@ } // States + .isRootStateChanged { + @include variants.state(changed); + } + .isRootStateInvalid { - @include variants.validation(invalid); + @include variants.state(invalid); } .isRootStateValid { - @include variants.validation(valid); + @include variants.state(valid); } .isRootStateWarning { - @include variants.validation(warning); + @include variants.state(warning); } // Layouts diff --git a/src/components/FormLayout/FormLayoutCustomField.tsx b/src/components/FormLayout/FormLayoutCustomField.tsx index 75e918776..aa01340f4 100644 --- a/src/components/FormLayout/FormLayoutCustomField.tsx +++ b/src/components/FormLayout/FormLayoutCustomField.tsx @@ -3,7 +3,7 @@ import { withGlobalProps } from '../../providers/globalProps'; import { classNames } from '../../helpers/classNames/classNames'; import { transferProps } from '../../helpers/transferProps'; import { getRootSizeClassName } from '../_helpers/getRootSizeClassName'; -import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName'; +import { getRootStateClassName } from '../_helpers/getRootStateClassName'; import { isChildrenEmpty } from '../../helpers/isChildrenEmpty/isChildrenEmpty'; import { FormLayoutContext } from './FormLayoutContext'; import { FormLayoutCustomFieldContext } from './FormLayoutCustomFieldContext'; @@ -46,7 +46,7 @@ export const FormLayoutCustomField: React.FunctionComponent { const context = useContext(FormLayoutContext); @@ -65,7 +65,7 @@ export const FormLayoutCustomField: React.FunctionComponent diff --git a/src/components/FormLayout/FormLayoutCustomField.types.ts b/src/components/FormLayout/FormLayoutCustomField.types.ts index 84532500f..011df5060 100644 --- a/src/components/FormLayout/FormLayoutCustomField.types.ts +++ b/src/components/FormLayout/FormLayoutCustomField.types.ts @@ -4,7 +4,7 @@ import type { } from 'react'; import type { Size, - ValidationState, + State, } from '../../types'; /** @@ -48,9 +48,10 @@ export type FormLayoutCustomFieldProps = HTMLAttributes & { */ required?: boolean; /** - * Alter the field to provide feedback based on validation result. + * Alter the field to reflect the state of its data, e.g. a validation result or a change + * against the saved value. */ - validationState?: ValidationState; + state?: State; }; /** diff --git a/src/components/FormLayout/README.md b/src/components/FormLayout/README.md index ba00a03d8..b2db38071 100644 --- a/src/components/FormLayout/README.md +++ b/src/components/FormLayout/README.md @@ -119,7 +119,7 @@ React.createElement(() => { @@ -383,7 +383,7 @@ provide labels with optional feedback style. Custom field content diff --git a/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx b/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx index 106afb734..607be48dd 100644 --- a/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx +++ b/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx @@ -2,18 +2,18 @@ import { expect, test, } from '../../../../tests/playwright'; -import { customFieldValidationStatesPropTest } from './_propTests/customFieldTests/customFieldValidationStatesPropTest'; +import { customFieldStatesPropTest } from './_propTests/customFieldTests/customFieldStatesPropTest'; import { customFieldLabelAlignmentPropTest } from './_propTests/customFieldTests/customFieldLabelAlignmentPropTest'; import { customFieldRequiredPropTest } from './_propTests/customFieldTests/customFieldRequiredPropTest'; -import { customFieldValidationStatesDisabledPropTest } from './_propTests/customFieldTests/customFieldValidationStatesDisabledPropTest'; +import { customFieldStatesDisabledPropTest } from './_propTests/customFieldTests/customFieldStatesDisabledPropTest'; test.describe('FormLayoutCustomField', () => { test.describe('base', () => { test.describe('visual', () => { [ ...customFieldLabelAlignmentPropTest, - ...customFieldValidationStatesPropTest, - ...customFieldValidationStatesDisabledPropTest, + ...customFieldStatesPropTest, + ...customFieldStatesDisabledPropTest, ...customFieldRequiredPropTest, ].forEach(({ name, diff --git a/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-state-string-changed-1-chromium-linux.png b/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-state-string-changed-1-chromium-linux.png new file mode 100644 index 000000000..e819905ff Binary files /dev/null and b/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-state-string-changed-1-chromium-linux.png differ diff --git a/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-state-string-changed-disabled-boolean-true-1-chromium-linux.png b/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-state-string-changed-disabled-boolean-true-1-chromium-linux.png new file mode 100644 index 000000000..e819905ff Binary files /dev/null and b/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-state-string-changed-disabled-boolean-true-1-chromium-linux.png differ diff --git a/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-state-string-invalid-1-chromium-linux.png b/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-state-string-invalid-1-chromium-linux.png new file mode 100644 index 000000000..166ee71cf Binary files /dev/null and b/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-state-string-invalid-1-chromium-linux.png differ diff --git a/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-state-string-invalid-disabled-boolean-true-1-chromium-linux.png b/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-state-string-invalid-disabled-boolean-true-1-chromium-linux.png new file mode 100644 index 000000000..166ee71cf Binary files /dev/null and b/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-state-string-invalid-disabled-boolean-true-1-chromium-linux.png differ diff --git a/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-state-string-valid-1-chromium-linux.png b/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-state-string-valid-1-chromium-linux.png new file mode 100644 index 000000000..7215b4eca Binary files /dev/null and b/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-state-string-valid-1-chromium-linux.png differ diff --git a/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-state-string-valid-disabled-boolean-true-1-chromium-linux.png b/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-state-string-valid-disabled-boolean-true-1-chromium-linux.png new file mode 100644 index 000000000..7215b4eca Binary files /dev/null and b/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-state-string-valid-disabled-boolean-true-1-chromium-linux.png differ diff --git a/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-state-string-warning-1-chromium-linux.png b/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-state-string-warning-1-chromium-linux.png new file mode 100644 index 000000000..9c3a6703e Binary files /dev/null and b/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-state-string-warning-1-chromium-linux.png differ diff --git a/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-state-string-warning-disabled-boolean-true-1-chromium-linux.png b/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-state-string-warning-disabled-boolean-true-1-chromium-linux.png new file mode 100644 index 000000000..9c3a6703e Binary files /dev/null and b/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-state-string-warning-disabled-boolean-true-1-chromium-linux.png differ diff --git a/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-validationState-undefined-disabled-boolean-true-1-chromium-linux.png b/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-state-undefined-disabled-boolean-true-1-chromium-linux.png similarity index 100% rename from src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-validationState-undefined-disabled-boolean-true-1-chromium-linux.png rename to src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-state-undefined-disabled-boolean-true-1-chromium-linux.png diff --git a/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-validationState-string-invalid-1-chromium-linux.png b/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-validationState-string-invalid-1-chromium-linux.png deleted file mode 100644 index bf349f4de..000000000 Binary files a/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-validationState-string-invalid-1-chromium-linux.png and /dev/null differ diff --git a/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-validationState-string-invalid-disabled-boolean-true-1-chromium-linux.png b/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-validationState-string-invalid-disabled-boolean-true-1-chromium-linux.png deleted file mode 100644 index 1a1d744a2..000000000 Binary files a/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-validationState-string-invalid-disabled-boolean-true-1-chromium-linux.png and /dev/null differ diff --git a/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-validationState-string-valid-1-chromium-linux.png b/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-validationState-string-valid-1-chromium-linux.png deleted file mode 100644 index 3c903d6d7..000000000 Binary files a/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-validationState-string-valid-1-chromium-linux.png and /dev/null differ diff --git a/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-validationState-string-valid-disabled-boolean-true-1-chromium-linux.png b/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-validationState-string-valid-disabled-boolean-true-1-chromium-linux.png deleted file mode 100644 index 3c903d6d7..000000000 Binary files a/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-validationState-string-valid-disabled-boolean-true-1-chromium-linux.png and /dev/null differ diff --git a/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-validationState-string-warning-1-chromium-linux.png b/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-validationState-string-warning-1-chromium-linux.png deleted file mode 100644 index 4a390acef..000000000 Binary files a/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-validationState-string-warning-1-chromium-linux.png and /dev/null differ diff --git a/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-validationState-string-warning-disabled-boolean-true-1-chromium-linux.png b/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-validationState-string-warning-disabled-boolean-true-1-chromium-linux.png deleted file mode 100644 index 4a390acef..000000000 Binary files a/src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-validationState-string-warning-disabled-boolean-true-1-chromium-linux.png and /dev/null differ diff --git a/src/components/FormLayout/__tests__/_propTests/customFieldTests/customFieldValidationStatesDisabledPropTest.ts b/src/components/FormLayout/__tests__/_propTests/customFieldTests/customFieldStatesDisabledPropTest.ts similarity index 60% rename from src/components/FormLayout/__tests__/_propTests/customFieldTests/customFieldValidationStatesDisabledPropTest.ts rename to src/components/FormLayout/__tests__/_propTests/customFieldTests/customFieldStatesDisabledPropTest.ts index fdf22d9b9..2694252d2 100644 --- a/src/components/FormLayout/__tests__/_propTests/customFieldTests/customFieldValidationStatesDisabledPropTest.ts +++ b/src/components/FormLayout/__tests__/_propTests/customFieldTests/customFieldStatesDisabledPropTest.ts @@ -1,13 +1,13 @@ -import { validationStatePropTest } from '../../../../../../tests/playwright/propTests/validationStatePropTest'; +import { statePropTest } from '../../../../../../tests/playwright/propTests/statePropTest'; import type { FormLayoutCustomFieldProps } from '../../..'; import type { CustomFieldTestsType } from './types'; -export const customFieldValidationStatesDisabledPropTest: CustomFieldTestsType = validationStatePropTest +export const customFieldStatesDisabledPropTest: CustomFieldTestsType = statePropTest .map((propTest) => ({ customFieldLayoutProps: { disabled: true, label: 'Form layout custom field label', - ...propTest.props as Pick, + ...propTest.props as Pick, }, customFieldProps: { label: 'Custom field label', diff --git a/src/components/FormLayout/__tests__/_propTests/customFieldTests/customFieldValidationStatesPropTest.ts b/src/components/FormLayout/__tests__/_propTests/customFieldTests/customFieldStatesPropTest.ts similarity index 53% rename from src/components/FormLayout/__tests__/_propTests/customFieldTests/customFieldValidationStatesPropTest.ts rename to src/components/FormLayout/__tests__/_propTests/customFieldTests/customFieldStatesPropTest.ts index bb04ef21a..54af01394 100644 --- a/src/components/FormLayout/__tests__/_propTests/customFieldTests/customFieldValidationStatesPropTest.ts +++ b/src/components/FormLayout/__tests__/_propTests/customFieldTests/customFieldStatesPropTest.ts @@ -1,13 +1,13 @@ -import { validationStatePropTest } from '../../../../../../tests/playwright/propTests/validationStatePropTest'; +import { statePropTest } from '../../../../../../tests/playwright/propTests/statePropTest'; import type { FormLayoutCustomFieldProps } from '../../..'; import type { CustomFieldTestsType } from './types'; -export const customFieldValidationStatesPropTest: CustomFieldTestsType = validationStatePropTest - .filter((test) => test.props.validationState !== undefined) +export const customFieldStatesPropTest: CustomFieldTestsType = statePropTest + .filter((test) => test.props.state !== undefined) .map((propTest) => ({ customFieldLayoutProps: { label: 'Form layout custom field label', - ...propTest.props as Pick, + ...propTest.props as Pick, }, customFieldProps: { label: 'Custom field label', diff --git a/src/components/InputGroup/InputGroup.module.scss b/src/components/InputGroup/InputGroup.module.scss index 5911714f6..491f78f4c 100644 --- a/src/components/InputGroup/InputGroup.module.scss +++ b/src/components/InputGroup/InputGroup.module.scss @@ -50,16 +50,20 @@ } // States + .isRootStateChanged { + @include variants.state(changed); + } + .isRootStateInvalid { - @include variants.validation(invalid); + @include variants.state(invalid); } .isRootStateValid { - @include variants.validation(valid); + @include variants.state(valid); } .isRootStateWarning { - @include variants.validation(warning); + @include variants.state(warning); } // Layouts diff --git a/src/components/InputGroup/InputGroup.tsx b/src/components/InputGroup/InputGroup.tsx index ce666d915..dd94e0948 100644 --- a/src/components/InputGroup/InputGroup.tsx +++ b/src/components/InputGroup/InputGroup.tsx @@ -10,16 +10,18 @@ import { withGlobalProps } from '../../providers/globalProps'; import { classNames } from '../../helpers/classNames/classNames'; import { transferProps } from '../../helpers/transferProps'; import { getRootSizeClassName } from '../_helpers/getRootSizeClassName'; -import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName'; +import { getRootStateClassName } from '../_helpers/getRootStateClassName'; import { isChildrenEmpty } from '../../helpers/isChildrenEmpty/isChildrenEmpty'; import { resolveContextOrProp } from '../_helpers/resolveContextOrProp'; import { FormLayoutContext } from '../FormLayout/FormLayoutContext'; import { Text } from '../Text'; -import type { ValidationState } from '../../types'; +import type { State } from '../../types'; import { InputGroupContext } from './InputGroupContext'; import styles from './InputGroup.module.scss'; import type { InputGroupProps } from './InputGroup.types'; +const statePriority: State[] = ['invalid', 'warning', 'changed', 'valid']; + export const InputGroup: React.FunctionComponent = ({ children, disabled = false, @@ -44,17 +46,9 @@ export const InputGroup: React.FunctionComponent = ({ return null; } - const validationState = React.Children.toArray(children).reduce( - (state, child) => { - const childValidationState = (child as ReactElement<{ validationState?: ValidationState }>).props.validationState; - - if (state === 'invalid' || (state === 'warning' && childValidationState === 'valid')) { - return state; - } - return childValidationState ?? state; - }, - undefined, - ); + const childStates = React.Children.toArray(children) + .map((child) => (child as ReactElement<{ state?: State }>).props.state); + const state = statePriority.find((priorityState) => childStates.includes(priorityState)); return (
= ({ disabled && styles.isRootDisabled, required && styles.isRootRequired, getRootSizeClassName(styles, size), - getRootValidationStateClassName(styles, validationState), + getRootStateClassName(styles, state), )} disabled={disabled} id={id} diff --git a/src/components/InputGroup/README.md b/src/components/InputGroup/README.md index 0b5be320c..5d3b27bbd 100644 --- a/src/components/InputGroup/README.md +++ b/src/components/InputGroup/README.md @@ -222,7 +222,7 @@ Disables all fields and buttons inside the group. ### Validation States Validation states visually present the result of validation of the grouped -inputs. Input group's validation state is taken from its child inputs. You +inputs. Input group's state is taken from its child inputs. You should always **provide validation messages for states other than valid** directly through `validationTexts` prop so users know what happened and what action they should take or what options they have. @@ -230,7 +230,7 @@ action they should take or what options they have. These messages are not semantically tied to the `children` elements, the connection should be expressed in textual form in the actual message. The individual `children` elements must not show any `validationText`, they only -show their respective `validationState`. +show their respective `state`. ⚠️ Validation messages passed to input elements' `validationText` prop are ignored within InputGroup. @@ -252,13 +252,13 @@ for the underlying `
` element. label="First name" placeholder="Eg. John" required - validationState="invalid" + state="invalid" />