Skip to content

Commit

Permalink
fix(sbb-button): fix high contrast styles (#2890)
Browse files Browse the repository at this point in the history
  • Loading branch information
jeripeierSBB authored Jul 8, 2024
1 parent 159baa0 commit 8f9237c
Show file tree
Hide file tree
Showing 31 changed files with 480 additions and 152 deletions.
2 changes: 1 addition & 1 deletion src/elements/button/button-link/button-link.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -61,7 +61,7 @@ const meta: Meta = {
decorators: commonDecorators,
parameters: {
backgroundColor: (context: StoryContext) =>
context.args.negative ? '#484040' : 'var(--sbb-color-white)',
context.args.negative ? 'var(--sbb-color-iron)' : 'var(--sbb-color-white)',
actions: {
handles: ['click'],
},
Expand Down
54 changes: 54 additions & 0 deletions src/elements/button/button-link/button-link.visual.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import { html } from 'lit';

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

import './button-link.js';

// We test only the differences to the sbb-button
describe(`sbb-button-link`, () => {
let root: HTMLElement;

const cases = {
disabled: [false, true],
negative: [false, true],
forcedColors: [false, true],
};

describeViewports({ viewports: ['zero'] }, () => {
describeEach(cases, ({ disabled, negative, forcedColors }) => {
beforeEach(async function () {
root = await visualRegressionFixture(
html`
<sbb-button-link
?disabled=${disabled}
?negative=${negative}
icon-name="arrow-right-small"
href="#"
>
Button
</sbb-button-link>
`,
{
backgroundColor: negative ? 'var(--sbb-color-iron)' : undefined,
focusOutlineDark: negative,
forcedColors,
},
);
});

for (const state of visualDiffStandardStates) {
it(
state.name,
state.with((setup) => {
setup.withSnapshotElement(root);
}),
);
}
});
});
});
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
/* @web/test-runner snapshot v1 */
export const snapshots = {};

snapshots["sbb-button-static renders a sbb-button-static without icon DOM"] =
snapshots["sbb-button-static renders without icon DOM"] =
`<sbb-button-static
data-action=""
data-sbb-button=""
Expand All @@ -14,9 +14,9 @@ snapshots["sbb-button-static renders a sbb-button-static without icon DOM"] =
Label Text
</sbb-button-static>
`;
/* end snapshot sbb-button-static renders a sbb-button-static without icon DOM */
/* end snapshot sbb-button-static renders without icon DOM */

snapshots["sbb-button-static renders a sbb-button-static without icon Shadow DOM"] =
snapshots["sbb-button-static renders without icon Shadow DOM"] =
`<span class="sbb-action-base sbb-button-static">
<slot name="icon">
</slot>
Expand All @@ -26,9 +26,9 @@ snapshots["sbb-button-static renders a sbb-button-static without icon Shadow DOM
</span>
</span>
`;
/* end snapshot sbb-button-static renders a sbb-button-static without icon Shadow DOM */
/* end snapshot sbb-button-static renders without icon Shadow DOM */

snapshots["sbb-button-static renders a sbb-button-static with slotted icon DOM"] =
snapshots["sbb-button-static renders with slotted icon DOM"] =
`<sbb-button-static
data-action=""
data-sbb-button=""
Expand All @@ -47,9 +47,9 @@ snapshots["sbb-button-static renders a sbb-button-static with slotted icon DOM"]
Label Text
</sbb-button-static>
`;
/* end snapshot sbb-button-static renders a sbb-button-static with slotted icon DOM */
/* end snapshot sbb-button-static renders with slotted icon DOM */

snapshots["sbb-button-static renders a sbb-button-static with slotted icon Shadow DOM"] =
snapshots["sbb-button-static renders with slotted icon Shadow DOM"] =
`<span class="sbb-action-base sbb-button-static">
<slot name="icon">
</slot>
Expand All @@ -59,9 +59,9 @@ snapshots["sbb-button-static renders a sbb-button-static with slotted icon Shado
</span>
</span>
`;
/* end snapshot sbb-button-static renders a sbb-button-static with slotted icon Shadow DOM */
/* end snapshot sbb-button-static renders with slotted icon Shadow DOM */

snapshots["sbb-button-static renders a sbb-button-static with slotted icon A11y tree Chrome"] =
snapshots["sbb-button-static renders with slotted icon A11y tree Chrome"] =
`<p>
{
"role": "WebArea",
Expand All @@ -75,9 +75,9 @@ snapshots["sbb-button-static renders a sbb-button-static with slotted icon A11y
}
</p>
`;
/* end snapshot sbb-button-static renders a sbb-button-static with slotted icon A11y tree Chrome */
/* end snapshot sbb-button-static renders with slotted icon A11y tree Chrome */

snapshots["sbb-button-static renders a sbb-button-static with slotted icon A11y tree Firefox"] =
snapshots["sbb-button-static renders with slotted icon A11y tree Firefox"] =
`<p>
{
"role": "document",
Expand All @@ -91,5 +91,5 @@ snapshots["sbb-button-static renders a sbb-button-static with slotted icon A11y
}
</p>
`;
/* end snapshot sbb-button-static renders a sbb-button-static with slotted icon A11y tree Firefox */
/* end snapshot sbb-button-static renders with slotted icon A11y tree Firefox */

Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import './button-static.js';
describe(`sbb-button-static`, () => {
let element: SbbButtonStaticElement;

describe('renders a sbb-button-static without icon', async () => {
describe('renders without icon', async () => {
beforeEach(async () => {
element = await fixture(buttonTestTemplate('sbb-button-static', true));
});
Expand All @@ -24,7 +24,7 @@ describe(`sbb-button-static`, () => {
});
});

describe('renders a sbb-button-static with slotted icon', async () => {
describe('renders with slotted icon', async () => {
beforeEach(async () => {
element = await fixture(buttonSlottedIconTestTemplate('sbb-button-static'));
});
Expand Down
2 changes: 1 addition & 1 deletion src/elements/button/button-static/button-static.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ const meta: Meta = {
decorators: commonDecorators,
parameters: {
backgroundColor: (context: StoryContext) =>
context.args.negative ? '#484040' : 'var(--sbb-color-white)',
context.args.negative ? 'var(--sbb-color-iron)' : 'var(--sbb-color-white)',
actions: {
handles: ['click'],
},
Expand Down
33 changes: 33 additions & 0 deletions src/elements/button/button-static/button-static.visual.spec.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { html } from 'lit';

import {
describeViewports,
visualDiffActive,
visualDiffDefault,
visualDiffHover,
} from '../../core/testing/private.js';

import './button-static.js';

// We test only the differences to the sbb-button and sbb-button-link
describe(`sbb-button-static`, () => {
describeViewports({ viewports: ['zero'] }, () => {
for (const forcedColors of [false, true]) {
describe(`forcedColors=${forcedColors}`, () => {
for (const state of [visualDiffDefault, visualDiffHover, visualDiffActive]) {
it(
state.name,
state.with(async (setup) => {
await setup.withFixture(
html`<sbb-button-static icon-name="arrow-right-small">Button</sbb-button-static>`,
{
forcedColors,
},
);
}),
);
}
});
}
});
});
2 changes: 1 addition & 1 deletion src/elements/button/button/button.stories.ts
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@ const meta: Meta = {
decorators: commonDecorators,
parameters: {
backgroundColor: (context: StoryContext) =>
context.args.negative ? '#484040' : 'var(--sbb-color-white)',
context.args.negative ? 'var(--sbb-color-iron)' : 'var(--sbb-color-white)',
actions: {
handles: ['click'],
},
Expand Down
37 changes: 35 additions & 2 deletions src/elements/button/button/button.visual.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,11 @@ describe(`sbb-button`, () => {
// 'l' as default is covered by other cases.
const sizeCases = { size: ['s', 'm'], icon: [undefined, 'arrow-right-small'] };

const forcedColorCases = {
disabled: [false, true],
negative: [false, true],
};

describeViewports({ viewports: ['zero', 'medium'] }, () => {
describeEach(cases, ({ disabled, negative, state }) => {
beforeEach(async function () {
Expand All @@ -37,7 +42,7 @@ describe(`sbb-button`, () => {
</sbb-button>
`,
{
backgroundColor: negative ? '#484040' : undefined,
backgroundColor: negative ? 'var(--sbb-color-iron)' : undefined,
focusOutlineDark: negative,
},
);
Expand All @@ -58,12 +63,40 @@ describe(`sbb-button`, () => {
visualDiffDefault.name,
visualDiffDefault.with(async (setup) => {
await setup.withFixture(
html`<sbb-button size=${size as 's' | 'm'} .iconName=${icon}>Button</sbb-button>`,
html`<sbb-button size=${size} .iconName=${icon}>Button</sbb-button>`,
);
}),
);
});

describe('forcedColors=true', () => {
describeEach(forcedColorCases, ({ disabled, negative }) => {
beforeEach(async function () {
root = await visualRegressionFixture(
html`
<sbb-button ?disabled=${disabled} ?negative=${negative} icon-name="arrow-right-small">
Button
</sbb-button>
`,
{
backgroundColor: negative ? 'var(--sbb-color-iron)' : undefined,
focusOutlineDark: negative,
forcedColors: true,
},
);
});

for (const state of visualDiffStandardStates) {
it(
state.name,
state.with((setup) => {
setup.withSnapshotElement(root);
}),
);
}
});
});

it(
'with ellipsis',
visualDiffDefault.with(async (setup) => {
Expand Down
44 changes: 26 additions & 18 deletions src/elements/button/common/button-common.scss
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,32 @@ $icon-only: ':where([data-slot-names~=icon], [icon-name]):not([data-slot-names~=
@include sbb.if-forced-colors {
--sbb-button-color-default-border: CanvasText !important;
--sbb-button-color-active-border: Highlight !important;
--sbb-button-color-default-background: Canvas !important;
--sbb-button-color-hover-background: Canvas !important;
--sbb-button-color-active-background: Canvas !important;
--sbb-button-color-disabled-background: Canvas !important;
--sbb-button-color-disabled-text: GrayText !important;

// For static cases, button and link roles will override it.
--sbb-button-color-default-text: CanvasText !important;
--sbb-button-color-hover-text: CanvasText !important;
--sbb-button-color-active-text: CanvasText !important;
}
}

:host([data-button]) {
@include sbb.if-forced-colors {
--sbb-button-color-default-text: ButtonText !important;
--sbb-button-color-hover-text: ButtonText !important;
--sbb-button-color-active-text: ButtonText !important;
}
}

:host([data-link]) {
@include sbb.if-forced-colors {
--sbb-button-color-default-text: LinkText !important;
--sbb-button-color-hover-text: LinkText !important;
--sbb-button-color-active-text: LinkText !important;
}
}

Expand Down Expand Up @@ -83,12 +109,6 @@ $icon-only: ':where([data-slot-names~=icon], [icon-name]):not([data-slot-names~=
--sbb-button-padding-inline: 0;
}

:host([disabled]) {
@include sbb.if-forced-colors {
--sbb-button-color-disabled-text: GrayText !important;
}
}

:host(:not([disabled], :active, [data-active]):hover) {
@include sbb.hover-mq($hover: true) {
--sbb-button-translate-y-content-hover: #{sbb.px-to-rem-build(-1)};
Expand All @@ -104,18 +124,6 @@ $icon-only: ':where([data-slot-names~=icon], [icon-name]):not([data-slot-names~=
}
}

:host([role='button']) {
@include sbb.if-forced-colors {
--sbb-button-color-default-text: ButtonText !important;
--sbb-button-color-hover-text: ButtonText !important;
--sbb-button-color-active-text: ButtonText !important;
--sbb-button-color-default-background: Canvas !important;
--sbb-button-color-hover-background: Canvas !important;
--sbb-button-color-active-background: Canvas !important;
--sbb-button-color-disabled-background: Canvas !important;
}
}

.sbb-action-base {
@include sbb.text-xs--bold;
@include sbb.font-smoothing;
Expand Down
Loading

0 comments on commit 8f9237c

Please sign in to comment.