Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

WB-1672: Form fields: Update border color to offBlack50 #2199

Open
wants to merge 2 commits into
base: main
Choose a base branch
from

Conversation

jandrade
Copy link
Member

@jandrade jandrade commented Mar 15, 2024

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.

@jandrade jandrade self-assigned this Mar 15, 2024
Copy link

changeset-bot bot commented Mar 15, 2024

🦋 Changeset detected

Latest commit: 9b59742

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages
Name Type
@khanacademy/wonder-blocks-dropdown Patch
@khanacademy/wonder-blocks-form Patch
@khanacademy/wonder-blocks-birthday-picker Patch
@khanacademy/wonder-blocks-search-field Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@khan-actions-bot
Copy link
Contributor

khan-actions-bot commented Mar 15, 2024

Gerald

Required Reviewers
  • @Khan/wonder-blocks for changes to .changeset/dirty-badgers-fry.md, .changeset/eight-rice-hear.md, __docs__/wonder-blocks-form/labeled-text-field.stories.tsx, __docs__/wonder-blocks-form/text-field.stories.tsx, packages/wonder-blocks-dropdown/src/components/select-opener.tsx, packages/wonder-blocks-form/src/components/text-field.tsx

Don't want to be involved in this pull request? Comment #removeme and we won't notify you of further changes.

@khan-actions-bot khan-actions-bot requested a review from a team March 15, 2024 14:19
color: color.offBlack,
"::placeholder": {
color: color.offBlack64,
},
},
error: {
background: `${mix(color.fadedRed8, color.white)}`,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

note: This color is now part of the official WB color palette.

Copy link
Contributor

github-actions bot commented Mar 15, 2024

Size Change: 0 B

Total Size: 93.1 kB

Filename Size Change
packages/wonder-blocks-dropdown/dist/es/index.js 12.3 kB +2 B (0%)
packages/wonder-blocks-form/dist/es/index.js 5.32 kB -2 B (0%)
ℹ️ View Unchanged
Filename Size
packages/wonder-blocks-accordion/dist/es/index.js 3.78 kB
packages/wonder-blocks-banner/dist/es/index.js 1.53 kB
packages/wonder-blocks-birthday-picker/dist/es/index.js 1.71 kB
packages/wonder-blocks-breadcrumbs/dist/es/index.js 1.13 kB
packages/wonder-blocks-button/dist/es/index.js 4.28 kB
packages/wonder-blocks-cell/dist/es/index.js 2.24 kB
packages/wonder-blocks-clickable/dist/es/index.js 3.3 kB
packages/wonder-blocks-color/dist/es/index.js 1.15 kB
packages/wonder-blocks-core/dist/es/index.js 3.7 kB
packages/wonder-blocks-data/dist/es/index.js 6.33 kB
packages/wonder-blocks-grid/dist/es/index.js 1.36 kB
packages/wonder-blocks-i18n/dist/es/index.js 4.54 kB
packages/wonder-blocks-icon-button/dist/es/index.js 3.21 kB
packages/wonder-blocks-icon/dist/es/index.js 1.06 kB
packages/wonder-blocks-labeled-field/dist/es/index.js 72 B
packages/wonder-blocks-layout/dist/es/index.js 1.88 kB
packages/wonder-blocks-link/dist/es/index.js 2.54 kB
packages/wonder-blocks-modal/dist/es/index.js 5.52 kB
packages/wonder-blocks-pill/dist/es/index.js 1.27 kB
packages/wonder-blocks-popover/dist/es/index.js 4.86 kB
packages/wonder-blocks-progress-spinner/dist/es/index.js 1.51 kB
packages/wonder-blocks-search-field/dist/es/index.js 1.55 kB
packages/wonder-blocks-spacing/dist/es/index.js 158 B
packages/wonder-blocks-switch/dist/es/index.js 2.1 kB
packages/wonder-blocks-testing/dist/es/index.js 3.94 kB
packages/wonder-blocks-theming/dist/es/index.js 697 B
packages/wonder-blocks-timing/dist/es/index.js 1.78 kB
packages/wonder-blocks-tokens/dist/es/index.js 867 B
packages/wonder-blocks-toolbar/dist/es/index.js 857 B
packages/wonder-blocks-tooltip/dist/es/index.js 5.05 kB
packages/wonder-blocks-typography/dist/es/index.js 1.49 kB

compressed-size-action

Copy link
Contributor

github-actions bot commented Mar 15, 2024

npm Snapshot: Published

🎉 Good news!! We've packaged up the latest commit from this PR (f932ae2) and published all packages with changesets to npm.

You can install the packages in webapp by running:

./services/static/dev/tools/deploy_wonder_blocks.js --tag="PR2199"

Packages can also be installed manually by running:

yarn add @khanacademy/wonder-blocks-<package-name>@PR2199

Copy link

codecov bot commented Mar 15, 2024

Codecov Report

Merging #2199 (9b59742) into main (1002cf1) will increase coverage by 0.78%.
The diff coverage is 100.00%.

Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff             @@
##             main    #2199      +/-   ##
==========================================
+ Coverage   94.24%   95.02%   +0.78%     
==========================================
  Files         247      247              
  Lines       28576    28575       -1     
  Branches     2322     2361      +39     
==========================================
+ Hits        26931    27153     +222     
+ Misses       1645     1422     -223     
Files Coverage Δ
...r-blocks-dropdown/src/components/select-opener.tsx 99.33% <100.00%> (ø)
...s/wonder-blocks-form/src/components/text-field.tsx 100.00% <100.00%> (+3.48%) ⬆️

... and 32 files with indirect coverage changes


Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 1002cf1...9b59742. Read the comment docs.

Copy link
Member

@jeresig jeresig left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, thank you Juan!

Copy link
Contributor

A new build was pushed to Chromatic! 🚀

https://5e1bf4b385e3fb0020b7073c-kiblnpgewp.chromatic.com/

Chromatic results:

Metric Total
Captured snapshots 15
Tests with visual changes 40
Total stories 405
Inherited (not captured) snapshots [TurboSnap] 304
Tests on the build 319

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
3 participants