@khanacademy/wonder-blocks-form 6.0.5 → 7.0.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @khanacademy/wonder-blocks-form
 
+## 7.0.0
+
+### Major Changes
+
+-   8d26588f: Remove `light` variant from LabeledTextField, TextField and TextArea"
+
+### Patch Changes
+
+-   Updated dependencies [0de25cd8]
+    -   @khanacademy/wonder-blocks-tokens@4.0.0
+    -   @khanacademy/wonder-blocks-clickable@5.0.6
+    -   @khanacademy/wonder-blocks-layout@3.0.6
+
+## 6.0.6
+
+### Patch Changes
+
+-   d9bc865b: TextField and TextArea: Set `aria-required` if it is required
+-   d9bc865b: TextField and TextArea validation: Always clear error message onChange if instantValidation=false so externally set error state can still be cleared
+
 ## 6.0.5
 
 ### Patch Changes

package/dist/components/checkbox-core.d.ts

@@ -4,14 +4,14 @@ import type { Checked } from "../util/types";
  * The internal stateless ☑️ Checkbox
  */
 declare const CheckboxCore: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
-    role?: import("@khanacademy/wonder-blocks-core").AriaRole | undefined;
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole;
 }> & {
     checked: Checked;
     disabled: boolean;
     error: boolean;
-    groupName?: string | undefined;
-    id?: string | undefined;
-    testId?: string | undefined;
+    groupName?: string;
+    id?: string;
+    testId?: string;
     onClick: () => void;
 } & React.RefAttributes<HTMLInputElement>>;
 export default CheckboxCore;

package/dist/components/checkbox.d.ts

@@ -23,7 +23,7 @@ import type { Checked } from "../util/types";
  * ```
  */
 declare const Checkbox: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
-    role?: import("@khanacademy/wonder-blocks-core").AriaRole | undefined;
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole;
 }> & {
     /**
      * Whether this component is checked or indeterminate
@@ -32,11 +32,11 @@ declare const Checkbox: React.ForwardRefExoticComponent<Readonly<import("@khanac
     /**
      * Whether this component is disabled
      */
-    disabled?: boolean | undefined;
+    disabled?: boolean;
     /**
      * Whether this component should show an error state
      */
-    error?: boolean | undefined;
+    error?: boolean;
     /**
      * Callback when this component is selected. The newCheckedState is the
      * new checked state of the component.
@@ -55,7 +55,7 @@ declare const Checkbox: React.ForwardRefExoticComponent<Readonly<import("@khanac
      * guarantee that the ID is unique within everything rendered on a page.
      * Used to match `<label>` with `<input>` elements for screenreaders.
      */
-    id?: string | undefined;
+    id?: string;
     /**
      * Optional styling for the container. Does not style the component.
      */
@@ -63,16 +63,16 @@ declare const Checkbox: React.ForwardRefExoticComponent<Readonly<import("@khanac
     /**
      * Adds CSS classes to the Checkbox.
      */
-    className?: string | undefined;
+    className?: string;
     /**
      * Optional test ID for e2e testing
      */
-    testId?: string | undefined;
+    testId?: string;
     /**
      * Name for the checkbox or radio button group. Only applicable for group
      * contexts, auto-populated by group components via Choice.
      * @ignore
      */
-    groupName?: string | undefined;
+    groupName?: string;
 } & React.RefAttributes<HTMLInputElement>>;
 export default Checkbox;

package/dist/components/choice-internal.d.ts

@@ -8,21 +8,21 @@ import type { StyleType } from "@khanacademy/wonder-blocks-core";
  * example, we can make onChange a required prop on Checkbox but not on Choice
  * (because for Choice, that prop would be auto-populated by CheckboxGroup).
  */ declare const ChoiceInternal: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
-    role?: import("@khanacademy/wonder-blocks-core").AriaRole | undefined;
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole;
 }> & {
     /** Whether this choice is checked. */
     checked: boolean | null | undefined;
     /** Whether this choice option is disabled. */
-    disabled?: boolean | undefined;
+    disabled?: boolean;
     /** Whether this choice is in error mode. */
-    error?: boolean | undefined;
+    error?: boolean;
     /** Returns the new checked state of the component. */
     onChange: (newCheckedState: boolean) => unknown;
     /**
      * Used for accessibility purposes, where the label id should match the
      * input id.
      */
-    id?: string | undefined;
+    id?: string;
     /**
      * Optional additional styling.
      */
@@ -30,11 +30,11 @@ import type { StyleType } from "@khanacademy/wonder-blocks-core";
     /**
      * Adds CSS classes to the Button.
      */
-    className?: string | undefined;
+    className?: string;
     /**
      * Optional id for testing purposes.
      */
-    testId?: string | undefined;
+    testId?: string;
     /**
      * Label for the field.
      */
@@ -42,7 +42,7 @@ import type { StyleType } from "@khanacademy/wonder-blocks-core";
     /** Optional description for the field. */
     description?: React.ReactNode;
     /** Auto-populated by parent's groupName prop if in a group. */
-    groupName?: string | undefined;
+    groupName?: string;
     /** Takes either "radio" or "checkbox" value. */
     variant: "radio" | "checkbox";
 } & React.RefAttributes<HTMLInputElement>>;

package/dist/components/choice.d.ts

@@ -67,7 +67,7 @@ import type { StyleType } from "@khanacademy/wonder-blocks-core";
  * ```
  */
 declare const Choice: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
