BREAKING CHANGE(web-react): Remove error Validation State in favor …

…of `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.
lmc-eu · Jul 21, 2023 · d07b23b · d07b23b
1 parent 813d9c3
commit d07b23b
Show file tree

Hide file tree

Showing 13 changed files with 80 additions and 116 deletions.
diff --git a/packages/web-react/src/components/CheckboxField/CheckboxField.tsx b/packages/web-react/src/components/CheckboxField/CheckboxField.tsx
@@ -13,16 +13,6 @@ const _CheckboxField = (props: SpiritCheckboxFieldProps, ref: ForwardedRef<HTMLI
  modifiedProps;
  const { styleProps, props: otherProps } = useStyleProps(restProps);
 
- useDeprecationMessage({
- method: 'property',
- trigger: validationState === 'error',
- componentName: 'CheckboxField',
- propertyProps: {
- deprecatedValue: 'error',
- newValue: 'danger',
- propertyName: 'validationState',
- },
- });
  useDeprecationMessage({
  method: 'custom',
  trigger: !!(props?.message && !validationState),

diff --git a/packages/web-react/src/components/CheckboxField/README.md b/packages/web-react/src/components/CheckboxField/README.md
@@ -1,7 +1,7 @@
 # CheckboxField
 
 CheckboxField enables the user to check/uncheck choice. It has input, a label,
-and an optional message. It could be disabled or have an error state. The label could be hidden
+and an optional message. It could be disabled or have a validation state. The label could be hidden
 and show if the input is required.
 
 ```jsx
@@ -10,20 +10,20 @@ and show if the input is required.
 
 ## Available props
 
-| Prop name | Type  | Default | Required | Description  |
-| ----------------- | -------------------------------------------------------------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- |
-| `id` | `string`  | - | yes | Input and label identification  |
-| `name` | `string`  | - | no | Input name  |
-| `label` | `string`  | - | no | Label text  |
-| `value` | `string`  | - | no | Input value  |
-| `message` | `string`, `string[]`  | - | no | Validation or help message  |
-| `validationState` | [Validation dictionary][dictionary-validation], `error` (deprecated) | - | no | Type of validation state. [**DEPRECATED**][deprecated] The value "error" in the dictionary will be replaced by the value "danger". |
-| `isDisabled` | `boolean`  | - | no | Whether is field disabled  |
-| `isItem` | `boolean`  | - | no | To render in [Item][item] mode  |
-| `isRequired` | `boolean`  | - | no | Whether is field required  |
-| `isChecked` | `boolean`  | - | no | Whether is field checked  |
-| `isLabelHidden` | `boolean`  | - | no | Whether is label hidden  |
-| `ref` | `ForwardedRef<HTMLInputElement>`  | - | no | Input element reference  |
+| Prop name | Type | Default | Required | Description |
+| ----------------- | ---------------------------------------------- | ------- | -------- | ------------------------------ |
+| `id` | `string` | - | yes | Input and label identification |
+| `name` | `string` | - | no | Input name |
+| `label` | `string` | - | no | Label text |
+| `value` | `string` | - | no | Input value |
+| `message` | `string`, `string[]` | - | no | Validation or help message |
+| `validationState` | [Validation dictionary][dictionary-validation] | - | no | Type of validation state.   |
+| `isDisabled` | `boolean` | - | no | Whether is field disabled |
+| `isItem` | `boolean` | - | no | To render in [Item][item] mode |
+| `isRequired` | `boolean` | - | no | Whether is field required |
+| `isChecked` | `boolean` | - | no | Whether is field checked |
+| `isLabelHidden` | `boolean` | - | no | Whether is label hidden |
+| `ref` | `ForwardedRef<HTMLInputElement>` | - | no | Input element reference |
 
 ## Custom component
 
