@khanacademy/wonder-blocks-form 4.9.3 → 4.9.4

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @khanacademy/wonder-blocks-form
 
+## 4.9.4
+
+### Patch Changes
+
+-   61dc4448: Allow `TextField` to be focusable when disabled. It now sets `aria-disabled` instead of the `disabled` attribute based on the `disabled` prop. This makes it so screenreaders will continue to communicate that the component is disabled, while allowing focus on the disabled component. Focus styling is also added to the disabled state.
+-   2dfd5eb6: - 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.
+    -   `TextField` and `TextArea` state styling has also been updated so that any outline styles outside of the component are now applied within the component to prevent cropped focus outlines in places where an ancestor element has `overflow: hidden`.
+
 ## 4.9.3
 
 ### Patch Changes

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

@@ -24,7 +24,15 @@ type CommonProps = {
      */
     value: string;
     /**
-     * Makes a read-only input field that cannot be focused. Defaults to false.
+     * Whether the input should be disabled. Defaults to false.
+     * If the disabled prop is set to `true`, LabeledTextField will have disabled
+     * styling and will not be interactable.
+     *
+     * Note: The `disabled` prop sets the `aria-disabled` attribute to `true`
+     * instead of setting the `disabled` attribute. This is so that the component
+     * remains focusable while communicating to screen readers that it is disabled.
+     * This `disabled` prop will also set the `readonly` attribute to prevent
+     * typing in the field.
      */
     disabled: boolean;
     /**

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

@@ -21,7 +21,15 @@ type CommonProps = AriaProps & {
      */
     name?: string;
     /**
-     * Makes a read-only input field that cannot be focused. Defaults to false.
+     * Whether the input should be disabled. Defaults to false.
+     * If the disabled prop is set to `true`, TextField will have disabled
+     * styling and will not be interactable.
+     *
+     * Note: The `disabled` prop sets the `aria-disabled` attribute to `true`
+     * instead of setting the `disabled` attribute. This is so that the component
+     * remains focusable while communicating to screen readers that it is disabled.
+     * This `disabled` prop will also set the `readonly` attribute to prevent
+     * typing in the field.
      */
     disabled: boolean;
     /**
@@ -133,10 +141,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 +154,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

@@ -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,19 +696,19 @@ 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,
       value: value,
       name: name,
-      disabled: disabled,
+      "aria-disabled": disabled,
       onChange: this.handleChange,
-      onKeyDown: onKeyDown,
+      onKeyDown: disabled ? undefined : onKeyDown,
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
       "data-testid": testId,
-      readOnly: readOnly,
+      readOnly: readOnly || disabled,
       autoFocus: autoFocus,
       autoComplete: autoComplete,
       ref: forwardedRef
@@ -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: "-2px"
+    }
+  },
   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,56 @@ 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: `2px solid ${color.offBlack32}`,
+      outlineOffset: "-3px"
     }
   },
-  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: `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"
+    }
   },
-  errorLight: {
-    boxShadow: `0px 0px 0px 1px ${color.red}, 0px 0px 0px 2px ${color.white}`
+  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, {
@@ -1062,7 +1108,7 @@ const TextArea = React.forwardRef(function TextArea(props, ref) {
     "data-testid": testId,
     ref: ref,
     className: className,
-    style: [...getStyles(), style],
+    style: [getStyles(), style],
     value: value,
     onChange: handleChange,
     placeholder: placeholder,
@@ -1106,7 +1152,7 @@ const styles = StyleSheet.create({
     ":focus-visible": {
       borderColor: color.blue,
       outline: `1px solid ${color.blue}`,
-      outlineOffset: 0
+      outlineOffset: "-2px"
     }
   },
   disabled: {
@@ -1118,8 +1164,8 @@ const styles = StyleSheet.create({
     },
     cursor: "not-allowed",
     ":focus-visible": {
-      outline: "none",
-      boxShadow: `0 0 0 1px ${color.white}, 0 0 0 3px ${color.offBlack32}`
+      outline: `2px solid ${color.offBlack32}`,
+      outlineOffset: "-3px"
     }
   },
   error: {
@@ -1144,10 +1190,9 @@ const styles = StyleSheet.create({
   },
   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}`
+      outline: `3px solid ${color.blue}`,
+      outlineOffset: "-4px",
+      borderColor: color.white
     }
   },
   lightDisabled: {
@@ -1160,22 +1205,22 @@ const styles = StyleSheet.create({
     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}`
+      outline: `3px solid ${color.fadedBlue}`,
+      outlineOffset: "-4px"
     }
   },
   lightError: {
     background: color.fadedRed8,
-    border: `1px solid ${color.red}`,
-    boxShadow: `0px 0px 0px 1px ${color.red}, 0px 0px 0px 2px ${color.white}`,
+    border: `1px solid ${color.white}`,
+    outline: `2px solid ${color.red}`,
+    outlineOffset: "-3px",
     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}`
+      outline: `3px solid ${color.red}`,
+      outlineOffset: "-4px"
     }
   }
 });

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,19 +726,19 @@ 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,
       value: value,
       name: name,
-      disabled: disabled,
+      "aria-disabled": disabled,
       onChange: this.handleChange,
-      onKeyDown: onKeyDown,
+      onKeyDown: disabled ? undefined : onKeyDown,
       onFocus: this.handleFocus,
       onBlur: this.handleBlur,
       "data-testid": testId,
-      readOnly: readOnly,
+      readOnly: readOnly || disabled,
       autoFocus: autoFocus,
       autoComplete: autoComplete,
       ref: forwardedRef
@@ -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: "-2px"
+    }
+  },
   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,56 @@ 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: `2px solid ${wonderBlocksTokens.color.offBlack32}`,
+      outlineOffset: "-3px"
     }
   },
-  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: `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"
+    }
   },
-  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.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, {
@@ -1092,7 +1138,7 @@ const TextArea = React__namespace.forwardRef(function TextArea(props, ref) {
     "data-testid": testId,
     ref: ref,
     className: className,
-    style: [...getStyles(), style],
+    style: [getStyles(), style],
     value: value,
     onChange: handleChange,
     placeholder: placeholder,
@@ -1136,7 +1182,7 @@ const styles = aphrodite.StyleSheet.create({
     ":focus-visible": {
       borderColor: wonderBlocksTokens.color.blue,
       outline: `1px solid ${wonderBlocksTokens.color.blue}`,
-      outlineOffset: 0
+      outlineOffset: "-2px"
     }
   },
   disabled: {
@@ -1148,8 +1194,8 @@ const styles = aphrodite.StyleSheet.create({
     },
     cursor: "not-allowed",
     ":focus-visible": {
-      outline: "none",
-      boxShadow: `0 0 0 1px ${wonderBlocksTokens.color.white}, 0 0 0 3px ${wonderBlocksTokens.color.offBlack32}`
+      outline: `2px solid ${wonderBlocksTokens.color.offBlack32}`,
+      outlineOffset: "-3px"
     }
   },
   error: {
@@ -1174,10 +1220,9 @@ const styles = aphrodite.StyleSheet.create({
   },
   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}`
+      outline: `3px solid ${wonderBlocksTokens.color.blue}`,
+      outlineOffset: "-4px",
+      borderColor: wonderBlocksTokens.color.white
     }
   },
   lightDisabled: {
@@ -1190,22 +1235,22 @@ const styles = aphrodite.StyleSheet.create({
     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}`
+      outline: `3px solid ${wonderBlocksTokens.color.fadedBlue}`,
+      outlineOffset: "-4px"
     }
   },
   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}`,
+    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": {
-      outlineColor: wonderBlocksTokens.color.red,
-      borderColor: wonderBlocksTokens.color.red,
-      boxShadow: `0px 0px 0px 2px ${wonderBlocksTokens.color.red}, 0px 0px 0px 3px ${wonderBlocksTokens.color.white}`
+      outline: `3px solid ${wonderBlocksTokens.color.red}`,
+      outlineOffset: "-4px"
     }
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "4.9.3",
+  "version": "4.9.4",
   "design": "v1",
   "description": "Form components for Wonder Blocks.",
   "main": "dist/index.js",