feat: checkbox #890
Triggered via pull request
September 22, 2025 05:53
indianaPoly
Status
Failure
Total duration
3m 54s
Artifacts
–
Annotations
10 errors
|
publish
Process completed with exit code 1.
|
|
packages/components/src/components/CheckboxLayer/__tests__/index.browser.test.tsx > CheckboxLayer > should render:
packages/components/src/components/CheckboxLayer/__tests__/index.browser.test.tsx#L29
Error: Snapshot `CheckboxLayer > should render 1` mismatched
- Expected
+ Received
@@ -8,22 +8,21 @@
>
<div
class="height-0-18px--255 position-0-relative--255 width-0-fit-content--255"
>
<input
- class="background-0-$primary-6529705465913413318-1 border-0-none-6529705465913413318-1 accent-color-0-$primary--1 appearance-0-none--1 border-0-1px solid var(--border)--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1 background-0-color-mix(in srgb,var(--primary) 20%,#FFF 80%)-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary) 100%,#000 15%)-15130211206989154723-1 background-0-#F0F0F3-9407739846625397859-1 background-0-#F0F0F3-14172363753176421546-1 border-0-1px solid var(--primary)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary) 10%,#FFF 90%)-8380715471663921674-1 background-0-$contentBackground--1 cursor-0-pointer--1 "
+ class="background-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#47474A,#F0F0F3)-14172363753176421546-1 accent-color-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))--1 appearance-0-none--1 background-0-light-dark(#FFF,var(--inputBg,#2E2E2E))--1 border-0-light-dark(1px solid var(--border,#E0E0E0),1px solid var(--border,#333))--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-light-dark(1px solid var(--primary,#6159D4),1px solid var(--primary,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 "
id="checkbox1-option-1"
type="checkbox"
/>
</div>
<label
class="cursor-0-pointer--255"
for="checkbox1-option-1"
>
<span
- class="font-size-0-14px--255 color-0-$text--255"
- style="user-select: none; vertical-align: middle;"
+ class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(var(--text,#2F2F2F),var(--text,#EDEDED))--255"
>
Option 1
</span>
</label>
</div>
@@ -32,22 +31,21 @@
>
<div
class="height-0-18px--255 position-0-relative--255 width-0-fit-content--255"
>
<input
- class="background-0-$primary-6529705465913413318-1 border-0-none-6529705465913413318-1 accent-color-0-$primary--1 appearance-0-none--1 border-0-1px solid var(--border)--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1 background-0-color-mix(in srgb,var(--primary) 20%,#FFF 80%)-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary) 100%,#000 15%)-15130211206989154723-1 background-0-#F0F0F3-9407739846625397859-1 background-0-#F0F0F3-14172363753176421546-1 border-0-1px solid var(--primary)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary) 10%,#FFF 90%)-8380715471663921674-1 background-0-$contentBackground--1 cursor-0-pointer--1 "
+ class="background-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#47474A,#F0F0F3)-14172363753176421546-1 accent-color-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))--1 appearance-0-none--1 background-0-light-dark(#FFF,var(--inputBg,#2E2E2E))--1 border-0-light-dark(1px solid var(--border,#E0E0E0),1px solid var(--border,#333))--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px-
|
|
packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx > Checkbox > Theme-based styling > should use theme for checked disabled state background:
packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx#L240
AssertionError: expected "spy" to be called at least once
❯ packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx:240:24
|
|
packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx > Checkbox > Theme-based styling > should use theme for disabled state background:
packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx#L210
AssertionError: expected "spy" to be called at least once
❯ packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx:210:24
|
|
packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx > Checkbox > Theme-based styling > should render with dark theme background colors:
packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx#L193
AssertionError: expected "spy" to be called at least once
❯ packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx:193:24
|
|
packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx > Checkbox > Theme-based styling > should render with light theme background colors:
packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx#L181
AssertionError: expected "spy" to be called at least once
❯ packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx:181:24
|
|
packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx > Checkbox > Theme-based styling > should render CheckIcon with dark theme disabled color when disabled and checked:
packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx#L169
Error: expect(element).toHaveAttribute("fill", "#373737") // element.getAttribute("fill") === "#373737"
Expected the element to have attribute:
fill="#373737"
Received:
fill="light-dark(#D6D7DE, #373737)"
❯ packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx:169:25
|
|
packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx > Checkbox > Theme-based styling > should render CheckIcon with light theme disabled color when disabled and checked:
packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx#L155
Error: expect(element).toHaveAttribute("fill", "#D6D7DE") // element.getAttribute("fill") === "#D6D7DE"
Expected the element to have attribute:
fill="#D6D7DE"
Received:
fill="light-dark(#D6D7DE, #373737)"
❯ packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx:155:25
|
|
packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx > Checkbox > should render CheckIcon with disabled color when disabled and checked:
packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx#L128
Error: expect(element).toHaveAttribute("fill", "#D6D7DE") // element.getAttribute("fill") === "#D6D7DE"
Expected the element to have attribute:
fill="#D6D7DE"
Received:
fill="light-dark(#D6D7DE, #373737)"
❯ packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx:128:23
|
|
packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx > Checkbox > should render:
packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx#L29
Error: Snapshot `Checkbox > should render 1` mismatched
- Expected
+ Received
@@ -4,22 +4,21 @@
>
<div
class="height-0-18px--255 position-0-relative--255 width-0-fit-content--255"
>
<input
- class="background-0-$primary-6529705465913413318-1 border-0-none-6529705465913413318-1 accent-color-0-$primary--1 appearance-0-none--1 border-0-1px solid var(--border)--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1 background-0-color-mix(in srgb,var(--primary) 20%,#FFF 80%)-15425828959012638752-1 background-0-color-mix(in srgb,var(--primary) 100%,#000 15%)-15130211206989154723-1 background-0-#F0F0F3-9407739846625397859-1 background-0-#F0F0F3-14172363753176421546-1 border-0-1px solid var(--primary)-8380715471663921674-1 background-0-color-mix(in srgb,var(--primary) 10%,#FFF 90%)-8380715471663921674-1 background-0-$contentBackground--1 cursor-0-pointer--1 "
+ class="background-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))-6529705465913413318-1 border-0-none-6529705465913413318-1 background-0-light-dark(#F0F0F3,#47474A)-9407739846625397859-1 background-0-light-dark(#47474A,#F0F0F3)-14172363753176421546-1 accent-color-0-light-dark(var(--primary,#6159D4),var(--primary,#6670F9))--1 appearance-0-none--1 background-0-light-dark(#FFF,var(--inputBg,#2E2E2E))--1 border-0-light-dark(1px solid var(--border,#E0E0E0),1px solid var(--border,#333))--1 border-radius-0-2px--1 height-0-16px--1 width-0-16px--1 margin-0-0--1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 20%,#FFF 80%),color-mix(in srgb,var(--primary,#6670F9) 30%,#000 70%))-15425828959012638752-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 100%,#000 15%),color-mix(in srgb,var(--primary,#6670F9) 100%,#FFF 15%))-15130211206989154723-1 background-0-light-dark(color-mix(in srgb,var(--primary,#6159D4) 10%,#FFF 90%),color-mix(in srgb,var(--primary,#6670F9) 20%,#000 80%))-8380715471663921674-1 border-0-light-dark(1px solid var(--primary,#6159D4),1px solid var(--primary,#6670F9))-8380715471663921674-1 cursor-0-pointer--1 "
id="test-checkbox"
type="checkbox"
/>
</div>
<label
class="cursor-0-pointer--255"
for="test-checkbox"
>
<span
- class="font-size-0-14px--255 color-0-$text--255"
- style="user-select: none; vertical-align: middle;"
+ class="font-size-0-14px--255 user-select-0-none--255 color-0-light-dark(var(--text,#2F2F2F),var(--text,#EDEDED))--255"
>
Checkbox
</span>
</label>
</div>
❯ packages/components/src/components/Checkbox/__tests__/index.browser.test.tsx:29:23
|