Skip to content

Commit

Permalink
Fix how mix from wonder-blocks-color formats single-digit color c…
Browse files Browse the repository at this point in the history
…omponents (#2065)

## Summary:
Previously, if the red, green, or blue component was less than 16, its hex digit would be repeated (e.g. `f` would become `ff`). With this change, we preserve the real value of the number by prepending a `0` instead (e.g. `f` becomes `0f`).

## Test plan:
`yarn run jest packages/wonder-blocks-color/src/util/__tests__/utils.test.ts`

Author: timmcca-be

Reviewers: somewhatabstract

Required Reviewers:

Approved By: somewhatabstract

Checks: ✅ Chromatic - Get results on non-draft regular PRs (ubuntu-latest, 16.x), ✅ Test (ubuntu-latest, 16.x, 2/2), ✅ Test (ubuntu-latest, 16.x, 1/2), ✅ Check build sizes (ubuntu-latest, 16.x), ✅ Lint (ubuntu-latest, 16.x), ✅ Chromatic - Build on non-draft regular PRs / chromatic (ubuntu-latest, 16.x), ⏭  Chromatic - Skip on Release PR (changesets), ✅ Prime node_modules cache for primary configuration (ubuntu-latest, 16.x), ✅ gerald, ⏭  dependabot

Pull Request URL: #2065
  • Loading branch information
timmcca-be authored Sep 26, 2023
1 parent 6514873 commit 48d3c7e
Show file tree
Hide file tree
Showing 3 changed files with 8 additions and 3 deletions.
5 changes: 5 additions & 0 deletions .changeset/afraid-rings-knock.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@khanacademy/wonder-blocks-color": major
---

Fix how mix formats single-digit color components
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ describe("mix", () => {
["rgba(0,0,0,0.25)", "#fFfFfF", "#bfbfbf"],
["rgba(0,0,0,0.25)", "rgb(255,255,0)", "#bfbf00"],
["rgba(100,200,100,0.25)", "rgb(255,255,0)", "#d8f119"],
["rgba(33,36,44,0.32)", "#00a60e", "#0b7c18"],
];

for (const [color, background, expectation] of testpoints) {
Expand Down
5 changes: 2 additions & 3 deletions packages/wonder-blocks-color/src/util/utils.ts
Original file line number Diff line number Diff line change
Expand Up @@ -61,10 +61,9 @@ const format = (color: Color): string => {
const b = Math.round(color.b);

if (color.a === 1) {
// @ts-expect-error [FEI-5019] - TS7006 - Parameter 'c' implicitly has an 'any' type.
const _s = (c) => {
const _s = (c: number) => {
const asString = c.toString(16);
return asString.length === 1 ? asString + asString : asString;
return asString.length === 1 ? `0${asString}` : asString;
};
return `#${_s(r)}${_s(g)}${_s(b)}`;
} else {
Expand Down

0 comments on commit 48d3c7e

Please sign in to comment.