@khanacademy/wonder-blocks-form 4.8.1 → 4.9.1

package/dist/index.js

@@ -622,15 +622,14 @@ const RadioGroup = React__namespace.forwardRef(function RadioGroup(props, ref) {
   })));
 });
 
-const _excluded$2 = ["id", "type", "value", "name", "disabled", "onKeyDown", "placeholder", "light", "style", "testId", "readOnly", "autoFocus", "autoComplete", "forwardedRef", "onFocus", "onBlur", "onValidate", "validate", "onChange", "required"];
+const _excluded$2 = ["id", "type", "value", "name", "disabled", "onKeyDown", "placeholder", "style", "testId", "readOnly", "autoFocus", "autoComplete", "forwardedRef", "light", "onFocus", "onBlur", "onValidate", "validate", "onChange", "required"];
 const defaultErrorMessage$1 = "This field is required.";
 const StyledInput = wonderBlocksCore.addStyle("input");
 class TextField extends React__namespace.Component {
   constructor(props) {
     super(props);
     this.state = {
-      error: null,
-      focused: false
+      error: null
     };
     this.maybeValidate = newValue => {
       const {
@@ -671,25 +670,30 @@ class TextField extends React__namespace.Component {
       const {
         onFocus
       } = this.props;
-      this.setState({
-        focused: true
-      }, () => {
-        if (onFocus) {
-          onFocus(event);
-        }
-      });
+      if (onFocus) {
+        onFocus(event);
+      }
     };
     this.handleBlur = event => {
       const {
         onBlur
       } = this.props;
-      this.setState({
-        focused: false
-      }, () => {
-        if (onBlur) {
-          onBlur(event);
-        }
-      });
+      if (onBlur) {
+        onBlur(event);
+      }
+    };
+    this.getStyles = () => {
+      const {
+        disabled,
+        light
+      } = this.props;
+      const {
+        error
+      } = this.state;
+      const baseStyles = [styles$2.input, wonderBlocksTypography.styles.LabelMedium];
+      const defaultStyles = [styles$2.default, !disabled && styles$2.defaultFocus, disabled && styles$2.disabled, !!error && styles$2.error];
+      const lightStyles = [styles$2.light, !disabled && styles$2.lightFocus, disabled && styles$2.lightDisabled, !!error && styles$2.lightError];
+      return [...baseStyles, ...(light ? lightStyles : defaultStyles)];
     };
     if (props.validate && props.value !== "") {
       this.state.error = props.validate(props.value) || null;
@@ -710,7 +714,6 @@ class TextField extends React__namespace.Component {
         disabled,
         onKeyDown,
         placeholder,
-        light,
         style,
         testId,
         readOnly,
@@ -723,7 +726,7 @@ class TextField extends React__namespace.Component {
       id: id,
       scope: "text-field"
     }, uniqueId => React__namespace.createElement(StyledInput, _extends__default["default"]({
-      style: [styles$2.input, wonderBlocksTypography.styles.LabelMedium, styles$2.default, disabled ? styles$2.disabled : this.state.focused ? [styles$2.focused, light && styles$2.defaultLight] : !!this.state.error && [styles$2.error, light && styles$2.errorLight], !!this.state.error && styles$2.error, style && style],
+      style: [this.getStyles(), style],
       id: uniqueId,
       type: type,
       placeholder: placeholder,
@@ -753,12 +756,10 @@ const styles$2 = aphrodite.StyleSheet.create({
   input: {
     width: "100%",
     height: 40,
-    borderRadius: 4,
+    borderRadius: wonderBlocksTokens.border.radius.medium_4,
     boxSizing: "border-box",
     paddingLeft: wonderBlocksTokens.spacing.medium_16,
-    margin: 0,
-    outline: "none",
-    boxShadow: "none"
+    margin: 0
   },
   default: {
     background: wonderBlocksTokens.color.white,
@@ -768,12 +769,23 @@ const styles$2 = aphrodite.StyleSheet.create({
       color: wonderBlocksTokens.color.offBlack64
     }
   },
+  defaultFocus: {
+    ":focus-visible": {
+      borderColor: wonderBlocksTokens.color.blue,
+      outline: `1px solid ${wonderBlocksTokens.color.blue}`,
+      outlineOffset: 0
+    }
+  },
   error: {
     background: wonderBlocksTokens.color.fadedRed8,
     border: `1px solid ${wonderBlocksTokens.color.red}`,
     color: wonderBlocksTokens.color.offBlack,
     "::placeholder": {
       color: wonderBlocksTokens.color.offBlack64
+    },
+    ":focus-visible": {
+      outlineColor: wonderBlocksTokens.color.red,
+      borderColor: wonderBlocksTokens.color.red
     }
   },
   disabled: {
@@ -781,22 +793,57 @@ const styles$2 = aphrodite.StyleSheet.create({
     border: `1px solid ${wonderBlocksTokens.color.offBlack16}`,
     color: wonderBlocksTokens.color.offBlack64,
     "::placeholder": {
-      color: wonderBlocksTokens.color.offBlack32
+      color: wonderBlocksTokens.color.offBlack64
+    },
+    cursor: "not-allowed",
+    ":focus-visible": {
+      outline: "none",
+      boxShadow: `0 0 0 1px ${wonderBlocksTokens.color.white}, 0 0 0 3px ${wonderBlocksTokens.color.offBlack32}`
     }
   },
-  focused: {
+  light: {
     background: wonderBlocksTokens.color.white,
-    border: `1px solid ${wonderBlocksTokens.color.blue}`,
+    border: `1px solid ${wonderBlocksTokens.color.offBlack16}`,
     color: wonderBlocksTokens.color.offBlack,
     "::placeholder": {
       color: wonderBlocksTokens.color.offBlack64
     }
   },
-  defaultLight: {
-    boxShadow: `0px 0px 0px 1px ${wonderBlocksTokens.color.blue}, 0px 0px 0px 2px ${wonderBlocksTokens.color.white}`
+  lightFocus: {
+    ":focus-visible": {
+      outline: `1px solid ${wonderBlocksTokens.color.blue}`,
+      outlineOffset: 0,
+      borderColor: wonderBlocksTokens.color.blue,
+      boxShadow: `0px 0px 0px 2px ${wonderBlocksTokens.color.blue}, 0px 0px 0px 3px ${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: "none",
+      boxShadow: `0 0 0 1px ${wonderBlocksTokens.color.offBlack32}, 0 0 0 3px ${wonderBlocksTokens.color.fadedBlue}`
+    }
   },
-  errorLight: {
-    boxShadow: `0px 0px 0px 1px ${wonderBlocksTokens.color.red}, 0px 0px 0px 2px ${wonderBlocksTokens.color.white}`
+  lightError: {
+    background: wonderBlocksTokens.color.fadedRed8,
+    border: `1px solid ${wonderBlocksTokens.color.red}`,
+    boxShadow: `0px 0px 0px 1px ${wonderBlocksTokens.color.red}, 0px 0px 0px 2px ${wonderBlocksTokens.color.white}`,
+    color: wonderBlocksTokens.color.offBlack,
+    "::placeholder": {
+      color: wonderBlocksTokens.color.offBlack64
+    },
+    ":focus-visible": {
+      outlineColor: wonderBlocksTokens.color.red,
+      borderColor: wonderBlocksTokens.color.red,
+      boxShadow: `0px 0px 0px 2px ${wonderBlocksTokens.color.red}, 0px 0px 0px 3px ${wonderBlocksTokens.color.white}`
+    }
   }
 });
 var TextField$1 = React__namespace.forwardRef((props, ref) => React__namespace.createElement(TextField, _extends__default["default"]({}, props, {
@@ -810,14 +857,15 @@ class FieldHeading extends React__namespace.Component {
       label,
       id,
       required,
-      testId
+      testId,
+      light
     } = this.props;
     const requiredIcon = React__namespace.createElement(StyledSpan, {
-      style: styles$1.required,
+      style: light ? styles$1.lightRequired : styles$1.required,
       "aria-hidden": true
     }, " ", "*");
     return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksTypography.LabelMedium, {
-      style: styles$1.label,
+      style: light ? styles$1.lightLabel : styles$1.label,
       tag: "label",
       htmlFor: id && `${id}-field`,
       testId: testId && `${testId}-label`
@@ -828,13 +876,14 @@ class FieldHeading extends React__namespace.Component {
   maybeRenderDescription() {
     const {
       description,
-      testId
+      testId,
+      light
     } = this.props;
     if (!description) {
       return null;
     }
     return React__namespace.createElement(React__namespace.Fragment, null, React__namespace.createElement(wonderBlocksTypography.LabelSmall, {
-      style: styles$1.description,
+      style: light ? styles$1.lightDescription : styles$1.description,
       testId: testId && `${testId}-description`
     }, description), React__namespace.createElement(wonderBlocksLayout.Strut, {
       size: wonderBlocksTokens.spacing.xxxSmall_4
@@ -844,7 +893,8 @@ class FieldHeading extends React__namespace.Component {
     const {
       error,
       id,
-      testId
+      testId,
+      light
     } = this.props;
     if (!error) {
       return null;
@@ -852,7 +902,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: styles$1.error,
+      style: light ? styles$1.lightError : styles$1.error,
       role: "alert",
       id: id && `${id}-error`,
       testId: testId && `${testId}-error`
@@ -874,14 +924,26 @@ 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
   }
 });
 
@@ -960,6 +1022,7 @@ 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`,
@@ -997,7 +1060,7 @@ var labeledTextField = React__namespace.forwardRef((props, ref) => React__namesp
   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"];
+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"];
 const defaultErrorMessage = "This field is required.";
 const StyledTextArea = wonderBlocksCore.addStyle("textarea");
 const TextArea = React__namespace.forwardRef(function TextArea(props, ref) {
@@ -1028,7 +1091,8 @@ const TextArea = React__namespace.forwardRef(function TextArea(props, ref) {
       onValidate,
       required,
       resizeType,
-      light
+      light,
+      rootStyle
     } = props,
     otherProps = _objectWithoutPropertiesLoose__default["default"](props, _excluded);
   const [error, setError] = React__namespace.useState(null);
@@ -1067,15 +1131,15 @@ const TextArea = React__namespace.forwardRef(function TextArea(props, ref) {
     return [...baseStyles, ...(light ? lightStyles : defaultStyles)];
   };
   return React__namespace.createElement(wonderBlocksCore.View, {
-    style: {
+    style: [{
       width: "100%"
-    }
+    }, rootStyle]
   }, React__namespace.createElement(StyledTextArea, _extends__default["default"]({
     id: uniqueId,
     "data-testid": testId,
     ref: ref,
     className: className,
-    style: [...getStyles(), style],
+    style: [getStyles(), style],
     value: value,
     onChange: handleChange,
     placeholder: placeholder,
@@ -1099,12 +1163,13 @@ const TextArea = React__namespace.forwardRef(function TextArea(props, ref) {
     "aria-invalid": !!error
   })));
 });
+const VERTICAL_SPACING_PX = 10;
 const styles = aphrodite.StyleSheet.create({
   textarea: {
     borderRadius: wonderBlocksTokens.border.radius.medium_4,
     boxSizing: "border-box",
-    padding: `10px ${wonderBlocksTokens.spacing.medium_16}px`,
-    minHeight: "1em"
+    padding: `${VERTICAL_SPACING_PX}px ${wonderBlocksTokens.spacing.medium_16}px`,
+    minHeight: `${VERTICAL_SPACING_PX * 2 + wonderBlocksTokens.font.lineHeight.medium + 2 * wonderBlocksTokens.border.width.hairline}px`
   },
   default: {
     background: wonderBlocksTokens.color.white,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "4.8.1",
+  "version": "4.9.1",
   "design": "v1",
   "description": "Form components for Wonder Blocks.",
   "main": "dist/index.js",
@@ -16,12 +16,12 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^4.2.5",
-    "@khanacademy/wonder-blocks-core": "^6.4.3",
-    "@khanacademy/wonder-blocks-icon": "^4.1.3",
-    "@khanacademy/wonder-blocks-layout": "^2.1.2",
-    "@khanacademy/wonder-blocks-tokens": "^1.3.1",
-    "@khanacademy/wonder-blocks-typography": "^2.1.14"
+    "@khanacademy/wonder-blocks-clickable": "^4.2.7",
+    "@khanacademy/wonder-blocks-core": "^7.0.0",
+    "@khanacademy/wonder-blocks-icon": "^4.1.4",
+    "@khanacademy/wonder-blocks-layout": "^2.2.0",
+    "@khanacademy/wonder-blocks-tokens": "^2.0.0",
+    "@khanacademy/wonder-blocks-typography": "^2.1.15"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",

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

@@ -3,7 +3,6 @@ import {render, screen, fireEvent} from "@testing-library/react";
 import {userEvent} from "@testing-library/user-event";
 
 import {StyleSheet} from "aphrodite";
-import {color} from "@khanacademy/wonder-blocks-tokens";
 import LabeledTextField from "../labeled-text-field";
 
 describe("LabeledTextField", () => {
@@ -382,28 +381,6 @@ describe("LabeledTextField", () => {
         expect(input).toBeInTheDocument();
     });
 
-    it("light prop is passed to textfield", async () => {
-        // Arrange
-
-        // Act
-        render(
-            <LabeledTextField
-                label="Label"
-                value=""
-                onChange={() => {}}
-                light={true}
-            />,
-        );
-
-        const textField = await screen.findByRole("textbox");
-        textField.focus();
-
-        // Assert
-        expect(textField).toHaveStyle({
-            boxShadow: `0px 0px 0px 1px ${color.blue}, 0px 0px 0px 2px ${color.white}`,
-        });
-    });
-
     it("style prop is passed to fieldheading", async () => {
         // Arrange
         const styles = StyleSheet.create({

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,
@@ -9,7 +9,13 @@ import {
     addStyle,
     View,
 } from "@khanacademy/wonder-blocks-core";
-import {border, color, mix, spacing} from "@khanacademy/wonder-blocks-tokens";
+import {
+    border,
+    color,
+    font,
+    mix,
+    spacing,
+} from "@khanacademy/wonder-blocks-tokens";
 import {styles as typographyStyles} from "@khanacademy/wonder-blocks-typography";
 
 type TextAreaProps = AriaProps & {
@@ -31,9 +37,15 @@ type TextAreaProps = AriaProps & {
      */
     testId?: string;
     /**
-     * Custom styles for the text area.
+     * Custom styles for the textarea element.
      */
     style?: StyleType;
+    /**
+     * Custom styles for the root node of the component.
+     * If possible, try to use this prop carefully and use the `style` prop
+     * instead.
+     */
+    rootStyle?: StyleType;
     /**
      * Provide hints or examples of what to enter.
      */
@@ -198,6 +210,7 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
             required,
             resizeType,
             light,
+            rootStyle,
             // Should only include aria related props
             ...otherProps
         } = props;
@@ -243,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,
@@ -265,13 +278,13 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
             return [...baseStyles, ...(light ? lightStyles : defaultStyles)];
         };
         return (
-            <View style={{width: "100%"}}>
+            <View style={[{width: "100%"}, rootStyle]}>
                 <StyledTextArea
                     id={uniqueId}
                     data-testid={testId}
                     ref={ref}
                     className={className}
-                    style={[...getStyles(), style]}
+                    style={[getStyles(), style]}
                     value={value}
                     onChange={handleChange}
                     placeholder={placeholder}
@@ -299,12 +312,19 @@ const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
     },
 );
 
+const VERTICAL_SPACING_PX = 10;
+
 const styles = StyleSheet.create({
     textarea: {
         borderRadius: border.radius.medium_4,
         boxSizing: "border-box",
-        padding: `10px ${spacing.medium_16}px`,
-        minHeight: "1em",
+        padding: `${VERTICAL_SPACING_PX}px ${spacing.medium_16}px`,
+        // This minHeight is equivalent to when the textarea has one row
+        minHeight: `${
+            VERTICAL_SPACING_PX * 2 +
+            font.lineHeight.medium +
+            2 * border.width.hairline
+        }px`,
     },
     default: {
         background: color.white,