From 9887171447a600b2883aace562f386daeda8380b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jan=20Kry=C5=A1p=C3=ADn?= <crishpeen@gmail.com>
Date: Fri, 9 Jun 2023 23:15:18 +0200
Subject: [PATCH] BREAKING CHANGE(web-twig): Remove `error` Validation State in
 favor of `danger` #DS-677
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

 ## Migration Guide

Instead of the `error` value of the validationState prop, use `danger`.
This applies to Checkbox, Radio, TextField, TextArea, and TextFieldBase.

- `<TextField validationState="error" …>` → `<TextField validationState="danger" …>`

Please refer back to these instructions or reach out to our team
if you encounter any issues during migration.
---
 .../CheckboxField/CheckboxField.twig          |  5 --
 .../components/CheckboxField/README.md        | 37 +++++++-------
 .../Resources/components/TextArea/README.md   |  1 -
 .../Resources/components/TextField/README.md  | 39 +++++++--------
 .../components/TextFieldBase/README.md        | 49 +++++++++----------
 .../TextFieldBase/TextFieldBase.twig          |  3 --
 ...data set checkboxFieldDefault.twig__1.html |  2 +-
 ...data set passwordFieldDefault.twig__1.html |  2 +-
 ...with data set textAreaDefault.twig__1.html |  2 +-
 ...data set textFieldBaseDefault.twig__1.html |  2 +-
 ...ta set textFieldBaseMultiline.twig__1.html |  2 +-
 ...ith data set textFieldDefault.twig__1.html |  2 +-
 ...data set textFieldDefaultPure.twig__1.html |  2 +-
 ...data set checkboxFieldDefault.twig__1.html | 11 +++++
 ... set checkboxFieldDefaultPure.twig__1.html | 12 +++++
 ...data set passwordFieldDefault.twig__1.html |  7 +++
 ...ith data set textFieldDefault.twig__1.html |  7 +++
 ...data set textFieldDefaultPure.twig__1.html |  8 +++
 .../checkboxFieldDefault.twig                 |  1 -
 .../passwordFieldDefault.twig                 |  2 +-
 .../components-fixtures/textAreaDefault.twig  |  2 +-
 .../textFieldBaseDefault.twig                 |  2 +-
 .../textFieldBaseMultiline.twig               |  2 +-
 .../components-fixtures/textFieldDefault.twig |  2 +-
 .../textFieldDefaultPure.twig                 |  2 +-
 25 files changed, 119 insertions(+), 87 deletions(-)
 create mode 100644 packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set checkboxFieldDefault.twig__1.html
 create mode 100644 packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set checkboxFieldDefaultPure.twig__1.html
 create mode 100644 packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set passwordFieldDefault.twig__1.html
 create mode 100644 packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set textFieldDefault.twig__1.html
 create mode 100644 packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set textFieldDefaultPure.twig__1.html

diff --git a/packages/web-twig/src/Resources/components/CheckboxField/CheckboxField.twig b/packages/web-twig/src/Resources/components/CheckboxField/CheckboxField.twig
index baa9a114c7..49801c6745 100644
--- a/packages/web-twig/src/Resources/components/CheckboxField/CheckboxField.twig
+++ b/packages/web-twig/src/Resources/components/CheckboxField/CheckboxField.twig
@@ -42,11 +42,6 @@
 {%- set _labelClassName = [ _labelClassName, _labelHiddenClassName, _labelRequiredClassName ] -%}
 {%- set _mainPropsWithoutId = props | filter((value, prop) => prop is not same as('id')) -%}
 
