fix(Input): Clarification that developers should use ref with `Inpu…

…t`. Add a new example for Storybook. (#1526)

Co-authored-by: Nikita Orliak <[email protected]>

.changeset/a11y-input-error-message-not-read.md

@@ -0,0 +1,5 @@
+---
+'react-magma-docs': patch
+---
+
+fix(Input): Clarification that developers should use `ref` with `Input`. Add a new example for Storybook.

packages/react-magma-dom/src/components/Alert/__snapshots__/Alert.test.js.snap

@@ -389,6 +389,10 @@ exports[`Alert Variants should render an alert with danger variant 1`] = `
   }
 }
 
+.emotion-8 {
+  white-space: pre-line;
+}
+
 .emotion-0 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
@@ -492,6 +496,10 @@ exports[`Alert Variants should render an alert with danger variant 1`] = `
   }
 }
 
+.emotion-8 {
+  white-space: pre-line;
+}
+
 <div>
   <div
     class="emotion-0 emotion-1"
@@ -521,7 +529,9 @@ exports[`Alert Variants should render an alert with danger variant 1`] = `
       <div
         class="emotion-6 emotion-7"
       >
-        <span>
+        <span
+          class="emotion-8 emotion-9"
+        >
           Test Alert Text
         </span>
       </div>
@@ -634,6 +644,10 @@ exports[`Alert Variants should render an alert with info variant 1`] = `
   }
 }
 
+.emotion-8 {
+  white-space: pre-line;
+}
+
 .emotion-0 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
@@ -737,6 +751,10 @@ exports[`Alert Variants should render an alert with info variant 1`] = `
   }
 }
 
+.emotion-8 {
+  white-space: pre-line;
+}
+
 <div>
   <div
     class="emotion-0 emotion-1"
@@ -766,7 +784,9 @@ exports[`Alert Variants should render an alert with info variant 1`] = `
       <div
         class="emotion-6 emotion-7"
       >
-        <span>
+        <span
+          class="emotion-8 emotion-9"
+        >
           Test Alert Text
         </span>
       </div>
@@ -879,6 +899,10 @@ exports[`Alert Variants should render an alert with warning variant 1`] = `
   }
 }
 
+.emotion-8 {
+  white-space: pre-line;
+}
+
 .emotion-0 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
@@ -982,6 +1006,10 @@ exports[`Alert Variants should render an alert with warning variant 1`] = `
   }
 }
 
+.emotion-8 {
+  white-space: pre-line;
+}
+
 <div>
   <div
     class="emotion-0 emotion-1"
@@ -1011,7 +1039,9 @@ exports[`Alert Variants should render an alert with warning variant 1`] = `
       <div
         class="emotion-6 emotion-7"
       >
-        <span>
+        <span
+          class="emotion-8 emotion-9"
+        >
           Test Alert Text
         </span>
       </div>
@@ -1124,6 +1154,10 @@ exports[`Alert should render an alert with default variant 1`] = `
   }
 }
 
