[WB-1814.1] Refactor Checkbox and Radio to use semantic colors #5043
jandradenode-ci-pr.yml
on: pull_request
Matrix: Prime node_modules cache for primary configuration
Matrix: Check for .changeset entries for all changed files
Matrix: Publish npm snapshot
Matrix: Check build sizes
Matrix: Lint / Lint
Matrix: Test / Test
Annotations
12 errors and 5 warnings
|
CheckboxCore › type:default checked:false:
packages/wonder-blocks-form/src/__tests__/custom-snapshot.test.tsx#L24
expect(received).toMatchSnapshot()
Snapshot name: `CheckboxCore type:default checked:false 1`
- Snapshot - 1
+ Received + 1
<div>
<input
aria-checked="false"
aria-invalid="false"
class=""
- style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 3px; background-color: rgb(255, 255, 255); border-color: rgba(33,36,44,0.50);"
+ style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 3px; background-color: rgb(255, 255, 255); border-color: #909296;"
type="checkbox"
/>
</div>
at Object.toMatchSnapshot (packages/wonder-blocks-form/src/__tests__/custom-snapshot.test.tsx:24:35)
|
|
CheckboxCore › type:default checked:true:
packages/wonder-blocks-form/src/__tests__/custom-snapshot.test.tsx#L24
expect(received).toMatchSnapshot()
Snapshot name: `CheckboxCore type:default checked:true 1`
- Snapshot - 1
+ Received + 1
@@ -2,11 +2,11 @@
<input
aria-checked="true"
aria-invalid="false"
checked=""
class=""
- style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 0px; border-radius: 3px; background-color: rgb(24, 101, 242);"
+ style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 3px; background-color: rgb(24, 101, 242); border-color: transparent;"
type="checkbox"
/>
<span
class=""
style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgb(255, 255, 255); width: 12px; height: 12px; mask-image: url(check-bold.svg); position: absolute; pointer-events: none; margin: 2px;"
at Object.toMatchSnapshot (packages/wonder-blocks-form/src/__tests__/custom-snapshot.test.tsx:24:35)
|
|
CheckboxCore › type:default checked:null:
packages/wonder-blocks-form/src/__tests__/custom-snapshot.test.tsx#L24
expect(received).toMatchSnapshot()
Snapshot name: `CheckboxCore type:default checked:null 1`
- Snapshot - 1
+ Received + 1
@@ -1,11 +1,11 @@
<div>
<input
aria-checked="mixed"
aria-invalid="false"
class=""
- style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 0px; border-radius: 3px; background-color: rgb(24, 101, 242);"
+ style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 3px; background-color: rgb(24, 101, 242); border-color: transparent;"
type="checkbox"
/>
<span
class=""
style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgb(255, 255, 255); width: 12px; height: 12px; mask-image: url(minus-bold.svg); position: absolute; pointer-events: none; margin: 2px;"
at Object.toMatchSnapshot (packages/wonder-blocks-form/src/__tests__/custom-snapshot.test.tsx:24:35)
|
|
CheckboxCore › type:error checked:true:
packages/wonder-blocks-form/src/__tests__/custom-snapshot.test.tsx#L24
expect(received).toMatchSnapshot()
Snapshot name: `CheckboxCore type:error checked:true 1`
- Snapshot - 1
+ Received + 1
@@ -2,11 +2,11 @@
<input
aria-checked="true"
aria-invalid="true"
checked=""
class=""
- style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 0px; border-radius: 3px; background-color: rgb(217, 41, 22);"
+ style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 3px; background-color: rgb(217, 41, 22); border-color: transparent;"
type="checkbox"
/>
<span
class=""
style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgb(255, 255, 255); width: 12px; height: 12px; mask-image: url(check-bold.svg); position: absolute; pointer-events: none; margin: 2px;"
at Object.toMatchSnapshot (packages/wonder-blocks-form/src/__tests__/custom-snapshot.test.tsx:24:35)
|
|
CheckboxCore › type:error checked:null:
packages/wonder-blocks-form/src/__tests__/custom-snapshot.test.tsx#L24
expect(received).toMatchSnapshot()
Snapshot name: `CheckboxCore type:error checked:null 1`
- Snapshot - 1
+ Received + 1
@@ -1,11 +1,11 @@
<div>
<input
aria-checked="mixed"
aria-invalid="true"
class=""
- style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 0px; border-radius: 3px; background-color: rgb(217, 41, 22);"
+ style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 3px; background-color: rgb(217, 41, 22); border-color: transparent;"
type="checkbox"
/>
<span
class=""
style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgb(255, 255, 255); width: 12px; height: 12px; mask-image: url(minus-bold.svg); position: absolute; pointer-events: none; margin: 2px;"
at Object.toMatchSnapshot (packages/wonder-blocks-form/src/__tests__/custom-snapshot.test.tsx:24:35)
|
|
CheckboxCore › type:disabled checked:false:
packages/wonder-blocks-form/src/__tests__/custom-snapshot.test.tsx#L24
expect(received).toMatchSnapshot()
Snapshot name: `CheckboxCore type:disabled checked:false 1`
- Snapshot - 1
+ Received + 1
@@ -2,9 +2,9 @@
<input
aria-checked="false"
aria-invalid="false"
class=""
disabled=""
- style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 3px; cursor: auto; background-color: rgb(247, 248, 250); border-color: rgba(33,36,44,0.16);"
+ style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 3px; cursor: auto; background-color: rgb(247, 248, 250); border-color: #dbdcdd;"
type="checkbox"
/>
</div>
at Object.toMatchSnapshot (packages/wonder-blocks-form/src/__tests__/custom-snapshot.test.tsx:24:35)
|
|
CheckboxCore › type:disabled checked:true:
packages/wonder-blocks-form/src/__tests__/custom-snapshot.test.tsx#L24
expect(received).toMatchSnapshot()
Snapshot name: `CheckboxCore type:disabled checked:true 1`
- Snapshot - 2
+ Received + 2
@@ -3,13 +3,13 @@
aria-checked="true"
aria-invalid="false"
checked=""
class=""
disabled=""
- style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 3px; cursor: auto; background-color: rgb(247, 248, 250); border-color: rgba(33,36,44,0.16);"
+ style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 3px; cursor: auto; background-color: rgb(247, 248, 250); border-color: #dbdcdd;"
type="checkbox"
/>
<span
class=""
- style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgba(33, 36, 44, 0.32); width: 12px; height: 12px; mask-image: url(check-bold.svg); position: absolute; pointer-events: none; margin: 2px;"
+ style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgb(184, 185, 187); width: 12px; height: 12px; mask-image: url(check-bold.svg); position: absolute; pointer-events: none; margin: 2px;"
/>
</div>
at Object.toMatchSnapshot (packages/wonder-blocks-form/src/__tests__/custom-snapshot.test.tsx:24:35)
|
|
CheckboxCore › type:disabled checked:null:
packages/wonder-blocks-form/src/__tests__/custom-snapshot.test.tsx#L24
expect(received).toMatchSnapshot()
Snapshot name: `CheckboxCore type:disabled checked:null 1`
- Snapshot - 2
+ Received + 2
@@ -2,13 +2,13 @@
<input
aria-checked="mixed"
aria-invalid="false"
class=""
disabled=""
- style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 3px; cursor: auto; background-color: rgb(247, 248, 250); border-color: rgba(33,36,44,0.16);"
+ style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 3px; cursor: auto; background-color: rgb(247, 248, 250); border-color: #dbdcdd;"
type="checkbox"
/>
<span
class=""
- style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgba(33, 36, 44, 0.32); width: 12px; height: 12px; mask-image: url(minus-bold.svg); position: absolute; pointer-events: none; margin: 2px;"
+ style="display: inline-block; vertical-align: text-bottom; flex-shrink: 0; flex-grow: 0; mask-size: 100%; mask-repeat: no-repeat; mask-position: center; background-color: rgb(184, 185, 187); width: 12px; height: 12px; mask-image: url(minus-bold.svg); position: absolute; pointer-events: none; margin: 2px;"
/>
</div>
at Object.toMatchSnapshot (packages/wonder-blocks-form/src/__tests__/custom-snapshot.test.tsx:24:35)
|
|
RadioCore › type:default checked:false:
packages/wonder-blocks-form/src/__tests__/custom-snapshot.test.tsx#L44
expect(received).toMatchSnapshot()
Snapshot name: `RadioCore type:default checked:false 1`
- Snapshot - 1
+ Received + 1
<div>
<input
aria-invalid="false"
class=""
- style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 50%; background-color: rgb(255, 255, 255); border-color: rgba(33,36,44,0.50);"
+ style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 50%; background-color: rgb(255, 255, 255); border-color: #909296;"
type="radio"
/>
</div>
at Object.toMatchSnapshot (packages/wonder-blocks-form/src/__tests__/custom-snapshot.test.tsx:44:35)
|
|
RadioCore › type:default checked:null:
packages/wonder-blocks-form/src/__tests__/custom-snapshot.test.tsx#L44
expect(received).toMatchSnapshot()
Snapshot name: `RadioCore type:default checked:null 1`
- Snapshot - 1
+ Received + 1
<div>
<input
aria-invalid="false"
class=""
- style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 50%; background-color: rgb(255, 255, 255); border-color: rgba(33,36,44,0.50);"
+ style="appearance: none; height: 16px; width: 16px; min-height: 16px; min-width: 16px; margin: 0px; outline: none; box-sizing: border-box; border-style: solid; border-width: 1px; border-radius: 50%; background-color: rgb(255, 255, 255); border-color: #909296;"
type="radio"
/>
</div>
at Object.toMatchSnapshot (packages/wonder-blocks-form/src/__tests__/custom-snapshot.test.tsx:44:35)
|
|
Test / Test (ubuntu-latest, 20.x, 2/2)
The job was canceled because "ubuntu-latest_20_x_1_2" failed.
|
|
Test / Test (ubuntu-latest, 20.x, 2/2)
The operation was canceled.
|
|
Prime node_modules cache for primary configuration (ubuntu-latest, 20.x)
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
|
|
Check for .changeset entries for all changed files (ubuntu-latest, 20.x)
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
|
|
Test / Test (ubuntu-latest, 20.x, 1/2)
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
|
|
Lint / Lint (ubuntu-latest, 20.x)
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
|
|
Check build sizes (ubuntu-latest, 20.x)
ubuntu-latest pipelines will use ubuntu-24.04 soon. For more details, see https://github.com/actions/runner-images/issues/10636
|