@khanacademy/wonder-blocks-form 4.8.1 → 4.9.1

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @khanacademy/wonder-blocks-form
 
+## 4.9.1
+
+### Patch Changes
+
+-   982f6808: Update `TextField` state styling so that it is consistent with other components like `TextArea`, `SingleSelect`, `MultiSelect` (especially the focus styling). The styling also now uses CSS pseudo-classes for easier testing in Chromatic and debugging in browsers.
+-   17f9a337: Improve `LabeledTextField` styling when the `light` prop is `true`. This improves the color contrast of the label, required indicator, description, and error message when the component is used on dark backgrounds.
+-   Updated dependencies [07f7f407]
+    -   @khanacademy/wonder-blocks-core@7.0.0
+    -   @khanacademy/wonder-blocks-layout@2.2.0
+    -   @khanacademy/wonder-blocks-clickable@4.2.7
+    -   @khanacademy/wonder-blocks-icon@4.1.4
+    -   @khanacademy/wonder-blocks-typography@2.1.15
+
+## 4.9.0
+
+### Minor Changes
+
+-   f7390d9d: `TextArea`: Adds `rootStyle` prop for styling to the root node
+
+### Patch Changes
+
+-   f7390d9d: `TextArea`: Updates the `min-height` of the textarea element so that when it is resized vertically using the resize control, the smallest it can get is equivalent to 1 row of the textarea.
+-   Updated dependencies [f17dc1ee]
+-   Updated dependencies [991eb43f]
+    -   @khanacademy/wonder-blocks-tokens@2.0.0
+    -   @khanacademy/wonder-blocks-clickable@4.2.6
+    -   @khanacademy/wonder-blocks-layout@2.1.3
+
 ## 4.8.1
 
 ### Patch Changes

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

@@ -36,6 +36,10 @@ 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/text-area.d.ts

