diff --git a/src/components/autocomplete/autocomplete.stories.ts b/src/components/autocomplete/autocomplete.stories.ts index 9e8ceed962..5c33837c17 100644 --- a/src/components/autocomplete/autocomplete.stories.ts +++ b/src/components/autocomplete/autocomplete.stories.ts @@ -252,9 +252,9 @@ const Template = (args: Args): TemplateResult => html` ?negative=${args.negative} ?borderless=${args.borderless} ?floating-label=${args.floatingLabel} - label="Label" data-testid="form-field" > + html` ?negative=${args.negative} ?borderless=${args.borderless} ?floating-label=${args.floatingLabel} - label="Label" data-testid="form-field" > + html` ?negative=${args.negative} ?borderless=${args.borderless} ?floating-label=${args.floatingLabel} - label="Label" data-testid="form-field" > + { ?negative=${args.negative} ?borderless=${args.borderless} ?floating-label=${args.floatingLabel} - label="Label" data-testid="form-field" id="sbb-form-field" > + ` as trigger and will displa ```html - + + @@ -50,7 +51,8 @@ The displayed `sbb-option` can be collected into groups using `sbb-optgroup` ele ```html - + + diff --git a/src/components/button/mini-button/mini-button.stories.ts b/src/components/button/mini-button/mini-button.stories.ts index be0011cb9d..86d721d7bd 100644 --- a/src/components/button/mini-button/mini-button.stories.ts +++ b/src/components/button/mini-button/mini-button.stories.ts @@ -23,14 +23,16 @@ const wrapperStyle = (context: StoryContext): Record => ({ }); const MiniButtonCommonTemplate = ({ slot, ...args }: Args): TemplateResult => html` - + + `; const MiniButtonSlottedIconCommonTemplate = ({ slot, ...args }: Args): TemplateResult => html` - + + diff --git a/src/components/button/mini-button/readme.md b/src/components/button/mini-button/readme.md index 2adc1cbc04..4d01e60bc5 100644 --- a/src/components/button/mini-button/readme.md +++ b/src/components/button/mini-button/readme.md @@ -29,7 +29,8 @@ The component is internally rendered as a button, accepting its associated properties (`type`, `name`, `value` and `form`). ```html - + + + ${label ? html`` : nothing} html` method and returning the form values to update the details.
e.preventDefault()}> - + + - + + `, diff --git a/src/components/form-field/form-field-clear/form-field-clear.spec.ts b/src/components/form-field/form-field-clear/form-field-clear.spec.ts index f8ecf02e02..9b280cfe0f 100644 --- a/src/components/form-field/form-field-clear/form-field-clear.spec.ts +++ b/src/components/form-field/form-field-clear/form-field-clear.spec.ts @@ -15,7 +15,8 @@ describe(`sbb-form-field-clear`, () => { beforeEach(async () => { root = await fixture(html` - + + diff --git a/src/components/form-field/form-field-clear/form-field-clear.stories.ts b/src/components/form-field/form-field-clear/form-field-clear.stories.ts index ccfc03624a..c5866ea520 100644 --- a/src/components/form-field/form-field-clear/form-field-clear.stories.ts +++ b/src/components/form-field/form-field-clear/form-field-clear.stories.ts @@ -59,7 +59,8 @@ const basicArgs: Args = { }; const DefaultTemplate = ({ negative, ...args }: Args): TemplateResult => html` - + + diff --git a/src/components/form-field/form-field-clear/readme.md b/src/components/form-field/form-field-clear/readme.md index 9d3abf4320..1e430be0df 100644 --- a/src/components/form-field/form-field-clear/readme.md +++ b/src/components/form-field/form-field-clear/readme.md @@ -2,7 +2,8 @@ The `sbb-form-field-clear` component can be used with the [sbb-form-field](/docs to provide the possibility to display a clear button which can clear the input value. ```html - + + diff --git a/src/components/form-field/form-field/__snapshots__/form-field.spec.snap.js b/src/components/form-field/form-field/__snapshots__/form-field.spec.snap.js index c591ec550a..a7d15e9547 100644 --- a/src/components/form-field/form-field/__snapshots__/form-field.spec.snap.js +++ b/src/components/form-field/form-field/__snapshots__/form-field.spec.snap.js @@ -1,43 +1,30 @@ /* @web/test-runner snapshot v1 */ export const snapshots = {}; -snapshots["sbb-form-field renders input"] = -`
-
+
-
- - -
-
+ Fill input + + + `; -/* end snapshot sbb-form-field renders input */ +/* end snapshot sbb-form-field renders input DOM */ -snapshots["sbb-form-field renders slotted label"] = +snapshots["sbb-form-field renders input Shadow DOM"] = `
`; -/* end snapshot sbb-form-field renders slotted label */ +/* end snapshot sbb-form-field renders input Shadow DOM */ -snapshots["sbb-form-field renders disabled input"] = +snapshots["sbb-form-field renders disabled input DOM"] = +` + + + +`; +/* end snapshot sbb-form-field renders disabled input DOM */ + +snapshots["sbb-form-field renders disabled input Shadow DOM"] = `
`; -/* end snapshot sbb-form-field renders disabled input */ +/* end snapshot sbb-form-field renders disabled input Shadow DOM */ + +snapshots["sbb-form-field renders readonly input with error DOM"] = +` + + + + You can't change this value. + + +`; +/* end snapshot sbb-form-field renders readonly input with error DOM */ -snapshots["sbb-form-field renders readonly input with error"] = +snapshots["sbb-form-field renders readonly input with error Shadow DOM"] = `
`; -/* end snapshot sbb-form-field renders readonly input with error */ +/* end snapshot sbb-form-field renders readonly input with error Shadow DOM */ -snapshots["sbb-form-field should render select without label"] = +snapshots["sbb-form-field should render select without label DOM"] = +` + + +`; +/* end snapshot sbb-form-field should render select without label DOM */ + +snapshots["sbb-form-field should render select without label Shadow DOM"] = `
`; -/* end snapshot sbb-form-field should render select without label */ +/* end snapshot sbb-form-field should render select without label Shadow DOM */ + +snapshots["sbb-form-field renders select with optional flag and borderless DOM"] = +` + + + +`; +/* end snapshot sbb-form-field renders select with optional flag and borderless DOM */ -snapshots["sbb-form-field renders select with optional flag and borderless"] = +snapshots["sbb-form-field renders select with optional flag and borderless Shadow DOM"] = `
`; -/* end snapshot sbb-form-field renders select with optional flag and borderless */ +/* end snapshot sbb-form-field renders select with optional flag and borderless Shadow DOM */ snapshots["sbb-form-field A11y tree Chrome"] = `

diff --git a/src/components/form-field/form-field/form-field.e2e.ts b/src/components/form-field/form-field/form-field.e2e.ts index 1513c0fd63..018c6ee65a 100644 --- a/src/components/form-field/form-field/form-field.e2e.ts +++ b/src/components/form-field/form-field/form-field.e2e.ts @@ -25,18 +25,6 @@ describe(`sbb-form-field with ${fixture.name}`, () => { assert.instanceOf(element, SbbFormFieldElement); }); - it('should remove the label element if no label is configured', async () => { - expect(element.querySelector('label')).to.be.null; - - element.setAttribute('label', 'Label'); - await waitForLitRender(element); - expect(element.querySelector('label')).not.to.be.null; - - element.removeAttribute('label'); - await waitForLitRender(element); - expect(element.querySelector('label')).to.be.null; - }); - it('should update empty input state', async () => { expect(element).to.have.attribute('data-input-empty'); @@ -85,11 +73,12 @@ describe(`sbb-form-field with ${fixture.name}`, () => { }); it('should assign id to input and reference it in the label', async () => { - element.setAttribute('label', 'Example'); - await waitForLitRender(element); - const label = element.querySelector('label'); + const newLabel = document.createElement('label'); + newLabel.textContent = 'Example'; + element.prepend(newLabel); await waitForLitRender(element); + const label = element.querySelector('label'); expect(input.id).to.match(/^sbb-form-field-input-/); expect(label).to.have.attribute('for', input.id); @@ -147,7 +136,8 @@ describe(`sbb-form-field with ${fixture.name}`, () => { beforeEach(async () => { element = await fixture( html` - + + Test `, @@ -198,8 +188,6 @@ describe(`sbb-form-field with ${fixture.name}`, () => { }); it('should assign id to label and reference it in the sbb-select', async () => { - element.setAttribute('label', 'Example'); - await waitForLitRender(element); const label = element.querySelector('label')!; expect(label.id).to.match(/^sbb-form-field-label-/); diff --git a/src/components/form-field/form-field/form-field.spec.ts b/src/components/form-field/form-field/form-field.spec.ts index 10525e85a6..e4ad14bb25 100644 --- a/src/components/form-field/form-field/form-field.spec.ts +++ b/src/components/form-field/form-field/form-field.spec.ts @@ -5,155 +5,119 @@ import { fixture, testA11yTreeSnapshot } from '../../core/testing/private'; import './form-field'; import '../../form-error'; +import type { SbbFormFieldElement } from './form-field'; describe(`sbb-form-field`, () => { - it('renders input', async () => { - const root = await fixture( - html` - - `, - ); - - expect(root).dom.to.be.equal(` - - - - - `); - await expect(root).shadowDom.to.be.equalSnapshot(); + describe('renders input', () => { + let element: SbbFormFieldElement; + + beforeEach(async () => { + element = await fixture( + html` + + + `, + ); + }); + + it('DOM', async () => { + await expect(element).dom.to.be.equalSnapshot(); + }); + + it('Shadow DOM', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); + }); }); - it('renders slotted label', async () => { - const root = await fixture(html` - - - - - `); - - expect(root).dom.to.be.equal(` - - - - - `); - - await expect(root).shadowDom.to.be.equalSnapshot(); + describe('renders disabled input', () => { + let element: SbbFormFieldElement; + + beforeEach(async () => { + element = await fixture(html` + + + + + `); + }); + + it('DOM', async () => { + await expect(element).dom.to.be.equalSnapshot(); + }); + + it('Shadow DOM', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); + }); }); - it('renders disabled input', async () => { - const root = await fixture(html` - - - - `); - - expect(root).dom.to.be.equal(` - - - - - `); - await expect(root).shadowDom.to.be.equalSnapshot(); + describe('renders readonly input with error', () => { + let element: SbbFormFieldElement; + + beforeEach(async () => { + element = await fixture(html` + + + + You can't change this value. + + `); + }); + + it('DOM', async () => { + await expect(element).dom.to.be.equalSnapshot(); + }); + + it('Shadow DOM', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); + }); }); - it('renders readonly input with error', async () => { - const root = await fixture(html` - - - You can't change this value. - - `); - - expect(root).dom.to.be.equal(` - - - - - You can't change this value. - - - `); - await expect(root).shadowDom.to.be.equalSnapshot(); + describe('should render select without label', () => { + let element: SbbFormFieldElement; + beforeEach(async () => { + element = await fixture(html` + + + + `); + }); + + it('DOM', async () => { + await expect(element).dom.to.be.equalSnapshot(); + }); + + it('Shadow DOM', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); + }); }); - it('should render select without label', async () => { - const root = await fixture(html` - - - - `); - - expect(root).dom.to.be.equal(` - - - - `); - await expect(root).shadowDom.to.be.equalSnapshot(); - }); - - it('renders select with optional flag and borderless', async () => { - const root = await fixture(html` - - - - `); - - expect(root).dom.to.be.equal(` - - - - - `); - await expect(root).shadowDom.to.be.equalSnapshot(); + describe('renders select with optional flag and borderless', () => { + let element: SbbFormFieldElement; + + beforeEach(async () => { + element = await fixture(html` + + + + + `); + }); + + it('DOM', async () => { + await expect(element).dom.to.be.equalSnapshot(); + }); + + it('Shadow DOM', async () => { + await expect(element).shadowDom.to.be.equalSnapshot(); + }); }); testA11yTreeSnapshot(html` diff --git a/src/components/form-field/form-field/form-field.stories.ts b/src/components/form-field/form-field/form-field.stories.ts index 02c371ccc1..466eb84ac5 100644 --- a/src/components/form-field/form-field/form-field.stories.ts +++ b/src/components/form-field/form-field/form-field.stories.ts @@ -77,7 +77,6 @@ const TemplateInput = ({ }: Args): TemplateResult => html` - ${TemplateBasicInput(args)} + ${label ? html`` : nothing} ${TemplateBasicInput(args)} `; -const TemplateInputWithSlottedLabel = ({ +const TemplateInputWithSlottedSpanLabel = ({ 'error-space': errorSpace, label, optional, @@ -127,7 +126,6 @@ const TemplateInputWithErrorSpace = (args: Args): TemplateResult => {

{ ?floating-label=${args['floating-label']} ?negative=${args.negative} > + ${args.label ? html`` : nothing} { const input = event.currentTarget as HTMLInputElement; @@ -162,20 +161,23 @@ const TemplateInputWithErrorSpace = (args: Args): TemplateResult => { `; }; -const TemplateInputWithIcons = (args: Args): TemplateResult => html` +const TemplateInputWithIcons = ({ label, ...args }: Args): TemplateResult => html` + ${label ? html`` : nothing} ${TemplateBasicInput(args)} ${PopoverTrigger()} `; const TemplateInputWithMiniButton = ({ + label, disabled, readonly, active, ...args }: Args): TemplateResult => html` + ${label ? html`` : nothing} ${TemplateBasicInput({ disabled, readonly, ...args })} html` + ${label ? html`` : nothing} ${TemplateBasicInput({ disabled, readonly, ...args })} @@ -202,7 +206,6 @@ const TemplateInputWithClearButton = ({ const TemplateSelect = (args: Args): TemplateResult => html` html` ?floating-label=${args['floating-label']} ?negative=${args.negative} > - ${TemplateBasicSelect(args)} + ${args.label ? html`` : nothing} ${TemplateBasicSelect(args)} `; @@ -225,7 +228,6 @@ const TemplateSelectWithErrorSpace = (args: Args): TemplateResult => {
{ ?floating-label=${args['floating-label']} ?negative=${args.negative} > + ${args.label ? html`` : nothing} @@ -30,7 +31,7 @@ The following components are designed to work inside a `sbb-form-field`: ### Label -Either use a `