feat(component): form select

.changeset/long-shrimps-roll.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Updated `.form-select` select to v2.

.changeset/loud-peaches-hang.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': major
+---
+
+Removed size variants for form select.

packages/documentation/src/stories/components/forms/select/select.docs.mdx

@@ -23,8 +23,7 @@ Custom `<select>` menus need only the class `.form-select` to trigger the custom
   <Controls of={SelectStories.Default} />
 </div>
 
-<StylesPackageImport components={["forms", "form-select"]}
-                     required={{ 'floating-label': true, 'form-feedback': true }} />
+<StylesPackageImport components={['form-select']} required={{ 'form-feedback': true }} />
 
 ## Concrete Examples of Application
 
@@ -44,26 +43,6 @@ you can dynamically add the class `.form-select-empty` to the `<select>` when th
 
 <Canvas of={SelectStories.FloatingLabelPlaceholder} />
 
-### Sizing
-
-<div className="alert alert-warning">
-  <h4 className="alert-heading">We're deprecating the regular and medium sizes for text input, textarea and select.</h4>
-  <p className="mt-0">This will make it easier to select the appropriate size variant: small for internal applications, large for external applications.<br />`.form-select-rg` and `.form-select-md` are deprecated and will be removed in the next major version.</p>
-</div>
-
-The size can be adjusted, by simply adding one of the following four classes:
-
-- Small: `.form-select-sm`
-- Regular: `.form-select-rg`
-- Medium: default or `.form-select-md`
-- Large: `.form-select-lg`
-
-<div className="alert alert-info alert-md">
-  Regular and medium size classes are not available on floating-label elements
-</div>
-
-<Canvas of={SelectStories.Size} />
-
 ### Validation
 
 Simply add the classes `is-valid` or `is-invalid` to the `<select>` element to show it in the expected state.<br/>

packages/documentation/src/stories/components/forms/select/select.snapshot.stories.ts