@@ -21,9 +21,15 @@ declare const TextArea: React.ForwardRefExoticComponent<Readonly<import("../../.
      */
     testId?: string | undefined;
     /**
-     * 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.
      */

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

@@ -133,10 +133,6 @@ type State = {
      * Displayed when the validation fails.
      */
     error: string | null | undefined;
-    /**
-     * The user focuses on this field.
-     */
-    focused: boolean;
 };
 /**
  * A TextField is an element used to accept a single line of text from the user.
@@ -150,6 +146,7 @@ declare class TextField extends React.Component<PropsWithForwardRef, State> {
     handleChange: (event: React.ChangeEvent<HTMLInputElement>) => unknown;
     handleFocus: (event: React.FocusEvent<HTMLInputElement>) => unknown;
     handleBlur: (event: React.FocusEvent<HTMLInputElement>) => unknown;
+    getStyles: () => StyleType;
     render(): React.ReactNode;
 }
 type ExportProps = OmitConstrained<JSX.LibraryManagedAttributes<typeof TextField, React.ComponentProps<typeof TextField>>, "forwardedRef">;

package/dist/es/index.js

@@ -4,7 +4,7 @@ import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutP
 import { StyleSheet } from 'aphrodite';
 import { addStyle, UniqueIDProvider, View, IDProvider, useUniqueIdWithMock, useOnMountEffect } from '@khanacademy/wonder-blocks-core';
 import { Strut } from '@khanacademy/wonder-blocks-layout';
-import { spacing, mix, color, border } from '@khanacademy/wonder-blocks-tokens';
+import { spacing, mix, color, border, font } from '@khanacademy/wonder-blocks-tokens';
 import { LabelMedium, LabelSmall, styles as styles$7 } from '@khanacademy/wonder-blocks-typography';
 import { PhosphorIcon } from '@khanacademy/wonder-blocks-icon';
 import checkIcon from '@phosphor-icons/core/bold/check-bold.svg';
@@ -592,15 +592,14 @@ const RadioGroup = React.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 = addStyle("input");
 class TextField extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      error: null,
-      focused: false
+      error: null
     };
     this.maybeValidate = newValue => {
       const {
@@ -641,25 +640,30 @@ class TextField extends React.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, styles$7.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;
@@ -680,7 +684,6 @@ class TextField extends React.Component {
         disabled,
         onKeyDown,
         placeholder,
-        light,
         style,
         testId,
         readOnly,
@@ -693,7 +696,7 @@ class TextField extends React.Component {
       id: id,
       scope: "text-field"
     }, uniqueId => React.createElement(StyledInput, _extends({
-      style: [styles$2.input, styles$7.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,
@@ -723,12 +726,10 @@ const styles$2 = 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"
+    margin: 0
   },
   default: {
     background: color.white,
@@ -738,12 +739,23 @@ const styles$2 = StyleSheet.create({
       color: color.offBlack64
     }
   },
+  defaultFocus: {
+    ":focus-visible": {
+      borderColor: color.blue,
+      outline: `1px solid ${color.blue}`,
+      outlineOffset: 0
+    }
+  },
   error: {
     background: color.fadedRed8,
     border: `1px solid ${color.red}`,
     color: color.offBlack,
     "::placeholder": {
       color: color.offBlack64
+    },
+    ":focus-visible": {
+      outlineColor: color.red,
+      borderColor: color.red
     }
   },
   disabled: {
@@ -751,22 +763,57 @@ const styles$2 = StyleSheet.create({
     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,
+      borderColor: color.blue,
+      boxShadow: `0px 0px 0px 2px ${color.blue}, 0px 0px 0px 3px ${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: "none",
+      boxShadow: `0 0 0 1px ${color.offBlack32}, 0 0 0 3px ${color.fadedBlue}`
+    }
   },
-  errorLight: {
-    boxShadow: `0px 0px 0px 1px ${color.red}, 0px 0px 0px 2px ${color.white}`
+  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}`
+    }
   }
 });
 var TextField$1 = React.forwardRef((props, ref) => React.createElement(TextField, _extends({}, props, {
@@ -780,14 +827,15 @@ class FieldHeading extends React.Component {
       label,
       id,
       required,
-      testId
+      testId,
+      light
     } = this.props;
     const requiredIcon = React.createElement(StyledSpan, {
-      style: styles$1.required,
+      style: light ? styles$1.lightRequired : styles$1.required,
       "aria-hidden": true
     }, " ", "*");
     return React.createElement(React.Fragment, null, React.createElement(LabelMedium, {
-      style: styles$1.label,
+      style: light ? styles$1.lightLabel : styles$1.label,
       tag: "label",
       htmlFor: id && `${id}-field`,
       testId: testId && `${testId}-label`
@@ -798,13 +846,14 @@ class FieldHeading extends React.Component {
   maybeRenderDescription() {
     const {
       description,
-      testId
+      testId,
+      light
     } = this.props;
     if (!description) {
       return null;
     }
     return React.createElement(React.Fragment, null, React.createElement(LabelSmall, {
-      style: styles$1.description,
+      style: light ? styles$1.lightDescription : styles$1.description,
       testId: testId && `${testId}-description`
     }, description), React.createElement(Strut, {
       size: spacing.xxxSmall_4
@@ -814,7 +863,8 @@ class FieldHeading extends React.Component {
     const {
       error,
       id,
-      testId
+      testId,
+      light
     } = this.props;
     if (!error) {
       return null;
@@ -822,7 +872,7 @@ class FieldHeading extends React.Component {
     return React.createElement(React.Fragment, null, React.createElement(Strut, {
       size: spacing.small_12
     }), React.createElement(LabelSmall, {
-      style: styles$1.error,
+      style: light ? styles$1.lightError : styles$1.error,
       role: "alert",
       id: id && `${id}-error`,
       testId: testId && `${testId}-error`
@@ -844,14 +894,26 @@ 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
   }
 });
 
@@ -930,6 +992,7 @@ 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`,
@@ -967,7 +1030,7 @@ var labeledTextField = React.forwardRef((props, ref) => React.createElement(Labe
   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 = addStyle("textarea");
 const TextArea = React.forwardRef(function TextArea(props, ref) {
@@ -998,7 +1061,8 @@ const TextArea = React.forwardRef(function TextArea(props, ref) {
       onValidate,
       required,
       resizeType,
-      light
+      light,
+      rootStyle
     } = props,
     otherProps = _objectWithoutPropertiesLoose(props, _excluded);
   const [error, setError] = React.useState(null);
@@ -1037,15 +1101,15 @@ const TextArea = React.forwardRef(function TextArea(props, ref) {
     return [...baseStyles, ...(light ? lightStyles : defaultStyles)];
   };
   return React.createElement(View, {
-    style: {
+    style: [{
       width: "100%"
-    }
+    }, rootStyle]
   }, React.createElement(StyledTextArea, _extends({
     id: uniqueId,
     "data-testid": testId,
     ref: ref,
     className: className,
-    style: [...getStyles(), style],
+    style: [getStyles(), style],
     value: value,
     onChange: handleChange,
     placeholder: placeholder,
@@ -1069,12 +1133,13 @@ const TextArea = React.forwardRef(function TextArea(props, ref) {
     "aria-invalid": !!error
   })));
 });
+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`,
+    minHeight: `${VERTICAL_SPACING_PX * 2 + font.lineHeight.medium + 2 * border.width.hairline}px`
   },
   default: {
     background: color.white,