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

Merged
merged 4 commits into from
Jun 19, 2024

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: 36f9ede

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: -3 B (0%)

Total Size: 96.8 kB

Filename Size Change
packages/wonder-blocks-dropdown/dist/es/index.js 14.1 kB +1 B (+0.01%)
packages/wonder-blocks-form/dist/es/index.js 5.34 kB -4 B (-0.07%)
ℹ️ View Unchanged
Filename Size
packages/wonder-blocks-accordion/dist/es/index.js 3.78 kB
packages/wonder-blocks-banner/dist/es/index.js 1.52 kB
packages/wonder-blocks-birthday-picker/dist/es/index.js 1.72 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-core/dist/es/index.js 3.66 kB
packages/wonder-blocks-data/dist/es/index.js 6.34 kB
packages/wonder-blocks-grid/dist/es/index.js 1.36 kB
packages/wonder-blocks-i18n/dist/es/index.js 4.6 kB
packages/wonder-blocks-icon-button/dist/es/index.js 3.23 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.94 kB
packages/wonder-blocks-link/dist/es/index.js 2.53 kB
packages/wonder-blocks-modal/dist/es/index.js 5.51 kB
packages/wonder-blocks-pill/dist/es/index.js 1.64 kB
packages/wonder-blocks-popover/dist/es/index.js 4.85 kB
packages/wonder-blocks-progress-spinner/dist/es/index.js 1.52 kB
packages/wonder-blocks-search-field/dist/es/index.js 1.54 kB
packages/wonder-blocks-switch/dist/es/index.js 2.09 kB
packages/wonder-blocks-testing/dist/es/index.js 3.94 kB
packages/wonder-blocks-theming/dist/es/index.js 693 B
packages/wonder-blocks-timing/dist/es/index.js 1.8 kB
packages/wonder-blocks-tokens/dist/es/index.js 1.74 kB
packages/wonder-blocks-toolbar/dist/es/index.js 855 B
packages/wonder-blocks-tooltip/dist/es/index.js 6.91 kB
packages/wonder-blocks-typography/dist/es/index.js 1.48 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 (294951a) 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

All modified and coverable lines are covered by tests ✅

Project coverage is 95.28%. Comparing base (4bc4e3d) to head (36f9ede).

Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff             @@
##             main    #2199      +/-   ##
==========================================
+ Coverage   94.02%   95.28%   +1.26%     
==========================================
  Files         248      248              
  Lines       29387    29387              
  Branches     2402     1836     -566     
==========================================
+ Hits        27630    28001     +371     
+ Misses       1753     1380     -373     
- Partials        4        6       +2     
Files Coverage Δ
...r-blocks-dropdown/src/components/select-opener.tsx 98.61% <100.00%> (+0.27%) ⬆️
...s/wonder-blocks-form/src/components/text-field.tsx 100.00% <100.00%> (+4.26%) ⬆️

... and 39 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 4bc4e3d...36f9ede. 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

github-actions bot commented Mar 15, 2024

A new build was pushed to Chromatic! 🚀

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

Chromatic results:

Metric Total
Captured snapshots 70
Tests with visual changes 42
Total stories 427
Inherited (not captured) snapshots [TurboSnap] 269
Tests on the build 339

@jandrade jandrade merged commit c8b273f into main Jun 19, 2024
16 checks passed
@jandrade jandrade deleted the field-border-color branch June 19, 2024 20:18
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants