Improve handling styles for errors/warnings in localized inputs and f…

…ields (#2732) * refactor(fields): update localized fields error messages handling * refactor(inputs): update localized fields error and warning messages handling * chore: add changesets * chore: fix type in changesets * fix(localized-money-input): add missing dependency * fix(components): remove unused imports * fix(changeset): fix changeset code snippet * fix: fix changeset level * fix: fix changesel * refactor(components): update vrts * fix(localized-text-input): fix spacing issue
commercetools · Feb 29, 2024 · de3776d · de3776d
1 parent e0038e4
commit de3776d
Show file tree

Hide file tree

Showing 19 changed files with 129 additions and 67 deletions.
diff --git a/.changeset/beige-mails-explain.md b/.changeset/beige-mails-explain.md
@@ -0,0 +1,37 @@
+---
+'@commercetools-uikit/localized-multiline-text-input': minor
+'@commercetools-uikit/localized-rich-text-input': minor
+'@commercetools-uikit/localized-money-input': minor
+'@commercetools-uikit/localized-text-input': minor
+---
+
+We've changed how we internally manage the `errors` and `warnings` properties to make it easy for consumers to style them.
+
+If you currently want to render an error for an specific language, you need to use the `WarningMessage` component to wrap the error text you provide to the component:
+
+```jsx
+<LocalizexTextInput
+  title="Title"
+  value={value}
+  onChange={handleChange}
+  warnings={{
+    en: <WarningMessage>This is a warning</WarningMessage>,
+  }}
+>
+```
+
+With the new update, you no longer need to wrap the error text so you can provide it as it is:
+
+```jsx
+<LocalizexTextInput
+  title="Title"
+  value={value}
+  onChange={handleChange}
+  warnings={{
+    en: 'This is a warning',
+  }}
+>
+```
+
+We still support the former, but we encourage using the new way to provide errors and warnings.
+
diff --git a/.changeset/cold-tables-search.md b/.changeset/cold-tables-search.md
@@ -0,0 +1,34 @@
+---
+'@commercetools-uikit/localized-multiline-text-field': minor
+'@commercetools-uikit/localized-text-field': minor
+---
+
+We've changed how we internally manage the `errorsByLanguage` property to make it easy for consumers to style them.
+
+If you currently want to render an error for an specific language, you need to use the `ErrorMessage` component to wrap the error text you provide to the component:
+
+```jsx
+<LocalizedTextField
+  title="Title"
+  value={value}
+  onChange={handleChange}
+  errorsByLanguage={{
+    en: <ErrorMessage>This is an error</ErrorMessage>,
+  }}
+/>
+```
+
+With the new update, you no longer need to wrap the error text so you can provide it as it is:
+
+```jsx
+<LocalizedTextField
+  title="Title"
+  value={value}
+  onChange={handleChange}
+  errorsByLanguage={{
+    en: 'This is an error',
+  }}
+/>
+```
+
+We still support the former, but we encourage using the new way to provide errors.
diff --git a/...ponents/fields/localized-multiline-text-field/src/localized-multiline-text-field.story.js b/...ponents/fields/localized-multiline-text-field/src/localized-multiline-text-field.story.js
@@ -10,7 +10,6 @@ import {
   object,
 } from '@storybook/addon-knobs/react';
 import Constraints from '@commercetools-uikit/constraints';
-import { ErrorMessage } from '@commercetools-uikit/messages';
 import Section from '../../../../../docs/.storybook/decorators/section';
 import Readme from '../README.md';
 import * as icons from '../../../icons';
@@ -120,9 +119,7 @@ storiesOf('Components|Fields', module)
               errorsByLanguage={
                 errorsByLanguage
                   ? Object.keys(value).reduce((acc, language) => {
-                      acc[language] = (
-                        <ErrorMessage>An error for language</ErrorMessage>
-                      );
+                      acc[language] = 'An error for language';
                       return acc;
                     }, {})
                   : undefined

diff --git a/packages/components/fields/localized-text-field/src/localized-text-field.story.js b/packages/components/fields/localized-text-field/src/localized-text-field.story.js
@@ -10,7 +10,6 @@ import {
   object,
 } from '@storybook/addon-knobs/react';
 import Constraints from '@commercetools-uikit/constraints';
-import { ErrorMessage } from '@commercetools-uikit/messages';
 import Section from '../../../../../docs/.storybook/decorators/section';
 import Readme from '../README.md';
 import * as icons from '../../../icons';
@@ -114,9 +113,7 @@ storiesOf('Components|Fields', module)
               errorsByLanguage={
                 errorsByLanguage
                   ? Object.keys(value).reduce((acc, language) => {
-                      acc[language] = (
-                        <ErrorMessage>An error for language</ErrorMessage>
-                      );
+                      acc[language] = 'An error for language';
                       return acc;
                     }, {})
                   : undefined

diff --git a/packages/components/fields/localized-text-field/src/localized-text-field.tsx b/packages/components/fields/localized-text-field/src/localized-text-field.tsx
@@ -160,7 +160,7 @@ export type TLocalizedTextFieldProps = {
   /**
    * Errors for each translation. These are forwarded to the `errors` prop of `LocalizedTextInput`.
    */
-  errorsByLanguage?: Record<string, string>;
+  errorsByLanguage?: Record<string, ReactNode>;
 
   // LabelField
   /**

diff --git a/packages/components/inputs/localized-money-input/package.json b/packages/components/inputs/localized-money-input/package.json
@@ -28,6 +28,7 @@
     "@commercetools-uikit/icons": "18.2.0",
     "@commercetools-uikit/input-utils": "18.2.0",
     "@commercetools-uikit/localized-utils": "18.2.0",
+    "@commercetools-uikit/messages": "18.2.0",
     "@commercetools-uikit/money-input": "18.2.0",
     "@commercetools-uikit/select-utils": "18.2.0",
     "@commercetools-uikit/spacings-stack": "18.2.0",

diff --git a/packages/components/inputs/localized-money-input/src/localized-money-input.story.js b/packages/components/inputs/localized-money-input/src/localized-money-input.story.js
@@ -9,7 +9,6 @@ import {
   object,
 } from '@storybook/addon-knobs/react';
 import Constraints from '@commercetools-uikit/constraints';
-import { ErrorMessage, WarningMessage } from '@commercetools-uikit/messages';
 import Section from '../../../../../docs/.storybook/decorators/section';
 import Readme from '../README.md';
 import LocalizedMoneyInput from './localized-money-input';
@@ -86,7 +85,7 @@ storiesOf('Components|Inputs', module)
                 Object.values(errors).some((error) => error.length > 0)
                   ? Object.entries(errors).reduce((acc, [currency, error]) => {
                       if (error.length === 0) return acc;
-                      acc[currency] = <ErrorMessage>{error}</ErrorMessage>;
+                      acc[currency] = error;
                       return acc;
                     }, {})
                   : undefined
@@ -96,9 +95,7 @@ storiesOf('Components|Inputs', module)
                   ? Object.entries(warnings).reduce(
                       (acc, [currency, warning]) => {
                         if (warning.length === 0) return acc;
-                        acc[currency] = (
-                          <WarningMessage>{warning}</WarningMessage>
-                        );
+                        acc[currency] = warning;
                         return acc;
                       },
                       {}

diff --git a/packages/components/inputs/localized-money-input/src/localized-money-input.tsx b/packages/components/inputs/localized-money-input/src/localized-money-input.tsx
@@ -7,6 +7,7 @@ import MoneyInput, {
   type TMoneyValue,
   type TValue,
 } from '@commercetools-uikit/money-input';
+import { ErrorMessage, WarningMessage } from '@commercetools-uikit/messages';
 import Stack from '@commercetools-uikit/spacings-stack';
 import Constraints from '@commercetools-uikit/constraints';
 import { CoinsIcon } from '@commercetools-uikit/icons';
@@ -254,9 +255,8 @@ const LocalizedInput = (props: TLocalizedInputProps) => {
           {...filterDataAttributes(props)}
         />
       </div>
-      {(props.error || props.warning) && (
-        <div>{props.error ? props.error : props.warning}</div>
-      )}
+      {props.error && <ErrorMessage>{props.error}</ErrorMessage>}
+      {props.warning && <WarningMessage>{props.warning}</WarningMessage>}
     </Stack>
   );
 };

diff --git a/packages/components/inputs/localized-money-input/src/localized-money-input.visualroute.jsx b/packages/components/inputs/localized-money-input/src/localized-money-input.visualroute.jsx
@@ -1,7 +1,5 @@
 import {
   LocalizedMoneyInput,
-  ErrorMessage,
-  WarningMessage,
 } from '@commercetools-frontend/ui-kit';
 import { Suite, Spec } from '../../../../../test/percy';
 
@@ -99,7 +97,7 @@ export const component = () => (
         onChange={() => {}}
         selectedCurrency="CAD"
         horizontalConstraint={7}
-        errors={{ CAD: <ErrorMessage>foo</ErrorMessage> }}
+        errors={{ CAD: 'foo' }}
       />
     </Spec>
     <Spec label="when there is an error for a specific currency (second one)">
@@ -108,7 +106,7 @@ export const component = () => (
         onChange={() => {}}
         selectedCurrency="CAD"
         horizontalConstraint={7}
-        errors={{ EUR: <ErrorMessage>foo</ErrorMessage> }}
+        errors={{ EUR: 'foo' }}
       />
     </Spec>
     <Spec label="when there is a warning for a specific currency (first one)">
@@ -117,7 +115,7 @@ export const component = () => (
         onChange={() => {}}
         selectedCurrency="CAD"
         horizontalConstraint={7}
-        warnings={{ CAD: <WarningMessage>foo</WarningMessage> }}
+        warnings={{ CAD: 'foo' }}
       />
     </Spec>
     <Spec label="when there is a warning for a specific currency (second one)">
@@ -126,7 +124,7 @@ export const component = () => (
         onChange={() => {}}
         selectedCurrency="CAD"
         horizontalConstraint={7}
-        warnings={{ EUR: <WarningMessage>foo</WarningMessage> }}
+        warnings={{ EUR: 'foo' }}
       />
     </Spec>
     <Spec label="when there is a general error">

diff --git a/...ponents/inputs/localized-multiline-text-input/src/localized-multiline-text-input.story.js b/...ponents/inputs/localized-multiline-text-input/src/localized-multiline-text-input.story.js
@@ -9,7 +9,6 @@ import {
   object,
 } from '@storybook/addon-knobs/react';
 import Constraints from '@commercetools-uikit/constraints';
-import { ErrorMessage, WarningMessage } from '@commercetools-uikit/messages';
 import Section from '../../../../../docs/.storybook/decorators/section';
 import Readme from '../README.md';
 import LocalizedMultilineTextInput from './localized-multiline-text-input';
@@ -84,7 +83,7 @@ storiesOf('Components|Inputs', module)
                 Object.values(errors).some((error) => error.length > 0)
                   ? Object.entries(errors).reduce((acc, [language, error]) => {
                       if (error.length === 0) return acc;
-                      acc[language] = <ErrorMessage>{error}</ErrorMessage>;
+                      acc[language] = error;
                       return acc;
                     }, {})
                   : undefined
@@ -94,9 +93,7 @@ storiesOf('Components|Inputs', module)
                   ? Object.entries(warnings).reduce(
                       (acc, [language, warning]) => {
                         if (warning.length === 0) return acc;
-                        acc[language] = (
-                          <WarningMessage>{warning}</WarningMessage>
-                        );
+                        acc[language] = warning;
                         return acc;
                       },
                       {}

diff --git a/.../inputs/localized-multiline-text-input/src/localized-multiline-text-input.visualroute.jsx b/.../inputs/localized-multiline-text-input/src/localized-multiline-text-input.visualroute.jsx
@@ -1,7 +1,5 @@
 import {
   LocalizedMultilineTextInput,
-  ErrorMessage,
-  WarningMessage,
 } from '@commercetools-frontend/ui-kit';
 import { Suite, Spec } from '../../../../../test/percy';
 
@@ -107,7 +105,7 @@ export const component = () => (
         onChange={() => {}}
         selectedLanguage="en"
         horizontalConstraint={7}
-        errors={{ en: <ErrorMessage>foo</ErrorMessage> }}
+        errors={{ en: 'foo' }}
       />
     </Spec>
     <Spec label="when there is an error for a specific language (second one)">
@@ -116,7 +114,7 @@ export const component = () => (
         onChange={() => {}}
         selectedLanguage="en"
         horizontalConstraint={7}
-        errors={{ de: <ErrorMessage>foo</ErrorMessage> }}
+        errors={{ de: 'foo' }}
       />
     </Spec>
     <Spec label="when there is a general error">
@@ -134,7 +132,7 @@ export const component = () => (
         onChange={() => {}}
         selectedLanguage="en"
         horizontalConstraint={7}
-        warnings={{ en: <WarningMessage>foo</WarningMessage> }}
+        warnings={{ en: 'foo' }}
       />
     </Spec>
     <Spec label="when there is a warning for a specific language (second one)">
@@ -143,7 +141,7 @@ export const component = () => (
         onChange={() => {}}
         selectedLanguage="en"
         horizontalConstraint={7}
-        warnings={{ de: <WarningMessage>foo</WarningMessage> }}
+        warnings={{ de: 'foo' }}
       />
     </Spec>
     <Spec label="when there is a general warning">
@@ -171,7 +169,7 @@ export const component = () => (
         selectedLanguage="en"
         horizontalConstraint={7}
         hasError={true}
-        errors={{ en: <ErrorMessage>Error error error e e e</ErrorMessage> }}
+        errors={{ en: 'Error error error e e e' }}
         additionalInfo={{ en: 'This is a foo field' }}
       />
     </Spec>
@@ -191,7 +189,7 @@ export const component = () => (
         selectedLanguage="en"
         horizontalConstraint={7}
         additionalInfo={{ en: 'This is a foo field' }}
-        errors={{ en: <ErrorMessage>Error error error e e e</ErrorMessage> }}
+        errors={{ en: 'Error error error e e e' }}
       />
     </Spec>
   </Suite>

diff --git a/packages/components/inputs/localized-multiline-text-input/src/translation-input.tsx b/packages/components/inputs/localized-multiline-text-input/src/translation-input.tsx
@@ -17,7 +17,11 @@ import {
   MultilineInput,
   messagesMultilineInput,
 } from '@commercetools-uikit/input-utils';
-import { AdditionalInfoMessage } from '@commercetools-uikit/messages';
+import {
+  AdditionalInfoMessage,
+  ErrorMessage,
+  WarningMessage,
+} from '@commercetools-uikit/messages';
 import {
   getTextareaStyles,
   getLanguageLabelStyles,
@@ -205,13 +209,13 @@ const TranslationInput = (props: TranslationInputProps) => {
           if (props.error)
             return (
               <LeftColumn>
-                <div>{props.error}</div>
+                <ErrorMessage>{props.error}</ErrorMessage>
               </LeftColumn>
             );
           if (props.warning)
             return (
               <LeftColumn>
-                <div>{props.warning}</div>
+                <WarningMessage>{props.warning}</WarningMessage>
               </LeftColumn>
             );
           return null;

diff --git a/packages/components/inputs/localized-rich-text-input/src/editor.tsx b/packages/components/inputs/localized-rich-text-input/src/editor.tsx
@@ -23,7 +23,11 @@ import { AngleUpIcon, AngleDownIcon } from '@commercetools-uikit/icons';
 import Text from '@commercetools-uikit/text';
 import FlatButton from '@commercetools-uikit/flat-button';
 import { messagesMultilineInput } from '@commercetools-uikit/input-utils';
-import { AdditionalInfoMessage } from '@commercetools-uikit/messages';
+import {
+  AdditionalInfoMessage,
+  ErrorMessage,
+  WarningMessage,
+} from '@commercetools-uikit/messages';
 import {
   RichTextBody,
   HiddenInput,
@@ -313,13 +317,13 @@ const Editor = forwardRef((props: TEditorProps, forwardedRef) => {
                 if (props.error)
                   return (
                     <LeftColumn>
-                      <div>{props.error}</div>
+                      <ErrorMessage>{props.error}</ErrorMessage>
                     </LeftColumn>
                   );
                 if (props.warning)
                   return (
                     <LeftColumn>
-                      <div>{props.warning}</div>
+                      <WarningMessage>{props.warning}</WarningMessage>
                     </LeftColumn>
                   );
                 return null;

diff --git a/packages/components/inputs/localized-rich-text-input/src/localized-rich-text-input.story.js b/packages/components/inputs/localized-rich-text-input/src/localized-rich-text-input.story.js
@@ -14,7 +14,6 @@ import Spacings from '@commercetools-uikit/spacings';
 import PrimaryButton from '@commercetools-uikit/primary-button';
 import CollapsiblePanel from '@commercetools-uikit/collapsible-panel';
 import Text from '@commercetools-uikit/text';
-import { ErrorMessage, WarningMessage } from '@commercetools-uikit/messages';
 import Readme from '../README.md';
 import LocalizedRichTextInput from './localized-rich-text-input';
 
@@ -146,7 +145,7 @@ const StoryWrapper = (props) => {
           Object.values(errors).some((error) => error.length > 0)
             ? Object.entries(errors).reduce((acc, [language, error]) => {
                 if (error.length === 0) return acc;
-                acc[language] = <ErrorMessage>{error}</ErrorMessage>;
+                acc[language] = error;
                 return acc;
               }, {})
             : undefined
@@ -155,7 +154,7 @@ const StoryWrapper = (props) => {
           Object.values(warnings).some((warning) => warning.length > 0)
             ? Object.entries(warnings).reduce((acc, [language, warning]) => {
                 if (warning.length === 0) return acc;
-                acc[language] = <WarningMessage>{warning}</WarningMessage>;
+                acc[language] = warning;
                 return acc;
               }, {})
             : undefined