From c31cc89e212f02579c2bde8997f49b95e6698d1e Mon Sep 17 00:00:00 2001 From: Jeri Peier Date: Thu, 8 Aug 2024 14:44:31 +0200 Subject: [PATCH] fix(sbb-form-field): fix disabled state for borderless variant (#2994) --- .../form-field/form-field/form-field.scss | 2 +- .../form-field/form-field.visual.spec.ts | 88 ++++++++++++++----- 2 files changed, 65 insertions(+), 25 deletions(-) diff --git a/src/elements/form-field/form-field/form-field.scss b/src/elements/form-field/form-field/form-field.scss index 8130e9d0b8..fad0d2f1c7 100644 --- a/src/elements/form-field/form-field/form-field.scss +++ b/src/elements/form-field/form-field/form-field.scss @@ -220,7 +220,7 @@ } } - :host(:is([data-input-focused], [data-has-popup-open])[borderless]) & { + :host(:is([data-input-focused], [data-has-popup-open], [data-disabled])[borderless]) & { &::after { content: ''; position: absolute; diff --git a/src/elements/form-field/form-field/form-field.visual.spec.ts b/src/elements/form-field/form-field/form-field.visual.spec.ts index 830482a433..825f68696b 100644 --- a/src/elements/form-field/form-field/form-field.visual.spec.ts +++ b/src/elements/form-field/form-field/form-field.visual.spec.ts @@ -174,6 +174,7 @@ describe(`sbb-form-field`, () => { visualDiffState.with(async (setup) => { await setup.withFixture(html`${formField(args, template(args))}`, { backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + focusOutlineDark: negative, forcedColors, }); }), @@ -185,6 +186,7 @@ describe(`sbb-form-field`, () => { const templateResult: TemplateResult = html`${template(args)} ${icons}`; await setup.withFixture(html`${formField(args, templateResult)}`, { backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + focusOutlineDark: negative, forcedColors, }); }), @@ -198,6 +200,7 @@ describe(`sbb-form-field`, () => { ${buttonsAndPopover(args)}`; await setup.withFixture(html`${formField(args, templateResult)}`, { backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + focusOutlineDark: negative, forcedColors, }); }), @@ -210,6 +213,7 @@ describe(`sbb-form-field`, () => { ${buttonsAndPopover(args)}`; await setup.withFixture(html`${formField(args, templateResult)}`, { backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + focusOutlineDark: negative, forcedColors, }); }), @@ -222,6 +226,7 @@ describe(`sbb-form-field`, () => { ${buttonsAndPopover(args)}`; await setup.withFixture(html`${formField(args, templateResult)}`, { backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + focusOutlineDark: negative, forcedColors, }); ( @@ -248,6 +253,7 @@ describe(`sbb-form-field`, () => { visualDiffDefault.with(async (setup) => { await setup.withFixture(html`${formField(args, template(args))}`, { backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + focusOutlineDark: negative, forcedColors, }); }), @@ -260,6 +266,7 @@ describe(`sbb-form-field`, () => { ${buttonsAndPopover(args)}`; await setup.withFixture(html`${formField(args, templateResult)}`, { backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + focusOutlineDark: negative, forcedColors, }); }), @@ -337,31 +344,64 @@ describe(`sbb-form-field`, () => { ); // borderless - for (const negative of [false, true]) { - describe(`negative=${negative}`, () => { - it( - `borderless=true`, - visualDiffDefault.with(async (setup) => { - const noLabel = { ...basicArgs, negative, borderless: true }; - await setup.withFixture(html`${formField(noLabel, template(noLabel))}`, { - backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, - forcedColors, - }); - }), - ); + describe('borderless=true', () => { + for (const negative of [false, true]) { + describe(`negative=${negative}`, () => { + it( + ``, + visualDiffDefault.with(async (setup) => { + const noLabel = { ...basicArgs, negative, borderless: true }; + await setup.withFixture(html`${formField(noLabel, template(noLabel))}`, { + backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + focusOutlineDark: negative, + forcedColors, + }); + }), + ); - it( - `borderless=true ${visualDiffFocus.name}`, - visualDiffFocus.with(async (setup) => { - const noLabel = { ...basicArgs, negative, borderless: true }; - await setup.withFixture(html`${formField(noLabel, template(noLabel))}`, { - backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, - forcedColors, - }); - }), - ); - }); - } + it( + `disabled=true`, + visualDiffDefault.with(async (setup) => { + const noLabel = { ...basicArgs, negative, borderless: true, disabled: true }; + await setup.withFixture(html`${formField(noLabel, template(noLabel))}`, { + backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + focusOutlineDark: negative, + forcedColors, + }); + }), + ); + + it( + `error=true ${visualDiffFocus.name}`, + visualDiffFocus.with(async (setup) => { + const noLabel = { + ...basicArgs, + negative, + borderless: true, + cssClass: 'sbb-invalid', + }; + await setup.withFixture(html`${formField(noLabel, template(noLabel))}`, { + backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + focusOutlineDark: negative, + forcedColors, + }); + }), + ); + + it( + visualDiffFocus.name, + visualDiffFocus.with(async (setup) => { + const noLabel = { ...basicArgs, negative, borderless: true }; + await setup.withFixture(html`${formField(noLabel, template(noLabel))}`, { + backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + focusOutlineDark: negative, + forcedColors, + }); + }), + ); + }); + } + }); // visual describeEach(visualProp, ({ size, width, errorText }) => {