fix(sbb-form-field): remove label property and attribute (#2523)

In order to support SSR we had to remove the label property. As replacement the `<label>` tag should be used. BREAKING CHANGE: `label` property and attribute of `<sbb-form-field>` was removed. Use `<label>` tag inside `<sbb-form-field>` to provide the label information. E.g. `<sbb-form-field label="Example">...</sbb-form-field>` becomes `<sbb-form-field><label>Example</label>...</sbb-form-field>`
sbb-design-systems · Mar 27, 2024 · 602064c · 602064c
1 parent 433c57c
commit 602064c
Show file tree

Hide file tree

Showing 24 changed files with 370 additions and 325 deletions.
diff --git 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"
     >
+      <label>Label</label>
       <input
         placeholder="Placeholder"
         data-testid="autocomplete-input"
@@ -279,9 +279,9 @@ const OptionGroupTemplate = (args: Args): TemplateResult => html`
       ?negative=${args.negative}
       ?borderless=${args.borderless}
       ?floating-label=${args.floatingLabel}
-      label="Label"
       data-testid="form-field"
     >
+      <label>Label</label>
       <input
         placeholder="Placeholder"
         data-testid="autocomplete-input"
@@ -309,9 +309,9 @@ const MixedTemplate = (args: Args): TemplateResult => html`
       ?negative=${args.negative}
       ?borderless=${args.borderless}
       ?floating-label=${args.floatingLabel}
-      label="Label"
       data-testid="form-field"
     >
+      <label>Label</label>
       <input
         placeholder="Placeholder"
         data-testid="autocomplete-input"
@@ -352,10 +352,10 @@ const RequiredTemplate = (args: Args): TemplateResult => {
         ?negative=${args.negative}
         ?borderless=${args.borderless}
         ?floating-label=${args.floatingLabel}
-        label="Label"
         data-testid="form-field"
         id="sbb-form-field"
       >
+        <label>Label</label>
         <input
           id="sbb-autocomplete"
           data-testid="autocomplete-input"

diff --git a/src/components/autocomplete/readme.md b/src/components/autocomplete/readme.md
@@ -25,7 +25,8 @@ it will automatically connect to the native `<input>` as trigger and will displa
 
 ```html
 <!-- Origin element -->
-<sbb-form-field label="Label">
+<sbb-form-field>
+  <label>Label</label>
   <!-- Trigger element -->
   <input placeholder="Trigger element" />
 
@@ -50,7 +51,8 @@ The displayed `sbb-option` can be collected into groups using `sbb-optgroup` ele
 
 ```html
 <!-- Origin element -->
-<sbb-form-field label="Label">
+<sbb-form-field>
+  <label>Label</label>
   <!-- Trigger element -->
   <input placeholder="Trigger element" />
 

diff --git 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<string, string> => ({
 });
 
 const MiniButtonCommonTemplate = ({ slot, ...args }: Args): TemplateResult => html`
-  <sbb-form-field label="Demo sbb-mini-button" ?negative=${args.negative}>
+  <sbb-form-field ?negative=${args.negative}>
+    <label>Demo sbb-mini-button</label>
     <input placeholder="Placeholder" ?disabled=${args.disabled} />
     <sbb-mini-button slot=${slot} ${sbbSpread(args)}></sbb-mini-button>
   </sbb-form-field>
 `;
 
 const MiniButtonSlottedIconCommonTemplate = ({ slot, ...args }: Args): TemplateResult => html`
-  <sbb-form-field label="Demo sbb-mini-button" ?negative=${args.negative}>
+  <sbb-form-field ?negative=${args.negative}>
+    <label>Demo sbb-mini-button</label>
     <input placeholder="Placeholder" ?disabled=${args.disabled} />
     <sbb-mini-button slot=${slot} ${sbbSpread(args)}>
       <sbb-icon name="user-small" slot="icon"></sbb-icon>

diff --git 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
-<sbb-form-field label="Tickets">
+<sbb-form-field>
+  <label>Tickets</label>
   <input placeholder="Insert the number of tickets you want to purchase." />
   <sbb-mini-button
     slot="suffix"

diff --git a/src/components/datepicker/datepicker/datepicker.stories.ts b/src/components/datepicker/datepicker/datepicker.stories.ts
@@ -10,7 +10,7 @@ import type {
   StoryContext,
 } from '@storybook/web-components';
 import isChromatic from 'chromatic';
-import type { TemplateResult } from 'lit';
+import { nothing, type TemplateResult } from 'lit';
 import { html } from 'lit';
 import { styleMap } from 'lit/directives/style-map.js';
 
@@ -382,11 +382,11 @@ const TemplateFormField = ({
     <sbb-form-field
       size=${size}
       ?negative=${negative}
-      label=${label}
       ?optional=${optional}
       ?borderless=${borderless}
       width="collapse"
     >
+      ${label ? html`<label>${label}</label>` : nothing}
       <sbb-datepicker-previous-day></sbb-datepicker-previous-day>
       <sbb-datepicker-next-day></sbb-datepicker-next-day>
       <sbb-datepicker-toggle

diff --git a/src/components/dialog/dialog.stories.ts b/src/components/dialog/dialog.stories.ts
@@ -264,10 +264,12 @@ const FormTemplate = (args: Args): TemplateResult => html`
       method and returning the form values to update the details.
     </div>
     <form style=${styleMap(formStyle)} @submit=${(e: SubmitEvent) => e.preventDefault()}>
-      <sbb-form-field error-space="none" label="Message" size="m">
+      <sbb-form-field error-space="none" size="m">
+        <label>Message</label>
         <input placeholder="Your custom massage" value="Hello 👋" name="message" />
       </sbb-form-field>
-      <sbb-form-field error-space="none" label="Favorite animal" size="m">
+      <sbb-form-field error-space="none" size="m">
+        <label>Favorite animal</label>
         <select name="animal">
           <option>Red Panda</option>
           <option>Cheetah</option>

diff --git a/src/components/form-field/form-field-clear/__snapshots__/form-field-clear.spec.snap.js b/src/components/form-field/form-field-clear/__snapshots__/form-field-clear.spec.snap.js
@@ -6,12 +6,10 @@ snapshots["sbb-form-field-clear renders Formfield Dom"] =
   data-input-type="input"
   data-slot-names="label suffix unnamed"
   error-space="none"
-  label="Label"
   size="m"
   width="default"
 >
   <label
-    data-creator="sbb-form-field"
     for="sbb-form-field-input-0"
     slot="label"
   >

diff --git a/src/components/form-field/form-field-clear/form-field-clear.e2e.ts b/src/components/form-field/form-field-clear/form-field-clear.e2e.ts
@@ -14,7 +14,8 @@ describe(`sbb-form-field-clear with ${fixture.name}`, () => {
 
   beforeEach(async () => {
     formField = await fixture(
-      html` <sbb-form-field label="Label">
+      html` <sbb-form-field>
+        <label>Label</label>
         <input id="input" type="text" placeholder="Input placeholder" value="Input value" />
         <sbb-form-field-clear></sbb-form-field-clear>
       </sbb-form-field>`,

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
@@ -15,7 +15,8 @@ describe(`sbb-form-field-clear`, () => {
 
     beforeEach(async () => {
       root = await fixture(html`
-        <sbb-form-field label="Label">
+        <sbb-form-field>
+          <label>Label</label>
           <input type="text" placeholder="Input placeholder" value="Input value" />
           <sbb-form-field-clear></sbb-form-field-clear>
         </sbb-form-field>

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
@@ -59,7 +59,8 @@ const basicArgs: Args = {
 };
 
 const DefaultTemplate = ({ negative, ...args }: Args): TemplateResult => html`
-  <sbb-form-field label="Label" ?negative=${negative}>
+  <sbb-form-field ?negative=${negative}>
+    <label>Label</label>
     <sbb-icon slot="prefix" name="pie-small"></sbb-icon>
     <input type="text" placeholder="Input placeholder" value="Input value" ${sbbSpread(args)} />
     <sbb-form-field-clear></sbb-form-field-clear>

diff --git 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
-<sbb-form-field label="Label">
+<sbb-form-field>
+  <label>Label</label>
   <input type="text" placeholder="Input placeholder" value="Input value" />
   <sbb-form-field-clear></sbb-form-field-clear>
 </sbb-form-field>