Merge pull request #349 from storybookjs/form-error-state-hide

FormErrorState: Allow outside control of error messages
storybookjs · Apr 6, 2022 · 649576e · 649576e
2 parents c1d6262 + 3a74afc
commit 649576e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git a/src/components/FormErrorState.stories.tsx b/src/components/FormErrorState.stories.tsx
@@ -104,3 +104,12 @@ PureMultipleErrors.args = {
   blurredFieldIds: new Set(['input-1', 'input-2']),
   children: Children,
 };
+
+export const PureMultipleErrorsSuppressed = (args: PureFormErrorStateProps) => (
+  <PureFormErrorState {...args} />
+);
+PureMultipleErrorsSuppressed.decorators = decorators;
+PureMultipleErrorsSuppressed.args = {
+  ...PureMultipleErrors.args,
+  suppressErrorMessages: true,
+};
diff --git a/src/components/FormErrorState.tsx b/src/components/FormErrorState.tsx
@@ -27,6 +27,7 @@ export interface FormErrorStateChildrenArgs {
 export interface FormErrorStateProps {
   onSubmit: Function;
   children: (args: FormErrorStateChildrenArgs) => JSX.Element;
+  suppressErrorMessages: boolean;
 }
 
 export interface PureFormErrorStateProps extends FormErrorStateProps {
@@ -40,6 +41,7 @@ export interface PureFormErrorStateProps extends FormErrorStateProps {
 
 export const PureFormErrorState = ({
   children,
+  suppressErrorMessages,
   onSubmit,
   onMouseEnter,
   onMouseLeave,
@@ -54,7 +56,7 @@ export const PureFormErrorState = ({
     onFocus: () => onFocus(id),
     onBlur: () => onBlur(id),
     error: (value: string) => getError({ id, value, validate }),
-    suppressErrorMessage: !primaryFieldId || primaryFieldId !== id,
+    suppressErrorMessage: suppressErrorMessages || !primaryFieldId || primaryFieldId !== id,
   });
 
   return children({ getFormErrorFieldProps, onSubmit });