@@ -28,12 +28,10 @@ export const Select: Story = {
         hint: ['Hintus textus', context.args.hint],
       }),
       ...bombArgs({
-        size: context.argTypes.size.options,
         disabled: [false, true],
         validation: context.argTypes.validation.options,
       }),
       ...bombArgs({
-        size: context.argTypes.size.options,
         validation: context.argTypes.validation.options.filter(
           (option: string) => option !== 'is-invalid',
         ),
@@ -60,7 +58,6 @@ export const Select: Story = {
       }),
       ...bombArgs({
         multiple: [true],
-        size: context.argTypes.size.options,
         disabled: [false, true],
         validation: context.argTypes.validation.options,
       }),
@@ -77,17 +74,6 @@ export const Select: Story = {
               class="${bg} d-flex gap-16 flex-column p-16"
               data-color-scheme=${bg === 'bg-white' ? 'light' : 'dark'}
             >
-              <h2>Default</h2>
-              ${bombArgsGeneratedDefault.map((args: Args) => {
-                return html`
-                  <div>
-                    ${Default.render?.(
-                      { ...context.args, ...Default.args, ...args },
-                      { ...context, id: args.id },
-                    )}
-                  </div>
-                `;
-              })}
               <h2>Floating Label</h2>
               ${bombArgsGeneratedDefault.map(
                 (args: Args) =>
@@ -100,18 +86,19 @@ export const Select: Story = {
                     </div>
                   `,
               )}
-              <h2>Multiple - Default</h2>
-              ${bombArgsGeneratedMultiple.map(
-                (args: Args) =>
-                  html`
+              <h2>Default</h2>
+              ${bombArgsGeneratedDefault
+                .map((args: Args) => ({ ...args, floatingLabel: false }))
+                .map((args: Args) => {
+                  return html`
                     <div>
                       ${Default.render?.(
                         { ...context.args, ...Default.args, ...args },
                         { ...context, id: args.id },
                       )}
                     </div>
-                  `,
-              )}
+                  `;
+                })}
               <h2>Multiple - Floating Label</h2>
               ${bombArgsGeneratedMultiple.map(
                 (args: Args) =>
@@ -124,6 +111,18 @@ export const Select: Story = {
                     </div>
                   `,
               )}
+              <h2>Multiple - Default</h2>
+              ${bombArgsGeneratedMultiple.map(
+                (args: Args) =>
+                  html`
+                    <div>
+                      ${Default.render?.(
+                        { ...context.args, ...Default.args, ...args },
+                        { ...context, id: args.id },
+                      )}
+                    </div>
+                  `,
+              )}
             </div>
           `;
         })}

packages/documentation/src/stories/components/forms/select/select.stories.ts

@@ -18,16 +18,14 @@ const meta: MetaComponent = {
     badges: [],
     design: {
       type: 'figma',
-      url: 'https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=22183-21629&mode=design&t=3lniLiZhl7q9Gqgn-4',
+      url: 'https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=21-183',
     },
   },
   args: {
     label: 'Label',
-    floatingLabel: false,
+    floatingLabel: true,
     hiddenLabel: false,
     value: undefined,
-    size: 'form-select-lg',
-    sizeFloatingLabel: 'form-select-lg',
     options: 5,
     multiple: false,
     multipleSize: 4,
@@ -81,46 +79,6 @@ const meta: MetaComponent = {
         disable: true,
       },
     },
-    size: {
-      name: 'Size',
-      description: "Sets the size of the component's appearance.",
-      if: {
-        arg: 'floatingLabel',
-        truthy: false,
-      },
-      control: {
-        type: 'select',
-        labels: {
-          'form-select-sm': 'Small',
-          'form-select-rg': 'Regular (deprecated)',
-          'null': 'Medium (deprecated)',
-          'form-select-lg': 'Large',
-        },
-      },
-      options: ['form-select-sm', 'form-select-rg', 'null', 'form-select-lg'],
-      table: {
-        category: 'General',
-      },
-    },
-    sizeFloatingLabel: {
-      name: 'Size',
-      description: "Sets the size of the component's appearance.",
-      if: {
-        arg: 'floatingLabel',
-        truthy: true,
-      },
-      control: {
-        type: 'select',
-        labels: {
-          'form-select-sm': 'Small',
-          'form-select-lg': 'Large',
-        },
-      },
-      options: ['form-select-sm', 'form-select-lg'],
-      table: {
-        category: 'General',
-      },
-    },
     options: {
       name: 'Options',
       description: 'Amount of `option` elements to render in the component.',
@@ -213,8 +171,6 @@ const Template: Story = {
     const [_, updateArgs] = useArgs();
     const classes = [
       'form-select',
-      args.size,
-      args.sizeFloatingLabel,
       args.validation,
       args.floatingLabelPlaceholder && !args.value ? 'form-select-empty' : null,
     ]
@@ -295,15 +251,7 @@ export const FloatingLabel: Story = {
   ...Template,
   parameters: {
     controls: {
-      exclude: [
-        'Hidden Label',
-        'Options',
-        'Multiple',
-        'Size',
-        'Helper Text',
-        'Disabled',
-        'Validation',
-      ],
+      exclude: ['Hidden Label', 'Options', 'Multiple', 'Helper Text', 'Disabled', 'Validation'],
     },
   },
   args: {
@@ -316,15 +264,7 @@ export const FloatingLabelPlaceholder: Story = {
   ...Template,
   parameters: {
     controls: {
-      exclude: [
-        'Hidden Label',
-        'Options',
-        'Multiple',
-        'Size',
-        'Helper Text',
-        'Disabled',
-        'Validation',
-      ],
+      exclude: ['Hidden Label', 'Options', 'Multiple', 'Helper Text', 'Disabled', 'Validation'],
     },
   },
   args: {
@@ -334,28 +274,6 @@ export const FloatingLabelPlaceholder: Story = {
   },
 };
 
-export const Size: Story = {
-  ...Template,
-  parameters: {
-    controls: {
-      exclude: [
-        'Label',
-        'Floating Label',
-        'Hidden Label',
-        'Options',
-        'Multiple',
-        'Helper Text',
-        'Disabled',
-        'Validation',
-      ],
-    },
-  },
-  args: {
-    size: 'form-select-sm',
-    hint: '',
-  },
-};
-
 export const Validation: Story = {
   ...Template,
   parameters: {
@@ -365,7 +283,6 @@ export const Validation: Story = {
         'Floating Label',
         'Hidden Label',
         'Options',
-        'Size',
         'Multiple',
         'Helper Text',
         'Disabled',

packages/styles/src/components/floating-label.scss

@@ -18,16 +18,17 @@
 
 tokens.$default-map: components.$post-text-input;
 
+// TODO: Since each input/select/textarea will have their own tokens, make sure to separate this file between the 3 corresponding files form-select, forms (should be renamed text-input) and form-textarea
 .form-floating {
   position: relative;
 
-  > .form-control,
-  > .form-select {
+  > .form-control {
     height: tokens.get('input-sizing-height');
     min-height: tokens.get('input-sizing-height');
   }
 
-  > label {
+  > .form-control ~ label,
+  > textarea ~ label {
     position: absolute;
     z-index: 2;
     text-align: start;
@@ -81,7 +82,7 @@ tokens.$default-map: components.$post-text-input;
       color: tokens.get('input-color-disabled-fg');
     }
 
-    &:hover ~ label {
+    &:not(:disabled):hover ~ label {
       color: tokens.get('input-color-hover-fg');
     }
 
@@ -93,73 +94,13 @@ tokens.$default-map: components.$post-text-input;
     }
   }
 
-  > .form-select {
-    padding-block-start: tokens.get('input-filled-padding-block-start');
-    padding-block-end: tokens.get('input-filled-padding-block-end');
-
-    ~ label {
-      color: tokens.get('input-color-enabled-fg');
-      padding-block-start: tokens.get('input-label-filled-padding-block-start');
-      max-width: calc(100% - (#{tokens.get('input-border-width')} * 2));
-      transition: all 0.25s ease-in-out;
-    }
-
-    &:disabled {
-      ~ label {
-        color: tokens.get('input-color-disabled-fg');
-      }
-    }
-
-    &:empty,
-    &.form-select-empty {
-      padding-block-start: tokens.get('input-filled-padding-block-start');
-      padding-block-end: tokens.get('input-filled-padding-block-end');
-
-      ~ label {
-        padding-block-start: tokens.get('input-label-empty-padding-block-start');
-        max-width: calc(100% - (#{tokens.get('input-border-width')} * 2));
-      }
-    }
-
-    &[multiple] {
-      padding-block-start: spacing.$size-big;
-      padding-block-end: 0;
-      height: auto;
-
-      ~ label {
-        padding-block-end: 0;
-        max-width: calc(100% - (#{tokens.get('input-border-width')} * 2));
-        height: auto;
-      }
-
-      &:not(:disabled) {
-        ~ label {
-          background-color: tokens.get('input-color-enabled-bg');
-        }
-      }
-
-      &:empty {
-        ~ label {
-          padding-block-start: forms.$form-floating-padding-y;
-          padding-block-end: forms.$form-floating-padding-y;
-          width: calc(
-            100% - (#{tokens.get('input-border-width')} * 2) - #{tokens.get(
-                'input-label-empty-padding-inline-start'
-              )}
-          );
-        }
-      }
-    }
-  }
-
   > .form-control:focus,
-  > .form-control:not(:placeholder-shown),
-  > .form-select {
+  > .form-control:not(:placeholder-shown) {
     ~ label {
       font-size: tokens.get('input-label-filled-font-size');
     }
 
-    &:not(:hover) {
+    &:not(:hover):not(:disabled) {
       ~ label {
         color: tokens.get('input-color-selected-fg');
       }
@@ -177,7 +118,7 @@ tokens.$default-map: components.$post-text-input;
     }
   }
 
-  > :disabled ~ label,
+  > textarea:disabled ~ label,
   > .form-control:disabled ~ label {
     // Required for `.form-control`s because of specificity
     color: tokens.get('input-color-disabled-fg');