@khanacademy/wonder-blocks-form 2.3.3 → 2.4.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-form
 
+## 2.4.0
+
+### Minor Changes
+
+-   af4f527c: LabeledTextField component now has a `required` prop that will mark is as required with an asterisk and provide validation
+
 ## 2.3.3
 
 ### Patch Changes

package/dist/es/index.js

@@ -716,7 +716,8 @@ class RadioGroup extends React.Component {
 
 }
 
-const _excluded = ["id", "type", "value", "disabled", "onKeyDown", "placeholder", "required", "light", "style", "testId", "readOnly", "autoComplete", "forwardedRef", "onFocus", "onBlur", "onValidate", "validate", "onChange"];
+const _excluded = ["id", "type", "value", "disabled", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoComplete", "forwardedRef", "onFocus", "onBlur", "onValidate", "validate", "onChange", "required"];
+const defaultErrorMessage = "This field is required.";
 
 // TODO(WB-1081): Change class name back to TextField after Styleguidist is gone.
 
@@ -734,7 +735,8 @@ class TextFieldInternal extends React.Component {
     this.maybeValidate = newValue => {
       const {
         validate,
-        onValidate
+        onValidate,
+        required
       } = this.props;
 
       if (validate) {
@@ -746,6 +748,16 @@ class TextFieldInternal extends React.Component {
             onValidate(maybeError);
           }
         });
+      } else if (required) {
+        const requiredString = typeof required === "string" ? required : defaultErrorMessage;
+        const maybeError = newValue ? null : requiredString;
+        this.setState({
+          error: maybeError
+        }, () => {
+          if (onValidate) {
+            onValidate(maybeError);
+          }
+        });
       }
     };
 
@@ -784,14 +796,16 @@ class TextFieldInternal extends React.Component {
       });
     };
 
-    if (props.validate) {
+    if (props.validate && props.value !== "") {
       // Ensures error is updated on unmounted server-side renders
       this.state.error = props.validate(props.value) || null;
     }
   }
 
   componentDidMount() {
-    this.maybeValidate(this.props.value);
+    if (this.props.value !== "") {
+      this.maybeValidate(this.props.value);
+    }
   }
 
   render() {
@@ -803,7 +817,6 @@ class TextFieldInternal extends React.Component {
       disabled,
       onKeyDown,
       placeholder,
-      required,
       light,
       style,
       testId,
@@ -825,7 +838,6 @@ class TextFieldInternal extends React.Component {
       onKeyDown: onKeyDown,
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
-      required: required,
       "data-test-id": testId,
       readOnly: readOnly,
       autoComplete: autoComplete,
@@ -894,23 +906,30 @@ const TextField = /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/Rea
   forwardedRef: ref
 })));
 
+const StyledSpan = addStyle("span");
 /**
  * A FieldHeading is an element that provides a label, description, and error element
  * to present better context and hints to any type of form field component.
  */
+
 class FieldHeading extends React.Component {
   renderLabel() {
     const {
       label,
       id,
+      required,
       testId
     } = this.props;
+    const requiredIcon = /*#__PURE__*/React.createElement(StyledSpan, {
+      style: styles.required,
+      "aria-hidden": true
+    }, " ", "*");
     return /*#__PURE__*/React.createElement(React.Fragment, null, typeof label === "string" ? /*#__PURE__*/React.createElement(LabelMedium, {
       style: styles.label,
       tag: "label",
       htmlFor: id && `${id}-field`,
       testId: testId && `${testId}-label`
-    }, label) : label, /*#__PURE__*/React.createElement(Strut, {
+    }, label, required && requiredIcon) : label, /*#__PURE__*/React.createElement(Strut, {
       size: Spacing.xxxSmall_4
     }));
   }
@@ -976,6 +995,9 @@ const styles = StyleSheet.create({
   },
   error: {
     color: Color.red
+  },
+  required: {
+    color: Color.red
   }
 });
 
