From b5e3fece9310fe02da02502b069653cb8e9eb0b8 Mon Sep 17 00:00:00 2001 From: Dani Sandoval Date: Wed, 27 May 2026 11:02:29 -0600 Subject: [PATCH 1/3] test(Spacer): add visual regression baseline before CSS Modules migration --- src/components/Spacer/Spacer.stories.tsx | 46 +++++ tests/utils/spacer.spec.ts | 172 ++++++++++++++++++ ...pacer-default-size-dark-chromium-linux.png | Bin 0 -> 256 bytes ...acer-default-size-light-chromium-linux.png | Bin 0 -> 256 bytes .../spacer-size-lg-dark-chromium-linux.png | Bin 0 -> 292 bytes .../spacer-size-lg-light-chromium-linux.png | Bin 0 -> 292 bytes .../spacer-size-md-dark-chromium-linux.png | Bin 0 -> 256 bytes .../spacer-size-md-light-chromium-linux.png | Bin 0 -> 256 bytes .../spacer-size-sm-dark-chromium-linux.png | Bin 0 -> 238 bytes .../spacer-size-sm-light-chromium-linux.png | Bin 0 -> 238 bytes .../spacer-size-xl-dark-chromium-linux.png | Bin 0 -> 326 bytes .../spacer-size-xl-light-chromium-linux.png | Bin 0 -> 326 bytes .../spacer-size-xs-dark-chromium-linux.png | Bin 0 -> 205 bytes .../spacer-size-xs-light-chromium-linux.png | Bin 0 -> 205 bytes .../spacer-size-xxl-dark-chromium-linux.png | Bin 0 -> 362 bytes .../spacer-size-xxl-light-chromium-linux.png | Bin 0 -> 362 bytes 16 files changed, 218 insertions(+) create mode 100644 tests/utils/spacer.spec.ts create mode 100644 tests/utils/spacer.spec.ts-snapshots/spacer-default-size-dark-chromium-linux.png create mode 100644 tests/utils/spacer.spec.ts-snapshots/spacer-default-size-light-chromium-linux.png create mode 100644 tests/utils/spacer.spec.ts-snapshots/spacer-size-lg-dark-chromium-linux.png create mode 100644 tests/utils/spacer.spec.ts-snapshots/spacer-size-lg-light-chromium-linux.png create mode 100644 tests/utils/spacer.spec.ts-snapshots/spacer-size-md-dark-chromium-linux.png create mode 100644 tests/utils/spacer.spec.ts-snapshots/spacer-size-md-light-chromium-linux.png create mode 100644 tests/utils/spacer.spec.ts-snapshots/spacer-size-sm-dark-chromium-linux.png create mode 100644 tests/utils/spacer.spec.ts-snapshots/spacer-size-sm-light-chromium-linux.png create mode 100644 tests/utils/spacer.spec.ts-snapshots/spacer-size-xl-dark-chromium-linux.png create mode 100644 tests/utils/spacer.spec.ts-snapshots/spacer-size-xl-light-chromium-linux.png create mode 100644 tests/utils/spacer.spec.ts-snapshots/spacer-size-xs-dark-chromium-linux.png create mode 100644 tests/utils/spacer.spec.ts-snapshots/spacer-size-xs-light-chromium-linux.png create mode 100644 tests/utils/spacer.spec.ts-snapshots/spacer-size-xxl-dark-chromium-linux.png create mode 100644 tests/utils/spacer.spec.ts-snapshots/spacer-size-xxl-light-chromium-linux.png diff --git a/src/components/Spacer/Spacer.stories.tsx b/src/components/Spacer/Spacer.stories.tsx index 3dd6a97b9..2ffc72dd7 100644 --- a/src/components/Spacer/Spacer.stories.tsx +++ b/src/components/Spacer/Spacer.stories.tsx @@ -1,5 +1,6 @@ import { Meta, StoryObj } from '@storybook/react-vite'; import { Spacer } from '@/components/Spacer'; +import type { SizeType } from '@/components/Spacer'; const meta: Meta = { component: Spacer, @@ -11,8 +12,53 @@ export default meta; type Story = StoryObj; +const SpacerHarness = ({ size }: { size?: SizeType }) => ( +
+
+ +
+
+); + export const Playground: Story = { args: { size: 'xxl', }, }; + +export const SizeXs: Story = { + render: () => , +}; + +export const SizeSm: Story = { + render: () => , +}; + +export const SizeMd: Story = { + render: () => , +}; + +export const SizeLg: Story = { + render: () => , +}; + +export const SizeXl: Story = { + render: () => , +}; + +export const SizeXxl: Story = { + render: () => , +}; + +export const DefaultSize: Story = { + render: () => , +}; diff --git a/tests/utils/spacer.spec.ts b/tests/utils/spacer.spec.ts new file mode 100644 index 000000000..43b5f9b22 --- /dev/null +++ b/tests/utils/spacer.spec.ts @@ -0,0 +1,172 @@ +import { test as it, expect } from '@playwright/test'; +import { getStoryUrl } from './index'; + +const { describe, use } = it; + +const harnessLocator = '[data-testid="spacer-harness"]'; + +describe('Spacer Visual Regression', () => { + describe('Light Theme (Storybook Global)', () => { + describe('Size Variants', () => { + it('xs size matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('display-spacer--size-xs', 'light'), { + waitUntil: 'networkidle', + }); + const harness = page.locator(harnessLocator).first(); + await expect(harness).toBeVisible({ timeout: 10000 }); + await expect(harness).toHaveScreenshot('spacer-size-xs-light.png', { + maxDiffPixels: 100, + }); + }); + + it('sm size matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('display-spacer--size-sm', 'light'), { + waitUntil: 'networkidle', + }); + const harness = page.locator(harnessLocator).first(); + await expect(harness).toBeVisible({ timeout: 10000 }); + await expect(harness).toHaveScreenshot('spacer-size-sm-light.png', { + maxDiffPixels: 100, + }); + }); + + it('md size matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('display-spacer--size-md', 'light'), { + waitUntil: 'networkidle', + }); + const harness = page.locator(harnessLocator).first(); + await expect(harness).toBeVisible({ timeout: 10000 }); + await expect(harness).toHaveScreenshot('spacer-size-md-light.png', { + maxDiffPixels: 100, + }); + }); + + it('lg size matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('display-spacer--size-lg', 'light'), { + waitUntil: 'networkidle', + }); + const harness = page.locator(harnessLocator).first(); + await expect(harness).toBeVisible({ timeout: 10000 }); + await expect(harness).toHaveScreenshot('spacer-size-lg-light.png', { + maxDiffPixels: 100, + }); + }); + + it('xl size matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('display-spacer--size-xl', 'light'), { + waitUntil: 'networkidle', + }); + const harness = page.locator(harnessLocator).first(); + await expect(harness).toBeVisible({ timeout: 10000 }); + await expect(harness).toHaveScreenshot('spacer-size-xl-light.png', { + maxDiffPixels: 100, + }); + }); + + it('xxl size matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('display-spacer--size-xxl', 'light'), { + waitUntil: 'networkidle', + }); + const harness = page.locator(harnessLocator).first(); + await expect(harness).toBeVisible({ timeout: 10000 }); + await expect(harness).toHaveScreenshot('spacer-size-xxl-light.png', { + maxDiffPixels: 100, + }); + }); + + it('default size matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('display-spacer--default-size', 'light'), { + waitUntil: 'networkidle', + }); + const harness = page.locator(harnessLocator).first(); + await expect(harness).toBeVisible({ timeout: 10000 }); + await expect(harness).toHaveScreenshot('spacer-default-size-light.png', { + maxDiffPixels: 100, + }); + }); + }); + }); + + describe('Dark Theme (System prefers-color-scheme)', () => { + use({ colorScheme: 'dark' }); + + describe('Size Variants', () => { + it('xs size matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('display-spacer--size-xs'), { + waitUntil: 'networkidle', + }); + const harness = page.locator(harnessLocator).first(); + await expect(harness).toBeVisible({ timeout: 10000 }); + await expect(harness).toHaveScreenshot('spacer-size-xs-dark.png', { + maxDiffPixels: 100, + }); + }); + + it('sm size matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('display-spacer--size-sm'), { + waitUntil: 'networkidle', + }); + const harness = page.locator(harnessLocator).first(); + await expect(harness).toBeVisible({ timeout: 10000 }); + await expect(harness).toHaveScreenshot('spacer-size-sm-dark.png', { + maxDiffPixels: 100, + }); + }); + + it('md size matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('display-spacer--size-md'), { + waitUntil: 'networkidle', + }); + const harness = page.locator(harnessLocator).first(); + await expect(harness).toBeVisible({ timeout: 10000 }); + await expect(harness).toHaveScreenshot('spacer-size-md-dark.png', { + maxDiffPixels: 100, + }); + }); + + it('lg size matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('display-spacer--size-lg'), { + waitUntil: 'networkidle', + }); + const harness = page.locator(harnessLocator).first(); + await expect(harness).toBeVisible({ timeout: 10000 }); + await expect(harness).toHaveScreenshot('spacer-size-lg-dark.png', { + maxDiffPixels: 100, + }); + }); + + it('xl size matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('display-spacer--size-xl'), { + waitUntil: 'networkidle', + }); + const harness = page.locator(harnessLocator).first(); + await expect(harness).toBeVisible({ timeout: 10000 }); + await expect(harness).toHaveScreenshot('spacer-size-xl-dark.png', { + maxDiffPixels: 100, + }); + }); + + it('xxl size matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('display-spacer--size-xxl'), { + waitUntil: 'networkidle', + }); + const harness = page.locator(harnessLocator).first(); + await expect(harness).toBeVisible({ timeout: 10000 }); + await expect(harness).toHaveScreenshot('spacer-size-xxl-dark.png', { + maxDiffPixels: 100, + }); + }); + + it('default size matches snapshot', async ({ page }) => { + await page.goto(getStoryUrl('display-spacer--default-size'), { + waitUntil: 'networkidle', + }); + const harness = page.locator(harnessLocator).first(); + await expect(harness).toBeVisible({ timeout: 10000 }); + await expect(harness).toHaveScreenshot('spacer-default-size-dark.png', { + maxDiffPixels: 100, + }); + }); + }); + }); +}); diff --git a/tests/utils/spacer.spec.ts-snapshots/spacer-default-size-dark-chromium-linux.png b/tests/utils/spacer.spec.ts-snapshots/spacer-default-size-dark-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..66c8f1ae3cac6ea2bc003b20bda998bd4e6c92b0 GIT binary patch literal 256 zcmeAS@N?(olHy`uVBq!ia0vp^3xL>xg9%6qy?p%xNNx3WaSW-L^X85t?*RiImV;Zk zgqn@(IUa7DwQ$3(_jhMnmi%ouX?)DmCv4&Oz=BxD?%mZdHW5_*`%lW&$bvZs3Ym^` s%BU01um!sN|Nr_%3nd_f4del41_=eGCM~8*1wau7Pgg&ebxsLQ0Lo@xA^-pY literal 0 HcmV?d00001 diff --git a/tests/utils/spacer.spec.ts-snapshots/spacer-default-size-light-chromium-linux.png b/tests/utils/spacer.spec.ts-snapshots/spacer-default-size-light-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..66c8f1ae3cac6ea2bc003b20bda998bd4e6c92b0 GIT binary patch literal 256 zcmeAS@N?(olHy`uVBq!ia0vp^3xL>xg9%6qy?p%xNNx3WaSW-L^X85t?*RiImV;Zk zgqn@(IUa7DwQ$3(_jhMnmi%ouX?)DmCv4&Oz=BxD?%mZdHW5_*`%lW&$bvZs3Ym^` s%BU01um!sN|Nr_%3nd_f4del41_=eGCM~8*1wau7Pgg&ebxsLQ0Lo@xA^-pY literal 0 HcmV?d00001 diff --git a/tests/utils/spacer.spec.ts-snapshots/spacer-size-lg-dark-chromium-linux.png b/tests/utils/spacer.spec.ts-snapshots/spacer-size-lg-dark-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..007fbd0cb6a24593453198991f85bbc9a306926b GIT binary patch literal 292 zcmeAS@N?(olHy`uVBq!ia0vp^3xGI)g9%6q+P_Q&Qa3$a978JRyt(Vhd%%E)<=_@B zp=RTHj)xm(E!?o{``wwAC4bvZ8XvRt30wF*uppMPdw2DVO~fn5WA^VqYFi@<<{T(w vI?gGhPCUaF=(qp>xg9%6qy?p%xNNx3WaSW-L^X85t?*RiImV;Zk zgqn@(IUa7DwQ$3(_jhMnmi%ouX?)DmCv4&Oz=BxD?%mZdHW5_*`%lW&$bvZs3Ym^` s%BU01um!sN|Nr_%3nd_f4del41_=eGCM~8*1wau7Pgg&ebxsLQ0Lo@xA^-pY literal 0 HcmV?d00001 diff --git a/tests/utils/spacer.spec.ts-snapshots/spacer-size-md-light-chromium-linux.png b/tests/utils/spacer.spec.ts-snapshots/spacer-size-md-light-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..66c8f1ae3cac6ea2bc003b20bda998bd4e6c92b0 GIT binary patch literal 256 zcmeAS@N?(olHy`uVBq!ia0vp^3xL>xg9%6qy?p%xNNx3WaSW-L^X85t?*RiImV;Zk zgqn@(IUa7DwQ$3(_jhMnmi%ouX?)DmCv4&Oz=BxD?%mZdHW5_*`%lW&$bvZs3Ym^` s%BU01um!sN|Nr_%3nd_f4del41_=eGCM~8*1wau7Pgg&ebxsLQ0Lo@xA^-pY literal 0 HcmV?d00001 diff --git a/tests/utils/spacer.spec.ts-snapshots/spacer-size-sm-dark-chromium-linux.png b/tests/utils/spacer.spec.ts-snapshots/spacer-size-sm-dark-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..309e7005962239c0a57f8d189f48c98bd8e81917 GIT binary patch literal 238 zcmeAS@N?(olHy`uVBq!ia0vp^3xL>yg9%7}oskj(q!xR+IEGZrd2`#5_kaNp%fT&N zLe0kY91l0nTDW1?^Sd)GOa8W-G(KkO6SnYsU_mTn_wMQ!o6wa1{?mM0hZIAgHp&5A l`TxImK%D`Q!3J_JGsEr)Ohvr*8PkCx44$rjF6*2UngGh)S!DnK literal 0 HcmV?d00001 diff --git a/tests/utils/spacer.spec.ts-snapshots/spacer-size-sm-light-chromium-linux.png b/tests/utils/spacer.spec.ts-snapshots/spacer-size-sm-light-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..309e7005962239c0a57f8d189f48c98bd8e81917 GIT binary patch literal 238 zcmeAS@N?(olHy`uVBq!ia0vp^3xL>yg9%7}oskj(q!xR+IEGZrd2`#5_kaNp%fT&N zLe0kY91l0nTDW1?^Sd)GOa8W-G(KkO6SnYsU_mTn_wMQ!o6wa1{?mM0hZIAgHp&5A l`TxImK%D`Q!3J_JGsEr)Ohvr*8PkCx44$rjF6*2UngGh)S!DnK literal 0 HcmV?d00001 diff --git a/tests/utils/spacer.spec.ts-snapshots/spacer-size-xl-dark-chromium-linux.png b/tests/utils/spacer.spec.ts-snapshots/spacer-size-xl-dark-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..2cce1f16edd8ae728435a3cef95aee4a17b1ea49 GIT binary patch literal 326 zcmeAS@N?(olHy`uVBq!ia0vp^3xGI*g9%8Ay1qLHq<(w4IEGZrd2^YO_kaPl<8Q$+=I<)l<8Q$+=I<)wg9%7Vo_=Ntq?$Zk978JRyt&B83zRru@F|A# zpX;OKOx-W<-(C3HW^%Bw=`qW3&OTuobql|OIS(wTE$|NLi2wf|Ug}-|WUzr;!_44p W$8hpwg9%7Vo_=Ntq?$Zk978JRyt&B83zRru@F|A# zpX;OKOx-W<-(C3HW^%Bw=`qW3&OTuobql|OIS(wTE$|NLi2wf|Ug}-|WUzr;!_44p W$8hpEaktG3U)?M&1JkJO?)X zlbX~dUC;4Y@TSP3Id^4u{ZsUPVA1%PrBB$xk66aJz2z^83g#RrWIE0%qdpiIwY#lL vEQ$93+_!STfcpR6;zz$EkiiBDDrSa%51AgZoDAFz6k+gm^>bP0l+XkKFz$wb literal 0 HcmV?d00001 diff --git a/tests/utils/spacer.spec.ts-snapshots/spacer-size-xxl-light-chromium-linux.png b/tests/utils/spacer.spec.ts-snapshots/spacer-size-xxl-light-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..be27e9e80dc16c2f402c3a4486b7a6e07185b8ad GIT binary patch literal 362 zcmeAS@N?(olHy`uVBq!ia0vp^3xK$Qg9%8AO@0%~z`!W)>EaktG3U)?M&1JkJO?)X zlbX~dUC;4Y@TSP3Id^4u{ZsUPVA1%PrBB$xk66aJz2z^83g#RrWIE0%qdpiIwY#lL vEQ$93+_!STfcpR6;zz$EkiiBDDrSa%51AgZoDAFz6k+gm^>bP0l+XkKFz$wb literal 0 HcmV?d00001 From 7c56fc41dec07f25407df29894b53bc83763e130 Mon Sep 17 00:00:00 2001 From: Dani Sandoval Date: Wed, 27 May 2026 11:04:46 -0600 Subject: [PATCH 2/3] chore(Spacer): migrate styling from styled-components to CSS Modules --- .changeset/migrate-spacer-to-css-modules.md | 5 ++++ src/components/Spacer/Spacer.module.css | 29 +++++++++++++++++++ src/components/Spacer/Spacer.tsx | 32 ++++++++++++++------- 3 files changed, 55 insertions(+), 11 deletions(-) create mode 100644 .changeset/migrate-spacer-to-css-modules.md create mode 100644 src/components/Spacer/Spacer.module.css diff --git a/.changeset/migrate-spacer-to-css-modules.md b/.changeset/migrate-spacer-to-css-modules.md new file mode 100644 index 000000000..6fff6ca11 --- /dev/null +++ b/.changeset/migrate-spacer-to-css-modules.md @@ -0,0 +1,5 @@ +--- +'@clickhouse/click-ui': patch +--- + +Migrate Spacer from styled-components to css modules with no change in behavior diff --git a/src/components/Spacer/Spacer.module.css b/src/components/Spacer/Spacer.module.css new file mode 100644 index 000000000..c767a8b5f --- /dev/null +++ b/src/components/Spacer/Spacer.module.css @@ -0,0 +1,29 @@ +.spacer { + display: flex; + padding: var(--click-spacer-horizontal-space-y-md) var(--click-spacer-horizontal-space-x-all); + background: transparent; +} + +.spacer_size_xs { + padding: var(--click-spacer-horizontal-space-y-xs) var(--click-spacer-horizontal-space-x-all); +} + +.spacer_size_sm { + padding: var(--click-spacer-horizontal-space-y-sm) var(--click-spacer-horizontal-space-x-all); +} + +.spacer_size_md { + padding: var(--click-spacer-horizontal-space-y-md) var(--click-spacer-horizontal-space-x-all); +} + +.spacer_size_lg { + padding: var(--click-spacer-horizontal-space-y-lg) var(--click-spacer-horizontal-space-x-all); +} + +.spacer_size_xl { + padding: var(--click-spacer-horizontal-space-y-xl) var(--click-spacer-horizontal-space-x-all); +} + +.spacer_size_xxl { + padding: var(--click-spacer-horizontal-space-y-xxl) var(--click-spacer-horizontal-space-x-all); +} diff --git a/src/components/Spacer/Spacer.tsx b/src/components/Spacer/Spacer.tsx index e44ea6290..dfe8eb3d3 100644 --- a/src/components/Spacer/Spacer.tsx +++ b/src/components/Spacer/Spacer.tsx @@ -1,13 +1,23 @@ -import { styled } from 'styled-components'; -import { SpacerProps, SizeType } from './Spacer.types'; +import { cn, cva } from '@/lib/cva'; +import { SpacerProps } from './Spacer.types'; +import styles from './Spacer.module.css'; -const CUISpacer = styled.div<{ - $size?: SizeType; -}>` - background: transparent; - display: flex; - padding: ${({ theme, $size = 'md' }) => - `${theme.click.spacer.horizontal.space.y[$size]} ${theme.click.spacer.horizontal.space.x.all}`}; -`; +const spacerVariants = cva(styles.spacer, { + variants: { + size: { + xs: styles['spacer_size_xs'], + sm: styles['spacer_size_sm'], + md: styles['spacer_size_md'], + lg: styles['spacer_size_lg'], + xl: styles['spacer_size_xl'], + xxl: styles['spacer_size_xxl'], + }, + }, + defaultVariants: { + size: 'md', + }, +}); -export const Spacer = ({ size }: SpacerProps) => ; +export const Spacer = ({ size }: SpacerProps) => ( +
+); From b3e26572840e6324d9770d0f555e97f0b1a493fd Mon Sep 17 00:00:00 2001 From: Dani Sandoval Date: Wed, 27 May 2026 11:31:04 -0600 Subject: [PATCH 3/3] chore(Spacer): address Copilot review on PR #1045 - Move tests/utils/spacer.spec.ts to tests/display/ (and matching snapshots). tests/utils/ is reserved for shared helpers like getStoryUrl; component specs belong in component-family folders, matching tests/buttons/ and tests/cards/. - Drop redundant `padding` from `.spacer` base class. The size variant is always applied via cva's `defaultVariants: { size: 'md' }`, so the duplicate value would have drifted over time. Visual regression remains byte-for-byte: 14/14 snapshots match without regeneration. --- src/components/Spacer/Spacer.module.css | 1 - tests/{utils => display}/spacer.spec.ts | 2 +- .../spacer-default-size-dark-chromium-linux.png | Bin .../spacer-default-size-light-chromium-linux.png | Bin .../spacer-size-lg-dark-chromium-linux.png | Bin .../spacer-size-lg-light-chromium-linux.png | Bin .../spacer-size-md-dark-chromium-linux.png | Bin .../spacer-size-md-light-chromium-linux.png | Bin .../spacer-size-sm-dark-chromium-linux.png | Bin .../spacer-size-sm-light-chromium-linux.png | Bin .../spacer-size-xl-dark-chromium-linux.png | Bin .../spacer-size-xl-light-chromium-linux.png | Bin .../spacer-size-xs-dark-chromium-linux.png | Bin .../spacer-size-xs-light-chromium-linux.png | Bin .../spacer-size-xxl-dark-chromium-linux.png | Bin .../spacer-size-xxl-light-chromium-linux.png | Bin 16 files changed, 1 insertion(+), 2 deletions(-) rename tests/{utils => display}/spacer.spec.ts (99%) rename tests/{utils => display}/spacer.spec.ts-snapshots/spacer-default-size-dark-chromium-linux.png (100%) rename tests/{utils => display}/spacer.spec.ts-snapshots/spacer-default-size-light-chromium-linux.png (100%) rename tests/{utils => display}/spacer.spec.ts-snapshots/spacer-size-lg-dark-chromium-linux.png (100%) rename tests/{utils => display}/spacer.spec.ts-snapshots/spacer-size-lg-light-chromium-linux.png (100%) rename tests/{utils => display}/spacer.spec.ts-snapshots/spacer-size-md-dark-chromium-linux.png (100%) rename tests/{utils => display}/spacer.spec.ts-snapshots/spacer-size-md-light-chromium-linux.png (100%) rename tests/{utils => display}/spacer.spec.ts-snapshots/spacer-size-sm-dark-chromium-linux.png (100%) rename tests/{utils => display}/spacer.spec.ts-snapshots/spacer-size-sm-light-chromium-linux.png (100%) rename tests/{utils => display}/spacer.spec.ts-snapshots/spacer-size-xl-dark-chromium-linux.png (100%) rename tests/{utils => display}/spacer.spec.ts-snapshots/spacer-size-xl-light-chromium-linux.png (100%) rename tests/{utils => display}/spacer.spec.ts-snapshots/spacer-size-xs-dark-chromium-linux.png (100%) rename tests/{utils => display}/spacer.spec.ts-snapshots/spacer-size-xs-light-chromium-linux.png (100%) rename tests/{utils => display}/spacer.spec.ts-snapshots/spacer-size-xxl-dark-chromium-linux.png (100%) rename tests/{utils => display}/spacer.spec.ts-snapshots/spacer-size-xxl-light-chromium-linux.png (100%) diff --git a/src/components/Spacer/Spacer.module.css b/src/components/Spacer/Spacer.module.css index c767a8b5f..7c1e1833c 100644 --- a/src/components/Spacer/Spacer.module.css +++ b/src/components/Spacer/Spacer.module.css @@ -1,6 +1,5 @@ .spacer { display: flex; - padding: var(--click-spacer-horizontal-space-y-md) var(--click-spacer-horizontal-space-x-all); background: transparent; } diff --git a/tests/utils/spacer.spec.ts b/tests/display/spacer.spec.ts similarity index 99% rename from tests/utils/spacer.spec.ts rename to tests/display/spacer.spec.ts index 43b5f9b22..aa10cc462 100644 --- a/tests/utils/spacer.spec.ts +++ b/tests/display/spacer.spec.ts @@ -1,5 +1,5 @@ import { test as it, expect } from '@playwright/test'; -import { getStoryUrl } from './index'; +import { getStoryUrl } from '../utils'; const { describe, use } = it; diff --git a/tests/utils/spacer.spec.ts-snapshots/spacer-default-size-dark-chromium-linux.png b/tests/display/spacer.spec.ts-snapshots/spacer-default-size-dark-chromium-linux.png similarity index 100% rename from tests/utils/spacer.spec.ts-snapshots/spacer-default-size-dark-chromium-linux.png rename to tests/display/spacer.spec.ts-snapshots/spacer-default-size-dark-chromium-linux.png diff --git a/tests/utils/spacer.spec.ts-snapshots/spacer-default-size-light-chromium-linux.png b/tests/display/spacer.spec.ts-snapshots/spacer-default-size-light-chromium-linux.png similarity index 100% rename from tests/utils/spacer.spec.ts-snapshots/spacer-default-size-light-chromium-linux.png rename to tests/display/spacer.spec.ts-snapshots/spacer-default-size-light-chromium-linux.png diff --git a/tests/utils/spacer.spec.ts-snapshots/spacer-size-lg-dark-chromium-linux.png b/tests/display/spacer.spec.ts-snapshots/spacer-size-lg-dark-chromium-linux.png similarity index 100% rename from tests/utils/spacer.spec.ts-snapshots/spacer-size-lg-dark-chromium-linux.png rename to tests/display/spacer.spec.ts-snapshots/spacer-size-lg-dark-chromium-linux.png diff --git a/tests/utils/spacer.spec.ts-snapshots/spacer-size-lg-light-chromium-linux.png b/tests/display/spacer.spec.ts-snapshots/spacer-size-lg-light-chromium-linux.png similarity index 100% rename from tests/utils/spacer.spec.ts-snapshots/spacer-size-lg-light-chromium-linux.png rename to tests/display/spacer.spec.ts-snapshots/spacer-size-lg-light-chromium-linux.png diff --git a/tests/utils/spacer.spec.ts-snapshots/spacer-size-md-dark-chromium-linux.png b/tests/display/spacer.spec.ts-snapshots/spacer-size-md-dark-chromium-linux.png similarity index 100% rename from tests/utils/spacer.spec.ts-snapshots/spacer-size-md-dark-chromium-linux.png rename to tests/display/spacer.spec.ts-snapshots/spacer-size-md-dark-chromium-linux.png diff --git a/tests/utils/spacer.spec.ts-snapshots/spacer-size-md-light-chromium-linux.png b/tests/display/spacer.spec.ts-snapshots/spacer-size-md-light-chromium-linux.png similarity index 100% rename from tests/utils/spacer.spec.ts-snapshots/spacer-size-md-light-chromium-linux.png rename to tests/display/spacer.spec.ts-snapshots/spacer-size-md-light-chromium-linux.png diff --git a/tests/utils/spacer.spec.ts-snapshots/spacer-size-sm-dark-chromium-linux.png b/tests/display/spacer.spec.ts-snapshots/spacer-size-sm-dark-chromium-linux.png similarity index 100% rename from tests/utils/spacer.spec.ts-snapshots/spacer-size-sm-dark-chromium-linux.png rename to tests/display/spacer.spec.ts-snapshots/spacer-size-sm-dark-chromium-linux.png diff --git a/tests/utils/spacer.spec.ts-snapshots/spacer-size-sm-light-chromium-linux.png b/tests/display/spacer.spec.ts-snapshots/spacer-size-sm-light-chromium-linux.png similarity index 100% rename from tests/utils/spacer.spec.ts-snapshots/spacer-size-sm-light-chromium-linux.png rename to tests/display/spacer.spec.ts-snapshots/spacer-size-sm-light-chromium-linux.png diff --git a/tests/utils/spacer.spec.ts-snapshots/spacer-size-xl-dark-chromium-linux.png b/tests/display/spacer.spec.ts-snapshots/spacer-size-xl-dark-chromium-linux.png similarity index 100% rename from tests/utils/spacer.spec.ts-snapshots/spacer-size-xl-dark-chromium-linux.png rename to tests/display/spacer.spec.ts-snapshots/spacer-size-xl-dark-chromium-linux.png diff --git a/tests/utils/spacer.spec.ts-snapshots/spacer-size-xl-light-chromium-linux.png b/tests/display/spacer.spec.ts-snapshots/spacer-size-xl-light-chromium-linux.png similarity index 100% rename from tests/utils/spacer.spec.ts-snapshots/spacer-size-xl-light-chromium-linux.png rename to tests/display/spacer.spec.ts-snapshots/spacer-size-xl-light-chromium-linux.png diff --git a/tests/utils/spacer.spec.ts-snapshots/spacer-size-xs-dark-chromium-linux.png b/tests/display/spacer.spec.ts-snapshots/spacer-size-xs-dark-chromium-linux.png similarity index 100% rename from tests/utils/spacer.spec.ts-snapshots/spacer-size-xs-dark-chromium-linux.png rename to tests/display/spacer.spec.ts-snapshots/spacer-size-xs-dark-chromium-linux.png diff --git a/tests/utils/spacer.spec.ts-snapshots/spacer-size-xs-light-chromium-linux.png b/tests/display/spacer.spec.ts-snapshots/spacer-size-xs-light-chromium-linux.png similarity index 100% rename from tests/utils/spacer.spec.ts-snapshots/spacer-size-xs-light-chromium-linux.png rename to tests/display/spacer.spec.ts-snapshots/spacer-size-xs-light-chromium-linux.png diff --git a/tests/utils/spacer.spec.ts-snapshots/spacer-size-xxl-dark-chromium-linux.png b/tests/display/spacer.spec.ts-snapshots/spacer-size-xxl-dark-chromium-linux.png similarity index 100% rename from tests/utils/spacer.spec.ts-snapshots/spacer-size-xxl-dark-chromium-linux.png rename to tests/display/spacer.spec.ts-snapshots/spacer-size-xxl-dark-chromium-linux.png diff --git a/tests/utils/spacer.spec.ts-snapshots/spacer-size-xxl-light-chromium-linux.png b/tests/display/spacer.spec.ts-snapshots/spacer-size-xxl-light-chromium-linux.png similarity index 100% rename from tests/utils/spacer.spec.ts-snapshots/spacer-size-xxl-light-chromium-linux.png rename to tests/display/spacer.spec.ts-snapshots/spacer-size-xxl-light-chromium-linux.png