@@ -50,4 +50,3 @@ For detailed information see [CheckboxField](https://github.com/lmc-eu/spirit-de
 
 [item]: https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web-react/src/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-react/README.md#deprecations
diff --git a/packages/web-react/src/components/Field/__tests__/useValidationText.test.ts b/packages/web-react/src/components/Field/__tests__/useValidationText.test.ts
@@ -12,7 +12,7 @@ describe('useValidationText', () => {
  const { result } = renderHook(() =>
  useValidationText({
  validationTextClassName: 'TextField__message',
- validationState: 'error',
+ validationState: 'danger',
  validationText: 'required',
  }),
  );

diff --git a/packages/web-react/src/components/FileUploader/stories/FileUploaderValidationState.tsx b/packages/web-react/src/components/FileUploader/stories/FileUploaderValidationState.tsx
@@ -66,7 +66,7 @@ const Story: ComponentStory<typeof FileUploader> = ({ id, ...args }: SpiritFileU
  labelText="or drag and drop here"
  helperText="Max file size is 10 MB"
  isRequired
- validationState="error"
+ validationState="danger"
  validationText={['First validation message', 'Second validation message']}
  />
  {/* FileUploaderList */}

diff --git a/packages/web-react/src/components/FileUploader/stories/FormWithFileUploader.tsx b/packages/web-react/src/components/FileUploader/stories/FormWithFileUploader.tsx
@@ -41,7 +41,7 @@ const Story = () => {
 
  const errorHandler = (error: string | Error) => {
  console.error(error);
- setValidationState('error');
+ setValidationState('danger');
  setValidationText(String(error));
 
  setTimeout(() => {

diff --git a/packages/web-react/src/components/FileUploader/stories/FormWithUncontrolledFileUploader.tsx b/packages/web-react/src/components/FileUploader/stories/FormWithUncontrolledFileUploader.tsx
@@ -44,7 +44,7 @@ const Story = () => {
 
  const errorHandler = (error: string | Error) => {
  console.error(error);
- setValidationState('error');
+ setValidationState('danger');
  setValidationText(String(error));
 
  setTimeout(() => {

diff --git a/packages/web-react/src/components/RadioField/README.md b/packages/web-react/src/components/RadioField/README.md
@@ -1,6 +1,6 @@
 # RadioField
 
-Use RadioField when you have a group of mutually exclusive choices and only one selection from the group is allowed. It has input and label. It can be disabled or have an error state. The label can be hidden.
+Use RadioField when you have a group of mutually exclusive choices and only one selection from the group is allowed. It has input and label. It can be disabled or have a validation state. The label can be hidden.
 
 ```jsx
 <RadioField id="example" name="example" label="Label text" isChecked />

diff --git a/packages/web-react/src/components/RadioField/RadioField.tsx b/packages/web-react/src/components/RadioField/RadioField.tsx
@@ -1,6 +1,6 @@
 import React, { forwardRef, ForwardedRef } from 'react';
 import classNames from 'classnames';
-import { useDeprecationMessage, useStyleProps } from '../../hooks';
+import { useStyleProps } from '../../hooks';
 import { SpiritRadioFieldProps } from '../../types';
 import { useRadioFieldStyleProps } from './useRadioFieldStyleProps';
 
@@ -11,17 +11,6 @@ const _RadioField = (props: SpiritRadioFieldProps, ref: ForwardedRef<HTMLInputEl
  const { id, label, helperText, value, isDisabled, isChecked, onChange, ...restProps } = modifiedProps;
  const { styleProps, props: otherProps } = useStyleProps(restProps);
 
- useDeprecationMessage({
- method: 'property',
- trigger: props?.validationState === 'error',
- componentName: 'RadioField',
- propertyProps: {
- deprecatedValue: 'error',
- newValue: 'danger',
- propertyName: 'validationState',
- },
- });
-
  return (
  <label htmlFor={id} {...styleProps} className={classNames(classProps.root, styleProps.className)}>
  <input

diff --git a/packages/web-react/src/components/TextArea/README.md b/packages/web-react/src/components/TextArea/README.md
@@ -1,7 +1,7 @@
 # TextArea
 
 TextArea enables the user to add longer text to a form. It has textarea, label,
-and an optional message. It could be disabled or have an error state. The label could be hidden
+and an optional message. It could be disabled or have a validation state. The label could be hidden
 and show if the textarea is required.
 
 ```jsx
@@ -16,24 +16,24 @@ and show if the textarea is required.
 
 ## Available props
 
-| Prop name | Type  | Default | Required | Description  |
-| ----------------------- | -------------------------------------------------------------------- | ------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- |
-| `id` | `string`  | - | yes | Textarea and label identification  |
-| `name` | `string`  | - | no | Textarea name  |
-| `label` | `string`  | - | no | Label text  |
-| `placeholder` | `string`  | - | no | Textarea placeholder  |
-| `value` | `string`  | - | no | Textarea value  |
-| `maxLength` | `number`  | - | no | Maximum number of characters  |
-| `message` | `string`, `string[]`  | - | no | Validation message  |
-| `rows` | `number`  | - | no | Number of visible rows  |
-| `ref` | `ForwardedRef<HTMLTextAreaElement>`  | - | no | Textarea element reference  |
-| `validationState` | [Validation dictionary][dictionary-validation], `error` (deprecated) | - | no | Type of validation state. [**DEPRECATED**][deprecated] The value "error" in the dictionary will be replaced by the value "danger". |
-| `isAutoResizing` | `boolean`  | - | no | Whether is field auto resizing which adjusts its height while typing  |
-| `isDisabled` | `boolean`  | - | no | Whether is field disabled  |
-| `isRequired` | `boolean`  | - | no | Whether is field required  |
-| `isLabelHidden` | `boolean`  | - | no | Whether is label hidden  |
-| `helperText` | `string`  | - | no | Custom helper text  |
-| `autoResizingMaxHeight` | `number`  | `400` | no | Maximum field height with automatic height control  |
+| Prop name | Type | Default | Required | Description |
+| ----------------------- | ---------------------------------------------- | ------- | -------- | -------------------------------------------------------------------- |
+| `id` | `string` | - | yes | Textarea and label identification |
+| `name` | `string` | - | no | Textarea name |
+| `label` | `string` | - | no | Label text |
+| `placeholder` | `string` | - | no | Textarea placeholder |
+| `value` | `string` | - | no | Textarea value |
+| `maxLength` | `number` | - | no | Maximum number of characters |
+| `message` | `string`, `string[]` | - | no | Validation message |
+| `rows` | `number` | - | no | Number of visible rows |
+| `ref` | `ForwardedRef<HTMLTextAreaElement>` | - | no | Textarea element reference |
+| `validationState` | [Validation dictionary][dictionary-validation] | - | no | Type of validation state.   |
+| `isAutoResizing` | `boolean` | - | no | Whether is field auto resizing which adjusts its height while typing |
+| `isDisabled` | `boolean` | - | no | Whether is field disabled |
+| `isRequired` | `boolean` | - | no | Whether is field required |
+| `isLabelHidden` | `boolean` | - | no | Whether is label hidden |
+| `helperText` | `string` | - | no | Custom helper text |
+| `autoResizingMaxHeight` | `number` | `400` | no | Maximum field height with automatic height control |
 
 ## Custom component
 
@@ -57,4 +57,3 @@ const CustomTextArea = (props: SpiritTextAreaProps): JSX.Element => {
 For detailed information see [TextArea](https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/scss/components/TextArea/README.md) component.
 
 [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-react/README.md#deprecations