-    role?: import("@khanacademy/wonder-blocks-core").AriaRole | undefined;
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole;
 }> & {
     /** User-defined. Label for the field. */
     label: React.ReactNode;
@@ -76,42 +76,42 @@ declare const Choice: React.ForwardRefExoticComponent<Readonly<import("@khanacad
     /** User-defined. Should be distinct for each item in the group. */
     value: string;
     /** User-defined. Whether this choice option is disabled. Default false. */
-    disabled?: boolean | undefined;
+    disabled?: boolean;
     /** User-defined. Optional id for testing purposes. */
-    testId?: string | undefined;
+    testId?: string;
     /** User-defined. Optional additional styling. */
     style?: StyleType;
     /**
      * Auto-populated by parent. Whether this choice is checked.
      * @ignore
      */
-    checked?: boolean | undefined;
+    checked?: boolean;
     /**
      * Auto-populated by parent. Whether this choice is in error mode (everything
      * in a choice group would be in error mode at the same time).
      * @ignore
      */
-    error?: boolean | undefined;
+    error?: boolean;
     /**
      * Auto-populated by parent. Used for accessibility purposes, where the label
      * id should match the input id.
      * @ignore
      */
-    id?: string | undefined;
+    id?: string;
     /**
      * Auto-populated by parent's groupName prop.
      * @ignore
      */
-    groupName?: string | undefined;
+    groupName?: string;
     /**
      * Auto-populated by parent. Returns the new checked state of the component.
      * @ignore
      */
-    onChange?: ((newCheckedState: boolean) => unknown) | undefined;
+    onChange?: (newCheckedState: boolean) => unknown;
     /**
      * Auto-populated by parent.
      * @ignore
      */
-    variant?: "checkbox" | "radio" | undefined;
+    variant?: "radio" | "checkbox";
 } & React.RefAttributes<HTMLInputElement>>;
 export default Choice;

package/dist/components/field-heading.d.ts

@@ -36,10 +36,6 @@ type Props = {
      * Optional test ID for e2e testing.
      */
     testId?: string;
-    /**
-     * Change the field’s sub-components to fit a dark background.
-     */
-    light?: boolean;
 };
 /**
  * A FieldHeading is an element that provides a label, description, and error element

package/dist/components/labeled-text-field.d.ts

@@ -91,10 +91,6 @@ type CommonProps = {
      * Provide hints or examples of what to enter.
      */
     placeholder?: string;
-    /**
-     * Change the field’s sub-components to fit a dark background.
-     */
-    light: boolean;
     /**
      * Custom styles for the container.
      *
@@ -137,7 +133,6 @@ type PropsWithForwardRef = Props & WithForwardRef;
 type DefaultProps = {
     type: PropsWithForwardRef["type"];
     disabled: PropsWithForwardRef["disabled"];
-    light: PropsWithForwardRef["light"];
 };
 type State = {
     /**

package/dist/components/radio-core.d.ts

@@ -3,14 +3,14 @@ import type { Checked } from "../util/types";
 /**
  * The internal stateless 🔘 Radio button
  */ declare const RadioCore: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
-    role?: import("@khanacademy/wonder-blocks-core").AriaRole | undefined;
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole;
 }> & {
     checked: Checked;
     disabled: boolean;
     error: boolean;
-    groupName?: string | undefined;
-    id?: string | undefined;
-    testId?: string | undefined;
+    groupName?: string;
+    id?: string;
+    testId?: string;
     onClick: () => void;
 } & React.RefAttributes<HTMLInputElement>>;
 export default RadioCore;

package/dist/components/radio.d.ts

@@ -7,7 +7,7 @@ import type { StyleType } from "@khanacademy/wonder-blocks-core";
  * This component should not really be used by itself because radio buttons are
  * often grouped together. See RadioGroup.
  */ declare const Radio: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
-    role?: import("@khanacademy/wonder-blocks-core").AriaRole | undefined;
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole;
 }> & {
     /**
      * Whether this component is checked
@@ -16,11 +16,11 @@ import type { StyleType } from "@khanacademy/wonder-blocks-core";
     /**
      * Whether this component is disabled
      */
-    disabled?: boolean | undefined;
+    disabled?: boolean;
     /**
      * Whether this component should show an error state
      */
-    error?: boolean | undefined;
+    error?: boolean;
     /**
      * Callback when this component is selected. The newCheckedState is the
      * new checked state of the component.
@@ -39,7 +39,7 @@ import type { StyleType } from "@khanacademy/wonder-blocks-core";
      * guarantee that the ID is unique within everything rendered on a page.
      * Used to match `<label>` with `<input>` elements for screenreaders.
      */
-    id?: string | undefined;
+    id?: string;
     /**
      * Optional styling for the container. Does not style the component.
      */
@@ -47,16 +47,16 @@ import type { StyleType } from "@khanacademy/wonder-blocks-core";
     /**
      * Adds CSS classes to the Checkbox.
      */
-    className?: string | undefined;
+    className?: string;
     /**
      * Optional test ID for e2e testing
      */
-    testId?: string | undefined;
+    testId?: string;
     /**
      * Name for the checkbox or radio button group. Only applicable for group
      * contexts, auto-populated by group components via Choice.
      * @ignore
      */
-    groupName?: string | undefined;
+    groupName?: string;
 } & React.RefAttributes<HTMLInputElement>>;
 export default Radio;

