feat(sbb-autocomplete): introduce size s

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"
     >
       <label>Label</label>
@@ -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"
     >
       <label>Label</label>
@@ -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"
     >
       <label>Label</label>
@@ -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,13 +423,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 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: {

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,15 +88,15 @@ describe('sbb-autocomplete', () => {
     disableOption: boolean,
     disableGroup: boolean,
   ): TemplateResult => html`
-    <sbb-option value="Option 1">
+    <sbb-option value="Option 1" selected>
       <sbb-icon slot="icon" name="clock-small" style="color: var(--sbb-color-sky)"></sbb-icon>
       Option Value
     </sbb-option>
     ${createOptionsGroup(withIcon, disableOption, disableGroup)}
   `;
 
   const template = (args: typeof defaultArgs): TemplateResult => html`
-    <sbb-form-field ?negative=${args.negative} ?borderless=${args.borderless}>
+    <sbb-form-field ?negative=${args.negative} ?borderless=${args.borderless} size=${args.size}>
       <label>Label</label>
       <input placeholder="Placeholder" ?disabled=${args.disabled} ?readonly=${args.readonly} />
       <sbb-autocomplete ?preserve-icon-space=${args.preserveIconSpace}>
@@ -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));
+        }),
+      );
     }
   });
 });

src/elements/autocomplete/readme.md

@@ -68,6 +68,18 @@ The displayed `sbb-option` can be collected into groups using `sbb-optgroup` ele
 </sbb-form-field>
 ```
 
+### Size
+
+The component has no `size` property but, when slotted in a `sbb-form-field`, it adapts to the parent `size`.
+
+```html
+<sbb-form-field size="s">
+  <label>Label</label>
+  <input placeholder="Trigger element" />
+  <sbb-autocomplete> ... </sbb-autocomplete>
+</sbb-form-field>
+```
+
 ## Events
 
 The `sbb-option` emits the `optionSelected` event when selected via user interaction.