@khanacademy/wonder-blocks-form 4.9.0 → 4.9.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @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

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-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

@@ -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}`
+    }
   },
-  errorLight: {
-    boxShadow: `0px 0px 0px 1px ${color.red}, 0px 0px 0px 2px ${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}`
+    }
+  },
+  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`,
@@ -1046,7 +1109,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,

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}`
+    }
   },
-  errorLight: {
-    boxShadow: `0px 0px 0px 1px ${wonderBlocksTokens.color.red}, 0px 0px 0px 2px ${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}`
+    }
+  },
+  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`,
@@ -1076,7 +1139,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,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-form",
-  "version": "4.9.0",
+  "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.6",
-    "@khanacademy/wonder-blocks-core": "^6.4.3",
-    "@khanacademy/wonder-blocks-icon": "^4.1.3",
-    "@khanacademy/wonder-blocks-layout": "^2.1.3",
+    "@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.14"
+    "@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({