package/dist/components/text-area.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { StyleType } from "@khanacademy/wonder-blocks-core";
 declare const TextArea: React.ForwardRefExoticComponent<Readonly<import("@khanacademy/wonder-blocks-core").AriaAttributes> & Readonly<{
-    role?: import("@khanacademy/wonder-blocks-core").AriaRole | undefined;
+    role?: import("@khanacademy/wonder-blocks-core").AriaRole;
 }> & {
     /**
      * The text area value.
@@ -15,11 +15,11 @@ declare const TextArea: React.ForwardRefExoticComponent<Readonly<import("@khanac
      * An optional unique identifier for the TextArea.
      * If no id is specified, a unique id will be auto-generated.
      */
-    id?: string | undefined;
+    id?: string;
     /**
      * Optional test ID for e2e testing.
      */
-    testId?: string | undefined;
+    testId?: string;
     /**
      * Custom styles for the textarea element.
      */
@@ -33,39 +33,39 @@ declare const TextArea: React.ForwardRefExoticComponent<Readonly<import("@khanac
     /**
      * Provide hints or examples of what to enter.
      */
-    placeholder?: string | undefined;
+    placeholder?: string;
     /**
      * Whether the text area should be disabled.
      */
-    disabled?: boolean | undefined;
+    disabled?: boolean;
     /**
      * Specifies if the text area is read-only.
      */
-    readOnly?: boolean | undefined;
+    readOnly?: boolean;
     /**
      * Specifies if the text area allows autocomplete.
      */
-    autoComplete?: "off" | "on" | undefined;
+    autoComplete?: "on" | "off";
     /**
      * The name for the text area control. This is submitted along with
      * the form data.
      */
-    name?: string | undefined;
+    name?: string;
     /**
      * CSS classes for the textarea element. It is recommended that the style prop is used instead where possible
      */
-    className?: string | undefined;
+    className?: string;
     /**
      * Whether this textarea should autofocus on page load.
      */
-    autoFocus?: boolean | undefined;
+    autoFocus?: boolean;
     /**
      * The number of visible lines of text for the textarea.
      * By default, 2 rows are shown.
      * `rows` is ignored if a height is applied to the textarea using CSS.
      * The number of rows can change if the resize control is used by the user.
      */
-    rows?: number | undefined;
+    rows?: number;
     /**
      * Determines if the textarea should be checked for spelling by the browser/OS.
      * By default, it is enabled. It will be checked for spelling when you try
@@ -74,46 +74,46 @@ declare const TextArea: React.ForwardRefExoticComponent<Readonly<import("@khanac
      * **Note**: Consider disabling `spellCheck` for
      *  sensitive information (see [Security and Privacy concerns](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/spellcheck#security_and_privacy_concerns) for more details)
      */
-    spellCheck?: boolean | undefined;
+    spellCheck?: boolean;
     /**
      * How the control should wrap the value for form submission. If not provided,
      * `soft` is the default behaviour. For more details, see the
      * [wrap attribute MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#wrap)
      */
-    wrap?: "off" | "hard" | "soft" | undefined;
+    wrap?: "hard" | "soft" | "off";
     /**
      * The minimum number of characters allowed in the textarea.
      */
-    minLength?: number | undefined;
+    minLength?: number;
     /**
      * The maximum number of characters allowed in the textarea.
      */
-    maxLength?: number | undefined;
+    maxLength?: number;
     /**
      * Called when the textarea is clicked.
      * @param event The event from the click
      */
-    onClick?: React.MouseEventHandler<HTMLTextAreaElement> | undefined;
+    onClick?: React.MouseEventHandler<HTMLTextAreaElement>;
     /**
      * Called when a key is pressed.
      * @param event The keyboard event
      */
-    onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement> | undefined;
+    onKeyDown?: React.KeyboardEventHandler<HTMLTextAreaElement>;
     /**
      * Called when a key is released.
      * @param event The keyboard event
      */
-    onKeyUp?: React.KeyboardEventHandler<HTMLTextAreaElement> | undefined;
+    onKeyUp?: React.KeyboardEventHandler<HTMLTextAreaElement>;
     /**
      * Called when the element has been focused.
      * @param event The focus event
      */
-    onFocus?: React.FocusEventHandler<HTMLTextAreaElement> | undefined;
+    onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
     /**
      * Called when the element has been focused.
      * @param event The blur event
      */
-    onBlur?: React.FocusEventHandler<HTMLTextAreaElement> | undefined;
+    onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
     /**
      * Provide a validation for the textarea value.
      * Return a string error message or null | void for a valid input.
@@ -121,25 +121,25 @@ declare const TextArea: React.ForwardRefExoticComponent<Readonly<import("@khanac
      * Use this for errors that are shown to the user while they are filling out
      * a form.
      */
-    validate?: ((value: string) => string | null | void) | undefined;
+    validate?: (value: string) => string | null | void;
     /**
      * Called right after the textarea is validated.
      */
-    onValidate?: ((errorMessage?: string | null | undefined) => unknown) | undefined;
+    onValidate?: (errorMessage?: string | null | undefined) => unknown;
     /**
      * If true, textarea is validated as the user types (onChange). If false,
      * it is validated when the user's focus moves out of the field (onBlur).
      * It is preferred that instantValidation is set to `false`, however, it
      * defaults to `true` for backwards compatibility with existing implementations.
      */
-    instantValidation?: boolean | undefined;
+    instantValidation?: boolean;
     /**
      * Whether the textarea is in an error state.
      *
      * Use this for errors that are triggered by something external to the
      * component (example: an error after form submission).
      */
-    error?: boolean | undefined;
+    error?: boolean;
     /**
      * Whether this textarea is required to continue, or the error message to
      * render if this textarea is left blank.
@@ -162,15 +162,11 @@ declare const TextArea: React.ForwardRefExoticComponent<Readonly<import("@khanac
      * there is no corresponding message and the default untranlsated message
      * will be used.
      */
-    required?: string | boolean | undefined;
+    required?: boolean | string;
     /**
      * Specifies the resizing behaviour for the textarea. Defaults to both
      * behaviour. For more details, see the [CSS resize property values MDN docs](https://developer.mozilla.org/en-US/docs/Web/CSS/resize#values)
      */
-    resizeType?: "none" | "both" | "horizontal" | "vertical" | undefined;
-    /**
-     * Change the default focus ring color to fit a dark background.
-     */
-    light?: boolean | undefined;
+    resizeType?: "horizontal" | "vertical" | "both" | "none";
 } & React.RefAttributes<HTMLTextAreaElement>>;
 export default TextArea;

package/dist/components/text-field.d.ts

@@ -101,10 +101,6 @@ type CommonProps = AriaProps & {
      * will be used.
      */
     required?: boolean | string;
-    /**
-     * Change the default focus ring color to fit a dark background.
-     */
-    light?: boolean;
     /**
      * Custom styles for the input.
      */

package/dist/es/index.js

@@ -604,11 +604,9 @@ const useFieldValidation = ({
     if (_instantValidation) {
       handleValidation(newValue);
     } else {
-      if (errorMessage) {
-        setErrorMessage(null);
-        if (onValidate) {
-          onValidate(null);
-        }
+      setErrorMessage(null);
+      if (onValidate) {
+        onValidate(null);
       }
     }
   };
@@ -650,7 +648,7 @@ const useFieldValidation = ({
   };
 };
 
-const _excluded$2 = ["id", "type", "value", "name", "disabled", "light", "error", "validate", "onValidate", "required", "placeholder", "style", "testId", "readOnly", "autoFocus", "autoComplete", "forwardedRef", "instantValidation", "onKeyDown", "onChange", "onFocus", "onBlur"];
+const _excluded$2 = ["id", "type", "value", "name", "disabled", "error", "validate", "onValidate", "required", "placeholder", "style", "testId", "readOnly", "autoFocus", "autoComplete", "forwardedRef", "instantValidation", "onKeyDown", "onChange", "onFocus", "onBlur"];
 const StyledInput = addStyle("input");
 const TextField = props => {
   const {
@@ -659,7 +657,6 @@ const TextField = props => {
       value,
       name,
       disabled = false,
-      light = false,
       error,
       validate,
       onValidate,
@@ -707,22 +704,17 @@ const TextField = props => {
       onBlur(event);
     }
   };
-  const getStyles = () => {
-    const baseStyles = [styles$2.input, styles$7.LabelMedium];
-    const defaultStyles = [styles$2.default, !disabled && styles$2.defaultFocus, disabled && styles$2.disabled, hasError && styles$2.error];
-    const lightStyles = [styles$2.light, !disabled && styles$2.lightFocus, disabled && styles$2.lightDisabled, hasError && styles$2.lightError];
-    return [...baseStyles, ...(light ? lightStyles : defaultStyles)];
-  };
   return React.createElement(Id, {
     id: id
   }, uniqueId => React.createElement(StyledInput, _extends({
-    style: [getStyles(), style],
+    style: [styles$2.input, styles$7.LabelMedium, styles$2.default, !disabled && styles$2.defaultFocus, disabled && styles$2.disabled, hasError && styles$2.error, style],
     id: uniqueId,
     type: type,
     placeholder: placeholder,
     value: value,
     name: name,
     "aria-disabled": disabled,
+    "aria-required": !!required,
     onChange: handleChange,
     onKeyDown: disabled ? undefined : onKeyDown,
     onFocus: handleFocus,
@@ -783,49 +775,6 @@ const styles$2 = StyleSheet.create({
       outline: `2px solid ${color.offBlack32}`,
       outlineOffset: "-3px"
     }
-  },
-  light: {
-    background: color.white,
-    border: `1px solid ${color.offBlack16}`,
-    color: color.offBlack,
-    "::placeholder": {
-      color: color.offBlack64
-    }
-  },
-  lightFocus: {
-    ":focus-visible": {
-      outline: `3px solid ${color.blue}`,
-      outlineOffset: "-4px",
-      borderColor: color.white
-    }
-  },
-  lightDisabled: {
-    backgroundColor: "transparent",
-    border: `1px solid ${color.white32}`,
-    color: color.white64,
-    "::placeholder": {
-      color: color.white64
-    },
-    cursor: "not-allowed",
-    ":focus-visible": {
-      borderColor: mix(color.white32, color.blue),
-      outline: `3px solid ${color.fadedBlue}`,
-      outlineOffset: "-4px"
-    }
-  },
-  lightError: {
-    background: color.fadedRed8,
-    border: `1px solid ${color.white}`,
-    outline: `2px solid ${color.red}`,
-    outlineOffset: "-3px",
-    color: color.offBlack,
-    "::placeholder": {
-      color: color.offBlack64
-    },
-    ":focus-visible": {
-      outline: `3px solid ${color.red}`,
-      outlineOffset: "-4px"
-    }
   }
 });
 var TextField$1 = React.forwardRef((props, ref) => React.createElement(TextField, _extends({}, props, {
@@ -839,15 +788,14 @@ class FieldHeading extends React.Component {
       label,
       id,
       required,
-      testId,
-      light
+      testId
     } = this.props;
     const requiredIcon = React.createElement(StyledSpan, {
-      style: light ? styles$1.lightRequired : styles$1.required,
+      style: styles$1.required,
       "aria-hidden": true
     }, " ", "*");
     return React.createElement(React.Fragment, null, React.createElement(LabelMedium, {
-      style: light ? styles$1.lightLabel : styles$1.label,
+      style: styles$1.label,
       tag: "label",
       htmlFor: id && `${id}-field`,
       testId: testId && `${testId}-label`
@@ -858,14 +806,13 @@ class FieldHeading extends React.Component {
   maybeRenderDescription() {
     const {
       description,
-      testId,
-      light
+      testId
     } = this.props;
     if (!description) {
       return null;
     }
     return React.createElement(React.Fragment, null, React.createElement(LabelSmall, {
-      style: light ? styles$1.lightDescription : styles$1.description,
+      style: styles$1.description,
       testId: testId && `${testId}-description`
     }, description), React.createElement(Strut, {
       size: spacing.xxxSmall_4
@@ -875,8 +822,7 @@ class FieldHeading extends React.Component {
     const {
       error,
       id,
-      testId,
-      light
+      testId
     } = this.props;
     if (!error) {
       return null;
@@ -884,7 +830,7 @@ class FieldHeading extends React.Component {
     return React.createElement(React.Fragment, null, React.createElement(Strut, {
       size: spacing.small_12
     }), React.createElement(LabelSmall, {
-      style: light ? styles$1.lightError : styles$1.error,
+      style: styles$1.error,
       role: "alert",
       id: id && `${id}-error`,
       testId: testId && `${testId}-error`
@@ -906,30 +852,18 @@ const styles$1 = StyleSheet.create({
   label: {
     color: color.offBlack
   },
-  lightLabel: {
-    color: color.white
-  },
   description: {
     color: color.offBlack64
   },
-  lightDescription: {
-    color: color.white64
-  },
   error: {
     color: color.red
   },
-  lightError: {
-    color: color.fadedRed
-  },
   required: {
     color: color.red
-  },
-  lightRequired: {
-    color: color.fadedRed
   }
 });
 
-const _excluded$1 = ["id", "type", "label", "description", "value", "disabled", "required", "validate", "onChange", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoComplete", "forwardedRef", "ariaDescribedby", "name", "onValidate", "onFocus", "onBlur"];
+const _excluded$1 = ["id", "type", "label", "description", "value", "disabled", "required", "validate", "onChange", "onKeyDown", "placeholder", "style", "testId", "readOnly", "autoComplete", "forwardedRef", "ariaDescribedby", "name", "onValidate", "onFocus", "onBlur"];
 class LabeledTextField extends React.Component {
   constructor(props) {
     super(props);
@@ -988,7 +922,6 @@ class LabeledTextField extends React.Component {
         onChange,
         onKeyDown,
         placeholder,
-        light,
         style,
         testId,
         readOnly,
@@ -1004,7 +937,6 @@ class LabeledTextField extends React.Component {
       id: uniqueId,
       testId: testId,
       style: style,
-      light: light,
       field: React.createElement(TextField$1, _extends({
         id: `${uniqueId}-field`,
         "aria-describedby": ariaDescribedby ? ariaDescribedby : `${uniqueId}-error`,
@@ -1021,7 +953,6 @@ class LabeledTextField extends React.Component {
         onKeyDown: onKeyDown,
         onFocus: this.handleFocus,
         onBlur: this.handleBlur,
-        light: light,
         readOnly: readOnly,
         autoComplete: autoComplete,
         ref: forwardedRef,
@@ -1036,14 +967,13 @@ class LabeledTextField extends React.Component {
 }
 LabeledTextField.defaultProps = {
   type: "text",
-  disabled: false,
-  light: false
+  disabled: false
 };
 var labeledTextField = React.forwardRef((props, ref) => React.createElement(LabeledTextField, _extends({}, props, {
   forwardedRef: ref
 })));
 
-const _excluded = ["onChange", "value", "placeholder", "disabled", "id", "testId", "style", "readOnly", "autoComplete", "name", "className", "autoFocus", "rows", "spellCheck", "wrap", "minLength", "maxLength", "onClick", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "validate", "onValidate", "required", "resizeType", "light", "rootStyle", "error", "instantValidation"];
+const _excluded = ["onChange", "value", "placeholder", "disabled", "id", "testId", "style", "readOnly", "autoComplete", "name", "className", "autoFocus", "rows", "spellCheck", "wrap", "minLength", "maxLength", "onClick", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "validate", "onValidate", "required", "resizeType", "rootStyle", "error", "instantValidation"];
 const StyledTextArea = addStyle("textarea");
 const TextArea = React.forwardRef(function TextArea(props, ref) {
   const {
@@ -1073,7 +1003,6 @@ const TextArea = React.forwardRef(function TextArea(props, ref) {
       onValidate,
       required,
       resizeType,
-      light,
       rootStyle,
       error,
       instantValidation = true
@@ -1105,12 +1034,6 @@ const TextArea = React.forwardRef(function TextArea(props, ref) {
       onBlur(event);
     }
   };
-  const getStyles = () => {
-    const baseStyles = [styles.textarea, styles$7.LabelMedium, resizeType && resizeStyles[resizeType]];
-    const defaultStyles = [styles.default, !disabled && styles.defaultFocus, disabled && styles.disabled, hasError && styles.error];
-    const lightStyles = [styles.light, !disabled && styles.lightFocus, disabled && styles.lightDisabled, hasError && styles.lightError];
-    return [...baseStyles, ...(light ? lightStyles : defaultStyles)];
-  };
   return React.createElement(View, {
     style: [{
       width: "100%"
@@ -1120,7 +1043,7 @@ const TextArea = React.forwardRef(function TextArea(props, ref) {
     "data-testid": testId,
     ref: ref,
     className: className,
-    style: [getStyles(), style],
+    style: [styles.textarea, styles$7.LabelMedium, resizeType && resizeStyles[resizeType], styles.default, !disabled && styles.defaultFocus, disabled && styles.disabled, hasError && styles.error, style],
     value: value,
     onChange: handleChange,
     placeholder: placeholder,
@@ -1134,6 +1057,7 @@ const TextArea = React.forwardRef(function TextArea(props, ref) {
     wrap: wrap,
     minLength: minLength,
     maxLength: maxLength,
+    "aria-required": !!required,
     onClick: disabled ? undefined : onClick,
     onKeyDown: disabled ? undefined : onKeyDown,
     onKeyUp: disabled ? undefined : onKeyUp,
@@ -1191,49 +1115,6 @@ const styles = StyleSheet.create({
       outlineColor: color.red,
       borderColor: color.red
     }
-  },
-  light: {
-    background: color.white,
-    border: `1px solid ${color.offBlack16}`,
-    color: color.offBlack,
-    "::placeholder": {
-      color: color.offBlack64
-    }
-  },
-  lightFocus: {
-    ":focus-visible": {
-      outline: `3px solid ${color.blue}`,
-      outlineOffset: "-4px",
-      borderColor: color.white
-    }
-  },
-  lightDisabled: {
-    backgroundColor: "transparent",
-    border: `1px solid ${color.white32}`,
-    color: color.white64,
-    "::placeholder": {
-      color: color.white64
-    },
-    cursor: "not-allowed",
-    ":focus-visible": {
-      borderColor: mix(color.white32, color.blue),
-      outline: `3px solid ${color.fadedBlue}`,
-      outlineOffset: "-4px"
-    }
-  },
-  lightError: {
-    background: color.fadedRed8,
-    border: `1px solid ${color.white}`,
-    outline: `2px solid ${color.red}`,
-    outlineOffset: "-3px",
-    color: color.offBlack,
-    "::placeholder": {
-      color: color.offBlack64
-    },
-    ":focus-visible": {
-      outline: `3px solid ${color.red}`,
-      outlineOffset: "-4px"
-    }
   }
 });
 const resizeStyles = StyleSheet.create({

package/dist/index.js

@@ -633,11 +633,9 @@ const useFieldValidation = ({
     if (_instantValidation) {
       handleValidation(newValue);
     } else {
-      if (errorMessage) {
-        setErrorMessage(null);
-        if (onValidate) {
-          onValidate(null);
-        }
+      setErrorMessage(null);
+      if (onValidate) {
+        onValidate(null);
       }
     }
   };
@@ -679,7 +677,7 @@ const useFieldValidation = ({
   };
 };
 
-const _excluded$2 = ["id", "type", "value", "name", "disabled", "light", "error", "validate", "onValidate", "required", "placeholder", "style", "testId", "readOnly", "autoFocus", "autoComplete", "forwardedRef", "instantValidation", "onKeyDown", "onChange", "onFocus", "onBlur"];
+const _excluded$2 = ["id", "type", "value", "name", "disabled", "error", "validate", "onValidate", "required", "placeholder", "style", "testId", "readOnly", "autoFocus", "autoComplete", "forwardedRef", "instantValidation", "onKeyDown", "onChange", "onFocus", "onBlur"];
 const StyledInput = wonderBlocksCore.addStyle("input");
 const TextField = props => {
   const {
@@ -688,7 +686,6 @@ const TextField = props => {
       value,
       name,
       disabled = false,
-      light = false,
       error,
       validate,
       onValidate,
@@ -736,22 +733,17 @@ const TextField = props => {
       onBlur(event);
     }
   };
-  const getStyles = () => {
-    const baseStyles = [styles$2.input, wonderBlocksTypography.styles.LabelMedium];
-    const defaultStyles = [styles$2.default, !disabled && styles$2.defaultFocus, disabled && styles$2.disabled, hasError && styles$2.error];
-    const lightStyles = [styles$2.light, !disabled && styles$2.lightFocus, disabled && styles$2.lightDisabled, hasError && styles$2.lightError];
-    return [...baseStyles, ...(light ? lightStyles : defaultStyles)];
-  };
   return React__namespace.createElement(wonderBlocksCore.Id, {
     id: id
   }, uniqueId => React__namespace.createElement(StyledInput, _extends__default["default"]({
-    style: [getStyles(), style],
+    style: [styles$2.input, wonderBlocksTypography.styles.LabelMedium, styles$2.default, !disabled && styles$2.defaultFocus, disabled && styles$2.disabled, hasError && styles$2.error, style],
     id: uniqueId,
     type: type,
     placeholder: placeholder,
     value: value,
     name: name,
     "aria-disabled": disabled,
+    "aria-required": !!required,
     onChange: handleChange,
     onKeyDown: disabled ? undefined : onKeyDown,
     onFocus: handleFocus,
@@ -812,49 +804,6 @@ const styles$2 = aphrodite.StyleSheet.create({
       outline: `2px solid ${wonderBlocksTokens.color.offBlack32}`,
       outlineOffset: "-3px"
     }
-  },
-  light: {
-    background: wonderBlocksTokens.color.white,
-    border: `1px solid ${wonderBlocksTokens.color.offBlack16}`,
-    color: wonderBlocksTokens.color.offBlack,
-    "::placeholder": {
-      color: wonderBlocksTokens.color.offBlack64
-    }
-  },
-  lightFocus: {
-    ":focus-visible": {
-      outline: `3px solid ${wonderBlocksTokens.color.blue}`,
-      outlineOffset: "-4px",
-      borderColor: wonderBlocksTokens.color.white
-    }
-  },
-  lightDisabled: {
-    backgroundColor: "transparent",
-    border: `1px solid ${wonderBlocksTokens.color.white32}`,
-    color: wonderBlocksTokens.color.white64,
-    "::placeholder": {
-      color: wonderBlocksTokens.color.white64
-    },
-    cursor: "not-allowed",
-    ":focus-visible": {
-      borderColor: wonderBlocksTokens.mix(wonderBlocksTokens.color.white32, wonderBlocksTokens.color.blue),
-      outline: `3px solid ${wonderBlocksTokens.color.fadedBlue}`,
-      outlineOffset: "-4px"
-    }
-  },
-  lightError: {
-    background: wonderBlocksTokens.color.fadedRed8,
-    border: `1px solid ${wonderBlocksTokens.color.white}`,
-    outline: `2px solid ${wonderBlocksTokens.color.red}`,
-    outlineOffset: "-3px",
-    color: wonderBlocksTokens.color.offBlack,
-    "::placeholder": {
-      color: wonderBlocksTokens.color.offBlack64
-    },
-    ":focus-visible": {
-      outline: `3px solid ${wonderBlocksTokens.color.red}`,
-      outlineOffset: "-4px"
-    }
   }
 });
 var TextField$1 = React__namespace.forwardRef((props, ref) => React__namespace.createElement(TextField, _extends__default["default"]({}, props, {
@@ -868,15 +817,14 @@ class FieldHeading extends React__namespace.Component {
       label,
       id,
       required,
-      testId,
-      light
+      testId
     } = this.props;
     const requiredIcon = React__namespace.createElement(StyledSpan, {
-      style: light ? styles$1.lightRequired : styles$1.required,
+      style: styles$1.required,
       "aria-hidden": true
     }, " ", "*");
     return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-      style: light ? styles$1.lightLabel : styles$1.label,
+      style: styles$1.label,
       tag: "label",
       htmlFor: id && `${id}-field`,
       testId: testId && `${testId}-label`
@@ -887,14 +835,13 @@ class FieldHeading extends React__namespace.Component {
   maybeRenderDescription() {
     const {
       description,
-      testId,
-      light
+      testId
     } = this.props;
     if (!description) {
       return null;
     }
     return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-      style: light ? styles$1.lightDescription : styles$1.description,
+      style: styles$1.description,
       testId: testId && `${testId}-description`
     }, description), React__namespace.createElement(wonderBlocksLayout.Strut, {
       size: wonderBlocksTokens.spacing.xxxSmall_4
@@ -904,8 +851,7 @@ class FieldHeading extends React__namespace.Component {
     const {
       error,
       id,
-      testId,
-      light
+      testId
     } = this.props;
     if (!error) {
       return null;
@@ -913,7 +859,7 @@ class FieldHeading extends React__namespace.Component {
     return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksLayout.Strut, {
       size: wonderBlocksTokens.spacing.small_12
     }), React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-      style: light ? styles$1.lightError : styles$1.error,
+      style: styles$1.error,
       role: "alert",
       id: id && `${id}-error`,
       testId: testId && `${testId}-error`
@@ -935,30 +881,18 @@ const styles$1 = aphrodite.StyleSheet.create({
   label: {
     color: wonderBlocksTokens.color.offBlack
   },
-  lightLabel: {
-    color: wonderBlocksTokens.color.white
-  },
   description: {
     color: wonderBlocksTokens.color.offBlack64
   },
-  lightDescription: {
-    color: wonderBlocksTokens.color.white64
-  },
   error: {
     color: wonderBlocksTokens.color.red
   },
-  lightError: {
-    color: wonderBlocksTokens.color.fadedRed
-  },
   required: {
     color: wonderBlocksTokens.color.red
-  },
-  lightRequired: {
-    color: wonderBlocksTokens.color.fadedRed
   }
 });
 
-const _excluded$1 = ["id", "type", "label", "description", "value", "disabled", "required", "validate", "onChange", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoComplete", "forwardedRef", "ariaDescribedby", "name", "onValidate", "onFocus", "onBlur"];
+const _excluded$1 = ["id", "type", "label", "description", "value", "disabled", "required", "validate", "onChange", "onKeyDown", "placeholder", "style", "testId", "readOnly", "autoComplete", "forwardedRef", "ariaDescribedby", "name", "onValidate", "onFocus", "onBlur"];
 class LabeledTextField extends React__namespace.Component {
   constructor(props) {
     super(props);
@@ -1017,7 +951,6 @@ class LabeledTextField extends React__namespace.Component {
         onChange,
         onKeyDown,
         placeholder,
-        light,
         style,
         testId,
         readOnly,
@@ -1033,7 +966,6 @@ class LabeledTextField extends React__namespace.Component {
       id: uniqueId,
       testId: testId,
       style: style,
-      light: light,
       field: React__namespace.createElement(TextField$1, _extends__default["default"]({
         id: `${uniqueId}-field`,
         "aria-describedby": ariaDescribedby ? ariaDescribedby : `${uniqueId}-error`,
@@ -1050,7 +982,6 @@ class LabeledTextField extends React__namespace.Component {
         onKeyDown: onKeyDown,
         onFocus: this.handleFocus,
         onBlur: this.handleBlur,
-        light: light,
         readOnly: readOnly,
         autoComplete: autoComplete,
         ref: forwardedRef,
@@ -1065,14 +996,13 @@ class LabeledTextField extends React__namespace.Component {
 }
 LabeledTextField.defaultProps = {
   type: "text",
-  disabled: false,
-  light: false
+  disabled: false
 };
 var labeledTextField = React__namespace.forwardRef((props, ref) => React__namespace.createElement(LabeledTextField, _extends__default["default"]({}, props, {
   forwardedRef: ref
 })));
 
-const _excluded = ["onChange", "value", "placeholder", "disabled", "id", "testId", "style", "readOnly", "autoComplete", "name", "className", "autoFocus", "rows", "spellCheck", "wrap", "minLength", "maxLength", "onClick", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "validate", "onValidate", "required", "resizeType", "light", "rootStyle", "error", "instantValidation"];
+const _excluded = ["onChange", "value", "placeholder", "disabled", "id", "testId", "style", "readOnly", "autoComplete", "name", "className", "autoFocus", "rows", "spellCheck", "wrap", "minLength", "maxLength", "onClick", "onKeyDown", "onKeyUp", "onFocus", "onBlur", "validate", "onValidate", "required", "resizeType", "rootStyle", "error", "instantValidation"];
 const StyledTextArea = wonderBlocksCore.addStyle("textarea");
 const TextArea = React__namespace.forwardRef(function TextArea(props, ref) {
   const {
@@ -1102,7 +1032,6 @@ const TextArea = React__namespace.forwardRef(function TextArea(props, ref) {
       onValidate,
       required,
       resizeType,
-      light,
       rootStyle,
       error,
       instantValidation = true
@@ -1134,12 +1063,6 @@ const TextArea = React__namespace.forwardRef(function TextArea(props, ref) {
       onBlur(event);
     }
   };
-  const getStyles = () => {
-    const baseStyles = [styles.textarea, wonderBlocksTypography.styles.LabelMedium, resizeType && resizeStyles[resizeType]];
-    const defaultStyles = [styles.default, !disabled && styles.defaultFocus, disabled && styles.disabled, hasError && styles.error];
-    const lightStyles = [styles.light, !disabled && styles.lightFocus, disabled && styles.lightDisabled, hasError && styles.lightError];
-    return [...baseStyles, ...(light ? lightStyles : defaultStyles)];
-  };
   return React__namespace.createElement(wonderBlocksCore.View, {
     style: [{
       width: "100%"
@@ -1149,7 +1072,7 @@ const TextArea = React__namespace.forwardRef(function TextArea(props, ref) {
     "data-testid": testId,
     ref: ref,
     className: className,
-    style: [getStyles(), style],
+    style: [styles.textarea, wonderBlocksTypography.styles.LabelMedium, resizeType && resizeStyles[resizeType], styles.default, !disabled && styles.defaultFocus, disabled && styles.disabled, hasError && styles.error, style],
     value: value,
     onChange: handleChange,
     placeholder: placeholder,
@@ -1163,6 +1086,7 @@ const TextArea = React__namespace.forwardRef(function TextArea(props, ref) {
     wrap: wrap,
     minLength: minLength,
     maxLength: maxLength,
+    "aria-required": !!required,
     onClick: disabled ? undefined : onClick,
     onKeyDown: disabled ? undefined : onKeyDown,
     onKeyUp: disabled ? undefined : onKeyUp,
@@ -1220,49 +1144,6 @@ const styles = aphrodite.StyleSheet.create({
       outlineColor: wonderBlocksTokens.color.red,
       borderColor: wonderBlocksTokens.color.red
     }
-  },
-  light: {
-    background: wonderBlocksTokens.color.white,
-    border: `1px solid ${wonderBlocksTokens.color.offBlack16}`,
-    color: wonderBlocksTokens.color.offBlack,
-    "::placeholder": {
-      color: wonderBlocksTokens.color.offBlack64
-    }
-  },
-  lightFocus: {
-    ":focus-visible": {
-      outline: `3px solid ${wonderBlocksTokens.color.blue}`,
-      outlineOffset: "-4px",
-      borderColor: wonderBlocksTokens.color.white
-    }
-  },
-  lightDisabled: {
-    backgroundColor: "transparent",
-    border: `1px solid ${wonderBlocksTokens.color.white32}`,
-    color: wonderBlocksTokens.color.white64,
-    "::placeholder": {
-      color: wonderBlocksTokens.color.white64
-    },
-    cursor: "not-allowed",
-    ":focus-visible": {
-      borderColor: wonderBlocksTokens.mix(wonderBlocksTokens.color.white32, wonderBlocksTokens.color.blue),
-      outline: `3px solid ${wonderBlocksTokens.color.fadedBlue}`,
-      outlineOffset: "-4px"
-    }
-  },
-  lightError: {
-    background: wonderBlocksTokens.color.fadedRed8,
-    border: `1px solid ${wonderBlocksTokens.color.white}`,
-    outline: `2px solid ${wonderBlocksTokens.color.red}`,
-    outlineOffset: "-3px",
-    color: wonderBlocksTokens.color.offBlack,
-    "::placeholder": {
-      color: wonderBlocksTokens.color.offBlack64
-    },
-    ":focus-visible": {
-      outline: `3px solid ${wonderBlocksTokens.color.red}`,
-      outlineOffset: "-4px"
-    }
   }
 });
 const resizeStyles = aphrodite.StyleSheet.create({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "6.0.5",
+  "version": "7.0.0",
   "design": "v1",
   "description": "Form components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -17,11 +17,11 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^5.0.5",
+    "@khanacademy/wonder-blocks-clickable": "^5.0.6",
     "@khanacademy/wonder-blocks-core": "^11.1.0",
     "@khanacademy/wonder-blocks-icon": "^5.0.5",
-    "@khanacademy/wonder-blocks-layout": "^3.0.5",
-    "@khanacademy/wonder-blocks-tokens": "^3.0.1",
+    "@khanacademy/wonder-blocks-layout": "^3.0.6",
+    "@khanacademy/wonder-blocks-tokens": "^4.0.0",
     "@khanacademy/wonder-blocks-typography": "^3.0.5"
   },
   "peerDependencies": {