diff --git a/packages/web-react/src/components/CheckboxField/CheckboxField.tsx b/packages/web-react/src/components/CheckboxField/CheckboxField.tsx index e1ca522637..5935a4a4c3 100644 --- a/packages/web-react/src/components/CheckboxField/CheckboxField.tsx +++ b/packages/web-react/src/components/CheckboxField/CheckboxField.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 { SpiritCheckboxFieldProps } from '../../types'; import { useValidationText } from '../Field'; import { useCheckboxFieldStyleProps } from './useCheckboxFieldStyleProps'; @@ -9,24 +9,25 @@ import { useCheckboxFieldStyleProps } from './useCheckboxFieldStyleProps'; /* eslint no-underscore-dangle: ['error', { allow: ['_CheckboxField'] }] */ const _CheckboxField = (props: SpiritCheckboxFieldProps, ref: ForwardedRef): JSX.Element => { const { classProps, props: modifiedProps } = useCheckboxFieldStyleProps(props); - const { id, label, message, helperText, validationState, value, isDisabled, isRequired, isChecked, ...restProps } = - modifiedProps; + const { + id, + label, + validationText, + helperText, + validationState, + value, + isDisabled, + isRequired, + isChecked, + ...restProps + } = modifiedProps; const { styleProps, props: otherProps } = useStyleProps(restProps); - useDeprecationMessage({ - method: 'custom', - trigger: !!(props?.message && !validationState), - componentName: 'CheckboxField', - customText: - '`message` prop without `validationState` prop will be unsupported in the next version. Use `helperText` instead.', - }); - const renderValidationText = useValidationText({ - validationTextClassName: classProps.message, + validationTextClassName: classProps.validationText, validationState, - validationText: message, + validationText, validationElementType: 'span', - requireValidationState: false, }); return ( diff --git a/packages/web-react/src/components/CheckboxField/README.md b/packages/web-react/src/components/CheckboxField/README.md index 816d3b72f7..22eddb6e79 100644 --- a/packages/web-react/src/components/CheckboxField/README.md +++ b/packages/web-react/src/components/CheckboxField/README.md @@ -1,11 +1,17 @@ # CheckboxField -CheckboxField enables the user to check/uncheck choice. It has input, a label, -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. +CheckboxField enables the user to check/uncheck choice. It has input, a label, and an optional helperText. +It could be disabled or have a validation state. The label could be hidden and show if the input is required. ```jsx - + ``` ## Available props @@ -16,8 +22,8 @@ and show if the input is required. | `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. | +| `validationText` | `string`, `string[]` | - | no | Validation text | | `isDisabled` | `boolean` | - | no | Whether is field disabled | | `isItem` | `boolean` | - | no | To render in [Item][item] mode | | `isRequired` | `boolean` | - | no | Whether is field required | @@ -39,7 +45,7 @@ const CustomCheckboxField = (props: SpiritCheckboxFieldProps): JSX.Element => { {props.label} {props.helperText} - {props.message} + {props.validationText} ); diff --git a/packages/web-react/src/components/CheckboxField/__tests__/CheckboxField.test.tsx b/packages/web-react/src/components/CheckboxField/__tests__/CheckboxField.test.tsx index 108637fcc9..f1909584ee 100644 --- a/packages/web-react/src/components/CheckboxField/__tests__/CheckboxField.test.tsx +++ b/packages/web-react/src/components/CheckboxField/__tests__/CheckboxField.test.tsx @@ -20,7 +20,7 @@ describe('CheckboxField', () => { validationStatePropsTest(CheckboxField, 'CheckboxField--'); - validationTextPropsTest(CheckboxField, '.CheckboxField__message'); + validationTextPropsTest(CheckboxField, '.CheckboxField__validationText'); it('should have text classname', () => { const dom = render(); diff --git a/packages/web-react/src/components/CheckboxField/__tests__/useCheckboxFieldStyleProps.test.ts b/packages/web-react/src/components/CheckboxField/__tests__/useCheckboxFieldStyleProps.test.ts index 261bbdc83e..be1daa9488 100644 --- a/packages/web-react/src/components/CheckboxField/__tests__/useCheckboxFieldStyleProps.test.ts +++ b/packages/web-react/src/components/CheckboxField/__tests__/useCheckboxFieldStyleProps.test.ts @@ -13,7 +13,7 @@ describe('useCheckboxFieldStyleProps', () => { text: 'CheckboxField__text', input: 'CheckboxField__input', label: 'CheckboxField__label', - message: 'CheckboxField__message', + validationText: 'CheckboxField__validationText', helperText: 'CheckboxField__helperText', }); }); diff --git a/packages/web-react/src/components/CheckboxField/stories/CheckboxFieldValidationState.tsx b/packages/web-react/src/components/CheckboxField/stories/CheckboxFieldValidationState.tsx index 54534900f5..14831cd3bb 100644 --- a/packages/web-react/src/components/CheckboxField/stories/CheckboxFieldValidationState.tsx +++ b/packages/web-react/src/components/CheckboxField/stories/CheckboxFieldValidationState.tsx @@ -8,21 +8,21 @@ const Story = () => ( label="Checkbox success" name="example" validationState="success" - message="Success validation message" + validationText="Success validation text" /> ); diff --git a/packages/web-react/src/components/CheckboxField/stories/argTypes.ts b/packages/web-react/src/components/CheckboxField/stories/argTypes.ts index c607cf3170..a275189ac8 100644 --- a/packages/web-react/src/components/CheckboxField/stories/argTypes.ts +++ b/packages/web-react/src/components/CheckboxField/stories/argTypes.ts @@ -62,13 +62,13 @@ export default { }, defaultValue: '', }, - message: { + validationText: { control: { type: 'object', }, defaultValue: '', description: - 'The validation message. Use a string `"foo"` for single message or an array for multiple messages `["foo", "bar"]`.', + 'The validation text. Only visible if validationState is set. Use a string `"foo"` for single validation text or an array for multiple validation texts `["foo", "bar"]`.', }, helperText: { control: { diff --git a/packages/web-react/src/components/CheckboxField/useCheckboxFieldStyleProps.ts b/packages/web-react/src/components/CheckboxField/useCheckboxFieldStyleProps.ts index 4a9b186d20..46d90286e9 100644 --- a/packages/web-react/src/components/CheckboxField/useCheckboxFieldStyleProps.ts +++ b/packages/web-react/src/components/CheckboxField/useCheckboxFieldStyleProps.ts @@ -9,8 +9,8 @@ export interface CheckboxFieldStyles { text: string; label: string; input: string; - message: string; helperText: string; + validationText: string; }; /** props to be passed to the input element */ props: CheckboxFieldProps; @@ -28,14 +28,14 @@ export function useCheckboxFieldStyleProps(props: SpiritCheckboxFieldProps): Che const checkboxFieldLabelClass = `${checkboxFieldClass}__label`; const checkboxFieldLabelRequiredClass = `${checkboxFieldClass}__label--required`; const checkboxFieldLabelHiddenClass = `${checkboxFieldClass}__label--hidden`; - const checkboxFieldMessageClass = `${checkboxFieldClass}__message`; const checkboxFieldHelperTextClass = `${checkboxFieldClass}__helperText`; - const checkboxValidationClass = `${checkboxFieldClass}--${validationState}`; + const checkboxFieldValidationTextClass = `${checkboxFieldClass}__validationText`; + const checkboxFieldValidationClass = `${checkboxFieldClass}--${validationState}`; const rootStyles = classNames(checkboxFieldClass, { [checkboxFieldDisabledClass]: isDisabled, [checkboxFieldItemClass]: isItem, - [checkboxValidationClass]: validationState, + [checkboxFieldValidationClass]: validationState, }); const labelStyles = classNames(checkboxFieldLabelClass, { [checkboxFieldLabelRequiredClass]: isRequired, @@ -48,9 +48,12 @@ export function useCheckboxFieldStyleProps(props: SpiritCheckboxFieldProps): Che text: checkboxFieldTextClass, label: labelStyles, input: checkboxFieldInputClass, - message: checkboxFieldMessageClass, helperText: checkboxFieldHelperTextClass, + validationText: checkboxFieldValidationTextClass, + }, + props: { + ...restProps, + validationState, }, - props: restProps, }; } diff --git a/packages/web-react/src/components/Field/README.md b/packages/web-react/src/components/Field/README.md index 09c3ba2b8d..5677baf3f2 100644 --- a/packages/web-react/src/components/Field/README.md +++ b/packages/web-react/src/components/Field/README.md @@ -1,21 +1,23 @@ -# ValidationText +# Field -The validationText subcomponent displays validation messages for Field components like TextField, TextArea, CheckboxField, FileUploader, etc. +## ValidationText + +The ValidationText subcomponent displays validation texts for Field components like TextField, TextArea, CheckboxField, FileUploader, etc. ```jsx import { ValidationText } from '@lmc-eu/spirit-web-react/components'; ``` ```jsx - + ``` ## ValidationText **Available props** -| Name | Type | Default | Required | Description | -| ---------------- | -------------------- | ------- | -------- | ------------------------------------------------------------------------------------------------- | -| `elementType` | `span`, `div` | `div` | no | Type of element used as main wrapper (applied only for single validation message, otherwise `ul`) | -| `className` | `string` | - | yes | Wrapper custom class name | -| `validationText` | `string`, `string[]` | - | yes | Validation message | +| Name | Type | Default | Required | Description | +| ---------------- | -------------------- | ------- | -------- | ---------------------------------------------------------------------------------------------- | +| `elementType` | `span`, `div` | `div` | no | Type of element used as main wrapper (applied only for single validation text, otherwise `ul`) | +| `className` | `string` | - | yes | Wrapper custom class name | +| `validationText` | `string`, `string[]` | - | yes | Validation text | diff --git a/packages/web-react/src/components/Field/ValidationText.tsx b/packages/web-react/src/components/Field/ValidationText.tsx index ff7297f92b..1661c3f783 100644 --- a/packages/web-react/src/components/Field/ValidationText.tsx +++ b/packages/web-react/src/components/Field/ValidationText.tsx @@ -1,9 +1,8 @@ import React, { ElementType } from 'react'; -import { ValidationTextType } from '../../types'; +import { ValidationTextProp } from '../../types'; -export interface ValidationTextProps { +export interface ValidationTextProps extends ValidationTextProp { className?: string; - validationText: ValidationTextType; elementType?: ElementType; } diff --git a/packages/web-react/src/components/Field/__tests__/ValidationText.test.tsx b/packages/web-react/src/components/Field/__tests__/ValidationText.test.tsx index 1e8ba706de..716d2fabdf 100644 --- a/packages/web-react/src/components/Field/__tests__/ValidationText.test.tsx +++ b/packages/web-react/src/components/Field/__tests__/ValidationText.test.tsx @@ -5,22 +5,22 @@ import ValidationText from '../ValidationText'; describe('ValidationText', () => { it('should render single validation text', () => { - const dom = render(); + const dom = render(); const element = dom.container.querySelector('div') as HTMLElement; - expect(element.textContent).toBe('validation message'); + expect(element.textContent).toBe('validation text'); }); - it('should render multiple validation messages', () => { + it('should render multiple validation texts', () => { const dom = render( , ); const elements = dom.container.querySelectorAll('li') as NodeListOf; - expect(elements[0].textContent).toBe('validation message'); - expect(elements[1].textContent).toBe('another validation message'); + expect(elements[0].textContent).toBe('validation text'); + expect(elements[1].textContent).toBe('another validation text'); }); }); diff --git a/packages/web-react/src/components/Field/__tests__/useValidationText.test.ts b/packages/web-react/src/components/Field/__tests__/useValidationText.test.ts index 1ebe6da07d..7cf5d2b19d 100644 --- a/packages/web-react/src/components/Field/__tests__/useValidationText.test.ts +++ b/packages/web-react/src/components/Field/__tests__/useValidationText.test.ts @@ -2,16 +2,16 @@ import { renderHook } from '@testing-library/react-hooks'; import { useValidationText } from '../useValidationText'; describe('useValidationText', () => { - it('should return null', () => { + it('should return undefined', () => { const { result } = renderHook(() => useValidationText({ validationTextClassName: '', validationState: undefined })); - expect(result.current).toBeNull(); + expect(result.current).toBeUndefined(); }); it('should return ValidationText component', () => { const { result } = renderHook(() => useValidationText({ - validationTextClassName: 'TextField__message', + validationTextClassName: 'TextField__validationText', validationState: 'danger', validationText: 'required', }), @@ -19,7 +19,7 @@ describe('useValidationText', () => { expect(result.current).toMatchInlineSnapshot(` diff --git a/packages/web-react/src/components/Field/useValidationText.tsx b/packages/web-react/src/components/Field/useValidationText.tsx index a53a5ab49b..8d65f0b490 100644 --- a/packages/web-react/src/components/Field/useValidationText.tsx +++ b/packages/web-react/src/components/Field/useValidationText.tsx @@ -7,29 +7,21 @@ export interface UseValidationTextProps { validationState?: ValidationState; validationText?: ValidationTextType; validationElementType?: ElementType; - /** @deprecated Will be removed in the next major version. */ - requireValidationState?: boolean; } export const useValidationText = (props: UseValidationTextProps): ReactNode => { - const { - validationTextClassName, - validationState, - validationText, - validationElementType, - /** @deprecated Will be removed in the next major version. */ - requireValidationState = true, - } = props; + const { validationTextClassName, validationState, validationText, validationElementType } = props; return useMemo( () => - (requireValidationState && !validationState) || !validationText ? null : ( + validationState && + validationText && ( ), - [validationState, validationText, validationElementType, validationTextClassName, requireValidationState], + [validationState, validationText, validationElementType, validationTextClassName], ); }; diff --git a/packages/web-react/src/components/TextArea/README.md b/packages/web-react/src/components/TextArea/README.md index 7734551d49..ea2b454d64 100644 --- a/packages/web-react/src/components/TextArea/README.md +++ b/packages/web-react/src/components/TextArea/README.md @@ -1,11 +1,11 @@ # 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 a validation state. The label could be hidden -and show if the textarea is required. +TextArea enables the user to add longer text to a form. +It could be disabled or have a validation state with validation text. +The label could be hidden and show if the textarea is required. ```jsx -