feat(sbb-time-input): add size 's' (#3018)

sbb-design-systems · Aug 28, 2024 · 375bdad · 375bdad
1 parent 6000abc
commit 375bdad
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 25 deletions.
diff --git a/src/elements/core/styles/core.scss b/src/elements/core/styles/core.scss
@@ -27,6 +27,7 @@
 
     // Time Input
     --sbb-time-input-max-width: #{functions.px-to-rem-build(58)};
+    --sbb-time-input-s-max-width: #{functions.px-to-rem-build(51)};
 
     // Overlay
     --sbb-overlay-default-z-index: 1000;
@@ -41,6 +42,7 @@
 
       // Time Input
       --sbb-time-input-max-width: #{functions.px-to-rem-build(65)};
+      --sbb-time-input-s-max-width: #{functions.px-to-rem-build(58)};
     }
   }
 }
@@ -123,4 +125,8 @@ sbb-title + p {
 
 input[data-sbb-time-input] {
   max-width: var(--sbb-time-input-max-width);
+
+  sbb-form-field[size='s'] & {
+    max-width: var(--sbb-time-input-s-max-width);
+  }
 }
diff --git a/src/elements/time-input/readme.md b/src/elements/time-input/readme.md
@@ -12,10 +12,13 @@ which accepts the id of the native input, or directly its reference.
 
 ## In `sbb-form-field`
 
-If the `sbb-time-input` is used within a `sbb-form-field` with a native input, they are automatically linked.
+If the `sbb-time-input` is used within a `sbb-form-field`:
+
+- It links to the native input automatically.
+- It adapts to the form-field `size`.
 
 ```html
-<sbb-form-field width="collapse">
+<sbb-form-field width="collapse" size="s">
   <input value="13:30" />
   <sbb-time-input></sbb-time-input>
 </sbb-form-field>

diff --git a/src/elements/time-input/time-input.stories.ts b/src/elements/time-input/time-input.stories.ts
@@ -72,7 +72,7 @@ const value: InputType = {
     type: 'text',
   },
   table: {
-    category: 'Native input attribute',
+    category: 'Native input',
   },
 };
 
@@ -81,7 +81,7 @@ const readonly: InputType = {
     type: 'boolean',
   },
   table: {
-    category: 'Native input attribute',
+    category: 'Native input',
   },
 };
 
@@ -90,7 +90,7 @@ const disabled: InputType = {
     type: 'boolean',
   },
   table: {
-    category: 'Native input attribute',
+    category: 'Native input',
   },
 };
 
@@ -99,17 +99,17 @@ const required: InputType = {
     type: 'boolean',
   },
   table: {
-    category: 'Native input attribute',
+    category: 'Native input',
   },
 };
 
 const size: InputType = {
   control: {
     type: 'inline-radio',
   },
-  options: ['m', 'l'],
+  options: ['s', 'm', 'l'],
   table: {
-    category: 'Form-field attribute',
+    category: 'Form-field',
   },
 };
 
@@ -118,7 +118,7 @@ const negative: InputType = {
     type: 'boolean',
   },
   table: {
-    category: 'Form-field attribute',
+    category: 'Form-field',
   },
 };
 
@@ -127,7 +127,7 @@ const label: InputType = {
     type: 'text',
   },
   table: {
-    category: 'Form-field attribute',
+    category: 'Form-field',
   },
 };
 
@@ -136,7 +136,7 @@ const optional: InputType = {
     type: 'boolean',
   },
   table: {
-    category: 'Form-field attribute',
+    category: 'Form-field',
   },
 };
 
@@ -145,7 +145,7 @@ const borderless: InputType = {
     type: 'boolean',
   },
   table: {
-    category: 'Form-field attribute',
+    category: 'Form-field',
   },
 };
 
@@ -154,7 +154,7 @@ const iconStart: InputType = {
     type: 'text',
   },
   table: {
-    category: 'Form-field attribute',
+    category: 'Form-field',
   },
 };
 
@@ -163,7 +163,7 @@ const iconEnd: InputType = {
     type: 'text',
   },
   table: {
-    category: 'Form-field attribute',
+    category: 'Form-field',
   },
 };
 
@@ -196,7 +196,7 @@ const basicArgs: Args = {
 const formFieldBasicArgs = {
   ...basicArgs,
   label: 'Label',
-  size: size.options![0],
+  size: size.options![1],
   optional: false,
   borderless: false,
   iconStart: undefined,
@@ -206,7 +206,7 @@ const formFieldBasicArgs = {
 const formFieldBasicArgsWithIcons = {
   ...basicArgs,
   label: 'Label',
-  size: size.options![0],
+  size: size.options![1],
   optional: false,
   borderless: false,
   iconStart: 'clock-small',

diff --git a/src/elements/time-input/time-input.visual.spec.ts b/src/elements/time-input/time-input.visual.spec.ts
@@ -21,14 +21,25 @@ describe(`sbb-time-input`, () => {
     withError: [false, true],
   };
 
+  const sizeCases = {
+    size: ['s', 'm', 'l'],
+    noIcons: [false, true],
+  };
+
   type ParamsType = { [K in keyof typeof cases]: (typeof cases)[K][number] } & {
+    [K in keyof typeof sizeCases]: (typeof sizeCases)[K][number];
+  } & {
     readonly?: boolean;
     borderless?: boolean;
     disabled?: boolean;
-    noIcons?: boolean;
   };
   const template = (args: Partial<ParamsType>): TemplateResult => html`
-    <sbb-form-field ?borderless=${args.borderless} ?negative=${args.negative} width="collapse">
+    <sbb-form-field
+      ?borderless=${args.borderless}
+      ?negative=${args.negative}
+      size=${args.size || nothing}
+      width="collapse"
+    >
       <label>Label</label>
       ${!args.noIcons ? html`<sbb-icon slot="prefix" name="clock-small"></sbb-icon>` : nothing}
       <sbb-time-input></sbb-time-input>
@@ -62,6 +73,16 @@ describe(`sbb-time-input`, () => {
         );
       });
 
+      // Size and icons cases
+      describeEach(sizeCases, (params) => {
+        it(
+          state.name,
+          state.with(async (setup) => {
+            await setup.withFixture(template(params));
+          }),
+        );
+      });
+
       it(
         `disabled_${state.name}`,
         state.with(async (setup) => {
@@ -82,13 +103,6 @@ describe(`sbb-time-input`, () => {
           await setup.withFixture(template({ borderless: true }));
         }),
       );
-
-      it(
-        `no icon_${state.name}`,
-        state.with(async (setup) => {
-          await setup.withFixture(template({ noIcons: true }));
-        }),
-      );
     }
   });
 });