@@ -1042,6 +1064,7 @@ class LabeledTextFieldInternal extends React.Component {
       description,
       value,
       disabled,
+      required,
       validate,
       onChange,
       onKeyDown,
@@ -1065,6 +1088,8 @@ class LabeledTextFieldInternal extends React.Component {
         id: `${uniqueId}-field`,
         "aria-describedby": ariaDescribedby ? ariaDescribedby : `${uniqueId}-error`,
         "aria-invalid": this.state.error ? "true" : "false",
+        "aria-required": required ? "true" : "false",
+        required: required,
         testId: testId && `${testId}-field`,
         type: type,
         value: value,
@@ -1083,6 +1108,7 @@ class LabeledTextFieldInternal extends React.Component {
       }),
       label: label,
       description: description,
+      required: !!required,
       error: !this.state.focused && this.state.error || ""
     }));
   }

package/dist/index.js

@@ -254,6 +254,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 
 
+const defaultErrorMessage = "This field is required.";
 
 // TODO(WB-1081): Change class name back to TextField after Styleguidist is gone.
 
@@ -271,7 +272,8 @@ class TextFieldInternal extends react__WEBPACK_IMPORTED_MODULE_0__["Component"]
     this.maybeValidate = newValue => {
       const {
         validate,
-        onValidate
+        onValidate,
+        required
       } = this.props;
 
       if (validate) {
@@ -283,6 +285,16 @@ class TextFieldInternal extends react__WEBPACK_IMPORTED_MODULE_0__["Component"]
             onValidate(maybeError);
           }
         });
+      } else if (required) {
+        const requiredString = typeof required === "string" ? required : defaultErrorMessage;
+        const maybeError = newValue ? null : requiredString;
+        this.setState({
+          error: maybeError
+        }, () => {
+          if (onValidate) {
+            onValidate(maybeError);
+          }
+        });
       }
     };
 
@@ -321,14 +333,16 @@ class TextFieldInternal extends react__WEBPACK_IMPORTED_MODULE_0__["Component"]
       });
     };
 
-    if (props.validate) {
+    if (props.validate && props.value !== "") {
       // Ensures error is updated on unmounted server-side renders
       this.state.error = props.validate(props.value) || null;
     }
   }
 
   componentDidMount() {
-    this.maybeValidate(this.props.value);
+    if (this.props.value !== "") {
+      this.maybeValidate(this.props.value);
+    }
   }
 
   render() {
@@ -339,7 +353,6 @@ class TextFieldInternal extends react__WEBPACK_IMPORTED_MODULE_0__["Component"]
       disabled,
       onKeyDown,
       placeholder,
-      required,
       light,
       style,
       testId,
@@ -355,6 +368,7 @@ class TextFieldInternal extends react__WEBPACK_IMPORTED_MODULE_0__["Component"]
       onValidate,
       validate,
       onChange,
+      required,
 
       /* eslint-enable no-unused-vars */
       // Should only include Aria related props
@@ -372,7 +386,6 @@ class TextFieldInternal extends react__WEBPACK_IMPORTED_MODULE_0__["Component"]
       onKeyDown: onKeyDown,
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
-      required: required,
       "data-test-id": testId,
       readOnly: readOnly,
       autoComplete: autoComplete,
@@ -926,6 +939,7 @@ class LabeledTextFieldInternal extends react__WEBPACK_IMPORTED_MODULE_0__["Compo
       description,
       value,
       disabled,
+      required,
       validate,
       onChange,
       onKeyDown,
@@ -949,6 +963,8 @@ class LabeledTextFieldInternal extends react__WEBPACK_IMPORTED_MODULE_0__["Compo
         id: `${uniqueId}-field`,
         "aria-describedby": ariaDescribedby ? ariaDescribedby : `${uniqueId}-error`,
         "aria-invalid": this.state.error ? "true" : "false",
+        "aria-required": required ? "true" : "false",
+        required: required,
         testId: testId && `${testId}-field`,
         type: type,
         value: value,
@@ -967,6 +983,7 @@ class LabeledTextFieldInternal extends react__WEBPACK_IMPORTED_MODULE_0__["Compo
       }),
       label: label,
       description: description,
+      required: !!required,
       error: !this.state.focused && this.state.error || ""
     }));
   }