-{# Deprecations #}
-{% if _validationState is same as('error') %}
-    {% deprecated 'CheckboxField: The "error" value for "validationState" property will be removed in the next major version. Use "danger" instead.' %}
-{% endif %}
-
 <label for="{{ _id }}" {{ mainProps(_mainPropsWithoutId) }} {{ styleProp(_styleProps) }} {{ classProp(_classNames) }}>
     <input
         {{ inputProps(props, [], _inputProps) }}
diff --git a/packages/web-twig/src/Resources/components/CheckboxField/README.md b/packages/web-twig/src/Resources/components/CheckboxField/README.md
index 7e7956a4b5..84bcff267b 100644
--- a/packages/web-twig/src/Resources/components/CheckboxField/README.md
+++ b/packages/web-twig/src/Resources/components/CheckboxField/README.md
@@ -38,24 +38,24 @@ Without lexer:
 
 ## API
 
-| Prop name           | Type                                                                 | Default | Required | Description                                                                                                                        |
-| ------------------- | -------------------------------------------------------------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- |
-| `id`                | `string`                                                             | `null`  | no       | Input and label identification                                                                                                     |
-| `inputProps`        | `string[]`                                                           | `[]`    | no       | Pass additional attributes to the input element                                                                                    |
-| `isChecked`         | `bool`                                                               | `false` | no       | If true, input is checked                                                                                                          |
-| `isDisabled`        | `bool`                                                               | `false` | no       | If true, input is disabled                                                                                                         |
-| `isItem`            | `bool`                                                               | `false` | no       | To render in [Item][item] mode                                                                                                     |
-| `isLabelHidden`     | `bool`                                                               | `false` | no       | If true, label is hidden                                                                                                           |
-| `isRequired`        | `bool`                                                               | `false` | no       | If true, input is required                                                                                                         |
-| `label`             | `string`                                                             | —       | yes\*    | Label text                                                                                                                         |
-| `UNSAFE_label`      | `string`                                                             | —       | yes\*    | Unescaped label text (allows HTML)                                                                                                 |
-| `message`           | `string`, `string[]`                                                 | `null`  | no\*\*   | Validation message                                                                                                                 |
-| `UNSAFE_message`    | `string`, `string[]`                                                 | `null`  | no\*\*   | Unescaped validation message                                                                                                       |
-| `helperText`        | `string`                                                             | `null`  | no\*\*   | Custom helper text                                                                                                                 |
-| `UNSAFE_helperText` | `string`                                                             | `null`  | no\*\*   | Unescaped custom helper text                                                                                                       |
-| `name`              | `string`                                                             | `null`  | no       | Input name                                                                                                                         |
-| `validationState`   | [Validation dictionary][dictionary-validation], `error` (deprecated) | `null`  | no       | Type of validation state. [**DEPRECATED**][deprecated] The value "error" in the dictionary will be replaced by the value "danger". |
-| `value`             | `string`                                                             | `null`  | no       | Input value                                                                                                                        |
+| Prop name           | Type                                           | Default | Required | Description                                     |
+| ------------------- | ---------------------------------------------- | ------- | -------- | ----------------------------------------------- |
+| `id`                | `string`                                       | `null`  | no       | Input and label identification                  |
+| `inputProps`        | `string[]`                                     | `[]`    | no       | Pass additional attributes to the input element |
+| `isChecked`         | `bool`                                         | `false` | no       | If true, input is checked                       |
+| `isDisabled`        | `bool`                                         | `false` | no       | If true, input is disabled                      |
+| `isItem`            | `bool`                                         | `false` | no       | To render in [Item][item] mode                  |
+| `isLabelHidden`     | `bool`                                         | `false` | no       | If true, label is hidden                        |
+| `isRequired`        | `bool`                                         | `false` | no       | If true, input is required                      |
+| `label`             | `string`                                       | —       | yes\*    | Label text                                      |
+| `UNSAFE_label`      | `string`                                       | —       | yes\*    | Unescaped label text (allows HTML)              |
+| `message`           | `string`, `string[]`                           | `null`  | no\*\*   | Validation message                              |
+| `UNSAFE_message`    | `string`, `string[]`                           | `null`  | no\*\*   | Unescaped validation message                    |
+| `helperText`        | `string`                                       | `null`  | no\*\*   | Custom helper text                              |
+| `UNSAFE_helperText` | `string`                                       | `null`  | no\*\*   | Unescaped custom helper text                    |
+| `name`              | `string`                                       | `null`  | no       | Input name                                      |
+| `validationState`   | [Validation dictionary][dictionary-validation] | `null`  | no       | Type of validation state.                       |
+| `value`             | `string`                                       | `null`  | no       | Input value                                     |
 
 \*: Label is required. You can use the `label` for simple text or `UNSAFE_label` for HTML content.
 \*\*: Props with and without `UNSAFE_` prefix are mutually exclusive.
@@ -68,5 +68,4 @@ These attributes will be passed to the topmost HTML element of the component.
 [checkboxfield]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/CheckboxField
 [item]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-twig/src/Resources/components/Item/README.md
 [dictionary-validation]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#validation
-[deprecated]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#deprecations
 [escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches
diff --git a/packages/web-twig/src/Resources/components/TextArea/README.md b/packages/web-twig/src/Resources/components/TextArea/README.md
index 7dcb4a16bd..34606ffae3 100644
--- a/packages/web-twig/src/Resources/components/TextArea/README.md
+++ b/packages/web-twig/src/Resources/components/TextArea/README.md
@@ -100,5 +100,4 @@ Then you need to add attribute `isAutoResizing` to the component.
 [textarea]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/TextArea
 [web-readme]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/README.md
 [dictionary-validation]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#validation
-[deprecated]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#deprecations
 [escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches
diff --git a/packages/web-twig/src/Resources/components/TextField/README.md b/packages/web-twig/src/Resources/components/TextField/README.md
index 7305511e8d..46e88bda85 100644
--- a/packages/web-twig/src/Resources/components/TextField/README.md
+++ b/packages/web-twig/src/Resources/components/TextField/README.md
@@ -58,25 +58,25 @@ Without lexer:
 
 ## API
 
-| Prop name           | Type                                                                 | Default | Required | Description                                                                                                                        |
-| ------------------- | -------------------------------------------------------------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- |
-| `autocomplete`      | `bool`                                                               | `false` | no       | If the field should have autocomplete enabled                                                                                      |
-| `hasPasswordToggle` | `bool`                                                               | `false` | no       | If true, the `type` is set to `password` and a password toggle is shown                                                            |
-| `helperText`        | `string`                                                             | `null`  | no       | Custom helper text                                                                                                                 |
-| `id`                | `string`                                                             | —       | yes      | Input and label identification                                                                                                     |
-| `inputProps`        | `string[]`                                                           | `[]`    | no       | Pass additional attributes to the input element                                                                                    |
-| `isDisabled`        | `bool`                                                               | `false` | no       | If true, input is disabled                                                                                                         |
-| `isFluid`           | `bool`                                                               | `false` | no       | If true, the element spans to the full width of its parent                                                                         |
-| `isLabelHidden`     | `bool`                                                               | `false` | no       | If true, label is hidden                                                                                                           |
-| `isRequired`        | `bool`                                                               | `false` | no       | If true, input is required                                                                                                         |
-| `label`             | `string`                                                             | —       | yes      | Label text                                                                                                                         |
-| `message`           | `string`, `string[]`                                                 | `null`  | no       | Validation message                                                                                                                 |
-| `name`              | `string`                                                             | `null`  | no       | Input name                                                                                                                         |
-| `placeholder`       | `string`                                                             | `null`  | no       | Input placeholder                                                                                                                  |
-| `inputWidth`        | `number`                                                             | `null`  | no       | Input width                                                                                                                        |
-| `type`              | `email`, `number`, `password`, `search`, `tel`, `text`, `url`        | `text`  | no       | Input type                                                                                                                         |
-| `validationState`   | [Validation dictionary][dictionary-validation], `error` (deprecated) | `null`  | no       | Type of validation state. [**DEPRECATED**][deprecated] The value "error" in the dictionary will be replaced by the value "danger". |
-| `value`             | `string`                                                             | `null`  | no       | Input value                                                                                                                        |
+| Prop name           | Type                                                          | Default | Required | Description                                                             |
+| ------------------- | ------------------------------------------------------------- | ------- | -------- | ----------------------------------------------------------------------- |
+| `autocomplete`      | `bool`                                                        | `false` | no       | If the field should have autocomplete enabled                           |
+| `hasPasswordToggle` | `bool`                                                        | `false` | no       | If true, the `type` is set to `password` and a password toggle is shown |
+| `helperText`        | `string`                                                      | `null`  | no       | Custom helper text                                                      |
+| `id`                | `string`                                                      | —       | yes      | Input and label identification                                          |
+| `inputProps`        | `string[]`                                                    | `[]`    | no       | Pass additional attributes to the input element                         |
+| `isDisabled`        | `bool`                                                        | `false` | no       | If true, input is disabled                                              |
+| `isFluid`           | `bool`                                                        | `false` | no       | If true, the element spans to the full width of its parent              |
+| `isLabelHidden`     | `bool`                                                        | `false` | no       | If true, label is hidden                                                |
+| `isRequired`        | `bool`                                                        | `false` | no       | If true, input is required                                              |
+| `label`             | `string`                                                      | —       | yes      | Label text                                                              |
+| `message`           | `string`, `string[]`                                          | `null`  | no       | Validation message                                                      |
+| `name`              | `string`                                                      | `null`  | no       | Input name                                                              |
+| `placeholder`       | `string`                                                      | `null`  | no       | Input placeholder                                                       |
+| `inputWidth`        | `number`                                                      | `null`  | no       | Input width                                                             |
+| `type`              | `email`, `number`, `password`, `search`, `tel`, `text`, `url` | `text`  | no       | Input type                                                              |
+| `validationState`   | [Validation dictionary][dictionary-validation]                | `null`  | no       | Type of validation state.                                               |
+| `value`             | `string`                                                      | `null`  | no       | Input value                                                             |
 
 On top of the API options, you can add `data-*` or `aria-*` attributes to
 further extend component's descriptiveness and accessibility. Also, UNSAFE styling props are available,
@@ -85,5 +85,4 @@ These attributes will be passed to the topmost HTML element of the component.
 
 [textfield]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/TextField
 [dictionary-validation]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#validation
-[deprecated]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#deprecations
 [escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches
diff --git a/packages/web-twig/src/Resources/components/TextFieldBase/README.md b/packages/web-twig/src/Resources/components/TextFieldBase/README.md
index 2de83f1b3d..f98913111b 100644
--- a/packages/web-twig/src/Resources/components/TextFieldBase/README.md
+++ b/packages/web-twig/src/Resources/components/TextFieldBase/README.md
@@ -58,30 +58,30 @@ Without lexer:
 
 ## API
 
-| Prop name           | Type                                                                 | Default | Required | Description                                                                                                                        |
-| ------------------- | -------------------------------------------------------------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- |
-| `autocomplete`      | `bool`                                                               | `false` | no       | If the field should have autocomplete enabled                                                                                      |
-| `hasPasswordToggle` | `bool`                                                               | `false` | no       | If true, the `type` is set to `password` and a password toggle is shown                                                            |
-| `helperText`        | `string`                                                             | `null`  | no       | Custom helper text                                                                                                                 |
-| `UNSAFE_helperText` | `string`                                                             | `null`  | no       | Unescaped custom helper text                                                                                                       |
-| `id`                | `string`                                                             | —       | yes      | Input and label identification                                                                                                     |
-| `inputProps`        | `string[]`                                                           | `[]`    | no       | Pass additional attributes to the input/textarea element                                                                           |
-| `isAutoResizing`    | `bool`                                                               | `false` | no       | If true, TextArea adjusts its height as user types                                                                                 |
-| `isDisabled`        | `bool`                                                               | `false` | no       | If true, input is disabled                                                                                                         |
-| `isFluid`           | `bool`                                                               | `false` | no       | If true, the element spans to the full width of its parent                                                                         |
-| `isLabelHidden`     | `bool`                                                               | `false` | no       | If true, label is hidden                                                                                                           |
-| `isMultiline`       | `bool`                                                               | `false` | no       | If true, rendered DOM element is `textarea`                                                                                        |
-| `isRequired`        | `bool`                                                               | `false` | no       | If true, input is required                                                                                                         |
-| `label`             | `string`                                                             | —       | yes\*    | Label text                                                                                                                         |
-| `UNSAFE_label`      | `string`                                                             | —       | yes\*    | Unescaped label text                                                                                                               |
-| `message`           | `string`, `string[]`                                                 | `null`  | no       | Validation message                                                                                                                 |
-| `UNSAFE_message`    | `string`, `string[]`                                                 | `null`  | no       | Unescaped validation message                                                                                                       |
-| `name`              | `string`                                                             | `null`  | no       | Input name                                                                                                                         |
-| `pattern`           | `string`                                                             | `null`  | no       | Defines regular expressions for allowed value types                                                                                |
-| `placeholder`       | `string`                                                             | `null`  | no       | Input placeholder                                                                                                                  |
-| `type`              | `email`, `number`, `password`, `search`, `tel`, `text`, `url`        | `text`  | no       | Input type                                                                                                                         |
-| `validationState`   | [Validation dictionary][dictionary-validation], `error` (deprecated) | `null`  | no       | Type of validation state. [**DEPRECATED**][deprecated] The value "error" in the dictionary will be replaced by the value "danger". |
-| `value`             | `string`                                                             | `null`  | no       | Input value                                                                                                                        |
+| Prop name           | Type                                                          | Default | Required | Description                                                             |
+| ------------------- | ------------------------------------------------------------- | ------- | -------- | ----------------------------------------------------------------------- |
+| `autocomplete`      | `bool`                                                        | `false` | no       | If the field should have autocomplete enabled                           |
+| `hasPasswordToggle` | `bool`                                                        | `false` | no       | If true, the `type` is set to `password` and a password toggle is shown |
+| `helperText`        | `string`                                                      | `null`  | no       | Custom helper text                                                      |
+| `UNSAFE_helperText` | `string`                                                      | `null`  | no       | Unescaped custom helper text                                            |
+| `id`                | `string`                                                      | —       | yes      | Input and label identification                                          |
+| `inputProps`        | `string[]`                                                    | `[]`    | no       | Pass additional attributes to the input/textarea element                |
+| `isAutoResizing`    | `bool`                                                        | `false` | no       | If true, TextArea adjusts its height as user types                      |
+| `isDisabled`        | `bool`                                                        | `false` | no       | If true, input is disabled                                              |
+| `isFluid`           | `bool`                                                        | `false` | no       | If true, the element spans to the full width of its parent              |
+| `isLabelHidden`     | `bool`                                                        | `false` | no       | If true, label is hidden                                                |
+| `isMultiline`       | `bool`                                                        | `false` | no       | If true, rendered DOM element is `textarea`                             |
+| `isRequired`        | `bool`                                                        | `false` | no       | If true, input is required                                              |
+| `label`             | `string`                                                      | —       | yes\*    | Label text                                                              |
+| `UNSAFE_label`      | `string`                                                      | —       | yes\*    | Unescaped label text                                                    |
+| `message`           | `string`, `string[]`                                          | `null`  | no       | Validation message                                                      |
+| `UNSAFE_message`    | `string`, `string[]`                                          | `null`  | no       | Unescaped validation message                                            |
+| `name`              | `string`                                                      | `null`  | no       | Input name                                                              |
+| `pattern`           | `string`                                                      | `null`  | no       | Defines regular expressions for allowed value types                     |
+| `placeholder`       | `string`                                                      | `null`  | no       | Input placeholder                                                       |
+| `type`              | `email`, `number`, `password`, `search`, `tel`, `text`, `url` | `text`  | no       | Input type                                                              |
+| `validationState`   | [Validation dictionary][dictionary-validation]                | `null`  | no       | Type of validation state.                                               |
+| `value`             | `string`                                                      | `null`  | no       | Input value                                                             |
 
 \*: The label is required for this component. Use `label` or `UNSAFE_label` to set the label.
 
@@ -92,5 +92,4 @@ These attributes will be passed to the topmost HTML element of the component.
 
 [textfield]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web/src/scss/components/TextField
 [dictionary-validation]: https://github.com/lmc-eu/spirit-design-system/blob/main/docs/DICTIONARIES.md#validation
-[deprecated]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#deprecations
 [escape-hatches]: https://github.com/lmc-eu/spirit-design-system/tree/main/packages/web-twig/README.md#escape-hatches
diff --git a/packages/web-twig/src/Resources/components/TextFieldBase/TextFieldBase.twig b/packages/web-twig/src/Resources/components/TextFieldBase/TextFieldBase.twig
index 8d0ac50ec6..dc0807c640 100644
--- a/packages/web-twig/src/Resources/components/TextFieldBase/TextFieldBase.twig
+++ b/packages/web-twig/src/Resources/components/TextFieldBase/TextFieldBase.twig
@@ -60,9 +60,6 @@
 {%- set _textAreaAllowedAttributes = _allowedAttributes | merge([ 'rows' ]) -%}
 
 {# Deprecations #}
-{% if _validationState is same as('error') %}
-    {% deprecated _rootClassName ~ ': The "error" value for "validationState" property will be removed in the next major version. Use "danger" instead.' %}
-{% endif %}
 {% if _message and _validationState is same as(null) %}
     {% deprecated _rootClassName ~ ': `message` prop without `validationState` prop will be unsupported in the next version. Use `helperText` instead.' %}
 {% endif %}
diff --git a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set checkboxFieldDefault.twig__1.html b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set checkboxFieldDefault.twig__1.html
index 53e64cd0fd..a26a797edf 100644
--- a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set checkboxFieldDefault.twig__1.html	
+++ b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set checkboxFieldDefault.twig__1.html	
@@ -5,6 +5,6 @@
     </title>
   </head>
   <body>
-    <label for="example" class="CheckboxField CheckboxField--danger"><input data-validate="true" type="checkbox" id="example" name="example" class="CheckboxField__input" checked required=""> <span class="CheckboxField__text"> <span class="CheckboxField__message">validation failed</span></span></label> <label for="example" class="CheckboxField CheckboxField--error"><input type="checkbox" id="example" name="example" class="CheckboxField__input" checked required=""> <span class="CheckboxField__text"> <span class="CheckboxField__message">validation failed</span></span></label>
+    <label for="example" class="CheckboxField CheckboxField--danger"><input data-validate="true" type="checkbox" id="example" name="example" class="CheckboxField__input" checked required=""> <span class="CheckboxField__text"> <span class="CheckboxField__message">validation failed</span></span></label>
   </body>
 </html>
diff --git a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set passwordFieldDefault.twig__1.html b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set passwordFieldDefault.twig__1.html
index 861405ce95..6109a62c65 100644
--- a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set passwordFieldDefault.twig__1.html	
+++ b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set passwordFieldDefault.twig__1.html	
@@ -5,7 +5,7 @@
     </title>
   </head>
   <body>
-    <div class="TextField TextField--error">
+    <div class="TextField TextField--danger">
       <label for="example2" class="TextField__label TextField__label--required">Password field</label> <input type="password" id="example2" name="example2" class="TextField__input" required="">
       <div class="TextField__message">
         validation failed
diff --git a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set textAreaDefault.twig__1.html b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set textAreaDefault.twig__1.html
index 0ffef118b2..f11de2718c 100644
--- a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set textAreaDefault.twig__1.html	
+++ b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set textAreaDefault.twig__1.html	
@@ -5,7 +5,7 @@
     </title>
   </head>
   <body>
-    <div class="TextArea TextArea--error">
+    <div class="TextArea TextArea--danger">
       <label for="example" class="TextArea__label TextArea__label--required">TextArea</label> 
 
       <textarea minlength="6" maxlength="10" rows="10" data-validate="true" id="example" name="example" class="TextArea__input" required="">TextArea value</textarea>
diff --git a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set textFieldBaseDefault.twig__1.html b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set textFieldBaseDefault.twig__1.html
index d1ede7f9db..ee14300a05 100644
--- a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set textFieldBaseDefault.twig__1.html	
+++ b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set textFieldBaseDefault.twig__1.html	
@@ -5,7 +5,7 @@
     </title>
   </head>
   <body>
-    <div data-test="test" data-validate="1" data-spirit-validate="1" data-custom-validate="true" class="TextField TextField--error">
+    <div data-test="test" data-validate="1" data-spirit-validate="1" data-custom-validate="true" class="TextField TextField--danger">
       <label for="example" class="TextField__label TextField__label--required">Text field</label> <input minlength="6" autocomplete="on" placeholder="Very long text" value="Some long value" data-validate="true" type="text" id="example" name="example" class="TextField__input" size="10" required="">
       <div class="TextField__message">
         validation failed
diff --git a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set textFieldBaseMultiline.twig__1.html b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set textFieldBaseMultiline.twig__1.html
index 213b6c083b..0c4da89aaf 100644
--- a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set textFieldBaseMultiline.twig__1.html	
+++ b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set textFieldBaseMultiline.twig__1.html	
@@ -5,7 +5,7 @@
     </title>
   </head>
   <body>
-    <div data-test="test" class="TextArea TextArea--error">
+    <div data-test="test" class="TextArea TextArea--danger">
       <label for="example" class="TextArea__label TextArea__label--required">Textarea</label> 
 
       <textarea minlength="6" id="example" name="example" class="TextArea__input" required=""></textarea>
diff --git a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set textFieldDefault.twig__1.html b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set textFieldDefault.twig__1.html
index 6293d29981..3d458632eb 100644
--- a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set textFieldDefault.twig__1.html	
+++ b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set textFieldDefault.twig__1.html	
@@ -5,7 +5,7 @@
     </title>
   </head>
   <body>
-    <div class="TextField TextField--error">
+    <div class="TextField TextField--danger">
       <label for="example" class="TextField__label TextField__label--required">Text field</label> <input minlength="6" placeholder="Some long placeholder" value="Some long value" data-validate="true" type="text" id="example" name="example" class="TextField__input" required="">
       <div class="TextField__message">
         validation failed
diff --git a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set textFieldDefaultPure.twig__1.html b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set textFieldDefaultPure.twig__1.html
index 9e2ce7438e..a902b8a06b 100644
--- a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set textFieldDefaultPure.twig__1.html	
+++ b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__test with data set textFieldDefaultPure.twig__1.html	
@@ -5,7 +5,7 @@
     </title>
   </head>
   <body>
-    <div class="TextField TextField--error">
+    <div class="TextField TextField--danger">
       <input type="text" id="example" name="example" class="TextField__input" required="">
       <div class="TextField__message">
         validation failed
diff --git a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set checkboxFieldDefault.twig__1.html b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set checkboxFieldDefault.twig__1.html
new file mode 100644
index 0000000000..7b047a9994
--- /dev/null
+++ b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set checkboxFieldDefault.twig__1.html	
@@ -0,0 +1,11 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
+<html><body>
+<div class="CheckboxField CheckboxField--danger">
+    <label for="example" class="CheckboxField__label">
+        <input type="checkbox" id="example" name="example" class="CheckboxField__input" checked required="true" value="">
+        <span class="CheckboxField__text">
+            <span class="CheckboxField__label"></span>
+                    </span>
+    </label>
+    </div>
+</body></html>
diff --git a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set checkboxFieldDefaultPure.twig__1.html b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set checkboxFieldDefaultPure.twig__1.html
new file mode 100644
index 0000000000..fd27b61bcd
--- /dev/null
+++ b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set checkboxFieldDefaultPure.twig__1.html	
@@ -0,0 +1,12 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
+<html><body>
+<div class="CheckboxField CheckboxField--danger">
+    <label for="example" class="CheckboxField__label CheckboxField__label--required">
+        <input type="checkbox" id="example" name="example" class="CheckboxField__input" required="true" value="">
+        <span class="CheckboxField__text">
+            <span class="CheckboxField__label">some label</span>
+            <span class="CheckboxField__message">validation failed</span>        </span>
+    </label>
+    <div class="CheckboxField__message">validation failed</div>
+</div>
+</body></html>
diff --git a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set passwordFieldDefault.twig__1.html b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set passwordFieldDefault.twig__1.html
new file mode 100644
index 0000000000..1cacf2b32a
--- /dev/null
+++ b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set passwordFieldDefault.twig__1.html	
@@ -0,0 +1,7 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
+<html><body>
+<div class="PasswordField PasswordField--danger">
+    <label for="example2" class="PasswordField__label PasswordField__label--required">Password field</label>
+    <input type="password" id="example2" name="example2" class="PasswordField__input" required="true" value="">
+    </div>
+</body></html>
diff --git a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set textFieldDefault.twig__1.html b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set textFieldDefault.twig__1.html
new file mode 100644
index 0000000000..68e3a1cd7b
--- /dev/null
+++ b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set textFieldDefault.twig__1.html	
@@ -0,0 +1,7 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
+<html><body>
+<div class="TextField TextField--danger">
+    <label for="example" class="TextField__label TextField__label--required">Text field</label>
+    <input type="text" id="example" name="example" class="TextField__input" required="true" value="">
+    </div>
+</body></html>
diff --git a/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set textFieldDefaultPure.twig__1.html b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set textFieldDefaultPure.twig__1.html
new file mode 100644
index 0000000000..dfca04164e
--- /dev/null
+++ b/packages/web-twig/tests/__snapshots__/ComponentsSnapshotTest__testShouldSnapshotComponents with data set textFieldDefaultPure.twig__1.html	
@@ -0,0 +1,8 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
+<html><body>
+<div class="TextField TextField--danger">
+    <label for="example" class="TextField__label"></label>
+    <input type="text" id="example" name="example" class="TextField__input" required="true" value="">
+    <div class="TextField__message">validation failed</div>
+</div>
+</body></html>
diff --git a/packages/web-twig/tests/components-fixtures/checkboxFieldDefault.twig b/packages/web-twig/tests/components-fixtures/checkboxFieldDefault.twig
index d4c4bd264e..4c053039dc 100644
--- a/packages/web-twig/tests/components-fixtures/checkboxFieldDefault.twig
+++ b/packages/web-twig/tests/components-fixtures/checkboxFieldDefault.twig
@@ -1,4 +1,3 @@
 {% set inputProps = { "data-validate": "true" } %}
 
 <CheckboxField id="example" name="example" isRequired isChecked validationState="danger" message="validation failed" inputProps={ inputProps } />
-<CheckboxField id="example" name="example" isRequired isChecked validationState="error" message="validation failed" />
diff --git a/packages/web-twig/tests/components-fixtures/passwordFieldDefault.twig b/packages/web-twig/tests/components-fixtures/passwordFieldDefault.twig
index 5c5b82146d..8dcfcec5d9 100644
--- a/packages/web-twig/tests/components-fixtures/passwordFieldDefault.twig
+++ b/packages/web-twig/tests/components-fixtures/passwordFieldDefault.twig
@@ -1 +1 @@
-<TextField id="example2" label="Password field" type="password" name="example2" isRequired validationState="error" message="validation failed" />
+<TextField id="example2" label="Password field" type="password" name="example2" isRequired validationState="danger" message="validation failed" />
diff --git a/packages/web-twig/tests/components-fixtures/textAreaDefault.twig b/packages/web-twig/tests/components-fixtures/textAreaDefault.twig
index d095c70bc3..42da71748d 100644
--- a/packages/web-twig/tests/components-fixtures/textAreaDefault.twig
+++ b/packages/web-twig/tests/components-fixtures/textAreaDefault.twig
@@ -7,7 +7,7 @@
     minlength="6"
     maxlength="10"
     name="example"
-    validationState="error"
+    validationState="danger"
     value="TextArea value"
     rows="10"
     isRequired
diff --git a/packages/web-twig/tests/components-fixtures/textFieldBaseDefault.twig b/packages/web-twig/tests/components-fixtures/textFieldBaseDefault.twig
index afe2f451ab..d1f36adc7e 100644
--- a/packages/web-twig/tests/components-fixtures/textFieldBaseDefault.twig
+++ b/packages/web-twig/tests/components-fixtures/textFieldBaseDefault.twig
@@ -6,7 +6,7 @@
     type="text"
     name="example"
     isRequired
-    validationState="error"
+    validationState="danger"
     message="validation failed"
     inputWidth="10"
     minlength="6"
diff --git a/packages/web-twig/tests/components-fixtures/textFieldBaseMultiline.twig b/packages/web-twig/tests/components-fixtures/textFieldBaseMultiline.twig
index af70e687a9..98727f6e39 100644
--- a/packages/web-twig/tests/components-fixtures/textFieldBaseMultiline.twig
+++ b/packages/web-twig/tests/components-fixtures/textFieldBaseMultiline.twig
@@ -5,7 +5,7 @@
     name="example"
     isRequired
     isMultiline
-    validationState="error"
+    validationState="danger"
     message="validation failed"
     minlength="6"
     data-test="test"
diff --git a/packages/web-twig/tests/components-fixtures/textFieldDefault.twig b/packages/web-twig/tests/components-fixtures/textFieldDefault.twig
index d92357a3dc..25e28659ad 100644
--- a/packages/web-twig/tests/components-fixtures/textFieldDefault.twig
+++ b/packages/web-twig/tests/components-fixtures/textFieldDefault.twig
@@ -6,7 +6,7 @@
     type="text"
     name="example"
     isRequired
-    validationState="error"
+    validationState="danger"
     message="validation failed"
     minlength="6"
     placeholder="Some long placeholder"
diff --git a/packages/web-twig/tests/components-fixtures/textFieldDefaultPure.twig b/packages/web-twig/tests/components-fixtures/textFieldDefaultPure.twig
index fd042a3281..ae4e430bfd 100644
--- a/packages/web-twig/tests/components-fixtures/textFieldDefaultPure.twig
+++ b/packages/web-twig/tests/components-fixtures/textFieldDefaultPure.twig
@@ -3,6 +3,6 @@
     type: "text",
     name: "example",
     isRequired: "true",
-    validationState: "error",
+    validationState: "danger",
     message: "validation failed",
 }} %}