From c8b273f05b0459385150ae0d397f01da095e91b0 Mon Sep 17 00:00:00 2001 From: Juan Andrade Date: Wed, 19 Jun 2024 16:18:47 -0400 Subject: [PATCH] WB-1672: Form fields: Update border color to offBlack50 (#2199) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary: For a11y reasons, we are changing the border color from `offBlack16` to `offBlack50`. This will solve a color contrast issue for non-text elements like textfields and dropdown openers. This PR updates this color in `TextField`, `MultiSelect` and `SingleSelect` to match these changes. TextField / LabeledTextField: Screenshot 2024-03-15 at 10 18 25 AM MultiSelect / SingleSelect: Screenshot 2024-03-15 at 10 18 49 AM Issue: WB-1672 ## Test plan: Verify the border color of the `Textfield`, `MultiSelect` and `SingleSelect` in Storybook and chromatic, and ensure that the color looks as we expect. Author: jandrade Reviewers: jandrade, jeresig Required Reviewers: Approved By: jeresig Checks: ✅ Chromatic - Get results on regular PRs (ubuntu-latest, 20.x), ✅ codecov/project, ✅ Lint (ubuntu-latest, 20.x), ✅ Test (ubuntu-latest, 20.x, 2/2), ✅ Test (ubuntu-latest, 20.x, 1/2), ✅ Check build sizes (ubuntu-latest, 20.x), ✅ Chromatic - Build on regular PRs / chromatic (ubuntu-latest, 20.x), ✅ Publish npm snapshot (ubuntu-latest, 20.x), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 20.x), ⏭️ Chromatic - Skip on Release PR (changesets), ✅ Check for .changeset entries for all changed files (ubuntu-latest, 20.x), ✅ gerald, ⏭️ dependabot Pull Request URL: https://github.com/Khan/wonder-blocks/pull/2199 --- .changeset/dirty-badgers-fry.md | 5 +++++ .changeset/eight-rice-hear.md | 5 +++++ __docs__/wonder-blocks-form/labeled-text-field.stories.tsx | 4 ++++ __docs__/wonder-blocks-form/text-field.stories.tsx | 3 +++ .../wonder-blocks-dropdown/src/components/select-opener.tsx | 4 ++-- packages/wonder-blocks-form/src/components/text-field.tsx | 6 +++--- 6 files changed, 22 insertions(+), 5 deletions(-) create mode 100644 .changeset/dirty-badgers-fry.md create mode 100644 .changeset/eight-rice-hear.md diff --git a/.changeset/dirty-badgers-fry.md b/.changeset/dirty-badgers-fry.md new file mode 100644 index 000000000..40ce3a446 --- /dev/null +++ b/.changeset/dirty-badgers-fry.md @@ -0,0 +1,5 @@ +--- +"@khanacademy/wonder-blocks-dropdown": patch +--- + +Update default/resting border color to fix a color contrast issue diff --git a/.changeset/eight-rice-hear.md b/.changeset/eight-rice-hear.md new file mode 100644 index 000000000..d39328698 --- /dev/null +++ b/.changeset/eight-rice-hear.md @@ -0,0 +1,5 @@ +--- +"@khanacademy/wonder-blocks-form": patch +--- + +Update default/resting border color to fix a color contrast issue diff --git a/__docs__/wonder-blocks-form/labeled-text-field.stories.tsx b/__docs__/wonder-blocks-form/labeled-text-field.stories.tsx index e55c3ab10..3212d2a24 100644 --- a/__docs__/wonder-blocks-form/labeled-text-field.stories.tsx +++ b/__docs__/wonder-blocks-form/labeled-text-field.stories.tsx @@ -15,6 +15,10 @@ import packageConfig from "../../packages/wonder-blocks-form/package.json"; import ComponentInfo from "../../.storybook/components/component-info"; import LabeledTextFieldArgTypes from "./labeled-text-field.argtypes"; +/** + * A LabeledTextField is an element used to accept a single line of text from + * the user paired with a label, description, and error field elements. + */ export default { title: "Packages / Form / LabeledTextField", component: LabeledTextField, diff --git a/__docs__/wonder-blocks-form/text-field.stories.tsx b/__docs__/wonder-blocks-form/text-field.stories.tsx index 456204148..86b54b629 100644 --- a/__docs__/wonder-blocks-form/text-field.stories.tsx +++ b/__docs__/wonder-blocks-form/text-field.stories.tsx @@ -14,6 +14,9 @@ import packageConfig from "../../packages/wonder-blocks-form/package.json"; import ComponentInfo from "../../.storybook/components/component-info"; import TextFieldArgTypes from "./text-field.argtypes"; +/** + * A TextField is an element used to accept a single line of text from the user. + */ export default { title: "Packages / Form / TextField", component: TextField, diff --git a/packages/wonder-blocks-dropdown/src/components/select-opener.tsx b/packages/wonder-blocks-dropdown/src/components/select-opener.tsx index 6f4d5f7e1..0e9dd262c 100644 --- a/packages/wonder-blocks-dropdown/src/components/select-opener.tsx +++ b/packages/wonder-blocks-dropdown/src/components/select-opener.tsx @@ -322,7 +322,7 @@ const _generateStyles = ( newStyles = { default: { background: error ? tokens.color.fadedRed8 : tokens.color.white, - borderColor: error ? tokens.color.red : tokens.color.offBlack16, + borderColor: error ? tokens.color.red : tokens.color.offBlack50, borderWidth: tokens.border.width.hairline, color: placeholder ? tokens.color.offBlack64 @@ -334,7 +334,7 @@ const _generateStyles = ( ":hover:not([aria-disabled=true])": { borderColor: error ? tokens.color.red - : tokens.color.offBlack16, + : tokens.color.offBlack50, borderWidth: tokens.border.width.hairline, paddingLeft: tokens.spacing.medium_16, paddingRight: tokens.spacing.small_12, diff --git a/packages/wonder-blocks-form/src/components/text-field.tsx b/packages/wonder-blocks-form/src/components/text-field.tsx index ad9c421a3..f1b2bcb6b 100644 --- a/packages/wonder-blocks-form/src/components/text-field.tsx +++ b/packages/wonder-blocks-form/src/components/text-field.tsx @@ -1,8 +1,8 @@ import * as React from "react"; import {StyleSheet} from "aphrodite"; -import {mix, color, spacing} from "@khanacademy/wonder-blocks-tokens"; import {IDProvider, addStyle} from "@khanacademy/wonder-blocks-core"; +import {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"; @@ -329,14 +329,14 @@ const styles = StyleSheet.create({ }, default: { background: color.white, - border: `1px solid ${color.offBlack16}`, + border: `1px solid ${color.offBlack50}`, color: color.offBlack, "::placeholder": { color: color.offBlack64, }, }, error: { - background: `${mix(color.fadedRed8, color.white)}`, + background: color.fadedRed8, border: `1px solid ${color.red}`, color: color.offBlack, "::placeholder": {