From 8d26588ff47a4c09d189932303a3b466ca7d2e2e Mon Sep 17 00:00:00 2001 From: Juan Andrade Date: Tue, 21 Jan 2025 18:38:18 -0500 Subject: [PATCH] [WB-1851.2] Form: Remove light prop on remaining form fields (#2437) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary: Following up on #2430. This PR removes the `light` variant from the remaining form fields: - `LabeledTextField` - `TextField` - `TextArea` - `LabeledField` - `SearchField` This is based on the discussion with the design team where we decided to remove the light prop from Wonder Blocks due to its low usage and to prepare for the upcoming design changes. Issue: WB-1851 ## Test plan: Verify that the light prop is removed from the components mentioned in the summary. Author: jandrade Reviewers: beaesguerra Required Reviewers: Approved By: beaesguerra Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ Test / Test (ubuntu-latest, 20.x, 2/2), ✅ Test / Test (ubuntu-latest, 20.x, 1/2), ✅ Lint / Lint (ubuntu-latest, 20.x), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ⏭️ Chromatic - Skip on Release PR (changesets), ⏭️ dependabot, ✅ gerald Pull Request URL: https://github.com/Khan/wonder-blocks/pull/2437 --- .changeset/cold-rivers-travel.md | 5 + .changeset/curly-poems-sin.md | 5 + .changeset/wet-pigs-end.md | 5 + .../labeled-text-field.argtypes.ts | 16 ---- .../labeled-text-field.stories.tsx | 91 ------------------- .../text-area-variants.stories.tsx | 60 ++++-------- .../wonder-blocks-form/text-area.argtypes.ts | 5 - .../wonder-blocks-form/text-area.stories.tsx | 18 ---- .../text-field-variants.stories.tsx | 60 ++++-------- .../wonder-blocks-form/text-field.argtypes.ts | 16 ---- .../wonder-blocks-form/text-field.stories.tsx | 44 --------- .../labeled-field.argtypes.ts | 5 - .../labeled-field.stories.tsx | 34 ++----- .../search-field-variants.stories.tsx | 55 +++-------- .../search-field.argtypes.ts | 14 --- .../search-field.stories.tsx | 44 +-------- .../src/components/field-heading.tsx | 33 ++----- .../src/components/labeled-text-field.tsx | 9 -- .../src/components/text-area.tsx | 88 +++--------------- .../src/components/text-field.tsx | 78 ++-------------- .../src/components/labeled-field.tsx | 43 ++------- .../src/components/search-field.tsx | 12 +-- 22 files changed, 105 insertions(+), 635 deletions(-) create mode 100644 .changeset/cold-rivers-travel.md create mode 100644 .changeset/curly-poems-sin.md create mode 100644 .changeset/wet-pigs-end.md diff --git a/.changeset/cold-rivers-travel.md b/.changeset/cold-rivers-travel.md new file mode 100644 index 0000000000..e19e167eeb --- /dev/null +++ b/.changeset/cold-rivers-travel.md @@ -0,0 +1,5 @@ +--- +"@khanacademy/wonder-blocks-search-field": major +--- + +Remove `light` variant from SearchField as it is no longer needed/used. diff --git a/.changeset/curly-poems-sin.md b/.changeset/curly-poems-sin.md new file mode 100644 index 0000000000..878be3a40b --- /dev/null +++ b/.changeset/curly-poems-sin.md @@ -0,0 +1,5 @@ +--- +"@khanacademy/wonder-blocks-labeled-field": major +--- + +Remove `light` variant/prop from `LabeledField` as it is no longer needed/recommended. diff --git a/.changeset/wet-pigs-end.md b/.changeset/wet-pigs-end.md new file mode 100644 index 0000000000..2d2c1ab767 --- /dev/null +++ b/.changeset/wet-pigs-end.md @@ -0,0 +1,5 @@ +--- +"@khanacademy/wonder-blocks-form": major +--- + +Remove `light` variant from LabeledTextField, TextField and TextArea" diff --git a/__docs__/wonder-blocks-form/labeled-text-field.argtypes.ts b/__docs__/wonder-blocks-form/labeled-text-field.argtypes.ts index b74b277e92..e6a547e5ce 100644 --- a/__docs__/wonder-blocks-form/labeled-text-field.argtypes.ts +++ b/__docs__/wonder-blocks-form/labeled-text-field.argtypes.ts @@ -111,22 +111,6 @@ export default { }, }, - light: { - description: - "Change the field’s sub-components to fit a dark background.", - table: { - type: { - summary: "boolean", - }, - defaultValue: { - summary: "false", - }, - }, - control: { - type: "boolean", - }, - }, - placeholder: { description: "Provide hints or examples of what to enter.", table: { diff --git a/__docs__/wonder-blocks-form/labeled-text-field.stories.tsx b/__docs__/wonder-blocks-form/labeled-text-field.stories.tsx index 6d5abe888c..48206af9e0 100644 --- a/__docs__/wonder-blocks-form/labeled-text-field.stories.tsx +++ b/__docs__/wonder-blocks-form/labeled-text-field.stories.tsx @@ -48,7 +48,6 @@ export const Default: StoryComponentType = { value: "", disabled: false, required: false, - light: false, placeholder: "Placeholder", readOnly: false, autoComplete: "off", @@ -507,96 +506,6 @@ export const Error: StoryComponentType = { render: ErrorRender, }; -/** - * The `light` prop is intended to be used on a dark background. When the - * `light` prop is set to `true`: - * - the underlying `TextField` will have a light border when focused - * - a specific light styling is used for the error state, as seen in the - * `ErrorLight` story - * - the text in the component (label, required indicator, description, and - * error message) are modified to work on the dark background - */ -export const Light: StoryComponentType = (args: any) => { - const [value, setValue] = React.useState(""); - - const handleKeyDown = (event: React.KeyboardEvent) => { - if (event.key === "Enter") { - event.currentTarget.blur(); - } - }; - - return ( - - ); -}; - -Light.args = { - disabled: false, -}; - -Light.parameters = { - backgrounds: { - default: "darkBlue", - }, -}; - -/** - * If an input value fails validation and the `light` prop is true, - * `TextField` will have light error styling. - */ -export const ErrorLight: StoryComponentType = (args: any) => { - const [value, setValue] = React.useState("khan"); - - const validate = (value: string) => { - const emailRegex = /^[^@\s]+@[^@\s.]+\.[^@.\s]+$/; - if (!emailRegex.test(value)) { - return "Please enter a valid email"; - } - }; - - const handleKeyDown = (event: React.KeyboardEvent) => { - if (event.key === "Enter") { - event.currentTarget.blur(); - } - }; - - return ( - - ); -}; - -ErrorLight.args = { - disabled: false, -}; - -ErrorLight.parameters = { - backgrounds: { - default: "darkBlue", - }, -}; - /** * If the disabled prop is set to `true`, LabeledTextField will have disabled styling * and will not be interactable. diff --git a/__docs__/wonder-blocks-form/text-area-variants.stories.tsx b/__docs__/wonder-blocks-form/text-area-variants.stories.tsx index 9ea9b2db69..a4bbc85fc1 100644 --- a/__docs__/wonder-blocks-form/text-area-variants.stories.tsx +++ b/__docs__/wonder-blocks-form/text-area-variants.stories.tsx @@ -3,7 +3,7 @@ import {StyleSheet} from "aphrodite"; import type {Meta, StoryObj} from "@storybook/react"; import {View} from "@khanacademy/wonder-blocks-core"; -import {color, spacing} from "@khanacademy/wonder-blocks-tokens"; +import {spacing} from "@khanacademy/wonder-blocks-tokens"; import {LabelLarge} from "@khanacademy/wonder-blocks-typography"; import {TextArea} from "@khanacademy/wonder-blocks-form"; import {LabeledField} from "@khanacademy/wonder-blocks-labeled-field"; @@ -43,18 +43,13 @@ const states = [ }, ]; const States = (props: { - light: boolean; label: string; value?: string; placeholder?: string; }) => { return ( - - - {props.label} - + + {props.label} {states.map((scenario) => { return ( @@ -80,39 +75,19 @@ const States = (props: { const AllVariants = () => ( - {[false, true].map((light) => { - return ( - - - - - - - - - - ); - })} + + + + + + + ); @@ -148,9 +123,6 @@ export const Active: StoryComponentType = { }; const styles = StyleSheet.create({ - darkDefault: { - backgroundColor: color.darkBlue, - }, statesContainer: { padding: spacing.medium_16, }, diff --git a/__docs__/wonder-blocks-form/text-area.argtypes.ts b/__docs__/wonder-blocks-form/text-area.argtypes.ts index 1e9b403001..971739d9bd 100644 --- a/__docs__/wonder-blocks-form/text-area.argtypes.ts +++ b/__docs__/wonder-blocks-form/text-area.argtypes.ts @@ -52,11 +52,6 @@ export default { category: "Visual style", }, }, - light: { - table: { - category: "Visual style", - }, - }, rootStyle: { table: { type: { diff --git a/__docs__/wonder-blocks-form/text-area.stories.tsx b/__docs__/wonder-blocks-form/text-area.stories.tsx index ad1579a081..e0343db497 100644 --- a/__docs__/wonder-blocks-form/text-area.stories.tsx +++ b/__docs__/wonder-blocks-form/text-area.stories.tsx @@ -641,24 +641,6 @@ export const ResizeType: StoryComponentType = { }, }; -/** - * A TextArea with `light` prop set to true and a dark background. - */ -export const Light: StoryComponentType = { - args: { - light: true, - value: "Text", - }, - parameters: { - backgrounds: { - default: "darkBlue", - }, - chromatic: { - disableSnapshot: true, // Disabling because it's covered in variants stories - }, - }, -}; - /** * Custom styling can be passed to the TextArea component using the `style` * prop. diff --git a/__docs__/wonder-blocks-form/text-field-variants.stories.tsx b/__docs__/wonder-blocks-form/text-field-variants.stories.tsx index 0734cd0355..26a8ea9b93 100644 --- a/__docs__/wonder-blocks-form/text-field-variants.stories.tsx +++ b/__docs__/wonder-blocks-form/text-field-variants.stories.tsx @@ -3,7 +3,7 @@ import {StyleSheet} from "aphrodite"; import type {Meta, StoryObj} from "@storybook/react"; import {View} from "@khanacademy/wonder-blocks-core"; -import {color, spacing} from "@khanacademy/wonder-blocks-tokens"; +import {spacing} from "@khanacademy/wonder-blocks-tokens"; import {LabelLarge} from "@khanacademy/wonder-blocks-typography"; import {TextField} from "@khanacademy/wonder-blocks-form"; import {LabeledField} from "@khanacademy/wonder-blocks-labeled-field"; @@ -43,18 +43,13 @@ const states = [ }, ]; const States = (props: { - light: boolean; label: string; value?: string; placeholder?: string; }) => { return ( - - - {props.label} - + + {props.label} {states.map((scenario) => { return ( @@ -80,39 +75,19 @@ const States = (props: { const AllVariants = () => ( - {[false, true].map((light) => { - return ( - - - - - - - - - - ); - })} + + + + + + + ); @@ -148,9 +123,6 @@ export const Active: StoryComponentType = { }; const styles = StyleSheet.create({ - darkDefault: { - backgroundColor: color.darkBlue, - }, statesContainer: { padding: spacing.medium_16, }, diff --git a/__docs__/wonder-blocks-form/text-field.argtypes.ts b/__docs__/wonder-blocks-form/text-field.argtypes.ts index d9bf9fa769..f8d2580598 100644 --- a/__docs__/wonder-blocks-form/text-field.argtypes.ts +++ b/__docs__/wonder-blocks-form/text-field.argtypes.ts @@ -86,22 +86,6 @@ export default { }, }, - light: { - description: - "Change the default focus ring color to fit a dark background.", - table: { - type: { - summary: "boolean", - }, - defaultValue: { - summary: "false", - }, - }, - control: { - type: "boolean", - }, - }, - required: { description: "Whether this field is required to to continue, or the error message to render if this field is left blank. Pass in a message instead of `true` if possible.", diff --git a/__docs__/wonder-blocks-form/text-field.stories.tsx b/__docs__/wonder-blocks-form/text-field.stories.tsx index 57bad1589a..7ce160787b 100644 --- a/__docs__/wonder-blocks-form/text-field.stories.tsx +++ b/__docs__/wonder-blocks-form/text-field.stories.tsx @@ -44,7 +44,6 @@ export const Default: StoryComponentType = { disabled: false, placeholder: "", required: false, - light: false, testId: "", readOnly: false, autoComplete: "off", @@ -549,49 +548,6 @@ export const InstantValidation: StoryComponentType = { }, }; -export const Light: StoryComponentType = { - args: { - light: true, - }, - parameters: { - backgrounds: { - default: "darkBlue", - }, - description: { - story: `If the \`light\` prop is set to true, - \`TextField\` will have light styling. This is intended to be used - on a dark background. There is also a specific light styling for the - error state, as seen in the \`ErrorLight\` story.`, - }, - chromatic: { - disableSnapshot: true, // Disable snapshot because it's covered by variants stories - }, - }, -}; - -export const ErrorLight: StoryComponentType = { - args: { - light: true, - error: true, - value: "khan", - }, - parameters: { - backgrounds: { - default: "darkBlue", - }, - docs: { - description: { - story: `If an input value fails validation and the - \`light\` prop is true, \`TextField\` will have light error styling.`, - }, - }, - chromatic: { - // Disabling because this doesn't test anything visual. - disableSnapshot: true, - }, - }, -}; - /** * If the disabled prop is set to `true`, TextField will have disabled styling * and will not be interactable. diff --git a/__docs__/wonder-blocks-labeled-field/labeled-field.argtypes.ts b/__docs__/wonder-blocks-labeled-field/labeled-field.argtypes.ts index fe50963d95..da00d111c7 100644 --- a/__docs__/wonder-blocks-labeled-field/labeled-field.argtypes.ts +++ b/__docs__/wonder-blocks-labeled-field/labeled-field.argtypes.ts @@ -48,9 +48,4 @@ export default { type: "null", }, }, - light: { - table: { - category: "Visual style", - }, - }, }; diff --git a/__docs__/wonder-blocks-labeled-field/labeled-field.stories.tsx b/__docs__/wonder-blocks-labeled-field/labeled-field.stories.tsx index c2541bc043..2e42f8f9e6 100644 --- a/__docs__/wonder-blocks-labeled-field/labeled-field.stories.tsx +++ b/__docs__/wonder-blocks-labeled-field/labeled-field.stories.tsx @@ -36,8 +36,6 @@ import Button from "@khanacademy/wonder-blocks-button"; * `field` prop component so it doesn't need to be set explicitly. If the `required` * prop is set on the `field` component, it will also get set for `LabeledField` * so that the required indicator is shown - * - If the `light` prop is set on either `LabeledField` or the `field` prop, - * both components will render in light mode * - For TextField and TextArea, it is highly recommended that they are * configured with `instantValidation=false` so that validation happens on blur. * See Validation docs for those components for more details! @@ -327,9 +325,8 @@ const AllFields = ( * - `MultiSelect` * - `SearchField` * - * LabeledField works best with field components that accept `error`, `light`, - * and `required` props since these props will get auto-populated by - * LabeledField. + * LabeledField works best with field components that accept `error` and + * `required` props since these props will get auto-populated by LabeledField. */ export const Fields: StoryComponentType = { args: { @@ -452,25 +449,6 @@ ChangingErrors.parameters = { }, }; -/** - * If the labeled field is used on a dark background, the `light` prop can be - * set to `true`. When enabled, the text in the component (label, required - * indicator, description, and error message) are modified to work on a dark - * background. - */ -export const Light: StoryComponentType = { - args: { - description: "Helpful description text.", - errorMessage: "Message about the error", - required: "Custom required message", - light: true, - }, - parameters: { - backgrounds: {default: "darkBlue"}, - }, - render: AllFields, -}; - /** * The following story shows what the LabeledField looks like when different * props are set. @@ -578,10 +556,10 @@ export const Scenarios = (args: PropsFor) => { * - MultiSelect * * This is recommended because LabeledField will inject WB specific props: - * `required`, `error`, `light`, and `testId`. The `field` component should - * handle these props accordingly. This is helpful because for example, - * if LabeledField has an error message, the field should also be in an error state. - * If the `field` component doesn't support these props, there will be console warnings. + * `required`, `error`, and `testId`. The `field` component should handle these + * props accordingly. This is helpful because for example, if LabeledField has + * an error message, the field should also be in an error state. If the `field` + * component doesn't support these props, there will be console warnings. */ export const WithNonWb = { args: { diff --git a/__docs__/wonder-blocks-search-field/search-field-variants.stories.tsx b/__docs__/wonder-blocks-search-field/search-field-variants.stories.tsx index e6c8398747..591eb5d9bd 100644 --- a/__docs__/wonder-blocks-search-field/search-field-variants.stories.tsx +++ b/__docs__/wonder-blocks-search-field/search-field-variants.stories.tsx @@ -43,18 +43,13 @@ const states = [ }, ]; const States = (props: { - light: boolean; label: string; value?: string; placeholder?: string; }) => { return ( - - - {props.label} - + + {props.label} {states.map((scenario) => { return ( @@ -80,39 +75,19 @@ const States = (props: { const AllVariants = () => ( - {[false, true].map((light) => { - return ( - - - - - - - - - - ); - })} + + + + + + + ); diff --git a/__docs__/wonder-blocks-search-field/search-field.argtypes.ts b/__docs__/wonder-blocks-search-field/search-field.argtypes.ts index c5f7b00e1e..2599d28eef 100644 --- a/__docs__/wonder-blocks-search-field/search-field.argtypes.ts +++ b/__docs__/wonder-blocks-search-field/search-field.argtypes.ts @@ -81,20 +81,6 @@ export default { type: "boolean", }, }, - light: { - type: {name: "boolean", required: false}, - table: { - type: { - summary: "boolean", - }, - defaultValue: { - summary: "false", - }, - }, - control: { - type: "boolean", - }, - }, style: { table: { type: { diff --git a/__docs__/wonder-blocks-search-field/search-field.stories.tsx b/__docs__/wonder-blocks-search-field/search-field.stories.tsx index 45591997e0..4636c4ae9e 100644 --- a/__docs__/wonder-blocks-search-field/search-field.stories.tsx +++ b/__docs__/wonder-blocks-search-field/search-field.stories.tsx @@ -1,11 +1,10 @@ import * as React from "react"; -import {StyleSheet} from "aphrodite"; import {action} from "@storybook/addon-actions"; import type {Meta, StoryObj} from "@storybook/react"; import {PropsFor, View} from "@khanacademy/wonder-blocks-core"; import Button from "@khanacademy/wonder-blocks-button"; -import {color, spacing} from "@khanacademy/wonder-blocks-tokens"; +import {spacing} from "@khanacademy/wonder-blocks-tokens"; import {LabelLarge} from "@khanacademy/wonder-blocks-typography"; import SearchField from "@khanacademy/wonder-blocks-search-field"; @@ -107,40 +106,6 @@ export const Default: StoryComponentType = { render: Template, }; -/** - * SearchField takes a `light` prop, which gives it an extra white ring on focus - * to make it visible against a dark background. - */ -export const Light: StoryComponentType = { - render: function Render() { - const [value, setValue] = React.useState(""); - - const handleChange = (newValue: string) => { - setValue(newValue); - }; - - const handleKeyDown = ( - event: React.KeyboardEvent, - ) => { - if (event.key === "Enter") { - event.currentTarget.blur(); - } - }; - - return ( - - - - ); - }, -}; - /** * SearchField takes a `disabled` prop, which makes it unusable. Try to avoid * using this if possible as it is bad for accessibility. @@ -294,10 +259,3 @@ export const Validation: StoryComponentType = { }, }, }; - -const styles = StyleSheet.create({ - darkBackground: { - background: color.darkBlue, - padding: spacing.medium_16, - }, -}); diff --git a/packages/wonder-blocks-form/src/components/field-heading.tsx b/packages/wonder-blocks-form/src/components/field-heading.tsx index b8198fe49a..56553b929f 100644 --- a/packages/wonder-blocks-form/src/components/field-heading.tsx +++ b/packages/wonder-blocks-form/src/components/field-heading.tsx @@ -42,10 +42,6 @@ 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"); @@ -56,13 +52,10 @@ const StyledSpan = addStyle("span"); */ export default class FieldHeading extends React.Component { renderLabel(): React.ReactNode { - const {label, id, required, testId, light} = this.props; + const {label, id, required, testId} = this.props; const requiredIcon = ( - + {" "} * @@ -71,7 +64,7 @@ export default class FieldHeading extends React.Component { return ( { } maybeRenderDescription(): React.ReactNode | null | undefined { - const {description, testId, light} = this.props; + const {description, testId} = this.props; if (!description) { return null; @@ -94,7 +87,7 @@ export default class FieldHeading extends React.Component { return ( {description} @@ -105,7 +98,7 @@ export default class FieldHeading extends React.Component { } maybeRenderError(): React.ReactNode | null | undefined { - const {error, id, testId, light} = this.props; + const {error, id, testId} = this.props; if (!error) { return null; @@ -115,7 +108,7 @@ export default class FieldHeading extends React.Component { { static defaultProps: DefaultProps = { type: "text", disabled: false, - light: false, }; constructor(props: PropsWithForwardRef) { @@ -225,7 +219,6 @@ class LabeledTextField extends React.Component { onChange, onKeyDown, placeholder, - light, style, testId, readOnly, @@ -254,7 +247,6 @@ class LabeledTextField extends React.Component { id={uniqueId} testId={testId} style={style} - light={light} field={ { onKeyDown={onKeyDown} onFocus={this.handleFocus} onBlur={this.handleBlur} - light={light} readOnly={readOnly} autoComplete={autoComplete} ref={forwardedRef} diff --git a/packages/wonder-blocks-form/src/components/text-area.tsx b/packages/wonder-blocks-form/src/components/text-area.tsx index 5280efa603..bbcd7b7530 100644 --- a/packages/wonder-blocks-form/src/components/text-area.tsx +++ b/packages/wonder-blocks-form/src/components/text-area.tsx @@ -7,13 +7,7 @@ import { addStyle, View, } from "@khanacademy/wonder-blocks-core"; -import { - border, - color, - font, - mix, - spacing, -} from "@khanacademy/wonder-blocks-tokens"; +import {border, color, font, spacing} from "@khanacademy/wonder-blocks-tokens"; import {styles as typographyStyles} from "@khanacademy/wonder-blocks-typography"; import {useId} from "react"; import {useFieldValidation} from "../hooks/use-field-validation"; @@ -184,10 +178,6 @@ type TextAreaProps = AriaProps & { * behaviour. For more details, see the [CSS resize property values MDN docs](https://developer.mozilla.org/en-US/docs/Web/CSS/resize#values) */ resizeType?: "horizontal" | "vertical" | "both" | "none"; - /** - * Change the default focus ring color to fit a dark background. - */ - light?: boolean; }; const StyledTextArea = addStyle("textarea"); @@ -224,7 +214,6 @@ const TextArea = React.forwardRef( onValidate, required, resizeType, - light, rootStyle, error, instantValidation = true, @@ -263,27 +252,6 @@ const TextArea = React.forwardRef( } }; - const getStyles = (): StyleType => { - // Base styles are the styles that apply regardless of light mode - const baseStyles = [ - styles.textarea, - typographyStyles.LabelMedium, - resizeType && resizeStyles[resizeType], - ]; - const defaultStyles = [ - styles.default, - !disabled && styles.defaultFocus, - disabled && styles.disabled, - hasError && styles.error, - ]; - const lightStyles = [ - styles.light, - !disabled && styles.lightFocus, - disabled && styles.lightDisabled, - hasError && styles.lightError, - ]; - return [...baseStyles, ...(light ? lightStyles : defaultStyles)]; - }; return ( ( data-testid={testId} ref={ref} className={className} - style={[getStyles(), style]} + style={[ + styles.textarea, + typographyStyles.LabelMedium, + resizeType && resizeStyles[resizeType], + styles.default, + !disabled && styles.defaultFocus, + disabled && styles.disabled, + hasError && styles.error, + style, + ]} value={value} onChange={handleChange} placeholder={placeholder} @@ -376,49 +353,6 @@ const styles = StyleSheet.create({ borderColor: color.red, }, }, - light: { - background: color.white, - border: `1px solid ${color.offBlack16}`, - color: color.offBlack, - "::placeholder": { - color: color.offBlack64, - }, - }, - 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", - }, - }, - 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", - }, - }, }); const resizeStyles = StyleSheet.create({ diff --git a/packages/wonder-blocks-form/src/components/text-field.tsx b/packages/wonder-blocks-form/src/components/text-field.tsx index 048f29c9ee..905ae0f05b 100644 --- a/packages/wonder-blocks-form/src/components/text-field.tsx +++ b/packages/wonder-blocks-form/src/components/text-field.tsx @@ -2,7 +2,7 @@ import * as React from "react"; import {StyleSheet} from "aphrodite"; import {Id, addStyle} from "@khanacademy/wonder-blocks-core"; -import {border, color, mix, spacing} from "@khanacademy/wonder-blocks-tokens"; +import {border, color, spacing} from "@khanacademy/wonder-blocks-tokens"; import {styles as typographyStyles} from "@khanacademy/wonder-blocks-typography"; import type {StyleType, AriaProps} from "@khanacademy/wonder-blocks-core"; @@ -113,10 +113,6 @@ type CommonProps = AriaProps & { * will be used. */ required?: boolean | string; - /** - * Change the default focus ring color to fit a dark background. - */ - light?: boolean; /** * Custom styles for the input. */ @@ -175,7 +171,6 @@ const TextField = (props: PropsWithForwardRef) => { value, name, disabled = false, - light = false, error, validate, onValidate, @@ -226,29 +221,19 @@ const TextField = (props: PropsWithForwardRef) => { } }; - const getStyles = (): StyleType => { - // 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, - hasError && styles.error, - ]; - const lightStyles = [ - styles.light, - !disabled && styles.lightFocus, - disabled && styles.lightDisabled, - hasError && styles.lightError, - ]; - return [...baseStyles, ...(light ? lightStyles : defaultStyles)]; - }; - return ( {(uniqueId) => ( {" "} @@ -152,10 +143,7 @@ export default function LabeledField(props: Props) { return ( @@ -218,10 +203,7 @@ export default function LabeledField(props: Props) { <> @@ -229,7 +211,7 @@ export default function LabeledField(props: Props) { style={[ styles.textWordBreak, styles.errorMessage, - isLight ? styles.lightError : styles.error, + styles.error, ]} > {errorMessage} @@ -253,7 +235,6 @@ export default function LabeledField(props: Props) { required: required || field.props.required, error: hasError, testId: testId ? `${testId}-field` : undefined, - light: isLight, }); } @@ -272,15 +253,9 @@ const styles = StyleSheet.create({ label: { color: semanticColor.text.primary, }, - lightLabel: { - color: semanticColor.text.inverse, - }, description: { color: semanticColor.text.secondary, }, - lightDescription: { - color: color.white64, - }, errorSection: { flexDirection: "row", gap: spacing.xSmall_8, @@ -291,9 +266,6 @@ const styles = StyleSheet.create({ error: { color: semanticColor.status.critical.foreground, }, - lightError: { - color: color.fadedRed, - }, errorIcon: { marginTop: "1px", // This vertically aligns the icon with the text }, @@ -303,9 +275,6 @@ const styles = StyleSheet.create({ required: { color: semanticColor.status.critical.foreground, }, - lightRequired: { - color: color.fadedRed, - }, textWordBreak: { overflowWrap: "break-word", }, diff --git a/packages/wonder-blocks-search-field/src/components/search-field.tsx b/packages/wonder-blocks-search-field/src/components/search-field.tsx index 8240278853..bd1644f7b1 100644 --- a/packages/wonder-blocks-search-field/src/components/search-field.tsx +++ b/packages/wonder-blocks-search-field/src/components/search-field.tsx @@ -9,7 +9,7 @@ import {View, Id} from "@khanacademy/wonder-blocks-core"; import IconButton from "@khanacademy/wonder-blocks-icon-button"; import {TextField} from "@khanacademy/wonder-blocks-form"; import {PhosphorIcon} from "@khanacademy/wonder-blocks-icon"; -import {color, semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens"; +import {semanticColor, spacing} from "@khanacademy/wonder-blocks-tokens"; import type {StyleType, AriaProps} from "@khanacademy/wonder-blocks-core"; import {defaultLabels} from "../util/constants"; @@ -47,10 +47,6 @@ type Props = AriaProps & { * Defaults to false. */ disabled?: boolean; - /** - * Changes the default focus ring color to fit a dark background. - */ - light?: boolean; /** * Custom styles for the main wrapper. */ @@ -141,7 +137,6 @@ const SearchField: React.ForwardRefExoticComponent< clearAriaLabel = defaultLabels.clearSearch, autoFocus, disabled = false, - light = false, id, value, placeholder, @@ -199,9 +194,7 @@ const SearchField: React.ForwardRefExoticComponent< size="small" color={ disabled - ? light - ? color.white32 - : semanticColor.action.disabled.default + ? semanticColor.action.disabled.default : semanticColor.icon.primary } style={styles.searchIcon} @@ -212,7 +205,6 @@ const SearchField: React.ForwardRefExoticComponent< type="text" autoFocus={autoFocus} disabled={disabled} - light={light} instantValidation={instantValidation} validate={validate} onValidate={onValidate}