@@ -1396,24 +1413,30 @@ const _generateStyles = (checked, error) => {
 
 
 
-
+const StyledSpan = Object(_khanacademy_wonder_blocks_core__WEBPACK_IMPORTED_MODULE_2__["addStyle"])("span");
 /**
  * A FieldHeading is an element that provides a label, description, and error element
  * to present better context and hints to any type of form field component.
  */
+
 class FieldHeading extends react__WEBPACK_IMPORTED_MODULE_0__["Component"] {
   renderLabel() {
     const {
       label,
       id,
+      required,
       testId
     } = this.props;
+    const requiredIcon = /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](StyledSpan, {
+      style: styles.required,
+      "aria-hidden": true
+    }, " ", "*");
     return /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](react__WEBPACK_IMPORTED_MODULE_0__["Fragment"], null, typeof label === "string" ? /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_typography__WEBPACK_IMPORTED_MODULE_6__["LabelMedium"], {
       style: styles.label,
       tag: "label",
       htmlFor: id && `${id}-field`,
       testId: testId && `${testId}-label`
-    }, label) : label, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_4__["Strut"], {
+    }, label, required && requiredIcon) : label, /*#__PURE__*/react__WEBPACK_IMPORTED_MODULE_0__["createElement"](_khanacademy_wonder_blocks_layout__WEBPACK_IMPORTED_MODULE_4__["Strut"], {
       size: _khanacademy_wonder_blocks_spacing__WEBPACK_IMPORTED_MODULE_5___default.a.xxxSmall_4
     }));
   }
@@ -1479,6 +1502,9 @@ const styles = aphrodite__WEBPACK_IMPORTED_MODULE_1__["StyleSheet"].create({
   },
   error: {
     color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.red
+  },
+  required: {
+    color: _khanacademy_wonder_blocks_color__WEBPACK_IMPORTED_MODULE_3___default.a.red
   }
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "2.3.3",
+  "version": "2.4.0",
   "design": "v1",
   "description": "Form components for Wonder Blocks.",
   "main": "dist/index.js",

package/src/components/__tests__/labeled-text-field.test.js

@@ -3,6 +3,7 @@ import * as React from "react";
 import {mount} from "enzyme";
 import "jest-enzyme";
 import {render, screen} from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
 
 import {StyleSheet} from "aphrodite";
 import LabeledTextField from "../labeled-text-field.js";
@@ -485,3 +486,141 @@ describe("LabeledTextField", () => {
         expect(textField).toHaveProp("autoComplete", autoComplete);
     });
 });
+
+describe("Required LabeledTextField", () => {
+    test("has * when `required` prop is true", () => {
+        // Arrange
+
+        // Act
+        render(
+            <LabeledTextField
+                label="Label"
+                value=""
+                onChange={() => {}}
+                required={true}
+            />,
+        );
+
+        // Assert
+        expect(screen.getByText("*")).toBeInTheDocument();
+    });
+
+    test("does not have * when `required` prop is false", () => {
+        // Arrange
+
+        // Act
+        render(
+            <LabeledTextField
+                label="Label"
+                value=""
+                onChange={() => {}}
+                required={false}
+            />,
+        );
+
+        // Assert
+        expect(screen.queryByText("*")).not.toBeInTheDocument();
+    });
+
+    test("aria-required is true when `required` prop is true", () => {
+        // Arrange
+
+        // Act
+        render(
+            <LabeledTextField
+                label="Label"
+                value=""
+                onChange={() => {}}
+                testId="foo-labeled-text-field"
+                required={true}
+            />,
+        );
+
+        const textField = screen.getByTestId("foo-labeled-text-field-field");
+
+        // Assert
+        expect(textField).toHaveAttribute("aria-required", "true");
+    });
+
+    test("aria-required is false when `required` prop is false", () => {
+        // Arrange
+
+        // Act
+        render(
+            <LabeledTextField
+                label="Label"
+                value=""
+                onChange={() => {}}
+                testId="foo-labeled-text-field"
+                required={false}
+            />,
+        );
+
+        const textField = screen.getByTestId("foo-labeled-text-field-field");
+
+        // Assert
+        expect(textField).toHaveAttribute("aria-required", "false");
+    });
+
+    test("displays the default message when the `required` prop is `true`", () => {
+        // Arrange
+        const TextFieldWrapper = () => {
+            const [value, setValue] = React.useState("");
+            return (
+                <LabeledTextField
+                    label="Label"
+                    value={value}
+                    onChange={setValue}
+                    required={true}
+                    testId="test-labeled-text-field"
+                />
+            );
+        };
+
+        render(<TextFieldWrapper />);
+
+        const textField = screen.getByTestId("test-labeled-text-field-field");
+        textField.focus();
+        userEvent.paste(textField, "a");
+        userEvent.clear(textField);
+
+        // Act
+        textField.blur();
+
+        // Assert
+        expect(screen.getByRole("alert")).toHaveTextContent(
+            "This field is required.",
+        );
+    });
+
+    test("displays the string passed into `required`", () => {
+        // Arrange
+        const errorMessage = "This is an example error message.";
+
+        const TextFieldWrapper = () => {
+            const [value, setValue] = React.useState("");
+            return (
+                <LabeledTextField
+                    label="Label"
+                    value={value}
+                    onChange={setValue}
+                    required={errorMessage}
+                    testId="test-labeled-text-field"
+                />
+            );
+        };
+
+        render(<TextFieldWrapper />);
+
+        const textField = screen.getByTestId("test-labeled-text-field-field");
+        textField.focus();
+        userEvent.paste(textField, "a");
+        userEvent.clear(textField);
+
+        // Act
+        textField.blur();
+
+        // Assert
+        expect(screen.getByRole("alert")).toHaveTextContent(errorMessage);
+    });
+});

