From 30f839f1f05cbf6bb61932081d65a7ff8812fb17 Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Thu, 22 Aug 2024 17:54:42 +0200 Subject: [PATCH 1/5] feat(sbb-autocomplete): introduce size s --- .../autocomplete/autocomplete.stories.ts | 44 +++++++++++++++++++ .../autocomplete/autocomplete.visual.spec.ts | 42 ++++++++++++++---- src/elements/autocomplete/readme.md | 12 +++++ 3 files changed, 89 insertions(+), 9 deletions(-) diff --git a/src/elements/autocomplete/autocomplete.stories.ts b/src/elements/autocomplete/autocomplete.stories.ts index 0c862b80a1..6132ac6de4 100644 --- a/src/elements/autocomplete/autocomplete.stories.ts +++ b/src/elements/autocomplete/autocomplete.stories.ts @@ -88,6 +88,16 @@ const borderless: InputType = { }, }; +const size: InputType = { + control: { + type: 'inline-radio', + }, + options: ['m', 's'], + table: { + category: 'Form field', + }, +}; + const floatingLabel: InputType = { control: { type: 'boolean', @@ -119,6 +129,7 @@ const defaultArgTypes: ArgTypes = { // Form field args borderless, + size, floatingLabel, }; @@ -142,6 +153,7 @@ const defaultArgs: Args = { // Form field args borderless: false, + size: size.options![0], floatingLabel: false, }; @@ -238,6 +250,7 @@ const Template = (args: Args): TemplateResult => html` ?negative=${args.negative} ?borderless=${args.borderless} ?floating-label=${args.floatingLabel} + size=${args.size} data-testid="form-field" > @@ -262,6 +275,7 @@ const OptionGroupTemplate = (args: Args): TemplateResult => html` ?negative=${args.negative} ?borderless=${args.borderless} ?floating-label=${args.floatingLabel} + size=${args.size} data-testid="form-field" > @@ -289,6 +303,7 @@ const MixedTemplate = (args: Args): TemplateResult => html` ?negative=${args.negative} ?borderless=${args.borderless} ?floating-label=${args.floatingLabel} + size=${args.size} data-testid="form-field" > @@ -329,6 +344,7 @@ const RequiredTemplate = (args: Args): TemplateResult => { ?negative=${args.negative} ?borderless=${args.borderless} ?floating-label=${args.floatingLabel} + size=${args.size} data-testid="form-field" id="sbb-form-field" > @@ -378,6 +394,13 @@ export const BasicNegative: StoryObj = { play: isChromatic() ? playStory : undefined, }; +export const BasicSizeS: StoryObj = { + render: Template, + argTypes: defaultArgTypes, + args: { ...defaultArgs, size: size.options![1] }, + play: isChromatic() ? playStory : undefined, +}; + export const BasicOpenAbove: StoryObj = { render: Template, argTypes: defaultArgTypes, @@ -400,6 +423,13 @@ export const BorderlessNegative: StoryObj = { play: isChromatic() ? playStory : undefined, }; +export const BorderlessSizeS: StoryObj = { + render: Template, + argTypes: defaultArgTypes, + args: { ...defaultArgs, borderless: true, size: size.options![1] }, + play: isChromatic() ? playStory : undefined, +}; + export const FloatingLabel: StoryObj = { render: Template, argTypes: defaultArgTypes, @@ -407,6 +437,13 @@ export const FloatingLabel: StoryObj = { play: isChromatic() ? playStory : undefined, }; +export const FloatingLabelSizeS: StoryObj = { + render: Template, + argTypes: defaultArgTypes, + args: { ...defaultArgs, floatingLabel: true, size: size.options![1] }, + play: isChromatic() ? playStory : undefined, +}; + export const WithError: StoryObj = { render: RequiredTemplate, argTypes: withGroupsArgTypes, @@ -481,6 +518,13 @@ export const MixedSingleOptionWithOptionGroupNegative: StoryObj = { play: isChromatic() ? playStory : undefined, }; +export const MixedSingleOptionWithOptionGroupSizeS: StoryObj = { + render: MixedTemplate, + argTypes: withGroupsArgTypes, + args: { ...withGroupsDefaultArgs, size: size.options![1] }, + play: isChromatic() ? playStory : undefined, +}; + const meta: Meta = { decorators: [withActions as Decorator], parameters: { diff --git a/src/elements/autocomplete/autocomplete.visual.spec.ts b/src/elements/autocomplete/autocomplete.visual.spec.ts index ec4d9415b6..28893fa857 100644 --- a/src/elements/autocomplete/autocomplete.visual.spec.ts +++ b/src/elements/autocomplete/autocomplete.visual.spec.ts @@ -21,6 +21,8 @@ describe('sbb-autocomplete', () => { preserveIconSpace: true, disableOption: false, borderless: false, + size: 'm', + value: undefined as undefined | string, withGroup: false, disableGroup: false, withMixedOptionAndGroup: false, @@ -86,7 +88,7 @@ describe('sbb-autocomplete', () => { disableOption: boolean, disableGroup: boolean, ): TemplateResult => html` - + Option Value @@ -94,7 +96,7 @@ describe('sbb-autocomplete', () => { `; const template = (args: typeof defaultArgs): TemplateResult => html` - + @@ -152,13 +154,15 @@ describe('sbb-autocomplete', () => { backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, }; - for (const visualDiffState of [visualDiffDefault, visualDiffFocus]) { - it( - `state=${visualDiffState.name} negative=${negative}`, - visualDiffState.with(async (setup) => { - await setup.withFixture(template({ ...defaultArgs, negative }), style); - }), - ); + for (const size of ['m', 's']) { + for (const visualDiffState of [visualDiffDefault, visualDiffFocus]) { + it( + `state=${visualDiffState.name} negative=${negative} size=${size}`, + visualDiffState.with(async (setup) => { + await setup.withFixture(template({ ...defaultArgs, negative, size }), style); + }), + ); + } } it( @@ -271,6 +275,26 @@ describe('sbb-autocomplete', () => { setup.withPostSetupAction(() => openAutocomplete(setup)); }), ); + + it( + `negative=${negative} withGroup=true withMixedOptionAndGroup=true size=s`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture( + template({ + ...defaultArgs, + negative, + withGroup: true, + withMixedOptionAndGroup: true, + size: 's', + }), + { + minHeight: '800px', + backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + }, + ); + setup.withPostSetupAction(() => openAutocomplete(setup)); + }), + ); } }); }); diff --git a/src/elements/autocomplete/readme.md b/src/elements/autocomplete/readme.md index c2e8661ce0..4b1a1efa4c 100644 --- a/src/elements/autocomplete/readme.md +++ b/src/elements/autocomplete/readme.md @@ -68,6 +68,18 @@ The displayed `sbb-option` can be collected into groups using `sbb-optgroup` ele ``` +### Size + +The component has no `size` property but, when slotted in a `sbb-form-field`, it adapts to the parent `size`. + +```html + + + + ... + +``` + ## Events The `sbb-option` emits the `optionSelected` event when selected via user interaction. From 91c7f81959ee15544e922d5179016e74a9c0cf11 Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Fri, 23 Aug 2024 17:43:12 +0200 Subject: [PATCH 2/5] feat(sbb-autocomplete-grid): introduce size s --- .../autocomplete-grid.stories.ts | 49 +++++++++++++ .../autocomplete-grid.visual.spec.ts | 69 ++++++++++-------- .../autocomplete-grid/readme.md | 12 ++++ .../autocomplete/autocomplete.visual.spec.ts | 71 ++++++++----------- .../test-title-chip-list.ts | 2 +- 5 files changed, 131 insertions(+), 72 deletions(-) diff --git a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts index d8dd5cffc5..7064a97096 100644 --- a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts +++ b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.stories.ts @@ -141,6 +141,16 @@ const borderless: InputType = { }, }; +const size: InputType = { + control: { + type: 'inline-radio', + }, + options: ['m', 's'], + table: { + category: 'Form field', + }, +}; + const floatingLabel: InputType = { control: { type: 'boolean', @@ -190,6 +200,7 @@ const defaultArgTypes: ArgTypes = { // Form field args negative, borderless, + size, floatingLabel, // Input args @@ -218,6 +229,7 @@ const defaultArgs: Args = { // Form field args negative: false, borderless: false, + size: size.options![0], floatingLabel: false, // Input args @@ -304,6 +316,7 @@ const Template = (args: Args): TemplateResult => html` @@ -337,6 +350,7 @@ const OptionGroupTemplate = (args: Args): TemplateResult => html` ?negative=${args.negative} ?borderless=${args.borderless} ?floating-label=${args.floatingLabel} + size=${args.size} data-testid="form-field" > @@ -386,6 +400,13 @@ export const Negative: StoryObj = { play: isChromatic() ? playStory : undefined, }; +export const BasicSizeS: StoryObj = { + render: Template, + argTypes: defaultArgTypes, + args: { ...defaultArgs, size: size.options![1] }, + play: isChromatic() ? playStory : undefined, +}; + export const Disabled: StoryObj = { render: Template, argTypes: defaultArgTypes, @@ -426,6 +447,27 @@ export const BorderlessNegative: StoryObj = { play: isChromatic() ? playStory : undefined, }; +export const BorderlessSizeS: StoryObj = { + render: Template, + argTypes: defaultArgTypes, + args: { ...defaultArgs, borderless: true, size: size.options![1] }, + play: isChromatic() ? playStory : undefined, +}; + +export const FloatingLabel: StoryObj = { + render: Template, + argTypes: defaultArgTypes, + args: { ...defaultArgs, floatingLabel: true }, + play: isChromatic() ? playStory : undefined, +}; + +export const FloatingLabelSizeS: StoryObj = { + render: Template, + argTypes: defaultArgTypes, + args: { ...defaultArgs, floatingLabel: true, size: size.options![1] }, + play: isChromatic() ? playStory : undefined, +}; + export const BasicOpenAbove: StoryObj = { render: Template, argTypes: defaultArgTypes, @@ -463,6 +505,13 @@ export const WithOptionGroup: StoryObj = { play: isChromatic() ? playStory : undefined, }; +export const WithOptionGroupSizeS: StoryObj = { + render: OptionGroupTemplate, + argTypes: withGroupsArgTypes, + args: { ...withGroupsDefaultArgs, size: size.options![1] }, + play: isChromatic() ? playStory : undefined, +}; + export const WithOptionGroupNegative: StoryObj = { render: OptionGroupTemplate, argTypes: withGroupsArgTypes, diff --git a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.visual.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.visual.spec.ts index 284c297399..43b1cded45 100644 --- a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.visual.spec.ts +++ b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.visual.spec.ts @@ -23,6 +23,7 @@ describe('sbb-autocomplete-grid', () => { preserveIconSpace: true, disableOption: false, borderless: false, + size: 'm', withGroup: false, disableGroup: false, withMixedOptionAndGroup: false, @@ -112,7 +113,7 @@ describe('sbb-autocomplete-grid', () => { disableOption: boolean, disableGroup: boolean, ): TemplateResult => html` - + Option Value @@ -120,7 +121,7 @@ describe('sbb-autocomplete-grid', () => { `; const template = (args: typeof defaultArgs): TemplateResult => html` - + @@ -150,7 +151,7 @@ describe('sbb-autocomplete-grid', () => { for (const borderless of [false, true]) { for (const visualDiffState of [visualDiffDefault, visualDiffFocus]) { it( - `state=above negative=${negative} borderless=${borderless} ${visualDiffState.name}`, + `negative=${negative} state=above-${visualDiffState.name} borderless=${borderless}`, visualDiffState.with(async (setup) => { await setup.withFixture( html` @@ -178,45 +179,47 @@ describe('sbb-autocomplete-grid', () => { backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, }; - for (const visualDiffState of [visualDiffDefault, visualDiffFocus]) { - it( - `state=${visualDiffState.name} negative=${negative}`, - visualDiffState.with(async (setup) => { - await setup.withFixture(template({ ...defaultArgs, negative }), style); - }), - ); + for (const size of ['m', 's']) { + for (const visualDiffState of [visualDiffDefault, visualDiffFocus]) { + it( + `negative=${negative} state=${visualDiffState.name} size=${size}`, + visualDiffState.with(async (setup) => { + await setup.withFixture(template({ ...defaultArgs, negative, size }), style); + }), + ); + } } it( - `state=required negative=${negative}`, + `negative=${negative} state=required`, visualDiffDefault.with(async (setup) => { await setup.withFixture(template({ ...defaultArgs, negative, required: true }), style); }), ); it( - `state=disabled negative=${negative}`, + `negative=${negative} state=disabled`, visualDiffDefault.with(async (setup) => { await setup.withFixture(template({ ...defaultArgs, negative, disabled: true }), style); }), ); it( - `state=readonly negative=${negative}`, + `negative=${negative} state=readonly`, visualDiffDefault.with(async (setup) => { await setup.withFixture(template({ ...defaultArgs, negative, readonly: true }), style); }), ); it( - `state=borderless negative=${negative}`, + `negative=${negative} state=borderless`, visualDiffDefault.with(async (setup) => { await setup.withFixture(template({ ...defaultArgs, negative, borderless: true }), style); }), ); it( - `state=noIcon negative=${negative}`, + `negative=${negative} state=noIcon`, visualDiffDefault.with(async (setup) => { await setup.withFixture(template({ ...defaultArgs, negative, withIcon: false }), style); setup.withPostSetupAction(() => openAutocomplete(setup)); @@ -225,7 +228,7 @@ describe('sbb-autocomplete-grid', () => { for (const withIcon of [false, true]) { it( - `state=noSpace negative=${negative} withIcon=${withIcon}`, + `negative=${negative} state=noSpace withIcon=${withIcon}`, visualDiffDefault.with(async (setup) => { await setup.withFixture( template({ ...defaultArgs, negative, withIcon, preserveIconSpace: false }), @@ -284,19 +287,27 @@ describe('sbb-autocomplete-grid', () => { }), ); - it( - `negative=${negative} withGroup=true withMixedOptionAndGroup=true`, - visualDiffDefault.with(async (setup) => { - await setup.withFixture( - template({ ...defaultArgs, negative, withGroup: true, withMixedOptionAndGroup: true }), - { - minHeight: '800px', - backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, - }, - ); - setup.withPostSetupAction(() => openAutocomplete(setup)); - }), - ); + for (const size of ['m', 's']) { + it( + `negative=${negative} withGroup=true size=${size} withMixedOptionAndGroup=true`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture( + template({ + ...defaultArgs, + negative, + size, + withGroup: true, + withMixedOptionAndGroup: true, + }), + { + minHeight: '800px', + backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + }, + ); + setup.withPostSetupAction(() => openAutocomplete(setup)); + }), + ); + } } }); }); diff --git a/src/elements/autocomplete-grid/autocomplete-grid/readme.md b/src/elements/autocomplete-grid/autocomplete-grid/readme.md index a529bcefe4..09af61a121 100644 --- a/src/elements/autocomplete-grid/autocomplete-grid/readme.md +++ b/src/elements/autocomplete-grid/autocomplete-grid/readme.md @@ -107,6 +107,18 @@ The displayed `sbb-autocomplete-grid-option` can be collected into groups using ``` +### Size + +The component has no `size` property but, when slotted in a `sbb-form-field`, it adapts to the parent `size`. + +```html + + + + ... + +``` + ## Events The `sbb-autocomplete-grid-option` emits the `optionSelected` event when selected via user interaction. diff --git a/src/elements/autocomplete/autocomplete.visual.spec.ts b/src/elements/autocomplete/autocomplete.visual.spec.ts index 28893fa857..afcff9eb43 100644 --- a/src/elements/autocomplete/autocomplete.visual.spec.ts +++ b/src/elements/autocomplete/autocomplete.visual.spec.ts @@ -22,7 +22,6 @@ describe('sbb-autocomplete', () => { disableOption: false, borderless: false, size: 'm', - value: undefined as undefined | string, withGroup: false, disableGroup: false, withMixedOptionAndGroup: false, @@ -126,7 +125,7 @@ describe('sbb-autocomplete', () => { for (const borderless of [false, true]) { for (const visualDiffState of [visualDiffDefault, visualDiffFocus]) { it( - `state=above negative=${negative} borderless=${borderless} ${visualDiffState.name}`, + `negative=${negative} state=above-${visualDiffState.name} borderless=${borderless}`, visualDiffState.with(async (setup) => { await setup.withFixture( html` @@ -157,7 +156,7 @@ describe('sbb-autocomplete', () => { for (const size of ['m', 's']) { for (const visualDiffState of [visualDiffDefault, visualDiffFocus]) { it( - `state=${visualDiffState.name} negative=${negative} size=${size}`, + `negative=${negative} state=${visualDiffState.name} size=${size}`, visualDiffState.with(async (setup) => { await setup.withFixture(template({ ...defaultArgs, negative, size }), style); }), @@ -166,35 +165,35 @@ describe('sbb-autocomplete', () => { } it( - `state=required negative=${negative}`, + `negative=${negative} state=required`, visualDiffDefault.with(async (setup) => { await setup.withFixture(template({ ...defaultArgs, negative, required: true }), style); }), ); it( - `state=disabled negative=${negative}`, + `negative=${negative} state=disabled`, visualDiffDefault.with(async (setup) => { await setup.withFixture(template({ ...defaultArgs, negative, disabled: true }), style); }), ); it( - `state=readonly negative=${negative}`, + `negative=${negative} state=readonly`, visualDiffDefault.with(async (setup) => { await setup.withFixture(template({ ...defaultArgs, negative, readonly: true }), style); }), ); it( - `state=borderless negative=${negative}`, + `negative=${negative} state=borderless`, visualDiffDefault.with(async (setup) => { await setup.withFixture(template({ ...defaultArgs, negative, borderless: true }), style); }), ); it( - `state=noIcon negative=${negative}`, + `negative=${negative} state=noIcon`, visualDiffDefault.with(async (setup) => { await setup.withFixture(template({ ...defaultArgs, negative, withIcon: false }), style); setup.withPostSetupAction(() => openAutocomplete(setup)); @@ -203,7 +202,7 @@ describe('sbb-autocomplete', () => { for (const withIcon of [false, true]) { it( - `state=noSpace negative=${negative} withIcon=${withIcon}`, + `negative=${negative} state=noSpace withIcon=${withIcon}`, visualDiffDefault.with(async (setup) => { await setup.withFixture( template({ ...defaultArgs, negative, withIcon, preserveIconSpace: false }), @@ -262,39 +261,27 @@ describe('sbb-autocomplete', () => { }), ); - it( - `negative=${negative} withGroup=true withMixedOptionAndGroup=true`, - visualDiffDefault.with(async (setup) => { - await setup.withFixture( - template({ ...defaultArgs, negative, withGroup: true, withMixedOptionAndGroup: true }), - { - minHeight: '800px', - backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, - }, - ); - setup.withPostSetupAction(() => openAutocomplete(setup)); - }), - ); - - it( - `negative=${negative} withGroup=true withMixedOptionAndGroup=true size=s`, - visualDiffDefault.with(async (setup) => { - await setup.withFixture( - template({ - ...defaultArgs, - negative, - withGroup: true, - withMixedOptionAndGroup: true, - size: 's', - }), - { - minHeight: '800px', - backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, - }, - ); - setup.withPostSetupAction(() => openAutocomplete(setup)); - }), - ); + for (const size of ['m', 's']) { + it( + `negative=${negative} withGroup=true size=${size} withMixedOptionAndGroup=true`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture( + template({ + ...defaultArgs, + negative, + size, + withGroup: true, + withMixedOptionAndGroup: true, + }), + { + minHeight: '800px', + backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + }, + ); + setup.withPostSetupAction(() => openAutocomplete(setup)); + }), + ); + } } }); }); diff --git a/src/visual-regression-app/src/components/test-case/test-title-chip-list/test-title-chip-list.ts b/src/visual-regression-app/src/components/test-case/test-title-chip-list/test-title-chip-list.ts index 3f04b6a05d..f7226e4834 100644 --- a/src/visual-regression-app/src/components/test-case/test-title-chip-list/test-title-chip-list.ts +++ b/src/visual-regression-app/src/components/test-case/test-title-chip-list/test-title-chip-list.ts @@ -9,7 +9,7 @@ import style from './test-title-chip-list.scss?lit&inline'; * - simple => "key=value" patterns * - complex => "key=( key=value-... ) */ -const paramsRegex = /(?[a-zA-Z]*=\(.*\))|(?[a-zA-Z]+=[a-zA-Z]*)/gm; +const paramsRegex = /(?[a-zA-Z]*=\(.*\))|(?[a-zA-Z]+=[a-zA-Z1-9-]*)/gm; type DescribeEachItem = { key: string; From 4b71a7b3dafe15fd8262b283fe635bd90a901093 Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Mon, 26 Aug 2024 10:19:10 +0200 Subject: [PATCH 3/5] fix: option labels in visual stories --- .../autocomplete-grid.visual.spec.ts | 92 +++++++++++-------- .../autocomplete/autocomplete.visual.spec.ts | 29 +++--- 2 files changed, 65 insertions(+), 56 deletions(-) diff --git a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.visual.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.visual.spec.ts index 43b1cded45..98a4e86339 100644 --- a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.visual.spec.ts +++ b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.visual.spec.ts @@ -1,6 +1,5 @@ import { sendKeys } from '@web/test-runner-commands'; import { html, nothing, type TemplateResult } from 'lit'; -import { repeat } from 'lit/directives/repeat.js'; import { styleMap } from 'lit/directives/style-map.js'; import type { VisualDiffSetupBuilder } from '../../core/testing/private.js'; @@ -47,48 +46,61 @@ describe('sbb-autocomplete-grid', () => { `; const createOptionBlockOne = (withIcon: boolean, disableOption: boolean): TemplateResult => html` - ${repeat( - new Array(3), - (_, i) => html` - - - ${withIcon && i === 2 - ? html`` - : nothing} - Option ${i} - - - - - - `, - )} + + + Option 1 + + + + + + + + Option 2 + + + + + + + + ${withIcon ? html`` : nothing} Option 3 + + + + + `; const createOptionBlockTwo = (): TemplateResult => html` - ${repeat( - new Array(2), - (_, i) => html` - - Option ${i + 3} - - - - - - - - `, - )} + + Option 4 + + + + + + + + + Option 5 + + + + + + + `; const createOptions = (withIcon: boolean, disableOption: boolean): TemplateResult => html` diff --git a/src/elements/autocomplete/autocomplete.visual.spec.ts b/src/elements/autocomplete/autocomplete.visual.spec.ts index afcff9eb43..b75231ac08 100644 --- a/src/elements/autocomplete/autocomplete.visual.spec.ts +++ b/src/elements/autocomplete/autocomplete.visual.spec.ts @@ -1,6 +1,5 @@ import { sendKeys } from '@web/test-runner-commands'; import { html, nothing, type TemplateResult } from 'lit'; -import { repeat } from 'lit/directives/repeat.js'; import { styleMap } from 'lit/directives/style-map.js'; import type { VisualDiffSetupBuilder } from '../core/testing/private.js'; @@ -45,21 +44,19 @@ describe('sbb-autocomplete', () => { `; const createOptionBlockOne = (withIcon: boolean, disableOption: boolean): TemplateResult => html` - ${repeat( - new Array(3), - (_, i) => html` - - ${withIcon && i === 2 - ? html`` - : nothing} - Option ${i} - - `, - )} + + Option 1 + + + Option 2 + + + ${withIcon ? html`` : nothing} Option 3 + `; const createOptionBlockTwo = (): TemplateResult => html` From fc56e2b8988ae51ab60e751d654626071310b3e0 Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Mon, 26 Aug 2024 10:53:25 +0200 Subject: [PATCH 4/5] fix: add describe to avoid long labels in it --- .../autocomplete-grid.visual.spec.ts | 259 +++++++++--------- .../autocomplete/autocomplete.visual.spec.ts | 259 +++++++++--------- 2 files changed, 270 insertions(+), 248 deletions(-) diff --git a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.visual.spec.ts b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.visual.spec.ts index 98a4e86339..0d1fd0966a 100644 --- a/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.visual.spec.ts +++ b/src/elements/autocomplete-grid/autocomplete-grid/autocomplete-grid.visual.spec.ts @@ -160,166 +160,177 @@ describe('sbb-autocomplete-grid', () => { describeViewports({ viewports: ['zero', 'medium'], viewportHeight: 500 }, () => { for (const negative of [false, true]) { - for (const borderless of [false, true]) { + describe(`negative=${negative}`, () => { for (const visualDiffState of [visualDiffDefault, visualDiffFocus]) { - it( - `negative=${negative} state=above-${visualDiffState.name} borderless=${borderless}`, - visualDiffState.with(async (setup) => { - await setup.withFixture( - html` -
- ${template({ ...defaultArgs, negative, borderless })} -
- `, - { - minHeight: '500px', - backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, - }, + describe(`state=above-${visualDiffState.name}`, () => { + for (const borderless of [false, true]) { + it( + `borderless=${borderless}`, + visualDiffState.with(async (setup) => { + await setup.withFixture( + html` +
+ ${template({ ...defaultArgs, negative, borderless })} +
+ `, + { + minHeight: '500px', + backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + }, + ); + setup.withPostSetupAction(() => openAutocomplete(setup)); + }), ); - setup.withPostSetupAction(() => openAutocomplete(setup)); - }), - ); + } + }); } - } + }); } }); describeViewports({ viewports: ['zero', 'medium'] }, () => { for (const negative of [false, true]) { - const style = { - minHeight: '400px', - backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, - }; + describe(`negative=${negative}`, () => { + const style = { + minHeight: '400px', + backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + }; - for (const size of ['m', 's']) { - for (const visualDiffState of [visualDiffDefault, visualDiffFocus]) { - it( - `negative=${negative} state=${visualDiffState.name} size=${size}`, - visualDiffState.with(async (setup) => { - await setup.withFixture(template({ ...defaultArgs, negative, size }), style); - }), - ); + for (const size of ['m', 's']) { + for (const visualDiffState of [visualDiffDefault, visualDiffFocus]) { + it( + `state=${visualDiffState.name} size=${size}`, + visualDiffState.with(async (setup) => { + await setup.withFixture(template({ ...defaultArgs, negative, size }), style); + }), + ); + } } - } - - it( - `negative=${negative} state=required`, - visualDiffDefault.with(async (setup) => { - await setup.withFixture(template({ ...defaultArgs, negative, required: true }), style); - }), - ); - - it( - `negative=${negative} state=disabled`, - visualDiffDefault.with(async (setup) => { - await setup.withFixture(template({ ...defaultArgs, negative, disabled: true }), style); - }), - ); - - it( - `negative=${negative} state=readonly`, - visualDiffDefault.with(async (setup) => { - await setup.withFixture(template({ ...defaultArgs, negative, readonly: true }), style); - }), - ); - it( - `negative=${negative} state=borderless`, - visualDiffDefault.with(async (setup) => { - await setup.withFixture(template({ ...defaultArgs, negative, borderless: true }), style); - }), - ); - - it( - `negative=${negative} state=noIcon`, - visualDiffDefault.with(async (setup) => { - await setup.withFixture(template({ ...defaultArgs, negative, withIcon: false }), style); - setup.withPostSetupAction(() => openAutocomplete(setup)); - }), - ); + it( + `state=required`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture(template({ ...defaultArgs, negative, required: true }), style); + }), + ); - for (const withIcon of [false, true]) { it( - `negative=${negative} state=noSpace withIcon=${withIcon}`, + `state=disabled`, visualDiffDefault.with(async (setup) => { - await setup.withFixture( - template({ ...defaultArgs, negative, withIcon, preserveIconSpace: false }), - style, - ); - setup.withPostSetupAction(() => openAutocomplete(setup)); + await setup.withFixture(template({ ...defaultArgs, negative, disabled: true }), style); }), ); - } - for (const withGroup of [false, true]) { - const wrapperStyle = { - minHeight: withGroup ? '800px' : '400px', - backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, - }; + it( + `state=readonly`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture(template({ ...defaultArgs, negative, readonly: true }), style); + }), + ); it( - `negative=${negative} withGroup=${withGroup}`, + `state=borderless`, visualDiffDefault.with(async (setup) => { await setup.withFixture( - template({ ...defaultArgs, negative, withGroup }), - wrapperStyle, + template({ ...defaultArgs, negative, borderless: true }), + style, ); - setup.withPostSetupAction(() => openAutocomplete(setup)); }), ); it( - `negative=${negative} withGroup=${withGroup} disableOption=true`, + `state=noIcon`, visualDiffDefault.with(async (setup) => { - await setup.withFixture( - template({ ...defaultArgs, negative, withGroup, disableOption: true }), - wrapperStyle, - ); + await setup.withFixture(template({ ...defaultArgs, negative, withIcon: false }), style); setup.withPostSetupAction(() => openAutocomplete(setup)); }), ); - } - it( - `negative=${negative} withGroup=true disableGroup=true`, - visualDiffDefault.with(async (setup) => { - await setup.withFixture( - template({ - ...defaultArgs, - negative, - disableGroup: true, - withGroup: true, + for (const withIcon of [false, true]) { + it( + `state=noSpace withIcon=${withIcon}`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture( + template({ ...defaultArgs, negative, withIcon, preserveIconSpace: false }), + style, + ); + setup.withPostSetupAction(() => openAutocomplete(setup)); }), - { - minHeight: '800px', - backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, - }, ); - setup.withPostSetupAction(() => openAutocomplete(setup)); - }), - ); + } - for (const size of ['m', 's']) { - it( - `negative=${negative} withGroup=true size=${size} withMixedOptionAndGroup=true`, - visualDiffDefault.with(async (setup) => { - await setup.withFixture( - template({ - ...defaultArgs, - negative, - size, - withGroup: true, - withMixedOptionAndGroup: true, + for (const withGroup of [false, true]) { + const wrapperStyle = { + minHeight: withGroup ? '800px' : '400px', + backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + }; + + it( + `withGroup=${withGroup}`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture( + template({ ...defaultArgs, negative, withGroup }), + wrapperStyle, + ); + setup.withPostSetupAction(() => openAutocomplete(setup)); + }), + ); + + it( + `withGroup=${withGroup} disableOption=true`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture( + template({ ...defaultArgs, negative, withGroup, disableOption: true }), + wrapperStyle, + ); + setup.withPostSetupAction(() => openAutocomplete(setup)); + }), + ); + } + + describe('withGroup=true', () => { + it( + `disableGroup=true`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture( + template({ + ...defaultArgs, + negative, + disableGroup: true, + withGroup: true, + }), + { + minHeight: '800px', + backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + }, + ); + setup.withPostSetupAction(() => openAutocomplete(setup)); + }), + ); + + for (const size of ['m', 's']) { + it( + `size=${size} withMixedOptionAndGroup=true`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture( + template({ + ...defaultArgs, + negative, + size, + withGroup: true, + withMixedOptionAndGroup: true, + }), + { + minHeight: '800px', + backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + }, + ); + setup.withPostSetupAction(() => openAutocomplete(setup)); }), - { - minHeight: '800px', - backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, - }, ); - setup.withPostSetupAction(() => openAutocomplete(setup)); - }), - ); - } + } + }); + }); } }); }); diff --git a/src/elements/autocomplete/autocomplete.visual.spec.ts b/src/elements/autocomplete/autocomplete.visual.spec.ts index b75231ac08..2a52cdaad9 100644 --- a/src/elements/autocomplete/autocomplete.visual.spec.ts +++ b/src/elements/autocomplete/autocomplete.visual.spec.ts @@ -119,166 +119,177 @@ describe('sbb-autocomplete', () => { describeViewports({ viewports: ['zero', 'medium'], viewportHeight: 500 }, () => { for (const negative of [false, true]) { - for (const borderless of [false, true]) { + describe(`negative=${negative}`, () => { for (const visualDiffState of [visualDiffDefault, visualDiffFocus]) { - it( - `negative=${negative} state=above-${visualDiffState.name} borderless=${borderless}`, - visualDiffState.with(async (setup) => { - await setup.withFixture( - html` -
- ${template({ ...defaultArgs, negative, borderless })} -
- `, - { - minHeight: '500px', - backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, - }, + describe(`state=above-${visualDiffState.name}`, () => { + for (const borderless of [false, true]) { + it( + `borderless=${borderless}`, + visualDiffState.with(async (setup) => { + await setup.withFixture( + html` +
+ ${template({ ...defaultArgs, negative, borderless })} +
+ `, + { + minHeight: '500px', + backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + }, + ); + setup.withPostSetupAction(() => openAutocomplete(setup)); + }), ); - setup.withPostSetupAction(() => openAutocomplete(setup)); - }), - ); + } + }); } - } + }); } }); describeViewports({ viewports: ['zero', 'medium'] }, () => { for (const negative of [false, true]) { - const style = { - minHeight: '400px', - backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, - }; + describe(`negative=${negative}`, () => { + const style = { + minHeight: '400px', + backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + }; - for (const size of ['m', 's']) { - for (const visualDiffState of [visualDiffDefault, visualDiffFocus]) { - it( - `negative=${negative} state=${visualDiffState.name} size=${size}`, - visualDiffState.with(async (setup) => { - await setup.withFixture(template({ ...defaultArgs, negative, size }), style); - }), - ); + for (const size of ['m', 's']) { + for (const visualDiffState of [visualDiffDefault, visualDiffFocus]) { + it( + `state=${visualDiffState.name} size=${size}`, + visualDiffState.with(async (setup) => { + await setup.withFixture(template({ ...defaultArgs, negative, size }), style); + }), + ); + } } - } - - it( - `negative=${negative} state=required`, - visualDiffDefault.with(async (setup) => { - await setup.withFixture(template({ ...defaultArgs, negative, required: true }), style); - }), - ); - - it( - `negative=${negative} state=disabled`, - visualDiffDefault.with(async (setup) => { - await setup.withFixture(template({ ...defaultArgs, negative, disabled: true }), style); - }), - ); - - it( - `negative=${negative} state=readonly`, - visualDiffDefault.with(async (setup) => { - await setup.withFixture(template({ ...defaultArgs, negative, readonly: true }), style); - }), - ); - it( - `negative=${negative} state=borderless`, - visualDiffDefault.with(async (setup) => { - await setup.withFixture(template({ ...defaultArgs, negative, borderless: true }), style); - }), - ); - - it( - `negative=${negative} state=noIcon`, - visualDiffDefault.with(async (setup) => { - await setup.withFixture(template({ ...defaultArgs, negative, withIcon: false }), style); - setup.withPostSetupAction(() => openAutocomplete(setup)); - }), - ); + it( + `state=required`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture(template({ ...defaultArgs, negative, required: true }), style); + }), + ); - for (const withIcon of [false, true]) { it( - `negative=${negative} state=noSpace withIcon=${withIcon}`, + `state=disabled`, visualDiffDefault.with(async (setup) => { - await setup.withFixture( - template({ ...defaultArgs, negative, withIcon, preserveIconSpace: false }), - style, - ); - setup.withPostSetupAction(() => openAutocomplete(setup)); + await setup.withFixture(template({ ...defaultArgs, negative, disabled: true }), style); }), ); - } - for (const withGroup of [false, true]) { - const wrapperStyle = { - minHeight: withGroup ? '800px' : '400px', - backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, - }; + it( + `state=readonly`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture(template({ ...defaultArgs, negative, readonly: true }), style); + }), + ); it( - `negative=${negative} withGroup=${withGroup}`, + `state=borderless`, visualDiffDefault.with(async (setup) => { await setup.withFixture( - template({ ...defaultArgs, negative, withGroup }), - wrapperStyle, + template({ ...defaultArgs, negative, borderless: true }), + style, ); - setup.withPostSetupAction(() => openAutocomplete(setup)); }), ); it( - `negative=${negative} withGroup=${withGroup} disableOption=true`, + `state=noIcon`, visualDiffDefault.with(async (setup) => { - await setup.withFixture( - template({ ...defaultArgs, negative, withGroup, disableOption: true }), - wrapperStyle, - ); + await setup.withFixture(template({ ...defaultArgs, negative, withIcon: false }), style); setup.withPostSetupAction(() => openAutocomplete(setup)); }), ); - } - it( - `negative=${negative} withGroup=true disableGroup=true`, - visualDiffDefault.with(async (setup) => { - await setup.withFixture( - template({ - ...defaultArgs, - negative, - disableGroup: true, - withGroup: true, + for (const withIcon of [false, true]) { + it( + `state=noSpace withIcon=${withIcon}`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture( + template({ ...defaultArgs, negative, withIcon, preserveIconSpace: false }), + style, + ); + setup.withPostSetupAction(() => openAutocomplete(setup)); }), - { - minHeight: '800px', - backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, - }, ); - setup.withPostSetupAction(() => openAutocomplete(setup)); - }), - ); + } - for (const size of ['m', 's']) { - it( - `negative=${negative} withGroup=true size=${size} withMixedOptionAndGroup=true`, - visualDiffDefault.with(async (setup) => { - await setup.withFixture( - template({ - ...defaultArgs, - negative, - size, - withGroup: true, - withMixedOptionAndGroup: true, + for (const withGroup of [false, true]) { + const wrapperStyle = { + minHeight: withGroup ? '800px' : '400px', + backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + }; + + it( + `withGroup=${withGroup}`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture( + template({ ...defaultArgs, negative, withGroup }), + wrapperStyle, + ); + setup.withPostSetupAction(() => openAutocomplete(setup)); + }), + ); + + it( + `withGroup=${withGroup} disableOption=true`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture( + template({ ...defaultArgs, negative, withGroup, disableOption: true }), + wrapperStyle, + ); + setup.withPostSetupAction(() => openAutocomplete(setup)); + }), + ); + } + + describe('withGroup=true ', () => { + it( + `disableGroup=true`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture( + template({ + ...defaultArgs, + negative, + disableGroup: true, + withGroup: true, + }), + { + minHeight: '800px', + backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + }, + ); + setup.withPostSetupAction(() => openAutocomplete(setup)); + }), + ); + + for (const size of ['m', 's']) { + it( + `size=${size} withMixedOptionAndGroup=true`, + visualDiffDefault.with(async (setup) => { + await setup.withFixture( + template({ + ...defaultArgs, + negative, + size, + withGroup: true, + withMixedOptionAndGroup: true, + }), + { + minHeight: '800px', + backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, + }, + ); + setup.withPostSetupAction(() => openAutocomplete(setup)); }), - { - minHeight: '800px', - backgroundColor: negative ? 'var(--sbb-color-black)' : undefined, - }, ); - setup.withPostSetupAction(() => openAutocomplete(setup)); - }), - ); - } + } + }); + }); } }); }); From 44f13387694c852890b3733ae1cf09e2b57198e3 Mon Sep 17 00:00:00 2001 From: Davide Mininni Date: Tue, 27 Aug 2024 15:03:31 +0200 Subject: [PATCH 5/5] fix: chip label for visual-regression app --- .../test-case/test-title-chip-list/test-title-chip-list.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/visual-regression-app/src/components/test-case/test-title-chip-list/test-title-chip-list.ts b/src/visual-regression-app/src/components/test-case/test-title-chip-list/test-title-chip-list.ts index f7226e4834..aeafbd68e4 100644 --- a/src/visual-regression-app/src/components/test-case/test-title-chip-list/test-title-chip-list.ts +++ b/src/visual-regression-app/src/components/test-case/test-title-chip-list/test-title-chip-list.ts @@ -9,7 +9,7 @@ import style from './test-title-chip-list.scss?lit&inline'; * - simple => "key=value" patterns * - complex => "key=( key=value-... ) */ -const paramsRegex = /(?[a-zA-Z]*=\(.*\))|(?[a-zA-Z]+=[a-zA-Z1-9-]*)/gm; +const paramsRegex = /(?[a-zA-Z]*=\(.*\))|(?[a-zA-Z]+=[a-zA-Z0-9-]*)/gm; type DescribeEachItem = { key: string;