From e27bd0e6b2ed8bee0d83b3047d970f8bd1216a06 Mon Sep 17 00:00:00 2001 From: Adam Kudrna Date: Fri, 9 Oct 2026 16:47:35 +0000 Subject: [PATCH 1/2] Introduce `State` collection and rename `validationState` prop to `state` (#723) --- .claude/rules/frontend.md | 2 +- .../CheckboxField/CheckboxField.module.scss | 4 ++ .../CheckboxField/CheckboxField.tsx | 6 +- .../CheckboxField/CheckboxField.types.ts | 7 ++- src/components/CheckboxField/README.md | 28 ++++++++- .../__tests__/CheckboxField.spec.tsx | 6 +- ...state-string-warning-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 1577 bytes ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 1425 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...state-string-invalid-1-chromium-linux.png} | Bin ...alse-state-undefined-1-chromium-linux.png} | Bin ...true-state-undefined-1-chromium-linux.png} | Bin ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 1425 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...alse-state-undefined-1-chromium-linux.png} | Bin ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 1577 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...true-state-undefined-1-chromium-linux.png} | Bin ...state-string-invalid-1-chromium-linux.png} | Bin ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 1546 bytes ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 1698 bytes ...state-string-warning-1-chromium-linux.png} | Bin ...state-string-invalid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...alse-state-undefined-1-chromium-linux.png} | Bin ...true-state-undefined-1-chromium-linux.png} | Bin ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 1546 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...alse-state-undefined-1-chromium-linux.png} | Bin ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 1698 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...true-state-undefined-1-chromium-linux.png} | Bin ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 1425 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...alse-state-undefined-1-chromium-linux.png} | Bin ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 1546 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...true-state-undefined-1-chromium-linux.png} | Bin ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 1409 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...alse-state-undefined-1-chromium-linux.png} | Bin ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 1522 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...true-state-undefined-1-chromium-linux.png} | Bin .../FileInputField/FileInputField.module.scss | 4 ++ .../FileInputField/FileInputField.tsx | 6 +- .../FileInputField/FileInputField.types.ts | 7 ++- src/components/FileInputField/README.md | 23 ++++++- .../__tests__/FileInputField.spec.tsx | 2 +- ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 4935 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...alse-state-undefined-1-chromium-linux.png} | Bin ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 4516 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...true-state-undefined-1-chromium-linux.png} | Bin ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 3552 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...t-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...ject-state-undefined-1-chromium-linux.png} | Bin .../_propTests/fileSelectedPropTest.ts | 2 +- .../FormLayoutCustomField.module.scss | 4 ++ .../FormLayout/FormLayoutCustomField.tsx | 6 +- .../FormLayout/FormLayoutCustomField.types.ts | 7 ++- src/components/FormLayout/README.md | 4 +- .../__tests__/FormLayoutCustomField.spec.tsx | 8 +-- ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 6585 bytes ...disabled-boolean-true-1-chromium-linux.png | Bin 0 -> 6585 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...isabled-boolean-true-1-chromium-linux.png} | Bin ...l-state-string-valid-1-chromium-linux.png} | Bin ...isabled-boolean-true-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...isabled-boolean-true-1-chromium-linux.png} | Bin ...isabled-boolean-true-1-chromium-linux.png} | Bin ...s => customFieldStatesDisabledPropTest.ts} | 6 +- ...opTest.ts => customFieldStatesPropTest.ts} | 8 +-- .../InputGroup/InputGroup.module.scss | 4 ++ src/components/InputGroup/InputGroup.tsx | 22 +++---- src/components/InputGroup/README.md | 42 ++++++++++--- .../InputGroup/__tests__/InputGroup.spec.tsx | 6 +- ...nputProps-state-valid-1-chromium-linux.png | Bin 0 -> 7844 bytes ...utProps-state-warning-1-chromium-linux.png | Bin 0 -> 7848 bytes ...utProps-state-changed-1-chromium-linux.png | Bin 0 -> 7858 bytes ...utProps-state-changed-1-chromium-linux.png | Bin 0 -> 7852 bytes ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 7813 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...l-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...sual-state-undefined-1-chromium-linux.png} | Bin .../InputGroup/__tests__/InputGroup.story.tsx | 8 ++- .../_propTests/mixedStatesPropTest.ts | 19 ++++++ .../__tests__/_propTests/statePropTest.ts | 16 +++++ .../_propTests/validationStatePropTest.ts | 16 ----- src/components/Radio/README.md | 43 ++++++++++++- src/components/Radio/Radio.module.scss | 4 ++ src/components/Radio/Radio.tsx | 6 +- src/components/Radio/Radio.types.ts | 7 ++- src/components/Radio/__tests__/Radio.spec.tsx | 8 +-- ...ationText-node-normal-1-chromium-linux.png | Bin 0 -> 6209 bytes ...ationText-string-long-1-chromium-linux.png | Bin 0 -> 11896 bytes ...ionText-string-normal-1-chromium-linux.png | Bin 0 -> 6574 bytes ...tionText-node-normal-1-chromium-linux.png} | Bin ...tionText-string-long-1-chromium-linux.png} | Bin ...onText-string-normal-1-chromium-linux.png} | Bin ...tionText-node-normal-1-chromium-linux.png} | Bin ...tionText-string-long-1-chromium-linux.png} | Bin ...onText-string-normal-1-chromium-linux.png} | Bin ...tionText-node-normal-1-chromium-linux.png} | Bin ...tionText-string-long-1-chromium-linux.png} | Bin ...onText-string-normal-1-chromium-linux.png} | Bin ...tionText-node-normal-1-chromium-linux.png} | Bin ...tionText-string-long-1-chromium-linux.png} | Bin ...onText-string-normal-1-chromium-linux.png} | Bin ...ationText-node-normal-1-chromium-linux.png | Bin 0 -> 6142 bytes ...ationText-string-long-1-chromium-linux.png | Bin 0 -> 11825 bytes ...ionText-string-normal-1-chromium-linux.png | Bin 0 -> 6512 bytes ...tionText-node-normal-1-chromium-linux.png} | Bin ...tionText-string-long-1-chromium-linux.png} | Bin ...onText-string-normal-1-chromium-linux.png} | Bin ...tionText-node-normal-1-chromium-linux.png} | Bin ...tionText-string-long-1-chromium-linux.png} | Bin ...onText-string-normal-1-chromium-linux.png} | Bin ...tionText-node-normal-1-chromium-linux.png} | Bin ...tionText-string-long-1-chromium-linux.png} | Bin ...onText-string-normal-1-chromium-linux.png} | Bin ...tionText-node-normal-1-chromium-linux.png} | Bin ...tionText-string-long-1-chromium-linux.png} | Bin ...onText-string-normal-1-chromium-linux.png} | Bin ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 3978 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...alue-state-undefined-1-chromium-linux.png} | Bin ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 3976 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...alue-state-undefined-1-chromium-linux.png} | Bin ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 4000 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...alse-state-undefined-1-chromium-linux.png} | Bin ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 4156 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...true-state-undefined-1-chromium-linux.png} | Bin ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 4000 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...alse-state-undefined-1-chromium-linux.png} | Bin ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 4156 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...true-state-undefined-1-chromium-linux.png} | Bin src/components/SelectField/README.md | 59 ++++++++++++++++-- .../SelectField/SelectField.module.scss | 4 ++ src/components/SelectField/SelectField.tsx | 6 +- .../SelectField/SelectField.types.ts | 7 ++- .../__tests__/SelectField.spec.tsx | 6 +- ...variant-string-filled-1-chromium-linux.png | Bin 0 -> 2546 bytes ...ariant-string-outline-1-chromium-linux.png | Bin 0 -> 2678 bytes ...ariant-string-filled-1-chromium-linux.png} | Bin ...riant-string-outline-1-chromium-linux.png} | Bin ...ariant-string-filled-1-chromium-linux.png} | Bin ...riant-string-outline-1-chromium-linux.png} | Bin ...ariant-string-filled-1-chromium-linux.png} | Bin ...riant-string-outline-1-chromium-linux.png} | Bin ...ariant-string-filled-1-chromium-linux.png} | Bin ...riant-string-outline-1-chromium-linux.png} | Bin ...variant-string-filled-1-chromium-linux.png | Bin 0 -> 2514 bytes ...ariant-string-outline-1-chromium-linux.png | Bin 0 -> 2612 bytes ...ariant-string-filled-1-chromium-linux.png} | Bin ...riant-string-outline-1-chromium-linux.png} | Bin ...ariant-string-filled-1-chromium-linux.png} | Bin ...riant-string-outline-1-chromium-linux.png} | Bin ...ariant-string-filled-1-chromium-linux.png} | Bin ...riant-string-outline-1-chromium-linux.png} | Bin ...ariant-string-filled-1-chromium-linux.png} | Bin ...riant-string-outline-1-chromium-linux.png} | Bin ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 2678 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...alse-state-undefined-1-chromium-linux.png} | Bin ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 2823 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...true-state-undefined-1-chromium-linux.png} | Bin ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 2678 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...alse-state-undefined-1-chromium-linux.png} | Bin ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 2823 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...true-state-undefined-1-chromium-linux.png} | Bin src/components/TextArea/README.md | 36 +++++++++-- src/components/TextArea/TextArea.module.scss | 4 ++ src/components/TextArea/TextArea.tsx | 6 +- src/components/TextArea/TextArea.types.ts | 7 ++- .../TextArea/__tests__/TextArea.spec.tsx | 4 +- ...variant-string-filled-1-chromium-linux.png | Bin 0 -> 1569 bytes ...ariant-string-outline-1-chromium-linux.png | Bin 0 -> 1682 bytes ...ariant-string-filled-1-chromium-linux.png} | Bin ...riant-string-outline-1-chromium-linux.png} | Bin ...ariant-string-filled-1-chromium-linux.png} | Bin ...riant-string-outline-1-chromium-linux.png} | Bin ...ariant-string-filled-1-chromium-linux.png} | Bin ...riant-string-outline-1-chromium-linux.png} | Bin ...ariant-string-filled-1-chromium-linux.png} | Bin ...riant-string-outline-1-chromium-linux.png} | Bin ...variant-string-filled-1-chromium-linux.png | Bin 0 -> 1565 bytes ...ariant-string-outline-1-chromium-linux.png | Bin 0 -> 1661 bytes ...ariant-string-filled-1-chromium-linux.png} | Bin ...riant-string-outline-1-chromium-linux.png} | Bin ...ariant-string-filled-1-chromium-linux.png} | Bin ...riant-string-outline-1-chromium-linux.png} | Bin ...ariant-string-filled-1-chromium-linux.png} | Bin ...riant-string-outline-1-chromium-linux.png} | Bin ...ariant-string-filled-1-chromium-linux.png} | Bin ...riant-string-outline-1-chromium-linux.png} | Bin ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 1682 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...alse-state-undefined-1-chromium-linux.png} | Bin ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 1831 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...true-state-undefined-1-chromium-linux.png} | Bin src/components/TextField/README.md | 36 +++++++++-- .../TextField/TextField.module.scss | 4 ++ src/components/TextField/TextField.tsx | 6 +- src/components/TextField/TextField.types.ts | 11 ++-- .../TextField/__tests__/TextField.spec.tsx | 6 +- ...variant-string-filled-1-chromium-linux.png | Bin 0 -> 1448 bytes ...ariant-string-outline-1-chromium-linux.png | Bin 0 -> 1557 bytes ...ariant-string-filled-1-chromium-linux.png} | Bin ...riant-string-outline-1-chromium-linux.png} | Bin ...ariant-string-filled-1-chromium-linux.png} | Bin ...riant-string-outline-1-chromium-linux.png} | Bin ...ariant-string-filled-1-chromium-linux.png} | Bin ...riant-string-outline-1-chromium-linux.png} | Bin ...ariant-string-filled-1-chromium-linux.png} | Bin ...riant-string-outline-1-chromium-linux.png} | Bin ...variant-string-filled-1-chromium-linux.png | Bin 0 -> 1445 bytes ...ariant-string-outline-1-chromium-linux.png | Bin 0 -> 1535 bytes ...ariant-string-filled-1-chromium-linux.png} | Bin ...riant-string-outline-1-chromium-linux.png} | Bin ...ariant-string-filled-1-chromium-linux.png} | Bin ...riant-string-outline-1-chromium-linux.png} | Bin ...ariant-string-filled-1-chromium-linux.png} | Bin ...riant-string-outline-1-chromium-linux.png} | Bin ...ariant-string-filled-1-chromium-linux.png} | Bin ...riant-string-outline-1-chromium-linux.png} | Bin ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 1557 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...alse-state-undefined-1-chromium-linux.png} | Bin ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 1557 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...true-state-undefined-1-chromium-linux.png} | Bin ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 1557 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...alse-state-undefined-1-chromium-linux.png} | Bin ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 1709 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...true-state-undefined-1-chromium-linux.png} | Bin src/components/TextLink/README.md | 2 +- src/components/Toggle/README.md | 28 ++++++++- src/components/Toggle/Toggle.module.scss | 4 ++ src/components/Toggle/Toggle.tsx | 6 +- src/components/Toggle/Toggle.types.ts | 7 ++- .../Toggle/__tests__/Toggle.spec.tsx | 6 +- ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 1773 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...alse-state-undefined-1-chromium-linux.png} | Bin ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 1923 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...true-state-undefined-1-chromium-linux.png} | Bin ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 1773 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...alse-state-undefined-1-chromium-linux.png} | Bin ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 1923 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...true-state-undefined-1-chromium-linux.png} | Bin ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 1720 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...alse-state-undefined-1-chromium-linux.png} | Bin ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 1874 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...true-state-undefined-1-chromium-linux.png} | Bin ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 1720 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...alse-state-undefined-1-chromium-linux.png} | Bin ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 1874 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...true-state-undefined-1-chromium-linux.png} | Bin ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 1773 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...alse-state-undefined-1-chromium-linux.png} | Bin ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 1720 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...true-state-undefined-1-chromium-linux.png} | Bin ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 1738 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...alse-state-undefined-1-chromium-linux.png} | Bin ...-state-string-changed-1-chromium-linux.png | Bin 0 -> 1669 bytes ...state-string-invalid-1-chromium-linux.png} | Bin ...e-state-string-valid-1-chromium-linux.png} | Bin ...state-string-warning-1-chromium-linux.png} | Bin ...true-state-undefined-1-chromium-linux.png} | Bin .../_helpers/getRootStateClassName.ts | 24 +++++++ .../getRootValidationStateClassName.ts | 20 ------ src/docs/customize/theming/forms.md | 52 +++++++-------- src/docs/foundation/collections.md | 20 ++++++ src/docs/foundation/colors.md | 57 ++++++++++++++--- src/index.ts | 2 +- src/styles/settings/_form-fields.scss | 1 + src/styles/theme-constants/_colors.scss | 21 +++++++ src/styles/theme/_form-fields.scss | 23 ++++--- src/theme.scss | 49 +++++++++++---- src/types/index.ts | 2 +- src/types/states.ts | 1 + src/types/validationStates.ts | 1 - tests/playwright/index.ts | 4 +- tests/playwright/propTests/statePropTest.ts | 24 +++++++ .../propTests/validationStatePropTest.ts | 20 ------ webpack.config.js | 2 +- 393 files changed, 662 insertions(+), 257 deletions(-) rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-checked-boolean-fals-aa513-oolean-false-validationState-string-warning-1-chromium-linux.png => CheckboxField-base-visual-checked-boolean-fals-024b2-Required-boolean-false-state-string-warning-1-chromium-linux.png} (100%) rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-checked-boolean-fals-0e7c4-boolean-true-validationState-string-warning-1-chromium-linux.png => CheckboxField-base-visual-checked-boolean-fals-0e4b8-sRequired-boolean-true-state-string-warning-1-chromium-linux.png} (100%) rename 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 => CheckboxField-base-visual-checked-boolean-fals-23372-rAsRequired-boolean-true-state-string-valid-1-chromium-linux.png} (100%) create mode 100644 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 create mode 100644 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 rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-checked-boolean-fals-28331-boolean-true-validationState-string-invalid-1-chromium-linux.png => CheckboxField-base-visual-checked-boolean-fals-4de74-sRequired-boolean-true-state-string-invalid-1-chromium-linux.png} (100%) rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-checked-boolean-fals-06df7--boolean-false-validationState-string-valid-1-chromium-linux.png => CheckboxField-base-visual-checked-boolean-fals-5f378-AsRequired-boolean-false-state-string-valid-1-chromium-linux.png} (100%) rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-checked-boolean-fals-6f470-oolean-false-validationState-string-invalid-1-chromium-linux.png => CheckboxField-base-visual-checked-boolean-fals-eb421-Required-boolean-false-state-string-invalid-1-chromium-linux.png} (100%) rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-checked-boolean-fals-1921b-red-boolean-false-validationState-undefined-1-chromium-linux.png => CheckboxField-base-visual-checked-boolean-false-renderAsRequired-boolean-false-state-undefined-1-chromium-linux.png} (100%) rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-checked-boolean-fals-7abd3-ired-boolean-true-validationState-undefined-1-chromium-linux.png => CheckboxField-base-visual-checked-boolean-false-renderAsRequired-boolean-true-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-false-state-string-changed-1-chromium-linux.png rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-checked-boolean-fals-8f15a-oolean-false-validationState-string-invalid-1-chromium-linux.png => CheckboxField-base-visual-checked-boolean-false-required-boolean-false-state-string-invalid-1-chromium-linux.png} (100%) rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-checked-boolean-fals-967c9--boolean-false-validationState-string-valid-1-chromium-linux.png => CheckboxField-base-visual-checked-boolean-false-required-boolean-false-state-string-valid-1-chromium-linux.png} (100%) rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-checked-boolean-fals-fdbdd-oolean-false-validationState-string-warning-1-chromium-linux.png => CheckboxField-base-visual-checked-boolean-false-required-boolean-false-state-string-warning-1-chromium-linux.png} (100%) rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-checked-boolean-fals-7822c-red-boolean-false-validationState-undefined-1-chromium-linux.png => CheckboxField-base-visual-checked-boolean-false-required-boolean-false-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-true-state-string-changed-1-chromium-linux.png rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-checked-boolean-fals-aebbc-boolean-true-validationState-string-invalid-1-chromium-linux.png => CheckboxField-base-visual-checked-boolean-false-required-boolean-true-state-string-invalid-1-chromium-linux.png} (100%) rename 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 => CheckboxField-base-visual-checked-boolean-false-required-boolean-true-state-string-valid-1-chromium-linux.png} (100%) rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-checked-boolean-fals-53679-boolean-true-validationState-string-warning-1-chromium-linux.png => CheckboxField-base-visual-checked-boolean-false-required-boolean-true-state-string-warning-1-chromium-linux.png} (100%) rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-checked-boolean-fals-7f13d-ired-boolean-true-validationState-undefined-1-chromium-linux.png => CheckboxField-base-visual-checked-boolean-false-required-boolean-true-state-undefined-1-chromium-linux.png} (100%) rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-checked-boolean-true-7eda3-oolean-false-validationState-string-invalid-1-chromium-linux.png => CheckboxField-base-visual-checked-boolean-true-668ea-Required-boolean-false-state-string-invalid-1-chromium-linux.png} (100%) create mode 100644 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 create mode 100644 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 rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-checked-boolean-true-59db8-oolean-false-validationState-string-warning-1-chromium-linux.png => CheckboxField-base-visual-checked-boolean-true-b8490-Required-boolean-false-state-string-warning-1-chromium-linux.png} (100%) rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-checked-boolean-true-d8c8f-boolean-true-validationState-string-invalid-1-chromium-linux.png => CheckboxField-base-visual-checked-boolean-true-c118a-sRequired-boolean-true-state-string-invalid-1-chromium-linux.png} (100%) rename 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 => CheckboxField-base-visual-checked-boolean-true-cce1a-rAsRequired-boolean-true-state-string-valid-1-chromium-linux.png} (100%) rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-checked-boolean-true-143b9--boolean-false-validationState-string-valid-1-chromium-linux.png => CheckboxField-base-visual-checked-boolean-true-d5738-AsRequired-boolean-false-state-string-valid-1-chromium-linux.png} (100%) rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-checked-boolean-true-a32f5-boolean-true-validationState-string-warning-1-chromium-linux.png => CheckboxField-base-visual-checked-boolean-true-dc349-sRequired-boolean-true-state-string-warning-1-chromium-linux.png} (100%) rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-checked-boolean-true-c6af0-red-boolean-false-validationState-undefined-1-chromium-linux.png => CheckboxField-base-visual-checked-boolean-true-renderAsRequired-boolean-false-state-undefined-1-chromium-linux.png} (100%) rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-checked-boolean-true-e5548-ired-boolean-true-validationState-undefined-1-chromium-linux.png => CheckboxField-base-visual-checked-boolean-true-renderAsRequired-boolean-true-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-false-state-string-changed-1-chromium-linux.png rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-checked-boolean-true-c299b-oolean-false-validationState-string-invalid-1-chromium-linux.png => CheckboxField-base-visual-checked-boolean-true-required-boolean-false-state-string-invalid-1-chromium-linux.png} (100%) rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-checked-boolean-true-4c12e--boolean-false-validationState-string-valid-1-chromium-linux.png => CheckboxField-base-visual-checked-boolean-true-required-boolean-false-state-string-valid-1-chromium-linux.png} (100%) rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-checked-boolean-true-6db80-oolean-false-validationState-string-warning-1-chromium-linux.png => CheckboxField-base-visual-checked-boolean-true-required-boolean-false-state-string-warning-1-chromium-linux.png} (100%) rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-checked-boolean-true-d72f4-red-boolean-false-validationState-undefined-1-chromium-linux.png => CheckboxField-base-visual-checked-boolean-true-required-boolean-false-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-true-state-string-changed-1-chromium-linux.png rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-checked-boolean-true-f3c63-boolean-true-validationState-string-invalid-1-chromium-linux.png => CheckboxField-base-visual-checked-boolean-true-required-boolean-true-state-string-invalid-1-chromium-linux.png} (100%) rename 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 => CheckboxField-base-visual-checked-boolean-true-required-boolean-true-state-string-valid-1-chromium-linux.png} (100%) rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-checked-boolean-true-db84c-boolean-true-validationState-string-warning-1-chromium-linux.png => CheckboxField-base-visual-checked-boolean-true-required-boolean-true-state-string-warning-1-chromium-linux.png} (100%) rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-checked-boolean-true-required-boolean-true-validationState-undefined-1-chromium-linux.png => CheckboxField-base-visual-checked-boolean-true-required-boolean-true-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-false-checked-boolean-false-state-string-changed-1-chromium-linux.png rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-disabled-boolean-fal-a7f59-oolean-false-validationState-string-invalid-1-chromium-linux.png => CheckboxField-base-visual-disabled-boolean-false-checked-boolean-false-state-string-invalid-1-chromium-linux.png} (100%) rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-disabled-boolean-fal-43fbf--boolean-false-validationState-string-valid-1-chromium-linux.png => CheckboxField-base-visual-disabled-boolean-false-checked-boolean-false-state-string-valid-1-chromium-linux.png} (100%) rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-disabled-boolean-fal-a874a-oolean-false-validationState-string-warning-1-chromium-linux.png => CheckboxField-base-visual-disabled-boolean-false-checked-boolean-false-state-string-warning-1-chromium-linux.png} (100%) rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-disabled-boolean-fal-215d0-ked-boolean-false-validationState-undefined-1-chromium-linux.png => CheckboxField-base-visual-disabled-boolean-false-checked-boolean-false-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-false-checked-boolean-true-state-string-changed-1-chromium-linux.png rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-disabled-boolean-fal-b4487-boolean-true-validationState-string-invalid-1-chromium-linux.png => CheckboxField-base-visual-disabled-boolean-false-checked-boolean-true-state-string-invalid-1-chromium-linux.png} (100%) rename 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 => CheckboxField-base-visual-disabled-boolean-false-checked-boolean-true-state-string-valid-1-chromium-linux.png} (100%) rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-disabled-boolean-fal-f80fd-boolean-true-validationState-string-warning-1-chromium-linux.png => CheckboxField-base-visual-disabled-boolean-false-checked-boolean-true-state-string-warning-1-chromium-linux.png} (100%) rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-disabled-boolean-fal-ed561-cked-boolean-true-validationState-undefined-1-chromium-linux.png => CheckboxField-base-visual-disabled-boolean-false-checked-boolean-true-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-false-state-string-changed-1-chromium-linux.png rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-disabled-boolean-tru-f350b-oolean-false-validationState-string-invalid-1-chromium-linux.png => CheckboxField-base-visual-disabled-boolean-true-checked-boolean-false-state-string-invalid-1-chromium-linux.png} (100%) rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-disabled-boolean-tru-4123f--boolean-false-validationState-string-valid-1-chromium-linux.png => CheckboxField-base-visual-disabled-boolean-true-checked-boolean-false-state-string-valid-1-chromium-linux.png} (100%) rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-disabled-boolean-tru-ff2f5-oolean-false-validationState-string-warning-1-chromium-linux.png => CheckboxField-base-visual-disabled-boolean-true-checked-boolean-false-state-string-warning-1-chromium-linux.png} (100%) rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-disabled-boolean-tru-e8026-ked-boolean-false-validationState-undefined-1-chromium-linux.png => CheckboxField-base-visual-disabled-boolean-true-checked-boolean-false-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-true-state-string-changed-1-chromium-linux.png rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-disabled-boolean-tru-e78cd-boolean-true-validationState-string-invalid-1-chromium-linux.png => CheckboxField-base-visual-disabled-boolean-true-checked-boolean-true-state-string-invalid-1-chromium-linux.png} (100%) rename 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 => CheckboxField-base-visual-disabled-boolean-true-checked-boolean-true-state-string-valid-1-chromium-linux.png} (100%) rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-disabled-boolean-tru-2f43d-boolean-true-validationState-string-warning-1-chromium-linux.png => CheckboxField-base-visual-disabled-boolean-true-checked-boolean-true-state-string-warning-1-chromium-linux.png} (100%) rename src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/{CheckboxField-base-visual-disabled-boolean-true-checked-boolean-true-validationState-undefined-1-chromium-linux.png => CheckboxField-base-visual-disabled-boolean-true-checked-boolean-true-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-false-state-string-changed-1-chromium-linux.png rename src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/{FileInputField-base-visual-disabled-boolean-false-validationState-string-invalid-1-chromium-linux.png => FileInputField-base-visual-disabled-boolean-false-state-string-invalid-1-chromium-linux.png} (100%) rename src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/{FileInputField-base-visual-disabled-boolean-false-validationState-string-valid-1-chromium-linux.png => FileInputField-base-visual-disabled-boolean-false-state-string-valid-1-chromium-linux.png} (100%) rename src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/{FileInputField-base-visual-disabled-boolean-false-validationState-string-warning-1-chromium-linux.png => FileInputField-base-visual-disabled-boolean-false-state-string-warning-1-chromium-linux.png} (100%) rename src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/{FileInputField-base-visual-disabled-boolean-false-validationState-undefined-1-chromium-linux.png => FileInputField-base-visual-disabled-boolean-false-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-state-string-changed-1-chromium-linux.png rename src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/{FileInputField-base-visual-disabled-boolean-true-validationState-string-invalid-1-chromium-linux.png => FileInputField-base-visual-disabled-boolean-true-state-string-invalid-1-chromium-linux.png} (100%) rename src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/{FileInputField-base-visual-disabled-boolean-true-validationState-string-valid-1-chromium-linux.png => FileInputField-base-visual-disabled-boolean-true-state-string-valid-1-chromium-linux.png} (100%) rename src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/{FileInputField-base-visual-disabled-boolean-true-validationState-string-warning-1-chromium-linux.png => FileInputField-base-visual-disabled-boolean-true-state-string-warning-1-chromium-linux.png} (100%) rename src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/{FileInputField-base-visual-disabled-boolean-true-validationState-undefined-1-chromium-linux.png => FileInputField-base-visual-disabled-boolean-true-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-state-string-changed-1-chromium-linux.png rename src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/{FileInputField-base-visual-filledInputField-object-validationState-string-invalid-1-chromium-linux.png => FileInputField-base-visual-filledInputField-object-state-string-invalid-1-chromium-linux.png} (100%) rename src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/{FileInputField-base-visual-filledInputField-object-validationState-string-valid-1-chromium-linux.png => FileInputField-base-visual-filledInputField-object-state-string-valid-1-chromium-linux.png} (100%) rename src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/{FileInputField-base-visual-filledInputField-object-validationState-string-warning-1-chromium-linux.png => FileInputField-base-visual-filledInputField-object-state-string-warning-1-chromium-linux.png} (100%) rename src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/{FileInputField-base-visual-filledInputField-object-validationState-undefined-1-chromium-linux.png => FileInputField-base-visual-filledInputField-object-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-state-string-changed-1-chromium-linux.png create mode 100644 src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/FormLayoutCustomField-base-visual-state-string-changed-disabled-boolean-true-1-chromium-linux.png rename src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/{FormLayoutCustomField-base-visual-validationState-string-invalid-1-chromium-linux.png => FormLayoutCustomField-base-visual-state-string-invalid-1-chromium-linux.png} (100%) rename src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/{FormLayoutCustomField-base-visual-validationState-string-invalid-disabled-boolean-true-1-chromium-linux.png => FormLayoutCustomField-base-visual-state-string-invalid-disabled-boolean-true-1-chromium-linux.png} (100%) rename src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/{FormLayoutCustomField-base-visual-validationState-string-valid-1-chromium-linux.png => FormLayoutCustomField-base-visual-state-string-valid-1-chromium-linux.png} (100%) rename src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/{FormLayoutCustomField-base-visual-validationState-string-valid-disabled-boolean-true-1-chromium-linux.png => FormLayoutCustomField-base-visual-state-string-valid-disabled-boolean-true-1-chromium-linux.png} (100%) rename src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/{FormLayoutCustomField-base-visual-validationState-string-warning-1-chromium-linux.png => FormLayoutCustomField-base-visual-state-string-warning-1-chromium-linux.png} (100%) rename src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/{FormLayoutCustomField-base-visual-validationState-string-warning-disabled-boolean-true-1-chromium-linux.png => FormLayoutCustomField-base-visual-state-string-warning-disabled-boolean-true-1-chromium-linux.png} (100%) rename src/components/FormLayout/__tests__/FormLayoutCustomField.spec.tsx-snapshots/{FormLayoutCustomField-base-visual-validationState-undefined-disabled-boolean-true-1-chromium-linux.png => FormLayoutCustomField-base-visual-state-undefined-disabled-boolean-true-1-chromium-linux.png} (100%) rename src/components/FormLayout/__tests__/_propTests/customFieldTests/{customFieldValidationStatesDisabledPropTest.ts => customFieldStatesDisabledPropTest.ts} (60%) rename src/components/FormLayout/__tests__/_propTests/customFieldTests/{customFieldValidationStatesPropTest.ts => customFieldStatesPropTest.ts} (53%) create mode 100644 src/components/InputGroup/__tests__/InputGroup.spec.tsx-snapshots/InputGroup-base-visual-inputProps-state-changed-textFieldInputProps-state-valid-1-chromium-linux.png create mode 100644 src/components/InputGroup/__tests__/InputGroup.spec.tsx-snapshots/InputGroup-base-visual-inputProps-state-changed-textFieldInputProps-state-warning-1-chromium-linux.png create mode 100644 src/components/InputGroup/__tests__/InputGroup.spec.tsx-snapshots/InputGroup-base-visual-inputProps-state-invalid-textFieldInputProps-state-changed-1-chromium-linux.png create mode 100644 src/components/InputGroup/__tests__/InputGroup.spec.tsx-snapshots/InputGroup-base-visual-inputProps-state-warning-textFieldInputProps-state-changed-1-chromium-linux.png create mode 100644 src/components/InputGroup/__tests__/InputGroup.spec.tsx-snapshots/InputGroup-base-visual-state-string-changed-1-chromium-linux.png rename src/components/InputGroup/__tests__/InputGroup.spec.tsx-snapshots/{InputGroup-base-visual-validationState-string-invalid-1-chromium-linux.png => InputGroup-base-visual-state-string-invalid-1-chromium-linux.png} (100%) rename src/components/InputGroup/__tests__/InputGroup.spec.tsx-snapshots/{InputGroup-base-visual-validationState-string-valid-1-chromium-linux.png => InputGroup-base-visual-state-string-valid-1-chromium-linux.png} (100%) rename src/components/InputGroup/__tests__/InputGroup.spec.tsx-snapshots/{InputGroup-base-visual-validationState-string-warning-1-chromium-linux.png => InputGroup-base-visual-state-string-warning-1-chromium-linux.png} (100%) rename src/components/InputGroup/__tests__/InputGroup.spec.tsx-snapshots/{InputGroup-base-visual-validationState-undefined-1-chromium-linux.png => InputGroup-base-visual-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/InputGroup/__tests__/_propTests/mixedStatesPropTest.ts create mode 100644 src/components/InputGroup/__tests__/_propTests/statePropTest.ts delete mode 100644 src/components/InputGroup/__tests__/_propTests/validationStatePropTest.ts create mode 100644 src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-false-state-string-changed-validationText-node-normal-1-chromium-linux.png create mode 100644 src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-false-state-string-changed-validationText-string-long-1-chromium-linux.png create mode 100644 src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-false-state-string-changed-validationText-string-normal-1-chromium-linux.png rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-disabled-boolean-false-val-6d01e--string-invalid-validationText-node-normal-1-chromium-linux.png => Radio-base-visual-disabled-boolean-false-state-string-invalid-validationText-node-normal-1-chromium-linux.png} (100%) rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-disabled-boolean-false-val-517de--string-invalid-validationText-string-long-1-chromium-linux.png => Radio-base-visual-disabled-boolean-false-state-string-invalid-validationText-string-long-1-chromium-linux.png} (100%) rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-disabled-boolean-false-val-eb83b-tring-invalid-validationText-string-normal-1-chromium-linux.png => Radio-base-visual-disabled-boolean-false-state-string-invalid-validationText-string-normal-1-chromium-linux.png} (100%) rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-disabled-boolean-false-val-815ed-te-string-valid-validationText-node-normal-1-chromium-linux.png => Radio-base-visual-disabled-boolean-false-state-string-valid-validationText-node-normal-1-chromium-linux.png} (100%) rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-disabled-boolean-false-val-7ab9b-te-string-valid-validationText-string-long-1-chromium-linux.png => Radio-base-visual-disabled-boolean-false-state-string-valid-validationText-string-long-1-chromium-linux.png} (100%) rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-disabled-boolean-false-val-91e9f--string-valid-validationText-string-normal-1-chromium-linux.png => Radio-base-visual-disabled-boolean-false-state-string-valid-validationText-string-normal-1-chromium-linux.png} (100%) rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-disabled-boolean-false-val-f2354--string-warning-validationText-node-normal-1-chromium-linux.png => Radio-base-visual-disabled-boolean-false-state-string-warning-validationText-node-normal-1-chromium-linux.png} (100%) rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-disabled-boolean-false-val-72d77--string-warning-validationText-string-long-1-chromium-linux.png => Radio-base-visual-disabled-boolean-false-state-string-warning-validationText-string-long-1-chromium-linux.png} (100%) rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-disabled-boolean-false-val-a5ce6-tring-warning-validationText-string-normal-1-chromium-linux.png => Radio-base-visual-disabled-boolean-false-state-string-warning-validationText-string-normal-1-chromium-linux.png} (100%) rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-disabled-boolean-false-validationState-undefined-validationText-node-normal-1-chromium-linux.png => Radio-base-visual-disabled-boolean-false-state-undefined-validationText-node-normal-1-chromium-linux.png} (100%) rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-disabled-boolean-false-validationState-undefined-validationText-string-long-1-chromium-linux.png => Radio-base-visual-disabled-boolean-false-state-undefined-validationText-string-long-1-chromium-linux.png} (100%) rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-disabled-boolean-false-val-e713e-ate-undefined-validationText-string-normal-1-chromium-linux.png => Radio-base-visual-disabled-boolean-false-state-undefined-validationText-string-normal-1-chromium-linux.png} (100%) create mode 100644 src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-true-state-string-changed-validationText-node-normal-1-chromium-linux.png create mode 100644 src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-true-state-string-changed-validationText-string-long-1-chromium-linux.png create mode 100644 src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-disabled-boolean-true-state-string-changed-validationText-string-normal-1-chromium-linux.png rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-disabled-boolean-true-vali-fa0b4--string-invalid-validationText-node-normal-1-chromium-linux.png => Radio-base-visual-disabled-boolean-true-state-string-invalid-validationText-node-normal-1-chromium-linux.png} (100%) rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-disabled-boolean-true-vali-e42c0--string-invalid-validationText-string-long-1-chromium-linux.png => Radio-base-visual-disabled-boolean-true-state-string-invalid-validationText-string-long-1-chromium-linux.png} (100%) rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-disabled-boolean-true-vali-f7cde-tring-invalid-validationText-string-normal-1-chromium-linux.png => Radio-base-visual-disabled-boolean-true-state-string-invalid-validationText-string-normal-1-chromium-linux.png} (100%) rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-disabled-boolean-true-vali-746e7-te-string-valid-validationText-node-normal-1-chromium-linux.png => Radio-base-visual-disabled-boolean-true-state-string-valid-validationText-node-normal-1-chromium-linux.png} (100%) rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-disabled-boolean-true-vali-4084c-te-string-valid-validationText-string-long-1-chromium-linux.png => Radio-base-visual-disabled-boolean-true-state-string-valid-validationText-string-long-1-chromium-linux.png} (100%) rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-disabled-boolean-true-vali-27011--string-valid-validationText-string-normal-1-chromium-linux.png => Radio-base-visual-disabled-boolean-true-state-string-valid-validationText-string-normal-1-chromium-linux.png} (100%) rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-disabled-boolean-true-vali-e6669--string-warning-validationText-node-normal-1-chromium-linux.png => Radio-base-visual-disabled-boolean-true-state-string-warning-validationText-node-normal-1-chromium-linux.png} (100%) rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-disabled-boolean-true-vali-b9f02--string-warning-validationText-string-long-1-chromium-linux.png => Radio-base-visual-disabled-boolean-true-state-string-warning-validationText-string-long-1-chromium-linux.png} (100%) rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-disabled-boolean-true-vali-d4152-tring-warning-validationText-string-normal-1-chromium-linux.png => Radio-base-visual-disabled-boolean-true-state-string-warning-validationText-string-normal-1-chromium-linux.png} (100%) rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-disabled-boolean-true-validationState-undefined-validationText-node-normal-1-chromium-linux.png => Radio-base-visual-disabled-boolean-true-state-undefined-validationText-node-normal-1-chromium-linux.png} (100%) rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-disabled-boolean-true-validationState-undefined-validationText-string-long-1-chromium-linux.png => Radio-base-visual-disabled-boolean-true-state-undefined-validationText-string-long-1-chromium-linux.png} (100%) rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-disabled-boolean-true-vali-2ddc7-ate-undefined-validationText-string-normal-1-chromium-linux.png => Radio-base-visual-disabled-boolean-true-state-undefined-validationText-string-normal-1-chromium-linux.png} (100%) create mode 100644 src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-options-shape-basePartialDisabledWithDisabledValue-state-string-changed-1-chromium-linux.png rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-options-shape-basePartialDis-f8462-sabledValue-validationState-string-invalid-1-chromium-linux.png => Radio-base-visual-options-shape-basePartialDisabledWithDisabledValue-state-string-invalid-1-chromium-linux.png} (100%) rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-options-shape-basePartialDis-6af22-DisabledValue-validationState-string-valid-1-chromium-linux.png => Radio-base-visual-options-shape-basePartialDisabledWithDisabledValue-state-string-valid-1-chromium-linux.png} (100%) rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-options-shape-basePartialDis-7515f-sabledValue-validationState-string-warning-1-chromium-linux.png => Radio-base-visual-options-shape-basePartialDisabledWithDisabledValue-state-string-warning-1-chromium-linux.png} (100%) rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-options-shape-basePartialDisabledWithDisabledValue-validationState-undefined-1-chromium-linux.png => Radio-base-visual-options-shape-basePartialDisabledWithDisabledValue-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-options-shape-basePartialDisabledWithoutDisabledValue-state-string-changed-1-chromium-linux.png rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-options-shape-basePartialDis-75b83-sabledValue-validationState-string-invalid-1-chromium-linux.png => Radio-base-visual-options-shape-basePartialDisabledWithoutDisabledValue-state-string-invalid-1-chromium-linux.png} (100%) rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-options-shape-basePartialDis-5b1e5-DisabledValue-validationState-string-valid-1-chromium-linux.png => Radio-base-visual-options-shape-basePartialDisabledWithoutDisabledValue-state-string-valid-1-chromium-linux.png} (100%) rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-options-shape-basePartialDis-af4d3-sabledValue-validationState-string-warning-1-chromium-linux.png => Radio-base-visual-options-shape-basePartialDisabledWithoutDisabledValue-state-string-warning-1-chromium-linux.png} (100%) rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-options-shape-basePartialDis-7e0e5-outDisabledValue-validationState-undefined-1-chromium-linux.png => Radio-base-visual-options-shape-basePartialDisabledWithoutDisabledValue-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-renderAsRequired-boolean-false-state-string-changed-1-chromium-linux.png rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-renderAsRequired-boolean-false-validationState-string-invalid-1-chromium-linux.png => Radio-base-visual-renderAsRequired-boolean-false-state-string-invalid-1-chromium-linux.png} (100%) rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-renderAsRequired-boolean-false-validationState-string-valid-1-chromium-linux.png => Radio-base-visual-renderAsRequired-boolean-false-state-string-valid-1-chromium-linux.png} (100%) rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-renderAsRequired-boolean-false-validationState-string-warning-1-chromium-linux.png => Radio-base-visual-renderAsRequired-boolean-false-state-string-warning-1-chromium-linux.png} (100%) rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-renderAsRequired-boolean-false-validationState-undefined-1-chromium-linux.png => Radio-base-visual-renderAsRequired-boolean-false-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-renderAsRequired-boolean-true-state-string-changed-1-chromium-linux.png rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-renderAsRequired-boolean-true-validationState-string-invalid-1-chromium-linux.png => Radio-base-visual-renderAsRequired-boolean-true-state-string-invalid-1-chromium-linux.png} (100%) rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-renderAsRequired-boolean-true-validationState-string-valid-1-chromium-linux.png => Radio-base-visual-renderAsRequired-boolean-true-state-string-valid-1-chromium-linux.png} (100%) rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-renderAsRequired-boolean-true-validationState-string-warning-1-chromium-linux.png => Radio-base-visual-renderAsRequired-boolean-true-state-string-warning-1-chromium-linux.png} (100%) rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-renderAsRequired-boolean-true-validationState-undefined-1-chromium-linux.png => Radio-base-visual-renderAsRequired-boolean-true-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-required-boolean-false-state-string-changed-1-chromium-linux.png rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-required-boolean-false-validationState-string-invalid-1-chromium-linux.png => Radio-base-visual-required-boolean-false-state-string-invalid-1-chromium-linux.png} (100%) rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-required-boolean-false-validationState-string-valid-1-chromium-linux.png => Radio-base-visual-required-boolean-false-state-string-valid-1-chromium-linux.png} (100%) rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-required-boolean-false-validationState-string-warning-1-chromium-linux.png => Radio-base-visual-required-boolean-false-state-string-warning-1-chromium-linux.png} (100%) rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-required-boolean-false-validationState-undefined-1-chromium-linux.png => Radio-base-visual-required-boolean-false-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/Radio/__tests__/Radio.spec.tsx-snapshots/Radio-base-visual-required-boolean-true-state-string-changed-1-chromium-linux.png rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-required-boolean-true-validationState-string-invalid-1-chromium-linux.png => Radio-base-visual-required-boolean-true-state-string-invalid-1-chromium-linux.png} (100%) rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-required-boolean-true-validationState-string-valid-1-chromium-linux.png => Radio-base-visual-required-boolean-true-state-string-valid-1-chromium-linux.png} (100%) rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-required-boolean-true-validationState-string-warning-1-chromium-linux.png => Radio-base-visual-required-boolean-true-state-string-warning-1-chromium-linux.png} (100%) rename src/components/Radio/__tests__/Radio.spec.tsx-snapshots/{Radio-base-visual-required-boolean-true-validationState-undefined-1-chromium-linux.png => Radio-base-visual-required-boolean-true-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-false-state-string-changed-variant-string-filled-1-chromium-linux.png create mode 100644 src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-false-state-string-changed-variant-string-outline-1-chromium-linux.png rename src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/{SelectField-base-visual-disabled-boolean-false-e8da1-nState-string-invalid-variant-string-filled-1-chromium-linux.png => SelectField-base-visual-disabled-boolean-false-state-string-invalid-variant-string-filled-1-chromium-linux.png} (100%) rename src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/{SelectField-base-visual-disabled-boolean-false-54baf-State-string-invalid-variant-string-outline-1-chromium-linux.png => SelectField-base-visual-disabled-boolean-false-state-string-invalid-variant-string-outline-1-chromium-linux.png} (100%) rename src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/{SelectField-base-visual-disabled-boolean-false-d6799-ionState-string-valid-variant-string-filled-1-chromium-linux.png => SelectField-base-visual-disabled-boolean-false-state-string-valid-variant-string-filled-1-chromium-linux.png} (100%) rename src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/{SelectField-base-visual-disabled-boolean-false-71d4b-onState-string-valid-variant-string-outline-1-chromium-linux.png => SelectField-base-visual-disabled-boolean-false-state-string-valid-variant-string-outline-1-chromium-linux.png} (100%) rename src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/{SelectField-base-visual-disabled-boolean-false-a924c-nState-string-warning-variant-string-filled-1-chromium-linux.png => SelectField-base-visual-disabled-boolean-false-state-string-warning-variant-string-filled-1-chromium-linux.png} (100%) rename src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/{SelectField-base-visual-disabled-boolean-false-3bd93-State-string-warning-variant-string-outline-1-chromium-linux.png => SelectField-base-visual-disabled-boolean-false-state-string-warning-variant-string-outline-1-chromium-linux.png} (100%) rename src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/{SelectField-base-visual-disabled-boolean-false-validationState-undefined-variant-string-filled-1-chromium-linux.png => SelectField-base-visual-disabled-boolean-false-state-undefined-variant-string-filled-1-chromium-linux.png} (100%) rename src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/{SelectField-base-visual-disabled-boolean-false-86f74-ationState-undefined-variant-string-outline-1-chromium-linux.png => SelectField-base-visual-disabled-boolean-false-state-undefined-variant-string-outline-1-chromium-linux.png} (100%) create mode 100644 src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-true-state-string-changed-variant-string-filled-1-chromium-linux.png create mode 100644 src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-disabled-boolean-true-state-string-changed-variant-string-outline-1-chromium-linux.png rename src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/{SelectField-base-visual-disabled-boolean-true--7f8b2-nState-string-invalid-variant-string-filled-1-chromium-linux.png => SelectField-base-visual-disabled-boolean-true-state-string-invalid-variant-string-filled-1-chromium-linux.png} (100%) rename src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/{SelectField-base-visual-disabled-boolean-true--d3eeb-State-string-invalid-variant-string-outline-1-chromium-linux.png => SelectField-base-visual-disabled-boolean-true-state-string-invalid-variant-string-outline-1-chromium-linux.png} (100%) rename src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/{SelectField-base-visual-disabled-boolean-true--a9d71-ionState-string-valid-variant-string-filled-1-chromium-linux.png => SelectField-base-visual-disabled-boolean-true-state-string-valid-variant-string-filled-1-chromium-linux.png} (100%) rename src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/{SelectField-base-visual-disabled-boolean-true--d4789-onState-string-valid-variant-string-outline-1-chromium-linux.png => SelectField-base-visual-disabled-boolean-true-state-string-valid-variant-string-outline-1-chromium-linux.png} (100%) rename src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/{SelectField-base-visual-disabled-boolean-true--2d55e-nState-string-warning-variant-string-filled-1-chromium-linux.png => SelectField-base-visual-disabled-boolean-true-state-string-warning-variant-string-filled-1-chromium-linux.png} (100%) rename src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/{SelectField-base-visual-disabled-boolean-true--36992-State-string-warning-variant-string-outline-1-chromium-linux.png => SelectField-base-visual-disabled-boolean-true-state-string-warning-variant-string-outline-1-chromium-linux.png} (100%) rename src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/{SelectField-base-visual-disabled-boolean-true-validationState-undefined-variant-string-filled-1-chromium-linux.png => SelectField-base-visual-disabled-boolean-true-state-undefined-variant-string-filled-1-chromium-linux.png} (100%) rename src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/{SelectField-base-visual-disabled-boolean-true-validationState-undefined-variant-string-outline-1-chromium-linux.png => SelectField-base-visual-disabled-boolean-true-state-undefined-variant-string-outline-1-chromium-linux.png} (100%) create mode 100644 src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-renderAsRequired-boolean-false-state-string-changed-1-chromium-linux.png rename src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/{SelectField-base-visual-renderAsRequired-boolean-false-validationState-string-invalid-1-chromium-linux.png => SelectField-base-visual-renderAsRequired-boolean-false-state-string-invalid-1-chromium-linux.png} (100%) rename src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/{SelectField-base-visual-renderAsRequired-boolean-false-validationState-string-valid-1-chromium-linux.png => SelectField-base-visual-renderAsRequired-boolean-false-state-string-valid-1-chromium-linux.png} (100%) rename src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/{SelectField-base-visual-renderAsRequired-boolean-false-validationState-string-warning-1-chromium-linux.png => SelectField-base-visual-renderAsRequired-boolean-false-state-string-warning-1-chromium-linux.png} (100%) rename src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/{SelectField-base-visual-renderAsRequired-boolean-false-validationState-undefined-1-chromium-linux.png => SelectField-base-visual-renderAsRequired-boolean-false-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-renderAsRequired-boolean-true-state-string-changed-1-chromium-linux.png rename src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/{SelectField-base-visual-renderAsRequired-boolean-true-validationState-string-invalid-1-chromium-linux.png => SelectField-base-visual-renderAsRequired-boolean-true-state-string-invalid-1-chromium-linux.png} (100%) rename src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/{SelectField-base-visual-renderAsRequired-boolean-true-validationState-string-valid-1-chromium-linux.png => SelectField-base-visual-renderAsRequired-boolean-true-state-string-valid-1-chromium-linux.png} (100%) rename src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/{SelectField-base-visual-renderAsRequired-boolean-true-validationState-string-warning-1-chromium-linux.png => SelectField-base-visual-renderAsRequired-boolean-true-state-string-warning-1-chromium-linux.png} (100%) rename src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/{SelectField-base-visual-renderAsRequired-boolean-true-validationState-undefined-1-chromium-linux.png => SelectField-base-visual-renderAsRequired-boolean-true-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-required-boolean-false-state-string-changed-1-chromium-linux.png rename src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/{SelectField-base-visual-required-boolean-false-validationState-string-invalid-1-chromium-linux.png => SelectField-base-visual-required-boolean-false-state-string-invalid-1-chromium-linux.png} (100%) rename src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/{SelectField-base-visual-required-boolean-false-validationState-string-valid-1-chromium-linux.png => SelectField-base-visual-required-boolean-false-state-string-valid-1-chromium-linux.png} (100%) rename src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/{SelectField-base-visual-required-boolean-false-validationState-string-warning-1-chromium-linux.png => SelectField-base-visual-required-boolean-false-state-string-warning-1-chromium-linux.png} (100%) rename src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/{SelectField-base-visual-required-boolean-false-validationState-undefined-1-chromium-linux.png => SelectField-base-visual-required-boolean-false-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/SelectField-base-visual-required-boolean-true-state-string-changed-1-chromium-linux.png rename src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/{SelectField-base-visual-required-boolean-true-validationState-string-invalid-1-chromium-linux.png => SelectField-base-visual-required-boolean-true-state-string-invalid-1-chromium-linux.png} (100%) rename src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/{SelectField-base-visual-required-boolean-true-validationState-string-valid-1-chromium-linux.png => SelectField-base-visual-required-boolean-true-state-string-valid-1-chromium-linux.png} (100%) rename src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/{SelectField-base-visual-required-boolean-true-validationState-string-warning-1-chromium-linux.png => SelectField-base-visual-required-boolean-true-state-string-warning-1-chromium-linux.png} (100%) rename src/components/SelectField/__tests__/SelectField.spec.tsx-snapshots/{SelectField-base-visual-required-boolean-true-validationState-undefined-1-chromium-linux.png => SelectField-base-visual-required-boolean-true-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-false-state-string-changed-variant-string-filled-1-chromium-linux.png create mode 100644 src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-false-state-string-changed-variant-string-outline-1-chromium-linux.png rename src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/{TextArea-base-visual-disabled-boolean-false--e6ca7-nState-string-invalid-variant-string-filled-1-chromium-linux.png => TextArea-base-visual-disabled-boolean-false-state-string-invalid-variant-string-filled-1-chromium-linux.png} (100%) rename src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/{TextArea-base-visual-disabled-boolean-false--e8c99-State-string-invalid-variant-string-outline-1-chromium-linux.png => TextArea-base-visual-disabled-boolean-false-state-string-invalid-variant-string-outline-1-chromium-linux.png} (100%) rename src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/{TextArea-base-visual-disabled-boolean-false-validationState-string-valid-variant-string-filled-1-chromium-linux.png => TextArea-base-visual-disabled-boolean-false-state-string-valid-variant-string-filled-1-chromium-linux.png} (100%) rename src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/{TextArea-base-visual-disabled-boolean-false--6e775-onState-string-valid-variant-string-outline-1-chromium-linux.png => TextArea-base-visual-disabled-boolean-false-state-string-valid-variant-string-outline-1-chromium-linux.png} (100%) rename src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/{TextArea-base-visual-disabled-boolean-false--1b842-nState-string-warning-variant-string-filled-1-chromium-linux.png => TextArea-base-visual-disabled-boolean-false-state-string-warning-variant-string-filled-1-chromium-linux.png} (100%) rename src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/{TextArea-base-visual-disabled-boolean-false--c3763-State-string-warning-variant-string-outline-1-chromium-linux.png => TextArea-base-visual-disabled-boolean-false-state-string-warning-variant-string-outline-1-chromium-linux.png} (100%) rename src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/{TextArea-base-visual-disabled-boolean-false-validationState-undefined-variant-string-filled-1-chromium-linux.png => TextArea-base-visual-disabled-boolean-false-state-undefined-variant-string-filled-1-chromium-linux.png} (100%) rename src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/{TextArea-base-visual-disabled-boolean-false-validationState-undefined-variant-string-outline-1-chromium-linux.png => TextArea-base-visual-disabled-boolean-false-state-undefined-variant-string-outline-1-chromium-linux.png} (100%) create mode 100644 src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-true-state-string-changed-variant-string-filled-1-chromium-linux.png create mode 100644 src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-disabled-boolean-true-state-string-changed-variant-string-outline-1-chromium-linux.png rename src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/{TextArea-base-visual-disabled-boolean-true-v-ddd41-nState-string-invalid-variant-string-filled-1-chromium-linux.png => TextArea-base-visual-disabled-boolean-true-state-string-invalid-variant-string-filled-1-chromium-linux.png} (100%) rename src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/{TextArea-base-visual-disabled-boolean-true-v-43a76-State-string-invalid-variant-string-outline-1-chromium-linux.png => TextArea-base-visual-disabled-boolean-true-state-string-invalid-variant-string-outline-1-chromium-linux.png} (100%) rename src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/{TextArea-base-visual-disabled-boolean-true-validationState-string-valid-variant-string-filled-1-chromium-linux.png => TextArea-base-visual-disabled-boolean-true-state-string-valid-variant-string-filled-1-chromium-linux.png} (100%) rename src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/{TextArea-base-visual-disabled-boolean-true-validationState-string-valid-variant-string-outline-1-chromium-linux.png => TextArea-base-visual-disabled-boolean-true-state-string-valid-variant-string-outline-1-chromium-linux.png} (100%) rename src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/{TextArea-base-visual-disabled-boolean-true-v-bf3d8-nState-string-warning-variant-string-filled-1-chromium-linux.png => TextArea-base-visual-disabled-boolean-true-state-string-warning-variant-string-filled-1-chromium-linux.png} (100%) rename src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/{TextArea-base-visual-disabled-boolean-true-v-bf6a0-State-string-warning-variant-string-outline-1-chromium-linux.png => TextArea-base-visual-disabled-boolean-true-state-string-warning-variant-string-outline-1-chromium-linux.png} (100%) rename src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/{TextArea-base-visual-disabled-boolean-true-validationState-undefined-variant-string-filled-1-chromium-linux.png => TextArea-base-visual-disabled-boolean-true-state-undefined-variant-string-filled-1-chromium-linux.png} (100%) rename src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/{TextArea-base-visual-disabled-boolean-true-validationState-undefined-variant-string-outline-1-chromium-linux.png => TextArea-base-visual-disabled-boolean-true-state-undefined-variant-string-outline-1-chromium-linux.png} (100%) create mode 100644 src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-required-boolean-false-state-string-changed-1-chromium-linux.png rename src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/{TextArea-base-visual-required-boolean-false-validationState-string-invalid-1-chromium-linux.png => TextArea-base-visual-required-boolean-false-state-string-invalid-1-chromium-linux.png} (100%) rename src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/{TextArea-base-visual-required-boolean-false-validationState-string-valid-1-chromium-linux.png => TextArea-base-visual-required-boolean-false-state-string-valid-1-chromium-linux.png} (100%) rename src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/{TextArea-base-visual-required-boolean-false-validationState-string-warning-1-chromium-linux.png => TextArea-base-visual-required-boolean-false-state-string-warning-1-chromium-linux.png} (100%) rename src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/{TextArea-base-visual-required-boolean-false-validationState-undefined-1-chromium-linux.png => TextArea-base-visual-required-boolean-false-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/TextArea-base-visual-required-boolean-true-state-string-changed-1-chromium-linux.png rename src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/{TextArea-base-visual-required-boolean-true-validationState-string-invalid-1-chromium-linux.png => TextArea-base-visual-required-boolean-true-state-string-invalid-1-chromium-linux.png} (100%) rename src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/{TextArea-base-visual-required-boolean-true-validationState-string-valid-1-chromium-linux.png => TextArea-base-visual-required-boolean-true-state-string-valid-1-chromium-linux.png} (100%) rename src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/{TextArea-base-visual-required-boolean-true-validationState-string-warning-1-chromium-linux.png => TextArea-base-visual-required-boolean-true-state-string-warning-1-chromium-linux.png} (100%) rename src/components/TextArea/__tests__/TextArea.spec.tsx-snapshots/{TextArea-base-visual-required-boolean-true-validationState-undefined-1-chromium-linux.png => TextArea-base-visual-required-boolean-true-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-false-state-string-changed-variant-string-filled-1-chromium-linux.png create mode 100644 src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-false-state-string-changed-variant-string-outline-1-chromium-linux.png rename src/components/TextField/__tests__/TextField.spec.tsx-snapshots/{TextField-base-visual-disabled-boolean-false--e25aa-nState-string-invalid-variant-string-filled-1-chromium-linux.png => TextField-base-visual-disabled-boolean-false-state-string-invalid-variant-string-filled-1-chromium-linux.png} (100%) rename src/components/TextField/__tests__/TextField.spec.tsx-snapshots/{TextField-base-visual-disabled-boolean-false--33c8d-State-string-invalid-variant-string-outline-1-chromium-linux.png => TextField-base-visual-disabled-boolean-false-state-string-invalid-variant-string-outline-1-chromium-linux.png} (100%) rename src/components/TextField/__tests__/TextField.spec.tsx-snapshots/{TextField-base-visual-disabled-boolean-false--61bae-ionState-string-valid-variant-string-filled-1-chromium-linux.png => TextField-base-visual-disabled-boolean-false-state-string-valid-variant-string-filled-1-chromium-linux.png} (100%) rename src/components/TextField/__tests__/TextField.spec.tsx-snapshots/{TextField-base-visual-disabled-boolean-false--aea3e-onState-string-valid-variant-string-outline-1-chromium-linux.png => TextField-base-visual-disabled-boolean-false-state-string-valid-variant-string-outline-1-chromium-linux.png} (100%) rename src/components/TextField/__tests__/TextField.spec.tsx-snapshots/{TextField-base-visual-disabled-boolean-false--3efe7-nState-string-warning-variant-string-filled-1-chromium-linux.png => TextField-base-visual-disabled-boolean-false-state-string-warning-variant-string-filled-1-chromium-linux.png} (100%) rename src/components/TextField/__tests__/TextField.spec.tsx-snapshots/{TextField-base-visual-disabled-boolean-false--58757-State-string-warning-variant-string-outline-1-chromium-linux.png => TextField-base-visual-disabled-boolean-false-state-string-warning-variant-string-outline-1-chromium-linux.png} (100%) rename src/components/TextField/__tests__/TextField.spec.tsx-snapshots/{TextField-base-visual-disabled-boolean-false-validationState-undefined-variant-string-filled-1-chromium-linux.png => TextField-base-visual-disabled-boolean-false-state-undefined-variant-string-filled-1-chromium-linux.png} (100%) rename src/components/TextField/__tests__/TextField.spec.tsx-snapshots/{TextField-base-visual-disabled-boolean-false-validationState-undefined-variant-string-outline-1-chromium-linux.png => TextField-base-visual-disabled-boolean-false-state-undefined-variant-string-outline-1-chromium-linux.png} (100%) create mode 100644 src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-true-state-string-changed-variant-string-filled-1-chromium-linux.png create mode 100644 src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-disabled-boolean-true-state-string-changed-variant-string-outline-1-chromium-linux.png rename src/components/TextField/__tests__/TextField.spec.tsx-snapshots/{TextField-base-visual-disabled-boolean-true--0671c-nState-string-invalid-variant-string-filled-1-chromium-linux.png => TextField-base-visual-disabled-boolean-true-state-string-invalid-variant-string-filled-1-chromium-linux.png} (100%) rename src/components/TextField/__tests__/TextField.spec.tsx-snapshots/{TextField-base-visual-disabled-boolean-true--9171b-State-string-invalid-variant-string-outline-1-chromium-linux.png => TextField-base-visual-disabled-boolean-true-state-string-invalid-variant-string-outline-1-chromium-linux.png} (100%) rename src/components/TextField/__tests__/TextField.spec.tsx-snapshots/{TextField-base-visual-disabled-boolean-true-validationState-string-valid-variant-string-filled-1-chromium-linux.png => TextField-base-visual-disabled-boolean-true-state-string-valid-variant-string-filled-1-chromium-linux.png} (100%) rename src/components/TextField/__tests__/TextField.spec.tsx-snapshots/{TextField-base-visual-disabled-boolean-true--4dc90-onState-string-valid-variant-string-outline-1-chromium-linux.png => TextField-base-visual-disabled-boolean-true-state-string-valid-variant-string-outline-1-chromium-linux.png} (100%) rename src/components/TextField/__tests__/TextField.spec.tsx-snapshots/{TextField-base-visual-disabled-boolean-true--966a4-nState-string-warning-variant-string-filled-1-chromium-linux.png => TextField-base-visual-disabled-boolean-true-state-string-warning-variant-string-filled-1-chromium-linux.png} (100%) rename src/components/TextField/__tests__/TextField.spec.tsx-snapshots/{TextField-base-visual-disabled-boolean-true--c4312-State-string-warning-variant-string-outline-1-chromium-linux.png => TextField-base-visual-disabled-boolean-true-state-string-warning-variant-string-outline-1-chromium-linux.png} (100%) rename src/components/TextField/__tests__/TextField.spec.tsx-snapshots/{TextField-base-visual-disabled-boolean-true-validationState-undefined-variant-string-filled-1-chromium-linux.png => TextField-base-visual-disabled-boolean-true-state-undefined-variant-string-filled-1-chromium-linux.png} (100%) rename src/components/TextField/__tests__/TextField.spec.tsx-snapshots/{TextField-base-visual-disabled-boolean-true-validationState-undefined-variant-string-outline-1-chromium-linux.png => TextField-base-visual-disabled-boolean-true-state-undefined-variant-string-outline-1-chromium-linux.png} (100%) create mode 100644 src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-renderAsRequired-boolean-false-state-string-changed-1-chromium-linux.png rename src/components/TextField/__tests__/TextField.spec.tsx-snapshots/{TextField-base-visual-renderAsRequired-boolean-false-validationState-string-invalid-1-chromium-linux.png => TextField-base-visual-renderAsRequired-boolean-false-state-string-invalid-1-chromium-linux.png} (100%) rename src/components/TextField/__tests__/TextField.spec.tsx-snapshots/{TextField-base-visual-renderAsRequired-boolean-false-validationState-string-valid-1-chromium-linux.png => TextField-base-visual-renderAsRequired-boolean-false-state-string-valid-1-chromium-linux.png} (100%) rename src/components/TextField/__tests__/TextField.spec.tsx-snapshots/{TextField-base-visual-renderAsRequired-boolean-false-validationState-string-warning-1-chromium-linux.png => TextField-base-visual-renderAsRequired-boolean-false-state-string-warning-1-chromium-linux.png} (100%) rename src/components/TextField/__tests__/TextField.spec.tsx-snapshots/{TextField-base-visual-renderAsRequired-boolean-false-validationState-undefined-1-chromium-linux.png => TextField-base-visual-renderAsRequired-boolean-false-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-renderAsRequired-boolean-true-state-string-changed-1-chromium-linux.png rename src/components/TextField/__tests__/TextField.spec.tsx-snapshots/{TextField-base-visual-renderAsRequired-boolean-true-validationState-string-invalid-1-chromium-linux.png => TextField-base-visual-renderAsRequired-boolean-true-state-string-invalid-1-chromium-linux.png} (100%) rename src/components/TextField/__tests__/TextField.spec.tsx-snapshots/{TextField-base-visual-renderAsRequired-boolean-true-validationState-string-valid-1-chromium-linux.png => TextField-base-visual-renderAsRequired-boolean-true-state-string-valid-1-chromium-linux.png} (100%) rename src/components/TextField/__tests__/TextField.spec.tsx-snapshots/{TextField-base-visual-renderAsRequired-boolean-true-validationState-string-warning-1-chromium-linux.png => TextField-base-visual-renderAsRequired-boolean-true-state-string-warning-1-chromium-linux.png} (100%) rename src/components/TextField/__tests__/TextField.spec.tsx-snapshots/{TextField-base-visual-renderAsRequired-boolean-true-validationState-undefined-1-chromium-linux.png => TextField-base-visual-renderAsRequired-boolean-true-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-required-boolean-false-state-string-changed-1-chromium-linux.png rename src/components/TextField/__tests__/TextField.spec.tsx-snapshots/{TextField-base-visual-required-boolean-false-validationState-string-invalid-1-chromium-linux.png => TextField-base-visual-required-boolean-false-state-string-invalid-1-chromium-linux.png} (100%) rename src/components/TextField/__tests__/TextField.spec.tsx-snapshots/{TextField-base-visual-required-boolean-false-validationState-string-valid-1-chromium-linux.png => TextField-base-visual-required-boolean-false-state-string-valid-1-chromium-linux.png} (100%) rename src/components/TextField/__tests__/TextField.spec.tsx-snapshots/{TextField-base-visual-required-boolean-false-validationState-string-warning-1-chromium-linux.png => TextField-base-visual-required-boolean-false-state-string-warning-1-chromium-linux.png} (100%) rename src/components/TextField/__tests__/TextField.spec.tsx-snapshots/{TextField-base-visual-required-boolean-false-validationState-undefined-1-chromium-linux.png => TextField-base-visual-required-boolean-false-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/TextField/__tests__/TextField.spec.tsx-snapshots/TextField-base-visual-required-boolean-true-state-string-changed-1-chromium-linux.png rename src/components/TextField/__tests__/TextField.spec.tsx-snapshots/{TextField-base-visual-required-boolean-true-validationState-string-invalid-1-chromium-linux.png => TextField-base-visual-required-boolean-true-state-string-invalid-1-chromium-linux.png} (100%) rename src/components/TextField/__tests__/TextField.spec.tsx-snapshots/{TextField-base-visual-required-boolean-true-validationState-string-valid-1-chromium-linux.png => TextField-base-visual-required-boolean-true-state-string-valid-1-chromium-linux.png} (100%) rename src/components/TextField/__tests__/TextField.spec.tsx-snapshots/{TextField-base-visual-required-boolean-true-validationState-string-warning-1-chromium-linux.png => TextField-base-visual-required-boolean-true-state-string-warning-1-chromium-linux.png} (100%) rename src/components/TextField/__tests__/TextField.spec.tsx-snapshots/{TextField-base-visual-required-boolean-true-validationState-undefined-1-chromium-linux.png => TextField-base-visual-required-boolean-true-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-renderAsRequired-boolean-false-state-string-changed-1-chromium-linux.png rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-checked-boolean-false-ren-68622-oolean-false-validationState-string-invalid-1-chromium-linux.png => Toggle-base-visual-checked-boolean-false-renderAsRequired-boolean-false-state-string-invalid-1-chromium-linux.png} (100%) rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-checked-boolean-false-ren-db109--boolean-false-validationState-string-valid-1-chromium-linux.png => Toggle-base-visual-checked-boolean-false-renderAsRequired-boolean-false-state-string-valid-1-chromium-linux.png} (100%) rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-checked-boolean-false-ren-acdd9-oolean-false-validationState-string-warning-1-chromium-linux.png => Toggle-base-visual-checked-boolean-false-renderAsRequired-boolean-false-state-string-warning-1-chromium-linux.png} (100%) rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-checked-boolean-false-ren-6382f-red-boolean-false-validationState-undefined-1-chromium-linux.png => Toggle-base-visual-checked-boolean-false-renderAsRequired-boolean-false-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-renderAsRequired-boolean-true-state-string-changed-1-chromium-linux.png rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-checked-boolean-false-ren-bffb9-boolean-true-validationState-string-invalid-1-chromium-linux.png => Toggle-base-visual-checked-boolean-false-renderAsRequired-boolean-true-state-string-invalid-1-chromium-linux.png} (100%) rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-checked-boolean-false-ren-70394-d-boolean-true-validationState-string-valid-1-chromium-linux.png => Toggle-base-visual-checked-boolean-false-renderAsRequired-boolean-true-state-string-valid-1-chromium-linux.png} (100%) rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-checked-boolean-false-ren-84789-boolean-true-validationState-string-warning-1-chromium-linux.png => Toggle-base-visual-checked-boolean-false-renderAsRequired-boolean-true-state-string-warning-1-chromium-linux.png} (100%) rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-checked-boolean-false-ren-5a171-ired-boolean-true-validationState-undefined-1-chromium-linux.png => Toggle-base-visual-checked-boolean-false-renderAsRequired-boolean-true-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-required-boolean-false-state-string-changed-1-chromium-linux.png rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-checked-boolean-false-required-boolean-false-validationState-string-invalid-1-chromium-linux.png => Toggle-base-visual-checked-boolean-false-required-boolean-false-state-string-invalid-1-chromium-linux.png} (100%) rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-checked-boolean-false-required-boolean-false-validationState-string-valid-1-chromium-linux.png => Toggle-base-visual-checked-boolean-false-required-boolean-false-state-string-valid-1-chromium-linux.png} (100%) rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-checked-boolean-false-required-boolean-false-validationState-string-warning-1-chromium-linux.png => Toggle-base-visual-checked-boolean-false-required-boolean-false-state-string-warning-1-chromium-linux.png} (100%) rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-checked-boolean-false-required-boolean-false-validationState-undefined-1-chromium-linux.png => Toggle-base-visual-checked-boolean-false-required-boolean-false-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-false-required-boolean-true-state-string-changed-1-chromium-linux.png rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-checked-boolean-false-required-boolean-true-validationState-string-invalid-1-chromium-linux.png => Toggle-base-visual-checked-boolean-false-required-boolean-true-state-string-invalid-1-chromium-linux.png} (100%) rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-checked-boolean-false-required-boolean-true-validationState-string-valid-1-chromium-linux.png => Toggle-base-visual-checked-boolean-false-required-boolean-true-state-string-valid-1-chromium-linux.png} (100%) rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-checked-boolean-false-required-boolean-true-validationState-string-warning-1-chromium-linux.png => Toggle-base-visual-checked-boolean-false-required-boolean-true-state-string-warning-1-chromium-linux.png} (100%) rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-checked-boolean-false-required-boolean-true-validationState-undefined-1-chromium-linux.png => Toggle-base-visual-checked-boolean-false-required-boolean-true-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-renderAsRequired-boolean-false-state-string-changed-1-chromium-linux.png rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-checked-boolean-true-rend-57e71-oolean-false-validationState-string-invalid-1-chromium-linux.png => Toggle-base-visual-checked-boolean-true-renderAsRequired-boolean-false-state-string-invalid-1-chromium-linux.png} (100%) rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-checked-boolean-true-rend-5fdf1--boolean-false-validationState-string-valid-1-chromium-linux.png => Toggle-base-visual-checked-boolean-true-renderAsRequired-boolean-false-state-string-valid-1-chromium-linux.png} (100%) rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-checked-boolean-true-rend-07a3c-oolean-false-validationState-string-warning-1-chromium-linux.png => Toggle-base-visual-checked-boolean-true-renderAsRequired-boolean-false-state-string-warning-1-chromium-linux.png} (100%) rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-checked-boolean-true-rend-f9831-red-boolean-false-validationState-undefined-1-chromium-linux.png => Toggle-base-visual-checked-boolean-true-renderAsRequired-boolean-false-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-renderAsRequired-boolean-true-state-string-changed-1-chromium-linux.png rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-checked-boolean-true-rend-08579-boolean-true-validationState-string-invalid-1-chromium-linux.png => Toggle-base-visual-checked-boolean-true-renderAsRequired-boolean-true-state-string-invalid-1-chromium-linux.png} (100%) rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-checked-boolean-true-rend-b5311-d-boolean-true-validationState-string-valid-1-chromium-linux.png => Toggle-base-visual-checked-boolean-true-renderAsRequired-boolean-true-state-string-valid-1-chromium-linux.png} (100%) rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-checked-boolean-true-rend-f6641-boolean-true-validationState-string-warning-1-chromium-linux.png => Toggle-base-visual-checked-boolean-true-renderAsRequired-boolean-true-state-string-warning-1-chromium-linux.png} (100%) rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-checked-boolean-true-rend-318ea-ired-boolean-true-validationState-undefined-1-chromium-linux.png => Toggle-base-visual-checked-boolean-true-renderAsRequired-boolean-true-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-required-boolean-false-state-string-changed-1-chromium-linux.png rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-checked-boolean-true-required-boolean-false-validationState-string-invalid-1-chromium-linux.png => Toggle-base-visual-checked-boolean-true-required-boolean-false-state-string-invalid-1-chromium-linux.png} (100%) rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-checked-boolean-true-required-boolean-false-validationState-string-valid-1-chromium-linux.png => Toggle-base-visual-checked-boolean-true-required-boolean-false-state-string-valid-1-chromium-linux.png} (100%) rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-checked-boolean-true-required-boolean-false-validationState-string-warning-1-chromium-linux.png => Toggle-base-visual-checked-boolean-true-required-boolean-false-state-string-warning-1-chromium-linux.png} (100%) rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-checked-boolean-true-required-boolean-false-validationState-undefined-1-chromium-linux.png => Toggle-base-visual-checked-boolean-true-required-boolean-false-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-checked-boolean-true-required-boolean-true-state-string-changed-1-chromium-linux.png rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-checked-boolean-true-required-boolean-true-validationState-string-invalid-1-chromium-linux.png => Toggle-base-visual-checked-boolean-true-required-boolean-true-state-string-invalid-1-chromium-linux.png} (100%) rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-checked-boolean-true-required-boolean-true-validationState-string-valid-1-chromium-linux.png => Toggle-base-visual-checked-boolean-true-required-boolean-true-state-string-valid-1-chromium-linux.png} (100%) rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-checked-boolean-true-required-boolean-true-validationState-string-warning-1-chromium-linux.png => Toggle-base-visual-checked-boolean-true-required-boolean-true-state-string-warning-1-chromium-linux.png} (100%) rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-checked-boolean-true-required-boolean-true-validationState-undefined-1-chromium-linux.png => Toggle-base-visual-checked-boolean-true-required-boolean-true-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-false-checked-boolean-false-state-string-changed-1-chromium-linux.png rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-disabled-boolean-false-checked-boolean-false-validationState-string-invalid-1-chromium-linux.png => Toggle-base-visual-disabled-boolean-false-checked-boolean-false-state-string-invalid-1-chromium-linux.png} (100%) rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-disabled-boolean-false-checked-boolean-false-validationState-string-valid-1-chromium-linux.png => Toggle-base-visual-disabled-boolean-false-checked-boolean-false-state-string-valid-1-chromium-linux.png} (100%) rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-disabled-boolean-false-checked-boolean-false-validationState-string-warning-1-chromium-linux.png => Toggle-base-visual-disabled-boolean-false-checked-boolean-false-state-string-warning-1-chromium-linux.png} (100%) rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-disabled-boolean-false-checked-boolean-false-validationState-undefined-1-chromium-linux.png => Toggle-base-visual-disabled-boolean-false-checked-boolean-false-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-false-checked-boolean-true-state-string-changed-1-chromium-linux.png rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-disabled-boolean-false-checked-boolean-true-validationState-string-invalid-1-chromium-linux.png => Toggle-base-visual-disabled-boolean-false-checked-boolean-true-state-string-invalid-1-chromium-linux.png} (100%) rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-disabled-boolean-false-checked-boolean-true-validationState-string-valid-1-chromium-linux.png => Toggle-base-visual-disabled-boolean-false-checked-boolean-true-state-string-valid-1-chromium-linux.png} (100%) rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-disabled-boolean-false-checked-boolean-true-validationState-string-warning-1-chromium-linux.png => Toggle-base-visual-disabled-boolean-false-checked-boolean-true-state-string-warning-1-chromium-linux.png} (100%) rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-disabled-boolean-false-checked-boolean-true-validationState-undefined-1-chromium-linux.png => Toggle-base-visual-disabled-boolean-false-checked-boolean-true-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-true-checked-boolean-false-state-string-changed-1-chromium-linux.png rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-disabled-boolean-true-checked-boolean-false-validationState-string-invalid-1-chromium-linux.png => Toggle-base-visual-disabled-boolean-true-checked-boolean-false-state-string-invalid-1-chromium-linux.png} (100%) rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-disabled-boolean-true-checked-boolean-false-validationState-string-valid-1-chromium-linux.png => Toggle-base-visual-disabled-boolean-true-checked-boolean-false-state-string-valid-1-chromium-linux.png} (100%) rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-disabled-boolean-true-checked-boolean-false-validationState-string-warning-1-chromium-linux.png => Toggle-base-visual-disabled-boolean-true-checked-boolean-false-state-string-warning-1-chromium-linux.png} (100%) rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-disabled-boolean-true-checked-boolean-false-validationState-undefined-1-chromium-linux.png => Toggle-base-visual-disabled-boolean-true-checked-boolean-false-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/Toggle-base-visual-disabled-boolean-true-checked-boolean-true-state-string-changed-1-chromium-linux.png rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-disabled-boolean-true-checked-boolean-true-validationState-string-invalid-1-chromium-linux.png => Toggle-base-visual-disabled-boolean-true-checked-boolean-true-state-string-invalid-1-chromium-linux.png} (100%) rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-disabled-boolean-true-checked-boolean-true-validationState-string-valid-1-chromium-linux.png => Toggle-base-visual-disabled-boolean-true-checked-boolean-true-state-string-valid-1-chromium-linux.png} (100%) rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-disabled-boolean-true-checked-boolean-true-validationState-string-warning-1-chromium-linux.png => Toggle-base-visual-disabled-boolean-true-checked-boolean-true-state-string-warning-1-chromium-linux.png} (100%) rename src/components/Toggle/__tests__/Toggle.spec.tsx-snapshots/{Toggle-base-visual-disabled-boolean-true-checked-boolean-true-validationState-undefined-1-chromium-linux.png => Toggle-base-visual-disabled-boolean-true-checked-boolean-true-state-undefined-1-chromium-linux.png} (100%) create mode 100644 src/components/_helpers/getRootStateClassName.ts delete mode 100644 src/components/_helpers/getRootValidationStateClassName.ts create mode 100644 src/types/states.ts delete mode 100644 src/types/validationStates.ts create mode 100644 tests/playwright/propTests/statePropTest.ts delete mode 100644 tests/playwright/propTests/validationStatePropTest.ts 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..d4a523c00 100644 --- a/src/components/CheckboxField/CheckboxField.module.scss +++ b/src/components/CheckboxField/CheckboxField.module.scss @@ -35,6 +35,10 @@ } // States + .isRootStateChanged { + @include variants.validation(changed); + } + .isRootStateInvalid { @include variants.validation(invalid); } 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-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-024b2-Required-boolean-false-state-string-warning-1-chromium-linux.png similarity index 100% rename from src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-aa513-oolean-false-validationState-string-warning-1-chromium-linux.png rename to 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 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-0e4b8-sRequired-boolean-true-state-string-warning-1-chromium-linux.png similarity index 100% rename from src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-0e7c4-boolean-true-validationState-string-warning-1-chromium-linux.png rename to 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 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-23372-rAsRequired-boolean-true-state-string-valid-1-chromium-linux.png similarity index 100% rename from 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 rename to 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 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 0000000000000000000000000000000000000000..e0fce01d05044a29c9fdd4e962f8a02d3aef4368 GIT binary patch literal 1577 zcmV+^2G;qBP)%0=NEmK7pItbAR`D z&-wQJe!tVx@(F@Kn5Du+7#3jpSb^nZ1(uH$SUy%@`B;JFV+EFv6<9u2VEI_Vhkw7# zYx~hW`Nybd$i-lqsgkUykr%$K6cuJ5ObpJ{fX(o3d)~I9!hLeFDx1NS9GbOV8Fh3_ ztUas63es@&C);@;j`C>50&g&Vqo=r$;$!6q1G#VNvbA83eBn0~?vYQnSQ!kw7Pq_K ziCDnwq3^A~O`r52Muxx8_r7)mEfU?+zc^a&GZ^&s^2xGX^7(v`NE8SJ+S=M8kqAnA<(<7X>9dj{BIvwn_YOZS zME(h{t9J%bkp%m&Cq#5Rye3y9NHKdzMQA1fmPDr`Fy%|W3jV!jcXE5G{>)1_9QJrT zO-)TElgVzkpFe-z?RJBRh_1Y8#QLp~93;Z-kmal)|G?@Dg#?Cox1oc$j66a`G>y+lH{>OIV0awN)1i~yf*he}WhTfZ*_gNX%dK1y zkG?wg{lLUe=HQH9uw1BV+__9HMlrcl^(PfP9QHmFyuEFk#J~^_G3SvEWb%icP4_nyb^-C%`$pbp1P>tzA)dc`u5f{&#NbUvH~w z*~j5=QuT-7K_FRcYpcWI&}y|Vm#e$G+h8#4-o0BW6h7HyGZX>)C5xh=f}RmPF+cY? z+4v786bmajPG28~;lWk)sm-9>VtgZxfU9jkNNWd(iZUb{^1SAFyu*|%KDsVuhf0o> zdxzcdmN4{(0WO!TQmN|e>m?EiNLE)@r&g=s1f_lUB|ydsXjfh9+{R_Aqd_EoDtqOT zvXQUi@hh#$m%UP&9IDnvBdti*`dnFkVwCyDJohgQdItzl$7>}amx#gEVY#<_d%;`}xi834J;>Q^_l>$Y{Z`G(jE;ixh9TdH)$!TqF}b2r z#wMWuz9-}iNGfwsOwxJ#gO)Z}lx`paxq4=xz`=P&sU-J#nfY{2&>4LhuzBwu?|`BK z=l(H|vElaExqI|okd@$=St?2Jz<@9}8j1E_Em6;QU;o=WzL@_&cZgQ&cSbm&d|@aT zD_)dCW?<;g(n$a8gEuzp3;%QA3RlS6dZT9D8Ljcet@dq~ATh!6LUCL}Cwmx%@J9bahn-`M_ku(~*-+uuJ43T^(bcE7xVjv@ zN7~$d(>c3jP@w7dRQ*{Roa;N9D?i<_@DCoaanN%@SJkqY!3M?vtFVlcEPhTrkwKmH zSx8u;Bv?W_Z1aTOK}cS6vtF`?RKPs)S=?Eg99Wdh(-T*a@`Qv*8yu#A-3M?Nhuzak*^05NT#|kVTE3ka5_zwU8|Nr$9pe6tS00v1! bK~w_(WQqShCyts{00000NkvXXu0mjfu|E*M literal 0 HcmV?d00001 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 0000000000000000000000000000000000000000..f545cad08c2c8426606123137aae45eae3fde48b GIT binary patch literal 1425 zcmV;C1#bF@P)NklNJ5xG*&HBru<~f3Ezk#r(%0>~p7z$Qw6|9l%0J|O0?qBc=bn3h z-+Rva-QO+KZnq)o>s5>sA@Ah%gAeNn-Ya?!SiwmfZ`d|R1)Fkjjv=a+~`OkJ~UrW<e8 zVSDRBQ(aIp0yM?B>J6Tt`AQX{hYQYEqU{TP`MM#mQNHmLq>XY*kAcJh(>a|JHna)I zJ=}ZaFU?0|h?Kd{RO7Goqeo=m@t>`|i?Bg=&D!~;qK%&kCFY(bd)r{THmB|QpPSg#8mNYl_*u0k3c;;MptUSdlKIRL8B0A7&-~D23>)X zmOoe$PEONKkKU#0oT%$=H%CfaefbpDH21qthOWG@vb7mJ}wjgK>P zk3@DlG0!~1_k%rK=j#PxJeGk26K=cpIpErZ94DWRUBDzA3BA! zr7*KHi?>^-di_uIU+WA9LJv)8h|Xm&1T6A+9*}-f=xjO)$3hcSi{aBfZ5P&M<9pWb zEYoO6xG%>wwdR_%<((?be?b9%U~{+mCOn>G9mOwZ9*`s&X{rW6}7a2te z3ql{^m&G#0t#L#IiYAM9(H*e)1T|t56^byPbwfbu1`69TwhB!iwzi;V=j;8wTYS-3ofp9R$ppS)s0f(H`Vl1MF>f6+xen>`b64lw!52WmpS z7`{=%M#vL{=9>GQ9BPv!o_NxqDR2{lp5WgnZqV6`1O3evmm1XVx0MIGq2OWSENZR7 zTO$OgXs^+9jOn}7P$1qVO!4j>c63RV;33t8U;^IxTG`C|!wX$ge!EZ6R_#>T0&6iT z%P#JBj9ACd-g4es5g(PoB!%x!6;C|0zQfmQK0dthhgw(`j6Rc8hd<;Fu#=Xrsp7$b z1>q1QfT#swJoNn2MaxPf3>8v<+!PGJ%sOb4o>8D}4Gn%vj=W^LsIViII zUoufYuqQ*kqa}b6g#bzv0w_@kphO{n5`_Rt6apww2%tnEfD(m(e*pjh|NnE^k1PNH f00v1!K~w_(yF9wVqbUj%00000NkvXXu0mjfYs##U literal 0 HcmV?d00001 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-4de74-sRequired-boolean-true-state-string-invalid-1-chromium-linux.png similarity index 100% rename from src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-28331-boolean-true-validationState-string-invalid-1-chromium-linux.png rename to 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 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-5f378-AsRequired-boolean-false-state-string-valid-1-chromium-linux.png similarity index 100% rename from src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-06df7--boolean-false-validationState-string-valid-1-chromium-linux.png rename to 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 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-eb421-Required-boolean-false-state-string-invalid-1-chromium-linux.png similarity index 100% rename from src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-6f470-oolean-false-validationState-string-invalid-1-chromium-linux.png rename to 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 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 0000000000000000000000000000000000000000..f545cad08c2c8426606123137aae45eae3fde48b GIT binary patch literal 1425 zcmV;C1#bF@P)NklNJ5xG*&HBru<~f3Ezk#r(%0>~p7z$Qw6|9l%0J|O0?qBc=bn3h z-+Rva-QO+KZnq)o>s5>sA@Ah%gAeNn-Ya?!SiwmfZ`d|R1)Fkjjv=a+~`OkJ~UrW<e8 zVSDRBQ(aIp0yM?B>J6Tt`AQX{hYQYEqU{TP`MM#mQNHmLq>XY*kAcJh(>a|JHna)I zJ=}ZaFU?0|h?Kd{RO7Goqeo=m@t>`|i?Bg=&D!~;qK%&kCFY(bd)r{THmB|QpPSg#8mNYl_*u0k3c;;MptUSdlKIRL8B0A7&-~D23>)X zmOoe$PEONKkKU#0oT%$=H%CfaefbpDH21qthOWG@vb7mJ}wjgK>P zk3@DlG0!~1_k%rK=j#PxJeGk26K=cpIpErZ94DWRUBDzA3BA! zr7*KHi?>^-di_uIU+WA9LJv)8h|Xm&1T6A+9*}-f=xjO)$3hcSi{aBfZ5P&M<9pWb zEYoO6xG%>wwdR_%<((?be?b9%U~{+mCOn>G9mOwZ9*`s&X{rW6}7a2te z3ql{^m&G#0t#L#IiYAM9(H*e)1T|t56^byPbwfbu1`69TwhB!iwzi;V=j;8wTYS-3ofp9R$ppS)s0f(H`Vl1MF>f6+xen>`b64lw!52WmpS z7`{=%M#vL{=9>GQ9BPv!o_NxqDR2{lp5WgnZqV6`1O3evmm1XVx0MIGq2OWSENZR7 zTO$OgXs^+9jOn}7P$1qVO!4j>c63RV;33t8U;^IxTG`C|!wX$ge!EZ6R_#>T0&6iT z%P#JBj9ACd-g4es5g(PoB!%x!6;C|0zQfmQK0dthhgw(`j6Rc8hd<;Fu#=Xrsp7$b z1>q1QfT#swJoNn2MaxPf3>8v<+!PGJ%sOb4o>8D}4Gn%vj=W^LsIViII zUoufYuqQ*kqa}b6g#bzv0w_@kphO{n5`_Rt6apww2%tnEfD(m(e*pjh|NnE^k1PNH f00v1!K~w_(yF9wVqbUj%00000NkvXXu0mjfYs##U literal 0 HcmV?d00001 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-false-required-boolean-false-state-string-invalid-1-chromium-linux.png similarity index 100% rename from src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-8f15a-oolean-false-validationState-string-invalid-1-chromium-linux.png rename to src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-false-state-string-invalid-1-chromium-linux.png 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-false-required-boolean-false-state-string-valid-1-chromium-linux.png similarity index 100% rename from src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-967c9--boolean-false-validationState-string-valid-1-chromium-linux.png rename to src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-false-state-string-valid-1-chromium-linux.png 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-false-required-boolean-false-state-string-warning-1-chromium-linux.png similarity index 100% rename from src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-fdbdd-oolean-false-validationState-string-warning-1-chromium-linux.png rename to src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-false-state-string-warning-1-chromium-linux.png 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 0000000000000000000000000000000000000000..e0fce01d05044a29c9fdd4e962f8a02d3aef4368 GIT binary patch literal 1577 zcmV+^2G;qBP)%0=NEmK7pItbAR`D z&-wQJe!tVx@(F@Kn5Du+7#3jpSb^nZ1(uH$SUy%@`B;JFV+EFv6<9u2VEI_Vhkw7# zYx~hW`Nybd$i-lqsgkUykr%$K6cuJ5ObpJ{fX(o3d)~I9!hLeFDx1NS9GbOV8Fh3_ ztUas63es@&C);@;j`C>50&g&Vqo=r$;$!6q1G#VNvbA83eBn0~?vYQnSQ!kw7Pq_K ziCDnwq3^A~O`r52Muxx8_r7)mEfU?+zc^a&GZ^&s^2xGX^7(v`NE8SJ+S=M8kqAnA<(<7X>9dj{BIvwn_YOZS zME(h{t9J%bkp%m&Cq#5Rye3y9NHKdzMQA1fmPDr`Fy%|W3jV!jcXE5G{>)1_9QJrT zO-)TElgVzkpFe-z?RJBRh_1Y8#QLp~93;Z-kmal)|G?@Dg#?Cox1oc$j66a`G>y+lH{>OIV0awN)1i~yf*he}WhTfZ*_gNX%dK1y zkG?wg{lLUe=HQH9uw1BV+__9HMlrcl^(PfP9QHmFyuEFk#J~^_G3SvEWb%icP4_nyb^-C%`$pbp1P>tzA)dc`u5f{&#NbUvH~w z*~j5=QuT-7K_FRcYpcWI&}y|Vm#e$G+h8#4-o0BW6h7HyGZX>)C5xh=f}RmPF+cY? z+4v786bmajPG28~;lWk)sm-9>VtgZxfU9jkNNWd(iZUb{^1SAFyu*|%KDsVuhf0o> zdxzcdmN4{(0WO!TQmN|e>m?EiNLE)@r&g=s1f_lUB|ydsXjfh9+{R_Aqd_EoDtqOT zvXQUi@hh#$m%UP&9IDnvBdti*`dnFkVwCyDJohgQdItzl$7>}amx#gEVY#<_d%;`}xi834J;>Q^_l>$Y{Z`G(jE;ixh9TdH)$!TqF}b2r z#wMWuz9-}iNGfwsOwxJ#gO)Z}lx`paxq4=xz`=P&sU-J#nfY{2&>4LhuzBwu?|`BK z=l(H|vElaExqI|okd@$=St?2Jz<@9}8j1E_Em6;QU;o=WzL@_&cZgQ&cSbm&d|@aT zD_)dCW?<;g(n$a8gEuzp3;%QA3RlS6dZT9D8Ljcet@dq~ATh!6LUCL}Cwmx%@J9bahn-`M_ku(~*-+uuJ43T^(bcE7xVjv@ zN7~$d(>c3jP@w7dRQ*{Roa;N9D?i<_@DCoaanN%@SJkqY!3M?vtFVlcEPhTrkwKmH zSx8u;Bv?W_Z1aTOK}cS6vtF`?RKPs)S=?Eg99Wdh(-T*a@`Qv*8yu#A-3M?Nhuzak*^05NT#|kVTE3ka5_zwU8|Nr$9pe6tS00v1! bK~w_(WQqShCyts{00000NkvXXu0mjfu|E*M literal 0 HcmV?d00001 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-false-required-boolean-true-state-string-invalid-1-chromium-linux.png similarity index 100% rename from src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-aebbc-boolean-true-validationState-string-invalid-1-chromium-linux.png rename to src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-true-state-string-invalid-1-chromium-linux.png 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-false-required-boolean-true-state-string-valid-1-chromium-linux.png similarity index 100% rename from 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 rename to src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-true-state-string-valid-1-chromium-linux.png 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-false-required-boolean-true-state-string-warning-1-chromium-linux.png similarity index 100% rename from src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-fals-53679-boolean-true-validationState-string-warning-1-chromium-linux.png rename to src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-false-required-boolean-true-state-string-warning-1-chromium-linux.png 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-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-668ea-Required-boolean-false-state-string-invalid-1-chromium-linux.png similarity index 100% rename from src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-7eda3-oolean-false-validationState-string-invalid-1-chromium-linux.png rename to 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 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 0000000000000000000000000000000000000000..0592b0bc6690b4826cb75b308a9892918dc62d6d GIT binary patch literal 1546 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 literal 0 HcmV?d00001 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-b8490-Required-boolean-false-state-string-warning-1-chromium-linux.png similarity index 100% rename from src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-59db8-oolean-false-validationState-string-warning-1-chromium-linux.png rename to 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 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-c118a-sRequired-boolean-true-state-string-invalid-1-chromium-linux.png similarity index 100% rename from src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-d8c8f-boolean-true-validationState-string-invalid-1-chromium-linux.png rename to 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 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-cce1a-rAsRequired-boolean-true-state-string-valid-1-chromium-linux.png similarity index 100% rename from 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 rename to 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 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-d5738-AsRequired-boolean-false-state-string-valid-1-chromium-linux.png similarity index 100% rename from src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-143b9--boolean-false-validationState-string-valid-1-chromium-linux.png rename to 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 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-dc349-sRequired-boolean-true-state-string-warning-1-chromium-linux.png similarity index 100% rename from src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-a32f5-boolean-true-validationState-string-warning-1-chromium-linux.png rename to 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 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 0000000000000000000000000000000000000000..0592b0bc6690b4826cb75b308a9892918dc62d6d GIT binary patch literal 1546 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 literal 0 HcmV?d00001 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-required-boolean-true-state-string-invalid-1-chromium-linux.png similarity index 100% rename from src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-f3c63-boolean-true-validationState-string-invalid-1-chromium-linux.png rename to src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-true-state-string-invalid-1-chromium-linux.png 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-required-boolean-true-state-string-valid-1-chromium-linux.png similarity index 100% rename from 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 rename to src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-true-state-string-valid-1-chromium-linux.png 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-required-boolean-true-state-string-warning-1-chromium-linux.png similarity index 100% rename from src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-db84c-boolean-true-validationState-string-warning-1-chromium-linux.png rename to src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-checked-boolean-true-required-boolean-true-state-string-warning-1-chromium-linux.png 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-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 0000000000000000000000000000000000000000..f545cad08c2c8426606123137aae45eae3fde48b GIT binary patch literal 1425 zcmV;C1#bF@P)NklNJ5xG*&HBru<~f3Ezk#r(%0>~p7z$Qw6|9l%0J|O0?qBc=bn3h z-+Rva-QO+KZnq)o>s5>sA@Ah%gAeNn-Ya?!SiwmfZ`d|R1)Fkjjv=a+~`OkJ~UrW<e8 zVSDRBQ(aIp0yM?B>J6Tt`AQX{hYQYEqU{TP`MM#mQNHmLq>XY*kAcJh(>a|JHna)I zJ=}ZaFU?0|h?Kd{RO7Goqeo=m@t>`|i?Bg=&D!~;qK%&kCFY(bd)r{THmB|QpPSg#8mNYl_*u0k3c;;MptUSdlKIRL8B0A7&-~D23>)X zmOoe$PEONKkKU#0oT%$=H%CfaefbpDH21qthOWG@vb7mJ}wjgK>P zk3@DlG0!~1_k%rK=j#PxJeGk26K=cpIpErZ94DWRUBDzA3BA! zr7*KHi?>^-di_uIU+WA9LJv)8h|Xm&1T6A+9*}-f=xjO)$3hcSi{aBfZ5P&M<9pWb zEYoO6xG%>wwdR_%<((?be?b9%U~{+mCOn>G9mOwZ9*`s&X{rW6}7a2te z3ql{^m&G#0t#L#IiYAM9(H*e)1T|t56^byPbwfbu1`69TwhB!iwzi;V=j;8wTYS-3ofp9R$ppS)s0f(H`Vl1MF>f6+xen>`b64lw!52WmpS z7`{=%M#vL{=9>GQ9BPv!o_NxqDR2{lp5WgnZqV6`1O3evmm1XVx0MIGq2OWSENZR7 zTO$OgXs^+9jOn}7P$1qVO!4j>c63RV;33t8U;^IxTG`C|!wX$ge!EZ6R_#>T0&6iT z%P#JBj9ACd-g4es5g(PoB!%x!6;C|0zQfmQK0dthhgw(`j6Rc8hd<;Fu#=Xrsp7$b z1>q1QfT#swJoNn2MaxPf3>8v<+!PGJ%sOb4o>8D}4Gn%vj=W^LsIViII zUoufYuqQ*kqa}b6g#bzv0w_@kphO{n5`_Rt6apww2%tnEfD(m(e*pjh|NnE^k1PNH f00v1!K~w_(yF9wVqbUj%00000NkvXXu0mjfYs##U literal 0 HcmV?d00001 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-false-checked-boolean-false-state-string-invalid-1-chromium-linux.png similarity index 100% rename from src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-a7f59-oolean-false-validationState-string-invalid-1-chromium-linux.png rename to src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-false-checked-boolean-false-state-string-invalid-1-chromium-linux.png 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-false-checked-boolean-false-state-string-valid-1-chromium-linux.png similarity index 100% rename from src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-43fbf--boolean-false-validationState-string-valid-1-chromium-linux.png rename to src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-false-checked-boolean-false-state-string-valid-1-chromium-linux.png 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-false-checked-boolean-false-state-string-warning-1-chromium-linux.png similarity index 100% rename from src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-fal-a874a-oolean-false-validationState-string-warning-1-chromium-linux.png rename to src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-false-checked-boolean-false-state-string-warning-1-chromium-linux.png 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 0000000000000000000000000000000000000000..0592b0bc6690b4826cb75b308a9892918dc62d6d GIT binary patch literal 1546 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 P00000NkvXXu0mjfaZabH literal 0 HcmV?d00001 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-true-checked-boolean-false-state-string-invalid-1-chromium-linux.png similarity index 100% rename from src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-f350b-oolean-false-validationState-string-invalid-1-chromium-linux.png rename to src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-false-state-string-invalid-1-chromium-linux.png 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-true-checked-boolean-false-state-string-valid-1-chromium-linux.png similarity index 100% rename from src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-4123f--boolean-false-validationState-string-valid-1-chromium-linux.png rename to src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-false-state-string-valid-1-chromium-linux.png 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-true-checked-boolean-false-state-string-warning-1-chromium-linux.png similarity index 100% rename from src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-ff2f5-oolean-false-validationState-string-warning-1-chromium-linux.png rename to src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-false-state-string-warning-1-chromium-linux.png 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 0000000000000000000000000000000000000000..d90ef1f6f099178b552d199090632530a9f4d35f GIT binary patch literal 1522 zcmVCOF)=GK zkwghGLM%ijHj<*H1$x+)mhG|IZg;!AcDtQDX7(I^yR(!%-cGypFPizJ-ORjs?>E2q zeZSxD&CZG`ib4X3kVqf}K@<#vC>R7$FbJYx5JbTsh=M^71%n_820;`IV)*wODeAV} z@9?p{5KmV^CX(jKG&}MY6&kdxA#5F%nJZ%%jVXAcSXsH8bs?$t8I&OpFy!Ha3^;r! zL->c#X1BY~iIxDrg*$KkYy7+$@iOvNZ_jJZC_`Evxnyq|hXa!JhZi$ItdY(i^ADN) zWyDm!fYbae-NF)C#O^~9MF-2u->%AkT)SZ3xtr6B#S^3g&Kpzoh-<#xH$l64W>J_; z>L2n3sV+Nhbg_XjzlC%JXZ_HV>ahD~nAEFapEkKu+tc~OAx8WVg!WLGN|ytNiW0RQ z+4#F#zB71+sE|8oKGR>Ye~r9M4Nl*!YoprjinSV_&0F&RChf5buJh>WKJ&NzP_tn^ zY?!UmKc?A|pK5{Ub`Vp;pLI!crLt8Dn7n#x{)Vr2kuni?)%wHW#067e)+fo4R_XU- z6)RCx#B~1PMIp09s>&Q!zk?02oFYXBOF2c@AUplH6)i;7**%cYt}aK-k56zd;4})O z+O|XBYseGqJo1+$PgbyRH8bWhpXuAy_^fh6cGwph`lNI8%ifxEds8i>1A@!+MNj3Y zTUQ<_MbX9YIB?Z*Z32wLsp~&ScI}Gozdwgq)c4+v-q){h|6?B^BGUPjphNu0nxmD4 z`%8+C>j(*n2m~>r-jK^FV!1HLjC)XqK*^kHG?&#?bE_v(iu0b-+I}*kXkf#qtiuu{dJhJW~>O{iEbjDFE+(DX03^Yv2uO(suPu?-^4OVv%NrjydpJO zEP4YsPu1o;?aRq=&RD(U=Z5G(3g%2(JWwN)8?$3~DN%tO9Ljaspn}KXluXOg`4dlq zC=-`QieJ%*6ymH^_xgp|@k>T}bm4-BB^=$Sc6S^Wt0k#d*M796>}2)yl`&__lK@WA?Z$jJ2Q5EFyszE)xyj>CJeV!nKSP`JeXv|yEzA^Hgb)+Dz5h>A zD%#b2VB_gp!>OCCk2XRk!p2#4vWhE>;9U8s8e@I;nBD*h;FTuioVf133}t7%x+axE^N0L zPh5epH^^z7bYHALu?ZUVUH%CgWrDOwu6?NjEni633sHtVz>tRv0)9&tUNR*?2tTl= zBD|x;Ac%rN5CwxE3I;(G41y>a1W_;uqF@k2!61l&;eP-C0RR6_P=5sg000I_L_t&o Y0Cz0$GPJGDvj6}907*qoM6N<$f-h&{82|tP literal 0 HcmV?d00001 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-true-checked-boolean-true-state-string-invalid-1-chromium-linux.png similarity index 100% rename from src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-e78cd-boolean-true-validationState-string-invalid-1-chromium-linux.png rename to src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-true-state-string-invalid-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-true-checked-boolean-true-state-string-valid-1-chromium-linux.png similarity index 100% rename from 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 rename to src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-true-state-string-valid-1-chromium-linux.png 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-true-checked-boolean-true-state-string-warning-1-chromium-linux.png similarity index 100% rename from src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-tru-2f43d-boolean-true-validationState-string-warning-1-chromium-linux.png rename to src/components/CheckboxField/__tests__/CheckboxField.spec.tsx-snapshots/CheckboxField-base-visual-disabled-boolean-true-checked-boolean-true-state-string-warning-1-chromium-linux.png 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..32a7130b7 100644 --- a/src/components/FileInputField/FileInputField.module.scss +++ b/src/components/FileInputField/FileInputField.module.scss @@ -100,6 +100,10 @@ cursor: inherit; } + .isRootStateChanged { + @include variants.validation(changed); + } + .isRootStateInvalid { @include variants.validation(invalid); } 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 0000000000000000000000000000000000000000..8e999c15717d98cf96c76ad0f72a5a295f465b31 GIT binary patch literal 4935 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 v*kb9|BLG4u|)QnaIrFLnI#wuckQY-c@!A-5A zR_#sgb$jo_eY^L*{NMS`ch1B4AO8P*e~f{i799gKKJEuuwFZLwV2HzdP_`u-~wS`!}E-!h#G!toO#5~OtdejBr z@m^cnJY689QJ{8F%o3nI9lfr~lWB-MPO=6?M>O@GNUTP&K1#R z$Em2RQ2btOCaKn7;Kp6`Qt1krVq*6GKw3;nQs4D8F4icL(FPQF6QYv3jAGY^!G(%w zr&>~%R6`rC{Zu~NgQZzhqRexK57;aY7u-!={F3L;vC|bx6~22mAa_QZyRCoNu-Mm$ zdAmX>%~pdI>N-@Q(OWUZ$v>)&g4bnG7o0v;t#-skrA|Ur($#6r+ZMc&6~wd#ZGRpa zL$l-8(I0wlZ|?n8Ym_dsSm+s;Y{$%a*QGAy-*9#m=^&b`i+$GSgMnKc?O(7y8wwO= zY=nmJSqJA@D!PDP_1q(oS`neHkyk#y*UXAFEQ$!-o#C`1N2T!U`3nzhm3S}gbV+y` z%4%uaYICE-`p*r z@5A$_Mq;T$l*Dw++hsB^dsfPI#?>1bn&4F|k_TA~RA7B3@3~ne=4;8KR3+>47;drA z)dn2yY8==;Gl_G-37l`!liRz0r|R@IgOnHregF0a^x^qIFDeM*T{d}wftRk~YsTt2 z%6|$8+_3$jxxc$zQ})9;%2_UmAC4c7a^1J@>|e6G!PksVl!Iscjb8X6Q1QdeOIq(K z{I4qL(0=hf3*w~dj<@l1&Y!(Laws3xaqd|j{S<~# z8aY_9&DUm2SH7bNi_xEUqN%eF-m!?JfM!7}kV2!W%9FgljlC&;MQ{zHf~j0$de;4| z3Y;qrV3Fs`QHg7>q8eKRvRZzH28s%v!X<<`pBVG* z3i3IdTFLIo?7c`0mWy-&9$RyLnfn^d809QxbNr?Lb#a7axz_NN3{9utd}sQ?WifD3 zxZP;+l<_i9&K683;uC5?=A9^J0;V2Hr+I9hzi0L&L}VC~NH0Jhul=C>os#h&^P|XO zwU@vWLI$M#T`M7$t(!sar@;HkQM-Ge%D}J{&4BU=0Nvl4LJqF)#t+k~^AQ?_Z!QyP zK6l#;r?b5360sw}L-xJmQ?xaV`2;BcI7qEB>E0PidAisYyip-5;^ZW%H8eET zpGCXSke7abAf=cC1nLnHNrSe|*)*Y2s43r8Yo*`VbyLCzG`Ul%0BW6-KN@7^ICGCBk)cb5m;2*H1+T#SUr>IOaF<56 z8ol(bOaN%gErGX)qJG|>De{Bk7r^HXIUQplvlRi^$jd7#aTZmW zy!Sb3Wa5b)#=BzQr_1r+-%|d`aIR`Dco-`UdaxApRyrqFHo}yBtjB_7f#~Yv~cL8FjHf1MX7ZZw{F=#x(P(W*? zsxGXHR11AKY5ODH@N;!PhgMGstO;^Ah-ggzJJ`AEIx=p#$)6=1SF(B1yYje2hKE2I zfMA6O#jD@qvtU&Uy%`&Lj61!vfE*St76qvcyOsTVU%s985tWA0;8#NIXyhKBg`Dco z1un&}d67(k7pCV%Wm;ctJWb53=&vC5cEz9XvsZhI-pp{IgI?vfg#O_P%SS(M#QcwKm zcsW*aKz=U7cd?85Ve`rFVAtC7>xA|pj=xbrR(zxki_)u1Fy3kSS zjBVrU5HT^@5kr*tk+l^oC0Rh|K85rnuvK1*I^>jE7(*b>+C<~u@@bZ~0!Px4mTXuI zp*W~QR6Z3M2nwI}bZ5%Z;!#%od9gEPF(lVNZEOPb)lcF zc(j)Pv6=%oa^1@l-t72;#gqxZf$QZ~uO)ufZ@oI6E;f?gsDw4KLE=v$xT{5TBx!#g)MbCa*^pn!1-!j_t1DDHgfmjtcTa1MUG2yH$eXU847 z-ZrvpV{%YhCaD z`jiX-o0i#*(Ua#JbwqeCkt%gKsXGkD8i-SF;Vj);T#$^DL2@!O*7e>`>L@ZOE}3=M zY{IW(TNI2)+uBH)ei4bCx=Mo55ps1I9G+fIKe{zkPWR8|ZH7Bxc5aC_aN4N@fhGSI z?En@P{mTOHla!#GQ19Jt$m86t1dJ1Fjb@+PuDoCq{P&P(@x0~g?)22`RrHc8)^u|m zt+Z8F*fBj*{no`iL;40$d=N5k#8*^l-MO<3iB24E!zR4}GzxPjkG5o1E#+y(iJX+q zh@3rO^OQV?=%vXrsJ5xvas6~PA9*%EDgbAopo2GRuRK=}u`s9jV_st1WG zgYR~I^{Cn<8Bb-kV9QFGMNPeMw}$Q76%-hI>~Wwcl>*SVQYrMklbdmrsuz_dzuJV~7kw4)equxX7;c zruf~U3+P8DBj4>BxE(l8Z9Uj7BifCS?l#ka<{iT)dvpb?oX|CVq;B6|n>X># z7IlnQ@6u7shn3_yVbV(?m;b&E5frwDob>K0$qjtB!!|f7JK4|;S z7T0}ME_56x=#TH1S=qd38%61$0AJj&HR_jbm6K^yyQdE~^*KG|#K19wDz9~Vb9lg} z1X)f`eF_s>gO7^)2dAvZLDkj!&)rE{^&Q{Py?IYWRiV+Ymt|&OECBI$dXDzmkw|6M z(U?M3CTN?1g6Rci>zd~Gl|au^G_RpfMQxrNauR^4!SsJHQXh478)5PIi`D^^<+mO;u1n*@D<||4I0T-~L;hw&PNIq%g>-0X*tv&?b z)>Mtt9cftw`GP*N&7GNZE44}D?Ce$N9n~uSFqx3{5(Ss-)h1Fp`l{n}q6VZ%t~@Ab z2yge-A(vj+Elt@g$FTHnNczc55#4Ww=>ji__HKyGU~HmMqr7l8N4(W^Fe1SJX1{=t zA3Zt}1SFV5#wJF%Hs^Cu7q;D+%`&vxsgj)|N^W#}X$+rgRo`R0WG^rP!!B`cfgk;7 z4j?GOQTxQKprbJ}t@4;YwoI+HZKA$v_XzD>K3QRp*>5hyTRb5VfK)JT86Ka_!MfHv zUFR{4v+u1LR*B=EK`=A$*u=2VhtK&AD>or_f477xT`Cq+QO~&qSv6n&fL6?~8Hl7- ztGnPQ+J5_)t9CT`**_}OD?Buv8;g~&^dLST?aL5lrjfWxL^2DGQ*##J7JrI(PmwGH zE>}jg{cXR+qhZMu-{$i<)mS;wHiY$FWc|KjIIV(*F*cj3;NzEn;ehUcWdYgEpEK9| z--BK07-TvxR>gQSxN1HAGNnBHphN5G@2FQ2wqZZHr{0{d9$_-2OL9Rps*hQJqL^KwtZUw* z8_6~=Y(nt3hZ5FO$rWdbtL|+4fbKec+?5C|97*q8dVw7yBO}w{s8_JD_m~|1XjF?~nYN0sy$V`R6qf|FRa!|00$Q;8-R~ UMx5@v{jURfuBoR{0kMtzPjLmsegFUf literal 0 HcmV?d00001 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-state-string-invalid-1-chromium-linux.png similarity index 100% rename from src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-validationState-string-invalid-1-chromium-linux.png rename to src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-state-string-invalid-1-chromium-linux.png 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-state-string-valid-1-chromium-linux.png similarity index 100% rename from src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-validationState-string-valid-1-chromium-linux.png rename to src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-state-string-valid-1-chromium-linux.png 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-state-string-warning-1-chromium-linux.png similarity index 100% rename from src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-validationState-string-warning-1-chromium-linux.png rename to src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-disabled-boolean-true-state-string-warning-1-chromium-linux.png 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-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 0000000000000000000000000000000000000000..2b52e92ffbca2fedd3be2af932c9da0a7a76b079 GIT binary patch literal 3552 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 literal 0 HcmV?d00001 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-state-string-invalid-1-chromium-linux.png similarity index 100% rename from src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-validationState-string-invalid-1-chromium-linux.png rename to src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-state-string-invalid-1-chromium-linux.png 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-state-string-valid-1-chromium-linux.png similarity index 100% rename from src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-validationState-string-valid-1-chromium-linux.png rename to src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-state-string-valid-1-chromium-linux.png 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-state-string-warning-1-chromium-linux.png similarity index 100% rename from src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-validationState-string-warning-1-chromium-linux.png rename to src/components/FileInputField/__tests__/FileInputField.spec.tsx-snapshots/FileInputField-base-visual-filledInputField-object-state-string-warning-1-chromium-linux.png 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__/_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..847e9a7da 100644 --- a/src/components/FormLayout/FormLayoutCustomField.module.scss +++ b/src/components/FormLayout/FormLayoutCustomField.module.scss @@ -19,6 +19,10 @@ } // States + .isRootStateChanged { + @include variants.validation(changed); + } + .isRootStateInvalid { @include variants.validation(invalid); } 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 0000000000000000000000000000000000000000..e819905ffd936c80556471db9989d9b7fd8a05a5 GIT binary patch literal 6585 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 ({ 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..02e534657 100644 --- a/src/components/InputGroup/InputGroup.module.scss +++ b/src/components/InputGroup/InputGroup.module.scss @@ -50,6 +50,10 @@ } // States + .isRootStateChanged { + @include variants.validation(changed); + } + .isRootStateInvalid { @include variants.validation(invalid); } 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" />