Skip to content

Commit

Permalink
fix(sbb-visual-checkbox): fix high contrast mode of indeterminate sta…
Browse files Browse the repository at this point in the history
…te (#2845)
  • Loading branch information
jeripeierSBB authored Jun 27, 2024
1 parent 06112a4 commit f7e5adb
Show file tree
Hide file tree
Showing 3 changed files with 61 additions and 2 deletions.
8 changes: 8 additions & 0 deletions src/elements/core/testing/private/fixture.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { emulateMedia } from '@web/test-runner-commands';
import type { TemplateResult } from 'lit';
import { styleMap } from 'lit/directives/style-map.js';

Expand Down Expand Up @@ -89,10 +90,17 @@ export async function visualRegressionFixture<T extends HTMLElement>(
focusOutlineDark?: boolean;
padding?: string;
minHeight?: string;
forcedColors?: boolean;
},
): Promise<T> {
const base = tryFindBase(new Error().stack!);
const { html } = await import('lit-html');

await emulateMedia({
forcedColors: wrapperStyles?.forcedColors ? 'active' : 'none',
colorScheme: wrapperStyles?.forcedColors ? 'dark' : 'light',
});

return await fixture<T>(
html`<div
id="visual-regression-fixture-wrapper"
Expand Down
4 changes: 2 additions & 2 deletions src/elements/visual-checkbox/visual-checkbox.scss
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@
outline: var(--sbb-border-width-2x) solid ButtonBorder;
outline-offset: calc(-1 * var(--sbb-border-width-2x));

:host([checked]) & {
:host([checked]:not([indeterminate])) & {
background-color: HighLight;
outline: none;
}
Expand All @@ -90,7 +90,7 @@
outline-color: GrayText;
}

:host([checked][disabled]) & {
:host([checked][disabled]:not([indeterminate])) & {
background-color: GrayText;
}
}
Expand Down
51 changes: 51 additions & 0 deletions src/elements/visual-checkbox/visual-checkbox.visual.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import { html } from 'lit';

import {
describeEach,
describeViewports,
visualDiffDefault,
visualRegressionFixture,
} from '../core/testing/private.js';

import './visual-checkbox.js';

describe(`sbb-visual-checkbox`, () => {
const cases = {
state: [
{ indeterminate: undefined, checked: true },
{ indeterminate: undefined, checked: false },
{ indeterminate: true, checked: true },
],
disabled: [false, true],
negative: [false, true],
forcedColors: [false, true],
};

describeViewports({ viewports: ['zero'] }, () => {
let root: HTMLElement;

describeEach(cases, ({ state, disabled, negative, forcedColors }) => {
beforeEach(async function () {
root = await visualRegressionFixture(
html`<sbb-visual-checkbox
?indeterminate=${state.indeterminate}
?checked=${state.checked}
?disabled=${disabled}
?negative=${negative}
></sbb-visual-checkbox>`,
{
forcedColors,
backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
},
);
});

it(
visualDiffDefault.name,
visualDiffDefault.with((setup) => {
setup.withSnapshotElement(root);
}),
);
});
});
});

0 comments on commit f7e5adb

Please sign in to comment.