@khanacademy/wonder-blocks-form 6.0.6 → 7.0.1

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # @khanacademy/wonder-blocks-form
 
+## 7.0.1
+
+### Patch Changes
+
+-   c162abb4: Migrate color instances to use semanticColor internally on TextField and TextArea
+-   8cfaeab0: Migrate Radio and Checkbox to use semanticColor tokens
+-   Updated dependencies [8cfaeab0]
+-   Updated dependencies [c162abb4]
+    -   @khanacademy/wonder-blocks-tokens@4.1.0
+    -   @khanacademy/wonder-blocks-clickable@5.0.7
+    -   @khanacademy/wonder-blocks-layout@3.0.7
+
+## 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

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.
      */