feat(sbb-select): size s

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

Hide file tree

Showing 4 changed files with 85 additions and 2 deletions.
diff --git a/src/elements/form-field/form-field/form-field.scss b/src/elements/form-field/form-field/form-field.scss
@@ -388,7 +388,14 @@
 .sbb-form-field__input {
   display: flex;
 
-  :host([size='s']:is([data-input-type='input'], [data-input-type='select'])) & {
+  :host(
+      [size='s']:is(
+          [data-input-type='input'],
+          [data-input-type='select'],
+          [data-input-type='sbb-select']
+        )
+    )
+    & {
     // In size s, the natural height of the text input is too small.
     // To not reserve too much space, we decrease the height.
     margin-block-end: #{sbb.px-to-rem-build(-2)};

diff --git a/src/elements/select/readme.md b/src/elements/select/readme.md
@@ -70,6 +70,18 @@ the selected values will be displayed in selection order, separated by a comma.
 </sbb-form-field>
 ```
 
+## Style
+
+The component has no `size` property but, when slotted in a `sbb-form-field`,
+the height of the panel's trigger adapts based on the parent `size` property.
+
+```html
+<sbb-form-field size="s">
+  <label>Train types</label>
+  <sbb-select> ... </sbb-select>
+</sbb-form-field>
+```
+
 ## Events
 
 Consumers can listen to the native `change`/`input` event on the `sbb-select` component to intercept the selection's change;

diff --git a/src/elements/select/select.stories.ts b/src/elements/select/select.stories.ts
@@ -49,6 +49,16 @@ const borderless: InputType = {
   },
 };
 
+const size: InputType = {
+  control: {
+    type: 'inline-radio',
+  },
+  options: ['m', 's'],
+  table: {
+    category: 'Form-field',
+  },
+};
+
 const negative: InputType = {
   control: {
     type: 'boolean',
@@ -160,6 +170,7 @@ const disableGroup: InputType = {
 
 const defaultArgTypes: ArgTypes = {
   borderless,
+  size,
   negative,
   floatingLabel,
   value,
@@ -176,6 +187,7 @@ const defaultArgTypes: ArgTypes = {
 
 const defaultArgs: Args = {
   borderless: false,
+  size: size.options![0],
   negative: false,
   floatingLabel: false,
   value: undefined,
@@ -280,6 +292,7 @@ const createOptionsGroup = (
 
 const FormFieldTemplate = ({
   borderless,
+  size,
   negative,
   floatingLabel,
   numberOfOptions,
@@ -291,6 +304,7 @@ const FormFieldTemplate = ({
   <div>
     <sbb-form-field
       ?borderless=${borderless}
+      size=${size}
       ?negative=${negative}
       ?floating-label=${floatingLabel}
       data-testid="form-field"
@@ -313,6 +327,7 @@ const FormFieldTemplate = ({
 
 const SelectEllipsisTemplate = ({
   borderless,
+  size,
   negative,
   floatingLabel,
   numberOfOptions,
@@ -330,6 +345,7 @@ const SelectEllipsisTemplate = ({
     <div>
       <sbb-form-field
         ?borderless=${borderless}
+        size=${size}
         ?negative=${negative}
         ?floating-label=${floatingLabel}
         data-testid="form-field"
@@ -359,6 +375,7 @@ const SelectEllipsisTemplate = ({
 
 const FormFieldTemplateWithError = ({
   borderless,
+  size,
   negative,
   floatingLabel,
   numberOfOptions,
@@ -377,6 +394,7 @@ const FormFieldTemplateWithError = ({
     <div>
       <sbb-form-field
         ?borderless=${borderless}
+        size=${size}
         ?negative=${negative}
         ?floating-label=${floatingLabel}
         id="sbb-form-field"
@@ -411,12 +429,14 @@ const FormFieldTemplateWithError = ({
 
 const KeyboardInteractionTemplate = ({
   borderless,
+  size,
   negative,
   floatingLabel,
   ...args
 }: Args): TemplateResult => html`
   <sbb-form-field
     ?borderless=${borderless}
+    size=${size}
     ?negative=${negative}
     ?floating-label=${floatingLabel}
     data-testid="form-field"
@@ -470,6 +490,34 @@ export const MultipleSelectNegative: StoryObj = {
   play: isChromatic() ? playStory : undefined,
 };
 
+export const SingleSelectSizeS: StoryObj = {
+  render: FormFieldTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, size: size.options![1] },
+  play: isChromatic() ? playStory : undefined,
+};
+
+export const SingleSelectNegativeSizeS: StoryObj = {
+  render: FormFieldTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, negative: true, size: size.options![1] },
+  play: isChromatic() ? playStory : undefined,
+};
+
+export const MultipleSelectSizeS: StoryObj = {
+  render: FormFieldTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, multiple: true, size: size.options![1] },
+  play: isChromatic() ? playStory : undefined,
+};
+
+export const MultipleSelectNegativeSizeS: StoryObj = {
+  render: FormFieldTemplate,
+  argTypes: defaultArgTypes,
+  args: { ...defaultArgs, multiple: true, negative: true, size: size.options![1] },
+  play: isChromatic() ? playStory : undefined,
+};
+
 export const SingleSelectWithGrouping: StoryObj = {
   render: FormFieldTemplate,
   argTypes: defaultArgTypes,

diff --git a/src/elements/select/select.visual.spec.ts b/src/elements/select/select.visual.spec.ts
@@ -11,6 +11,7 @@ describe('sbb-select', () => {
   const valueEllipsis: string = 'This label name is so long that it needs ellipsis to fit.';
   const defaultArgs = {
     borderless: false,
+    size: 'm',
     negative: false,
     disableOption: false,
     withOptionGroup: false,
@@ -53,6 +54,7 @@ describe('sbb-select', () => {
 
   const template = ({
     borderless,
+    size,
     negative,
     disableOption,
     withOptionGroup,
@@ -64,7 +66,7 @@ describe('sbb-select', () => {
       args.value = [args.value as string];
     }
     return html`
-      <sbb-form-field ?borderless=${borderless} ?negative=${negative}>
+      <sbb-form-field ?borderless=${borderless} ?negative=${negative} size=${size}>
         <label>Select</label>
         <sbb-select
           value=${args.value || nothing}
@@ -194,6 +196,20 @@ describe('sbb-select', () => {
           }),
         );
 
+        it(
+          `negative=${negative} multiple=${multiple} size=s`,
+          visualDiffDefault.with(async (setup) => {
+            await setup.withFixture(template({ ...defaultArgs, negative, multiple, size: 's' }), {
+              minHeight: '600px',
+              backgroundColor: negative ? 'var(--sbb-color-black)' : undefined,
+            });
+            setup.withPostSetupAction(() => {
+              const select = setup.snapshotElement.querySelector('sbb-select')!;
+              select.open();
+            });
+          }),
+        );
+
         it(
           `negative=${negative} multiple=${multiple} disableOption=true`,
           visualDiffDefault.with(async (setup) => {