diff --git a/e2e/specs/mock/scenarios/clickhouse-sidebar-boundaries.spec.ts b/e2e/specs/mock/scenarios/clickhouse-sidebar-boundaries.spec.ts new file mode 100644 index 00000000000..c955e5a0602 --- /dev/null +++ b/e2e/specs/mock/scenarios/clickhouse-sidebar-boundaries.spec.ts @@ -0,0 +1,34 @@ +import { resolve } from 'node:path'; +import { expect, test } from '@playwright/test'; +import { stripVTControlCharacters } from 'node:util'; +import { inOneProject, repoRoot, run } from './lint.helpers'; + +/** + * Controls sit on the sidebar as well as the page, the panels and the dialog, so + * the ClickHouse boundary check measures `surface-sidebar` too. The sidebar holds + * Click UI's background, so its sub-floor boundary pairs are the page's, pinned by + * the same owner decision. The check runs the whole spec, so the pinning test + * compares the pins against the full matrix with the sidebar in it. + */ + +const clientRoot = resolve(repoRoot, 'packages/client'); +const JEST = resolve(repoRoot, 'node_modules/.bin/jest'); +const SPEC = 'src/theme/themes/clickhouse.spec.tsx'; + +test.describe('ClickHouse control boundaries on the sidebar', () => { + test('the boundary and pinning checks hold with the sidebar canvas measured @scenario:clickhouse-sidebar-boundaries-measured', () => { + inOneProject(); + test.setTimeout(180_000); + + const result = run(JEST, [SPEC, '--maxWorkers=1', '--ci', '--verbose'], { cwd: clientRoot }); + const output = stripVTControlCharacters(result.output); + expect(result.status, output).toBe(0); + expect(output.match(/✓ keeps control boundaries and rings at the 3:1 floor/g)).toHaveLength(2); + expect(output.match(/✓ pins every pair that sits below its floor/g)).toHaveLength(2); + expect( + output.match( + /✓ measures control boundaries on the sidebar, below the floor only in its two/g, + ), + ).toHaveLength(2); + }); +}); diff --git a/packages/client/src/theme/themes/clickhouse.spec.tsx b/packages/client/src/theme/themes/clickhouse.spec.tsx index 96f2203b0f2..dbd756835d8 100644 --- a/packages/client/src/theme/themes/clickhouse.spec.tsx +++ b/packages/client/src/theme/themes/clickhouse.spec.tsx @@ -281,6 +281,7 @@ const floorChecks = { 'rgb-surface-secondary', 'rgb-surface-tertiary', 'rgb-surface-dialog', + 'rgb-surface-sidebar', ], }, ], @@ -359,10 +360,12 @@ const clickUiBelowFloor: Record = { 'rgb-border-xheavy on rgb-surface-secondary: 1.90:1 (needs 3:1)', 'rgb-border-xheavy on rgb-surface-tertiary: 1.90:1 (needs 3:1)', 'rgb-border-xheavy on rgb-surface-dialog: 2.03:1 (needs 3:1)', + 'rgb-border-xheavy on rgb-surface-sidebar: 2.03:1 (needs 3:1)', 'rgb-border-control on rgb-surface-primary: 1.24:1 (needs 3:1)', 'rgb-border-control on rgb-surface-secondary: 1.16:1 (needs 3:1)', 'rgb-border-control on rgb-surface-tertiary: 1.16:1 (needs 3:1)', 'rgb-border-control on rgb-surface-dialog: 1.24:1 (needs 3:1)', + 'rgb-border-control on rgb-surface-sidebar: 1.24:1 (needs 3:1)', 'rgb-prose-bullet on rgb-surface-chat: 2.03:1 (needs 3:1)', 'rgb-prose-bullet on rgb-surface-primary: 2.03:1 (needs 3:1)', 'rgb-prose-bullet on rgb-presentation: 2.03:1 (needs 3:1)', @@ -402,10 +405,12 @@ const clickUiBelowFloor: Record = { 'rgb-border-xheavy on rgb-surface-secondary: 1.44:1 (needs 3:1)', 'rgb-border-xheavy on rgb-surface-tertiary: 1.44:1 (needs 3:1)', 'rgb-border-xheavy on rgb-surface-dialog: 1.62:1 (needs 3:1)', + 'rgb-border-xheavy on rgb-surface-sidebar: 1.62:1 (needs 3:1)', 'rgb-border-control on rgb-surface-primary: 1.50:1 (needs 3:1)', 'rgb-border-control on rgb-surface-secondary: 1.34:1 (needs 3:1)', 'rgb-border-control on rgb-surface-tertiary: 1.34:1 (needs 3:1)', 'rgb-border-control on rgb-surface-dialog: 1.50:1 (needs 3:1)', + 'rgb-border-control on rgb-surface-sidebar: 1.50:1 (needs 3:1)', 'rgb-prose-bullet on rgb-surface-chat: 1.62:1 (needs 3:1)', 'rgb-prose-bullet on rgb-surface-primary: 1.62:1 (needs 3:1)', 'rgb-prose-bullet on rgb-presentation: 1.62:1 (needs 3:1)', @@ -500,6 +505,16 @@ describe.each(modes)('clickhouse %s palette', (mode, theme) => { expect(belowPinned(mode, theme, floorChecks.controlBoundaries)).toEqual([]); }); + it('measures control boundaries on the sidebar, below the floor only in its two pinned pairs', () => { + const sidebarPins = clickUiBelowFloor[mode].filter((pair) => + pair.includes(' on rgb-surface-sidebar: '), + ); + expect(sidebarPins).toHaveLength(2); + expect(below(theme, WCAG_NON_TEXT, boundaryTokens, ['rgb-surface-sidebar'])).toEqual( + sidebarPins, + ); + }); + it('keeps the unchecked switch track at the 3:1 floor against the thumb and the checked fill', () => { expect(belowPinned(mode, theme, floorChecks.switchTrack)).toEqual([]); });