+.emotion-8 {
+  white-space: pre-line;
+}
+
 .emotion-0 {
   -webkit-align-items: stretch;
   -webkit-box-align: stretch;
@@ -1227,6 +1261,10 @@ exports[`Alert should render an alert with default variant 1`] = `
   }
 }
 
+.emotion-8 {
+  white-space: pre-line;
+}
+
 <div>
   <div
     class="emotion-0 emotion-1"
@@ -1256,7 +1294,9 @@ exports[`Alert should render an alert with default variant 1`] = `
       <div
         class="emotion-6 emotion-7"
       >
-        <span>
+        <span
+          class="emotion-8 emotion-9"
+        >
           Test Alert Text
         </span>
       </div>

packages/react-magma-dom/src/components/AlertBase/index.tsx

@@ -379,6 +379,10 @@ const DismissButton = styled(IconButton, { shouldForwardProp })<{
   }
 `;
 
+const AlertSpan = styled.span`
+  white-space: pre-line;
+`
+
 function renderIcon(variant = 'info', isToast?: boolean, theme?: any) {
   const Icon = VARIANT_ICON[variant];
 
@@ -479,7 +483,7 @@ export const AlertBase = React.forwardRef<HTMLDivElement, AlertBaseProps>(
               isDismissible={isDismissible}
               theme={theme}
             >
-              <span>{children}</span>
+              <AlertSpan>{children}</AlertSpan>
               {additionalContent && (
                 <AdditionalContentWrapper theme={theme}>
                   {additionalContent}

packages/react-magma-dom/src/components/Form/index.tsx

@@ -8,6 +8,7 @@ import { ThemeInterface } from '../../theme/magma';
 import { InverseContext, useIsInverse } from '../../inverse';
 import styled from '@emotion/styled';
 import { TypographyContextVariant, TypographyVisualStyle } from '../Typography';
+import { Announce } from '../Announce';
 
 /**
  * @children required
@@ -108,7 +109,9 @@ export const Form = React.forwardRef<HTMLFormElement, FormProps>(
           </Heading>
           {description && <Paragraph>{description}</Paragraph>}
           {errorMessage && (
-            <Alert variant={AlertVariant.danger}>{errorMessage}</Alert>
+            <Announce role="alert">
+              <Alert variant={AlertVariant.danger}>{errorMessage}</Alert>
+            </Announce>
           )}
           <div>{children}</div>
           <FormActions>{actions}</FormActions>

packages/react-magma-dom/src/components/Input/Input.stories.tsx

@@ -2,13 +2,14 @@ import { Meta, Story } from '@storybook/react/types-6-0';
 import React from 'react';
 import { HelpIcon, NotificationsIcon, WorkIcon } from 'react-magma-icons';
 import { Input, InputProps } from '.';
-import { ButtonSize, ButtonType, ButtonVariant } from '../Button';
+import { Button, ButtonSize, ButtonType, ButtonVariant } from '../Button';
 import { Card, CardBody } from '../Card';
 import { IconButton } from '../IconButton';
 import { InputIconPosition, InputSize, InputType } from '../InputBase';
 import { LabelPosition } from '../Label';
 import { Tooltip } from '../Tooltip';
 import { Spacer } from '../Spacer';
+import { ButtonGroup } from '../ButtonGroup';
 
 const Template: Story<InputProps> = args => (
   <>
@@ -211,7 +212,11 @@ export const HelpLink = args => {
         </Tooltip>
       </Input>
       <Spacer size={16} />
-      <Input labelText="Help link - hidden" isLabelVisuallyHidden {...args}>
+      <Input 
+        labelText="Help link - hidden" 
+        isLabelVisuallyHidden 
+        {...args}
+      >
         <Tooltip content={helpLinkLabel}>
           <IconButton
             aria-label={helpLinkLabel}
@@ -322,3 +327,105 @@ NumberInput.args = {
 NumberInput.parameters = {
   controls: { exclude: ['type', 'iconPosition', 'labelWidth'] },
 };
+
+export const SeveralErrors = () => {
+  const [inputValues, setInputValues] = React.useState({
+    firstName: '',
+    lastName: '',
+    emailAddress: '',
+  });
+  const [hasErrors, setHasErrors] = React.useState({
+    firstName: false,
+    lastName: false,
+    emailAddress: false,
+  });
+
+  const firstNameInputRef = React.useRef();
+  const lastNameInputRef = React.useRef();
+  const emailAddressInputRef = React.useRef();
+
+  const submit = () => {
+    setHasErrors({
+      firstName: false,
+      lastName: false,
+      emailAddress: false,
+    });
+
+    if (!inputValues.emailAddress) {
+      setHasErrors(prev => ({ ...prev, emailAddress: true }));
+      emailAddressInputRef.current.focus();
+    }
+
+    if (!inputValues.lastName) {
+      setHasErrors(prev => ({ ...prev, lastName: true }));
+      lastNameInputRef.current.focus();
+    }
+
+    if (!inputValues.firstName) {
+      setHasErrors(prev => ({ ...prev, firstName: true }));
+      firstNameInputRef.current.focus();
+    }
+  };
+
+  const reset = () => {
+    setHasErrors({
+      firstName: false,
+      lastName: false,
+      emailAddress: false,
+    });
+    setInputValues({
+      firstName: '',
+      lastName: '',
+      emailAddress: '',
+    });
+
+    firstNameInputRef.current.focus();
+  };
+
+  return (
+    <>
+      <Input
+        errorMessage={hasErrors.firstName ? 'Please enter your first name' : ''}
+        helperMessage=""
+        labelText="First name *"
+        onChange={event =>
+          setInputValues(prev => ({ ...prev, firstName: event.target.value }))
+        }
+        required
+        value={inputValues.firstName}
+        ref={firstNameInputRef}
+      />
+      <br />
+      <Input
+        errorMessage={hasErrors.lastName ? 'Please enter your last name' : ''}
+        helperMessage=""
+        labelText="Last name *"
+        onChange={event =>
+          setInputValues(prev => ({ ...prev, lastName: event.target.value }))
+        }
+        required
+        value={inputValues.lastName}
+        ref={lastNameInputRef}
+      />
+      <br />
+      <Input
+        errorMessage={hasErrors.emailAddress ? 'Please enter your email address' : ''}
+        helperMessage=""
+        labelText="Email address *"
+        onChange={event =>
+          setInputValues(prev => ({ ...prev, emailAddress: event.target.value }))
+        }
+        required
+        value={inputValues.emailAddress}
+        ref={emailAddressInputRef}
+      />
+      <br />
+      <ButtonGroup>
+        <Button onClick={submit}>Submit</Button>
+        <Button onClick={reset} color="secondary">
+          Reset
+        </Button>
+      </ButtonGroup>
+    </>
+  );
+};