package/src/components/__tests__/text-field.test.js

@@ -330,24 +330,6 @@ describe("TextField", () => {
         );
     });
 
-    it("required prop is passed to the input element", () => {
-        // Arrange
-        const wrapper = mount(
-            <TextField
-                id={"tf-1"}
-                value="Text"
-                onChange={() => {}}
-                required={true}
-            />,
-        );
-
-        // Act
-
-        // Assert
-        const input = wrapper.find("input");
-        expect(input).toContainMatchingElement("[required=true]");
-    });
-
     it("testId is passed to the input element", () => {
         // Arrange
         const testId = "some-test-id";

package/src/components/field-heading.js

@@ -2,7 +2,7 @@
 import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
-import {View, type StyleType} from "@khanacademy/wonder-blocks-core";
+import {View, addStyle, type StyleType} from "@khanacademy/wonder-blocks-core";
 import Color from "@khanacademy/wonder-blocks-color";
 import {Strut} from "@khanacademy/wonder-blocks-layout";
 import Spacing from "@khanacademy/wonder-blocks-spacing";
@@ -28,6 +28,11 @@ type Props = {|
      */
     description?: string | React.Element<Typography>,
 
+    /**
+     * Whether this field is required to continue.
+     */
+    required?: boolean,
+
     /**
      * The message for the error element.
      */
@@ -52,13 +57,22 @@ type Props = {|
     testId?: string,
 |};
 
+const StyledSpan = addStyle("span");
+
 /**
  * A FieldHeading is an element that provides a label, description, and error element
  * to present better context and hints to any type of form field component.
  */
 export default class FieldHeading extends React.Component<Props> {
     renderLabel(): React.Node {
-        const {label, id, testId} = this.props;
+        const {label, id, required, testId} = this.props;
+
+        const requiredIcon = (
+            <StyledSpan style={styles.required} aria-hidden={true}>
+                {" "}
+                *
+            </StyledSpan>
+        );
 
         return (
             <React.Fragment>
@@ -70,6 +84,7 @@ export default class FieldHeading extends React.Component<Props> {
                         testId={testId && `${testId}-label`}
                     >
                         {label}
+                        {required && requiredIcon}
                     </LabelMedium>
                 ) : (
                     label
@@ -154,4 +169,7 @@ const styles = StyleSheet.create({
     error: {
         color: Color.red,
     },
+    required: {
+        color: Color.red,
+    },
 });

package/src/components/labeled-text-field.js

@@ -41,6 +41,30 @@ type Props = {|
      */
     disabled: boolean,
 
+    /**
+     * Whether this field is required to to continue, or the error message to
+     * render if this field is left blank.
+     *
+     * This can be a boolean or a string.
+     *
+     * String:
+     * Please pass in a translated string to use as the error message that will
+     * render if the user leaves this field blank. If this field is required,
+     * and a string is not passed in, a default untranslated string will render
+     * upon error.
+     * Note: The string will not be used if a `validate` prop is passed in.
+     *
+     * Example message: i18n._("A password is required to log in.")
+     *
+     * Boolean:
+     * True/false indicating whether this field is required. Please do not pass
+     * in `true` if possible - pass in the error string instead.
+     * If `true` is passed, and a `validate` prop is not passed, that means
+     * there is no corresponding message and the default untranlsated message
+     * will be used.
+     */
+    required?: boolean | string,
+
     /**
      * Identifies the element or elements that describes this text field.
      */
@@ -202,6 +226,7 @@ class LabeledTextFieldInternal extends React.Component<
             description,
             value,
             disabled,
+            required,
             validate,
             onChange,
             onKeyDown,
@@ -233,6 +258,8 @@ class LabeledTextFieldInternal extends React.Component<
                                 aria-invalid={
                                     this.state.error ? "true" : "false"
                                 }
+                                aria-required={required ? "true" : "false"}
+                                required={required}
                                 testId={testId && `${testId}-field`}
                                 type={type}
                                 value={value}
@@ -252,6 +279,7 @@ class LabeledTextFieldInternal extends React.Component<
                         }
                         label={label}
                         description={description}
+                        required={!!required}
                         error={(!this.state.focused && this.state.error) || ""}
                     />
                 )}

package/src/components/labeled-text-field.stories.js

@@ -37,6 +37,55 @@ export const Text: StoryComponentType = () => {
     );
 };
 
+export const RequiredWithDefaultText: StoryComponentType = () => {
+    const [value, setValue] = React.useState("");
+
+    const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
+        if (event.key === "Enter") {
+            event.currentTarget.blur();
+        }
+    };
+
+    return (
+        <LabeledTextField
+            label="Name"
+            description="Please enter your name"
+            value={value}
+            onChange={(newValue) => setValue(newValue)}
+            onKeyDown={handleKeyDown}
+            required={true}
+        />
+    );
+};
+
+export const RequiredWithSpecifiedText: StoryComponentType = () => {
+    const [value, setValue] = React.useState("");
+
+    const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
+        if (event.key === "Enter") {
+            event.currentTarget.blur();
+        }
+    };
+
+    return (
+        <LabeledTextField
+            label="Name"
+            description="Please enter your name"
+            value={value}
+            onChange={(newValue) => setValue(newValue)}
+            onKeyDown={handleKeyDown}
+            required="This specific field is super required."
+        />
+    );
+};
+
+RequiredWithSpecifiedText.parameters = {
+    chromatic: {
+        // We have screenshots of other stories that cover this case.
+        disableSnapshot: true,
+    },
+};
+
 export const Number: StoryComponentType = () => {
     const [value, setValue] = React.useState("18");
 
@@ -121,6 +170,43 @@ export const Email: StoryComponentType = () => {
     );
 };
 
+export const EmailRequired: StoryComponentType = () => {
+    const [value, setValue] = React.useState("");
+
+    const validate = (value: string) => {
+        const emailRegex = /^[^@\s]+@[^@\s.]+\.[^@.\s]+$/;
+        if (!emailRegex.test(value)) {
+            return "Please enter a valid email";
+        }
+    };
+
+    const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
+        if (event.key === "Enter") {
+            event.currentTarget.blur();
+        }
+    };
+
+    return (
+        <LabeledTextField
+            label="Email"
+            type="email"
+            onChange={(newValue) => setValue(newValue)}
+            description="Please provide your personal email"
+            value={value}
+            validate={validate}
+            onKeyDown={handleKeyDown}
+            required={true}
+        />
+    );
+};
+
+EmailRequired.parameters = {
+    chromatic: {
+        // We have screenshots of other stories that cover this case.
+        disableSnapshot: true,
+    },
+};
+
 export const Telephone: StoryComponentType = () => {
     const [value, setValue] = React.useState("123-456-7890");
 

package/src/components/text-field.js

@@ -12,6 +12,8 @@ export type TextFieldType = "text" | "password" | "email" | "number" | "tel";
 
 type WithForwardRef = {|forwardedRef: React.Ref<"input">|};
 
+const defaultErrorMessage = "This field is required.";
+
 type Props = {|
     ...AriaProps,
 
@@ -72,9 +74,28 @@ type Props = {|
     placeholder?: string,
 
     /**
-     * Whether this component is required.
+     * Whether this field is required to to continue, or the error message to
+     * render if this field is left blank.
+     *
+     * This can be a boolean or a string.
+     *
+     * String:
+     * Please pass in a translated string to use as the error message that will
+     * render if the user leaves this field blank. If this field is required,
+     * and a string is not passed in, a default untranslated string will render
+     * upon error.
+     * Note: The string will not be used if a `validate` prop is passed in.
+     *
+     * Example message: i18n._("A password is required to log in.")
+     *
+     * Boolean:
+     * True/false indicating whether this field is required. Please do not pass
+     * in `true` if possible - pass in the error string instead.
+     * If `true` is passed, and a `validate` prop is not passed, that means
+     * there is no corresponding message and the default untranlsated message
+     * will be used.
      */
-    required?: boolean,
+    required?: boolean | string,
 
     /**
      * Change the default focus ring color to fit a dark background.
@@ -138,7 +159,7 @@ class TextFieldInternal extends React.Component<PropsWithForwardRef, State> {
 
     constructor(props: PropsWithForwardRef) {
         super(props);
-        if (props.validate) {
+        if (props.validate && props.value !== "") {
             // Ensures error is updated on unmounted server-side renders
             this.state.error = props.validate(props.value) || null;
         }
@@ -150,11 +171,14 @@ class TextFieldInternal extends React.Component<PropsWithForwardRef, State> {
     };
 
     componentDidMount() {
-        this.maybeValidate(this.props.value);
+        if (this.props.value !== "") {
+            this.maybeValidate(this.props.value);
+        }
     }
 
     maybeValidate: (newValue: string) => void = (newValue) => {
-        const {validate, onValidate} = this.props;
+        const {validate, onValidate, required} = this.props;
+
         if (validate) {
             const maybeError = validate(newValue) || null;
             this.setState({error: maybeError}, () => {
@@ -162,6 +186,15 @@ class TextFieldInternal extends React.Component<PropsWithForwardRef, State> {
                     onValidate(maybeError);
                 }
             });
+        } else if (required) {
+            const requiredString =
+                typeof required === "string" ? required : defaultErrorMessage;
+            const maybeError = newValue ? null : requiredString;
+            this.setState({error: maybeError}, () => {
+                if (onValidate) {
+                    onValidate(maybeError);
+                }
+            });
         }
     };
 
@@ -204,7 +237,6 @@ class TextFieldInternal extends React.Component<PropsWithForwardRef, State> {
             disabled,
             onKeyDown,
             placeholder,
-            required,
             light,
             style,
             testId,
@@ -219,6 +251,7 @@ class TextFieldInternal extends React.Component<PropsWithForwardRef, State> {
             onValidate,
             validate,
             onChange,
+            required,
             /* eslint-enable no-unused-vars */
             // Should only include Aria related props
             ...otherProps
@@ -249,7 +282,6 @@ class TextFieldInternal extends React.Component<PropsWithForwardRef, State> {
                 onKeyDown={onKeyDown}
                 onFocus={this.handleFocus}
                 onBlur={this.handleBlur}
-                required={required}
                 data-test-id={testId}
                 readOnly={readOnly}
                 autoComplete={autoComplete}

package/src/components/text-field.stories.js

@@ -40,6 +40,31 @@ export const Text: StoryComponentType = () => {
     );
 };
 
+export const Required: StoryComponentType = () => {
+    const [value, setValue] = React.useState("");
+
+    const handleChange = (newValue: string) => {
+        setValue(newValue);
+    };
+
+    const handleKeyDown = (event: SyntheticKeyboardEvent<HTMLInputElement>) => {
+        if (event.key === "Enter") {
+            event.currentTarget.blur();
+        }
+    };
+
+    return (
+        <TextField
+            id="tf-1"
+            type="text"
+            value={value}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            required={true}
+        />
+    );
+};
+
 export const Number: StoryComponentType = () => {
     const [value, setValue] = React.useState("12345");