Skip to content

build(deps-dev): bump chromatic from 11.28.0 to 13.1.3 #266

build(deps-dev): bump chromatic from 11.28.0 to 13.1.3

build(deps-dev): bump chromatic from 11.28.0 to 13.1.3 #266

Triggered via pull request August 1, 2025 13:02
Status Failure
Total duration 1m 40s
Artifacts

test-check.yaml

on: pull_request
Fit to window
Zoom out
Zoom in

Annotations

10 errors
src/components/common/Select/Select.test.tsx > Component: Select > Snapshot > Default: src/components/common/Select/Select.test.tsx#L13
Error: Snapshot `Component: Select > Snapshot > Default 1` mismatched - Expected + Received @@ -10,15 +10,10 @@ data-a11y-ignore="aria-hidden-focus" data-react-aria-prevent-focus="true" data-testid="hidden-select-container" style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;" > - <input - style="font-size: 16px;" - tabindex="-1" - type="text" - /> <label> <select tabindex="-1" > <option /> @@ -41,18 +36,19 @@ </label> </div> <button aria-expanded="false" aria-haspopup="listbox" - aria-labelledby="react-aria-:r7:" + aria-labelledby="react-aria-«r7»" - class="cursor-pointer active:bg-gray-300 flex w-1/2 flex-row items-center justify-between rounded border-none bg-gray-100 py-1 px-2 text-sm font-semibold transition-colors hover:bg-gray-200 focus-visible:bg-gray-200 focus-visible:outline-0 aria-expanded:bg-gray-200" + class="cursor-pointer active:bg-gray-300 flex w-1/2 flex-row items-center justify-between rounded border-none bg-gray-100 px-2 py-1 font-semibold text-sm transition-colors hover:bg-gray-200 focus-visible:bg-gray-200 focus-visible:outline-0 aria-expanded:bg-gray-200" - id="react-aria-:r2:" + id="react-aria-«r2»" + tabindex="0" type="button" > <p class="flex-1 overflow-hidden text-ellipsis text-start" - id="react-aria-:r7:" + id="react-aria-«r7»" /> <svg aria-hidden="true" class="w-4" viewBox="0 -960 960 960" ❯ src/components/common/Select/Select.test.tsx:13:25
src/components/common/RangeSlider/RangeSlider.test.tsx > Component: RangeSlider > Snapshot > Default: src/components/common/RangeSlider/RangeSlider.test.tsx#L13
Error: Snapshot `Component: RangeSlider > Snapshot > Default 1` mismatched - Expected + Received @@ -1,25 +1,25 @@ <DocumentFragment> <div - aria-labelledby="react-aria-:r1:" + aria-labelledby="react-aria-«r1»" class="h-auto w-full horizontal" - id="react-aria-:r0:" + id="react-aria-«r0»" role="group" > <div class="flex items-center justify-between" > <label - class="text-sm font-semibold text-gray-600" + class="font-semibold text-gray-600 text-sm" - id="react-aria-:r1:" + id="react-aria-«r1»" > Label </label> <output aria-live="off" - class="text-sm font-semibold text-gray-800" + class="font-semibold text-gray-800 text-sm" - for="react-aria-:r1:-0 react-aria-:r1:-1" + for="react-aria-«r1»-0 react-aria-«r1»-1" > 0 - 100 </output> </div> <div @@ -38,14 +38,14 @@ style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;" > <input aria-describedby="" aria-details="" - aria-labelledby="react-aria-:r1:" + aria-labelledby="react-aria-«r1»" aria-orientation="horizontal" aria-valuetext="0" - id="react-aria-:r1:-0" + id="react-aria-«r1»-0" max="100" min="0" step="1" tabindex="0" type="range" @@ -61,14 +61,14 @@ style="border: 0px; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px; white-space: nowrap;" > <input aria-describedby="" aria-details="" - aria-labelledby="react-aria-:r1:" + aria-labelledby="react-aria-«r1»" aria-orientation="horizontal" aria-valuetext="100" - id="react-aria-:r1:-1" + id="react-aria-«r1»-1" max="100" min="0" step="1" tabindex="0" type="range" ❯ src/components/common/RangeSlider/RangeSlider.test.tsx:13:25
src/components/common/Popover/Popover.test.tsx > Component: Popover > Snapshot > Default: src/components/common/Popover/Popover.test.tsx#L13
Error: Snapshot `Component: Popover > Snapshot > Default 1` mismatched - Expected + Received <DocumentFragment> - <button> + <button + type="button" + > Trigger </button> </DocumentFragment> ❯ src/components/common/Popover/Popover.test.tsx:13:25
src/components/common/NumberField/NumberField.test.tsx > Component: NumberField > Snapshot > Default: src/components/common/NumberField/NumberField.test.tsx#L13
Error: Snapshot `Component: NumberField > Snapshot > Default 1` mismatched - Expected + Received @@ -1,24 +1,25 @@ <DocumentFragment> <div class="flex flex-row items-center justify-between" > <label - class="text-sm font-semibold text-gray-600" + class="font-semibold text-gray-600 text-sm" /> <div class="w-1/2" role="group" > <input aria-roledescription="Number field" autocomplete="off" autocorrect="off" - class="w-full rounded border-none bg-gray-100 py-1 px-2 text-sm font-semibold transition-colors hover:bg-gray-200 focus-visible:bg-gray-200 focus-visible:outline-0" + class="w-full rounded border-none bg-gray-100 px-2 py-1 font-semibold text-sm transition-colors hover:bg-gray-200 focus-visible:bg-gray-200 focus-visible:outline-0" - id="react-aria-:r0:" + id="react-aria-«r0»" inputmode="numeric" spellcheck="false" + tabindex="0" type="text" value="" /> </div> </div> ❯ src/components/common/NumberField/NumberField.test.tsx:13:25
src/components/common/NumberArrayField/NumberArrayField.test.tsx > Component: NumberArrayField > Snapshot > Default: src/components/common/NumberArrayField/NumberArrayField.test.tsx#L13
Error: Snapshot `Component: NumberArrayField > Snapshot > Default 1` mismatched - Expected + Received @@ -1,68 +1,70 @@ <DocumentFragment> <div class="flex flex-row items-center justify-between" > <label - class="text-sm font-semibold text-gray-600" + class="font-semibold text-gray-600 text-sm" > Numbers </label> <div class="flex w-1/2 flex-row gap-1" > <div - class="flex flex-row items-center justify-between gap-2 rounded bg-gray-100 py-0.5 px-2" + class="flex flex-row items-center justify-between gap-2 rounded bg-gray-100 px-2 py-0.5" > <label - class="text-sm font-semibold text-gray-500" + class="font-semibold text-gray-500 text-sm" - for="react-aria-:r0:" + for="react-aria-«r0»" - id="react-aria-:r2:" + id="react-aria-«r2»" > X </label> <div class="w-full" role="group" > <input - aria-labelledby="react-aria-:r2:" + aria-labelledby="react-aria-«r2»" aria-roledescription="Number field" autocomplete="off" autocorrect="off" - class="w-full rounded border-none py-0.5 px-1 text-sm font-semibold transition-colors hover:bg-gray-200 focus-visible:bg-gray-200 focus-visible:outline-0" + class="w-full rounded border-none px-1 py-0.5 font-semibold text-sm transition-colors hover:bg-gray-200 focus-visible:bg-gray-200 focus-visible:outline-0" - id="react-aria-:r0:" + id="react-aria-«r0»" inputmode="numeric" spellcheck="false" + tabindex="0" type="text" value="0" /> </div> </div> <div - class="flex flex-row items-center justify-between gap-2 rounded bg-gray-100 py-0.5 px-2" + class="flex flex-row items-center justify-between gap-2 rounded bg-gray-100 px-2 py-0.5" > <label - class="text-sm font-semibold text-gray-500" + class="font-semibold text-gray-500 text-sm" - for="react-aria-:r8:" + for="react-aria-«r8»" - id="react-aria-:ra:" + id="react-aria-«ra»" > Y </label> <div class="w-full" role="group" > <input - aria-labelledby="react-aria-:ra:" + aria-labelledby="react-aria-«ra»" aria-roledescription="Number field" autocomplete="off" autocorrect="off" - class="w-full rounded border-none py-0.5 px-1 text-sm font-semibold transition-colors hover:bg-gray-200 focus-visible:bg-gray-200 focus-visible:outline-0" + class="w-full rounded border-none px-1 py-0.5 font-semibold text-sm transition-colors hover:bg-gray-200 focus-visible:bg-gray-200 focus-visible:outline-0" - id="react-aria-:r8:" + id="react-aria-«r8»" inputmode="numeric" spellcheck="false" + tabindex="0" type="text" value="0" /> </div> </div> ❯ src/components/common/NumberArrayField/NumberArrayField.test.tsx:13:25
src/components/common/FilterInputField/FilterInputField.test.tsx > Component: FilterInputField > Snapshot > Default: src/components/common/FilterInputField/FilterInputField.test.tsx#L13
Error: Snapshot `Component: FilterInputField > Snapshot > Default 1` mismatched ❯ src/components/common/FilterInputField/FilterInputField.test.tsx:13:25
src/components/common/ComboBox/ComboBox.test.tsx > Component: ComboBox > Snapshot > Default: src/components/common/ComboBox/ComboBox.test.tsx#L13
Error: Snapshot `Component: ComboBox > Snapshot > Default 1` mismatched - Expected + Received @@ -5,30 +5,31 @@ <div class="font-semibold text-gray-600" /> <div aria-expanded="false" - class="flex w-1/2 cursor-pointer flex-row rounded border-none bg-gray-100 py-1 px-2 text-sm font-semibold transition-colors hover:bg-gray-200 focus-visible:bg-gray-200 focus-visible:outline-0 aria-expanded:bg-gray-200" + class="flex w-1/2 cursor-pointer flex-row rounded border-none bg-gray-100 px-2 py-1 font-semibold text-sm transition-colors hover:bg-gray-200 focus-visible:bg-gray-200 focus-visible:outline-0 aria-expanded:bg-gray-200" > <input aria-autocomplete="list" aria-expanded="false" autocomplete="off" autocorrect="off" class="w-full flex-1 border-none focus-visible:outline-0" - id="react-aria-:r2:" + id="react-aria-«r3»" role="combobox" spellcheck="false" + tabindex="0" type="text" value="" /> <button aria-expanded="false" aria-haspopup="listbox" aria-label="Show suggestions" class="cursor-pointer" - id="react-aria-:r0:" + id="react-aria-«r0»" > <svg aria-hidden="true" class="w-4" viewBox="0 -960 960 960" ❯ src/components/common/ComboBox/ComboBox.test.tsx:13:25
src/components/common/ColorField/ColorField.test.tsx > Component: ColorField > Snapshot > Default: src/components/common/ColorField/ColorField.test.tsx#L13
Error: Snapshot `Component: ColorField > Snapshot > Default 1` mismatched - Expected + Received @@ -1,51 +1,54 @@ <DocumentFragment> <div class="flex flex-row items-center justify-between" > <label - class="text-sm font-semibold text-gray-600" + class="font-semibold text-gray-600 text-sm" /> <div - class="flex w-1/2 flex-row items-center gap-2 rounded border-none bg-gray-100 py-1 px-2 text-sm font-semibold transition-colors hover:bg-gray-200 focus-visible:bg-gray-200 focus-visible:outline-0" + class="flex w-1/2 flex-row items-center gap-2 rounded border-none bg-gray-100 px-2 py-1 font-semibold text-sm transition-colors hover:bg-gray-200 focus-visible:bg-gray-200 focus-visible:outline-0" > <div class="h-4 w-4" > <button class="cursor-pointer transition-colors hover:bg-gray-100 active:bg-gray-300 h-full w-full border border-gray-300 focus:outline-0" + tabindex="0" type="button" > <div aria-label="transparent" aria-roledescription="color swatch" class="h-full w-full" - id="react-aria-:re:" + id="react-aria-«re»" role="img" style="background-color: rgba(255, 255, 255, 0);" /> </button> </div> <input autocomplete="off" autocorrect="off" class="min-w-10 flex-2 border-none focus-visible:outline-0" - id="react-aria-:r0:" + id="react-aria-«r0»" role="textbox" spellcheck="false" + tabindex="0" type="text" value="" /> <input - aria-labelledby="react-aria-:r8:" + aria-labelledby="react-aria-«r8»" aria-roledescription="Number field" autocomplete="off" autocorrect="off" class="min-w-8 flex-1 border-none focus-visible:outline-0" - id="react-aria-:r6:" + id="react-aria-«r6»" inputmode="numeric" spellcheck="false" + tabindex="0" type="text" value="" /> </div> </div> ❯ src/components/common/ColorField/ColorField.test.tsx:13:25
src/components/common/Button/Button.test.tsx > Component: Button > Snapshot > Default: src/components/common/Button/Button.test.tsx#L13
Error: Snapshot `Component: Button > Snapshot > Default 1` mismatched - Expected + Received <DocumentFragment> <button class="cursor-pointer transition-colors hover:bg-gray-100 active:bg-gray-300" + tabindex="0" type="button" > Button </button> </DocumentFragment> ❯ src/components/common/Button/Button.test.tsx:13:25
src/components/common/BoxRadioGroup/BoxRadioGroup.test.tsx > Component: BoxRadioGroup > Snapshot > Default: src/components/common/BoxRadioGroup/BoxRadioGroup.test.tsx#L13
Error: Snapshot `Component: BoxRadioGroup > Snapshot > Default 1` mismatched - Expected + Received @@ -1,55 +1,55 @@ <DocumentFragment> <div - aria-labelledby="react-aria-:r1:" + aria-labelledby="react-aria-«r1»" aria-orientation="vertical" class="flex items-center justify-between text-sm" - id="react-aria-:r0:" + id="react-aria-«r0»" role="radiogroup" > <span class="font-semibold text-gray-600" - id="react-aria-:r1:" + id="react-aria-«r1»" > Numbers </span> <div class="flex w-1/2 flex-row items-center justify-end gap-1" > <label aria-checked="false" - class="block cursor-pointer rounded border-none bg-gray-100 py-1 px-2 text-sm font-semibold transition-colors hover:bg-gray-200 focus-visible:bg-gray-200 focus-visible:outline-0 aria-checked:bg-gray-300" + class="block cursor-pointer rounded border-none bg-gray-100 px-2 py-1 font-semibold text-sm transition-colors hover:bg-gray-200 focus-visible:bg-gray-200 focus-visible:outline-0 aria-checked:bg-gray-300" > <input class="sr-only" - name="react-aria-:r5:" + name="react-aria-«r5»" tabindex="0" type="radio" value="1" /> One </label> <label aria-checked="false" - class="block cursor-pointer rounded border-none bg-gray-100 py-1 px-2 text-sm font-semibold transition-colors hover:bg-gray-200 focus-visible:bg-gray-200 focus-visible:outline-0 aria-checked:bg-gray-300" + class="block cursor-pointer rounded border-none bg-gray-100 px-2 py-1 font-semibold text-sm transition-colors hover:bg-gray-200 focus-visible:bg-gray-200 focus-visible:outline-0 aria-checked:bg-gray-300" > <input class="sr-only" - name="react-aria-:r5:" + name="react-aria-«r5»" tabindex="0" type="radio" value="2" /> Two </label> <label aria-checked="false" - class="block cursor-pointer rounded border-none bg-gray-100 py-1 px-2 text-sm font-semibold transition-colors hover:bg-gray-200 focus-visible:bg-gray-200 focus-visible:outline-0 aria-checked:bg-gray-300" + class="block cursor-pointer rounded border-none bg-gray-100 px-2 py-1 font-semibold text-sm transition-colors hover:bg-gray-200 focus-visible:bg-gray-200 focus-visible:outline-0 aria-checked:bg-gray-300" > <input class="sr-only" - name="react-aria-:r5:" + name="react-aria-«r5»" tabindex="0" type="radio" value="3" /> Three ❯ src/components/common/BoxRadioGroup/BoxRadioGroup.test.tsx:13:25