feat(datepicker): add size s (#3006)

sbb-design-systems · Aug 21, 2024 · b75c4c5 · b75c4c5
1 parent 298b335
commit b75c4c5
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 3 deletions.
diff --git a/src/elements/datepicker/datepicker/datepicker.stories.ts b/src/elements/datepicker/datepicker/datepicker.stories.ts
@@ -175,7 +175,7 @@ const size: InputType = {
   control: {
     type: 'inline-radio',
   },
-  options: ['m', 'l'],
+  options: ['s', 'm', 'l'],
   table: {
     category: 'Form-field attribute',
   },
@@ -268,7 +268,7 @@ const formFieldBasicArgsTypes: ArgTypes = {
 const formFieldBasicArgs = {
   ...basicArgs,
   label: 'Label',
-  size: size.options![0],
+  size: size.options![1],
   negative: false,
   optional: false,
   borderless: false,
@@ -446,10 +446,16 @@ export const InFormFieldWithDateParser: StoryObj = {
   args: { ...formFieldBasicArgs, value: '2023-02-12', dateHandling: dateHandling.options![1] },
 };
 
+export const InFormFieldSmall: StoryObj = {
+  render: TemplateFormField,
+  argTypes: { ...formFieldBasicArgsTypes },
+  args: { ...formFieldBasicArgs, size: size.options![0] },
+};
+
 export const InFormFieldLarge: StoryObj = {
   render: TemplateFormField,
   argTypes: { ...formFieldBasicArgsTypes },
-  args: { ...formFieldBasicArgs, size: size.options![1] },
+  args: { ...formFieldBasicArgs, size: size.options![2] },
 };
 
 export const InFormFieldOptional: StoryObj = {

diff --git a/src/elements/datepicker/datepicker/datepicker.visual.spec.ts b/src/elements/datepicker/datepicker/datepicker.visual.spec.ts
@@ -25,6 +25,8 @@ describe(`sbb-datepicker`, () => {
     ],
   };
 
+  const sizes = ['s', 'l'];
+
   describeViewports({ viewports: ['zero', 'medium'] }, () => {
     describeEach(cases, ({ negative, states }) => {
       beforeEach(async function () {
@@ -71,5 +73,23 @@ describe(`sbb-datepicker`, () => {
         }),
       );
     });
+
+    for (const size of sizes) {
+      it(
+        `size=${size}`,
+        visualDiffDefault.with(async (setup) => {
+          await setup.withFixture(html`
+            <sbb-form-field width="collapse" size=${size as 's' | 'm' | 'l'}>
+              <label>Label</label>
+              <sbb-datepicker-previous-day></sbb-datepicker-previous-day>
+              <sbb-datepicker-next-day></sbb-datepicker-next-day>
+              <sbb-datepicker-toggle></sbb-datepicker-toggle>
+              <input value="12.02.2023" />
+              <sbb-datepicker now="2023-02-12T00:00:00Z"></sbb-datepicker>
+            </sbb-form-field>
+          `);
+        }),
+      );
+    }
   });
 });