@khanacademy/wonder-blocks-form 4.9.0 → 4.9.1

package/src/components/field-heading.tsx

@@ -42,6 +42,10 @@ type Props = {
      * Optional test ID for e2e testing.
      */
     testId?: string;
+    /**
+     * Change the field’s sub-components to fit a dark background.
+     */
+    light?: boolean;
 };
 
 const StyledSpan = addStyle("span");
@@ -52,10 +56,13 @@ const StyledSpan = addStyle("span");
  */
 export default class FieldHeading extends React.Component<Props> {
     renderLabel(): React.ReactNode {
-        const {label, id, required, testId} = this.props;
+        const {label, id, required, testId, light} = this.props;
 
         const requiredIcon = (
-            <StyledSpan style={styles.required} aria-hidden={true}>
+            <StyledSpan
+                style={light ? styles.lightRequired : styles.required}
+                aria-hidden={true}
+            >
                 {" "}
                 *
             </StyledSpan>
@@ -64,7 +71,7 @@ export default class FieldHeading extends React.Component<Props> {
         return (
             <React.Fragment>
                 <LabelMedium
-                    style={styles.label}
+                    style={light ? styles.lightLabel : styles.label}
                     tag="label"
                     htmlFor={id && `${id}-field`}
                     testId={testId && `${testId}-label`}
@@ -78,7 +85,7 @@ export default class FieldHeading extends React.Component<Props> {
     }
 
     maybeRenderDescription(): React.ReactNode | null | undefined {
-        const {description, testId} = this.props;
+        const {description, testId, light} = this.props;
 
         if (!description) {
             return null;
@@ -87,7 +94,7 @@ export default class FieldHeading extends React.Component<Props> {
         return (
             <React.Fragment>
                 <LabelSmall
-                    style={styles.description}
+                    style={light ? styles.lightDescription : styles.description}
                     testId={testId && `${testId}-description`}
                 >
                     {description}
@@ -98,7 +105,7 @@ export default class FieldHeading extends React.Component<Props> {
     }
 
     maybeRenderError(): React.ReactNode | null | undefined {
-        const {error, id, testId} = this.props;
+        const {error, id, testId, light} = this.props;
 
         if (!error) {
             return null;
@@ -108,7 +115,7 @@ export default class FieldHeading extends React.Component<Props> {
             <React.Fragment>
                 <Strut size={spacing.small_12} />
                 <LabelSmall
-                    style={styles.error}
+                    style={light ? styles.lightError : styles.error}
                     role="alert"
                     id={id && `${id}-error`}
                     testId={testId && `${testId}-error`}
@@ -138,13 +145,25 @@ const styles = 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,
+    },
 });

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

@@ -241,6 +241,7 @@ class LabeledTextField extends React.Component<PropsWithForwardRef, State> {
                         id={uniqueId}
                         testId={testId}
                         style={style}
+                        light={light}
                         field={
                             <TextField
                                 id={`${uniqueId}-field`}

package/src/components/text-area.tsx

@@ -1,5 +1,5 @@
 import * as React from "react";
-import {CSSProperties, Falsy, StyleSheet} from "aphrodite";
+import {StyleSheet} from "aphrodite";
 
 import {
     AriaProps,
@@ -256,7 +256,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
             }
         });
 
-        const getStyles = (): (CSSProperties | Falsy)[] => {
+        const getStyles = (): StyleType => {
             // Base styles are the styles that apply regardless of light mode
             const baseStyles = [
                 styles.textarea,
@@ -284,7 +284,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
                     data-testid={testId}
                     ref={ref}
                     className={className}
-                    style={[...getStyles(), style]}
+                    style={[getStyles(), style]}
                     value={value}
                     onChange={handleChange}
                     placeholder={placeholder}

package/src/components/text-field.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import {StyleSheet} from "aphrodite";
 
 import {IDProvider, addStyle} from "@khanacademy/wonder-blocks-core";
-import {color, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {border, color, mix, spacing} from "@khanacademy/wonder-blocks-tokens";
 import {styles as typographyStyles} from "@khanacademy/wonder-blocks-typography";
 
 import type {StyleType, AriaProps} from "@khanacademy/wonder-blocks-core";
@@ -152,10 +152,6 @@ type State = {
      * Displayed when the validation fails.
      */
     error: string | null | undefined;
-    /**
-     * The user focuses on this field.
-     */
-    focused: boolean;
 };
 
 /**
@@ -178,7 +174,6 @@ class TextField extends React.Component<PropsWithForwardRef, State> {
 
     state: State = {
         error: null,
-        focused: false,
     };
 
     componentDidMount() {
@@ -222,22 +217,38 @@ class TextField extends React.Component<PropsWithForwardRef, State> {
         event,
     ) => {
         const {onFocus} = this.props;
-        this.setState({focused: true}, () => {
-            if (onFocus) {
-                onFocus(event);
-            }
-        });
+        if (onFocus) {
+            onFocus(event);
+        }
     };
 
     handleBlur: (event: React.FocusEvent<HTMLInputElement>) => unknown = (
         event,
     ) => {
         const {onBlur} = this.props;
-        this.setState({focused: false}, () => {
-            if (onBlur) {
-                onBlur(event);
-            }
-        });
+        if (onBlur) {
+            onBlur(event);
+        }
+    };
+
+    getStyles = (): StyleType => {
+        const {disabled, light} = this.props;
+        const {error} = this.state;
+        // Base styles are the styles that apply regardless of light mode
+        const baseStyles = [styles.input, typographyStyles.LabelMedium];
+        const defaultStyles = [
+            styles.default,
+            !disabled && styles.defaultFocus,
+            disabled && styles.disabled,
+            !!error && styles.error,
+        ];
+        const lightStyles = [
+            styles.light,
+            !disabled && styles.lightFocus,
+            disabled && styles.lightDisabled,
+            !!error && styles.lightError,
+        ];
+        return [...baseStyles, ...(light ? lightStyles : defaultStyles)];
     };
 
     render(): React.ReactNode {
@@ -249,7 +260,6 @@ class TextField extends React.Component<PropsWithForwardRef, State> {
             disabled,
             onKeyDown,
             placeholder,
-            light,
             style,
             testId,
             readOnly,
@@ -259,6 +269,7 @@ class TextField extends React.Component<PropsWithForwardRef, State> {
             // The following props are being included here to avoid
             // passing them down to the otherProps spread
             /* eslint-disable @typescript-eslint/no-unused-vars */
+            light,
             onFocus,
             onBlur,
             onValidate,
@@ -274,24 +285,7 @@ class TextField extends React.Component<PropsWithForwardRef, State> {
             <IDProvider id={id} scope="text-field">
                 {(uniqueId) => (
                     <StyledInput
-                        style={[
-                            styles.input,
-                            typographyStyles.LabelMedium,
-                            styles.default,
-                            // Prioritizes disabled, then focused, then error (if any)
-                            disabled
-                                ? styles.disabled
-                                : this.state.focused
-                                ? [styles.focused, light && styles.defaultLight]
-                                : !!this.state.error && [
-                                      styles.error,
-                                      light && styles.errorLight,
-                                  ],
-                            // Cast `this.state.error` into boolean since it's being
-                            // used as a conditional
-                            !!this.state.error && styles.error,
-                            style && style,
-                        ]}
+                        style={[this.getStyles(), style]}
                         id={uniqueId}
                         type={type}
                         placeholder={placeholder}
@@ -320,12 +314,10 @@ const styles = StyleSheet.create({
     input: {
         width: "100%",
         height: 40,
-        borderRadius: 4,
+        borderRadius: border.radius.medium_4,
         boxSizing: "border-box",
         paddingLeft: spacing.medium_16,
         margin: 0,
-        outline: "none",
-        boxShadow: "none",
     },
     default: {
         background: color.white,
@@ -335,6 +327,13 @@ const styles = StyleSheet.create({
             color: color.offBlack64,
         },
     },
+    defaultFocus: {
+        ":focus-visible": {
+            borderColor: color.blue,
+            outline: `1px solid ${color.blue}`,
+            outlineOffset: 0, // Explicitly set outline offset to 0 because Safari sets a default offset
+        },
+    },
     error: {
         background: color.fadedRed8,
         border: `1px solid ${color.red}`,
@@ -342,28 +341,67 @@ const styles = StyleSheet.create({
         "::placeholder": {
             color: color.offBlack64,
         },
+        ":focus-visible": {
+            outlineColor: color.red,
+            borderColor: color.red,
+        },
     },
     disabled: {
         background: color.offWhite,
         border: `1px solid ${color.offBlack16}`,
         color: color.offBlack64,
         "::placeholder": {
-            color: color.offBlack32,
+            color: color.offBlack64,
+        },
+        cursor: "not-allowed",
+        ":focus-visible": {
+            outline: "none",
+            boxShadow: `0 0 0 1px ${color.white}, 0 0 0 3px ${color.offBlack32}`,
         },
     },
-    focused: {
+    light: {
         background: color.white,
-        border: `1px solid ${color.blue}`,
+        border: `1px solid ${color.offBlack16}`,
         color: color.offBlack,
         "::placeholder": {
             color: color.offBlack64,
         },
     },
-    defaultLight: {
-        boxShadow: `0px 0px 0px 1px ${color.blue}, 0px 0px 0px 2px ${color.white}`,
+    lightFocus: {
+        ":focus-visible": {
+            outline: `1px solid ${color.blue}`,
+            outlineOffset: 0, // Explicitly set outline offset to 0 because Safari sets a default offset
+            borderColor: color.blue,
+            boxShadow: `0px 0px 0px 2px ${color.blue}, 0px 0px 0px 3px ${color.white}`,
+        },
     },
-    errorLight: {
+    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: "none",
+            boxShadow: `0 0 0 1px ${color.offBlack32}, 0 0 0 3px ${color.fadedBlue}`,
+        },
+    },
+    lightError: {
+        background: color.fadedRed8,
+        border: `1px solid ${color.red}`,
         boxShadow: `0px 0px 0px 1px ${color.red}, 0px 0px 0px 2px ${color.white}`,
+        color: color.offBlack,
+        "::placeholder": {
+            color: color.offBlack64,
+        },
+        ":focus-visible": {
+            outlineColor: color.red,
+            borderColor: color.red,
+            boxShadow: `0px 0px 0px 2px ${color.red}, 0px 0px 0px 3px ${color.white}`,
+        },
     },
 });