Skip to content

Commit

Permalink
BREAKING CHANGE(web-twig): Remove error Validation State in favor o…
Browse files Browse the repository at this point in the history 
…f `danger` #DS-677

 ## 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.
  • Loading branch information
@crishpeen @literat
crishpeen authored and literat committed Jul 21, 2023
1 parent d07b23b commit 9887171
Show file tree
Hide file tree
Showing 25 changed files with 119 additions and 87 deletions.
5 changes: 0 additions & 5 deletions packages/web-twig/src/Resources/components/CheckboxField/CheckboxField.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) }}
Expand Down
37 changes: 18 additions & 19 deletions packages/web-twig/src/Resources/components/CheckboxField/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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
1 change: 0 additions & 1 deletion packages/web-twig/src/Resources/components/TextArea/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
39 changes: 19 additions & 20 deletions packages/web-twig/src/Resources/components/TextField/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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
Loading

0 comments on commit 9887171

Please sign in to comment.