feat(styles, documentation): textarea component (#4062)

Co-authored-by: Alizé Debray <[email protected]>
swisspost · Dec 5, 2024 · 7408397 · 7408397
1 parent 5dd0650
commit 7408397
Show file tree

Hide file tree

Showing 13 changed files with 230 additions and 242 deletions.
diff --git a/.changeset/flat-bears-tap.md b/.changeset/flat-bears-tap.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': major
+'@swisspost/design-system-styles': major
+---
+
+Removed size variants for textarea form control. The sizing classes `.form-control-sm`, `.form-control-rg` and `.form-control-lg` for textarea no longer have any effect and can be removed safely.
diff --git a/.changeset/purple-terms-march.md b/.changeset/purple-terms-march.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Updated `.form-control` textarea to new Post design.
diff --git a/...documentation/src/stories/components/segmented-button/segmented-button.docs.mdx b/...documentation/src/stories/components/segmented-button/segmented-button.docs.mdx
@@ -15,7 +15,7 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx';
 The segmented button is a single-select component. 
 It allows users to toggle between two or more content sections within the same area on the screen.
 
-<div role="alert" class="alert alert-info">
+<div role="alert" class="banner banner-info">
   <p>
     If the labels are too long or the number of options is excessive for the available space,
     consider using a select component. Keep in mind that long labels may cause layout issues,

diff --git a/packages/documentation/src/stories/components/textarea/textarea.docs.mdx b/packages/documentation/src/stories/components/textarea/textarea.docs.mdx
@@ -23,10 +23,7 @@ Custom textarea elements need only the class `.form-control` to trigger the cust
   <Controls of={TextareaStories.Default} />
 </div>
 
-<StylesPackageImport
-  components={['forms']}
-  required={{ 'floating-label': true, 'validation': true }}
-/>
+<StylesPackageImport components={['form-textarea']} required={{ validation: true }} />
 
 ## Concrete Examples of Application
 
@@ -38,34 +35,3 @@ Wrap a pair of `<textarea>` and `<label>` elements in a `.form-floating` contain
 But note that the `<textarea>` element must come first, so we can ensure the correct styles.
 
 <Canvas of={TextareaStories.FloatingLabel} />
-
-### Sizing
-
-<div className="banner banner-warning">
-  <h4 className="banner-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-control-rg` and `.form-control-md` are deprecated and will be removed in the next major
-    version.
-  </p>
-</div>
-
-The size can be changed by simply adding one of four classes:
-
-- Small: `.form-control-sm`
-- Regular: `.form-control-rg`
-- Medium: default or `.form-control-md`
-- Large: `.form-control-lg`
-
-<div className="banner banner-info">
-  Regular and medium size classes are not available on floating-label elements
-</div>
-
-<Canvas of={TextareaStories.Size} />
-<div className="hide-col-default">
-  <Controls of={TextareaStories.Size} />
-</div>
diff --git a/packages/documentation/src/stories/components/textarea/textarea.snapshot.stories.ts b/packages/documentation/src/stories/components/textarea/textarea.snapshot.stories.ts
@@ -1,8 +1,8 @@
 import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
 import meta from './textarea.stories';
 import { html } from 'lit';
-import { schemes } from '@/shared/snapshots/schemes';
 import { COMBINATIONS, getCombinations } from '@/utils/inputComponentsGetCombinations';
+import { schemes } from '@/shared/snapshots/schemes';
 
 const { id, ...metaWithoutId } = meta;
 
@@ -37,34 +37,17 @@ export const Textarea: Story = {
     ];
 
     return schemes(
-      scheme => html`
-        <div class="d-flex gap-16 flex-column">
-          <h3>Sizes</h3>
-          ${getCombinations('size', context.argTypes.size.options, combinations).map(
-            (args: Args) => {
-              context.id = `${scheme}-${crypto.randomUUID()}`;
-              return html`
-                <div>
-                  ${args.title !== undefined && args.title
-                    ? html`
-                        <h4>
-                          ${Object.entries(context.argTypes.size.control.labels)
-                            .filter(([key]) => key === args.size)
-                            .map(s => s[1])}
-                        </h4>
-                      `
-                    : ''}
-                  <div>${meta.render?.({ ...context.args, ...args }, context)}</div>
-                </div>
-              `;
-            },
-          )}
-          <h3>Floating Label</h3>
-          ${getCombinations('floatingLabel', [true], combinations).map((args: Args) => {
-            context.id = `${scheme}-${crypto.randomUUID()}`;
-            return html` <div>${meta.render?.({ ...context.args, ...args }, context)}</div> `;
-          })}
-        </div>
+      () => html`
+        <h3>Floating Label</h3>
+        ${getCombinations('floatingLabel', [true], combinations).map((args: Args) => {
+          context.id = crypto.randomUUID();
+          return html` <div>${meta.render?.({ ...context.args, ...args }, context)}</div> `;
+        })}
+        <h3>Standard</h3>
+        ${getCombinations('floatingLabel', [false], combinations).map((args: Args) => {
+          context.id = crypto.randomUUID();
+          return html` <div>${meta.render?.({ ...context.args, ...args }, context)}</div> `;
+        })}
       `,
     );
   },

diff --git a/packages/documentation/src/stories/components/textarea/textarea.stories.ts b/packages/documentation/src/stories/components/textarea/textarea.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=22194-89755&mode=design&t=3lniLiZhl7q9Gqgn-4',
+      url: 'https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=21-182',
     },
   },
   args: {
     label: 'Label',
-    floatingLabel: false,
+    floatingLabel: true,
     hiddenLabel: false,
     value: undefined,
-    size: 'form-control-lg',
-    sizeFloatingLabel: 'form-control-lg',
     hint: 'Hintus textus elare volare cantare hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis.',
     disabled: false,
     validation: 'null',
@@ -78,46 +76,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-control-sm': 'Small',
-          'form-control-rg': 'Regular (deprecated)',
-          'null': 'Middle (deprecated)',
-          'form-control-lg': 'Large',
-        },
-      },
-      options: ['form-control-sm', 'form-control-rg', 'null', 'form-control-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-control-sm': 'Small',
-          'form-control-lg': 'Large',
-        },
-      },
-      options: ['form-control-sm', 'form-control-lg'],
-      table: {
-        category: 'General',
-      },
-    },
     rows: {
       name: 'Rows',
       description:
@@ -180,8 +138,6 @@ type Story = StoryObj;
 function renderTextarea(args: Args, context: StoryContext) {
   const classes = mapClasses({
     'form-control': true,
-    [args.size]: !args.floatingLabel,
-    [args.sizeFloatingLabel]: args.floatingLabel,
     [args.validation]: args.validation,
   });
   const useAriaLabel = !args.floatingLabel && args.hiddenLabel;
@@ -204,7 +160,7 @@ function renderTextarea(args: Args, context: StoryContext) {
       id=${context.id}
       class=${classes}
       defaultValue=${args.value ?? nothing}
-      placeholder=${useAriaLabel ? args.label : ''}
+      placeholder="My placeholder"
       rows=${args.rows}
       ?disabled=${args.disabled}
       aria-label=${useAriaLabel ? args.label : nothing}
@@ -225,33 +181,8 @@ ${args.textInside ?? nothing}</textarea
 export const Default: Story = {};
 
 export const FloatingLabel: Story = {
-  parameters: {
-    controls: {
-      exclude: ['Hidden Label', 'Size', 'Rows', 'Helper Text', 'Disabled', 'Validation'],
-    },
-  },
   args: {
     floatingLabel: true,
     hint: '',
   },
 };
-
-export const Size: Story = {
-  parameters: {
-    controls: {
-      exclude: [
-        'Label',
-        'Floating Label',
-        'Hidden Label',
-        'Rows',
-        'Helper Text',
-        'Disabled',
-        'Validation',
-      ],
-    },
-  },
-  args: {
-    size: 'form-control-sm',
-    hint: '',
-  },
-};
diff --git a/...ges/documentation/src/stories/foundations/layout/containers/containers.docs.mdx b/...ges/documentation/src/stories/foundations/layout/containers/containers.docs.mdx
@@ -9,7 +9,7 @@ import * as ContainerStories from './containers.stories';
   Containers are essential layout elements ensuring content is aligned and properly padded across all devices and viewports.
 </div>
 
-<div className="alert alert-info my-24">
+<div className="banner banner-info my-24">
   Containers are required when using the <a href="/?path=/docs/7240f2ef-216a-490e-9bd8-c0cef19f7b31--docs">grid system</a>.
 </div>
 

diff --git a/packages/documentation/src/stories/utilities/overflow/overflow.docs.mdx b/packages/documentation/src/stories/utilities/overflow/overflow.docs.mdx
@@ -7,7 +7,7 @@ import * as OverflowStories from './overflow.stories';
 
 <div className="lead">Define how a content overflows its container.</div>
 <br />
-<div className="alert alert-info">Note that these utility classes are not responsive.</div>
+<div className="banner banner-info">Note that these utility classes are not responsive.</div>
 
 <Canvas sourceState="shown" of={OverflowStories.Default} />
 <div className="hide-col-default">
@@ -29,7 +29,7 @@ The values available are the following:
 - `hidden` hides all of the content that would overflow the container, without any scrollbars.
 - `scroll` does not overflow the content and adds scrollbars to the container.
 
-<div className="alert alert-info alert-sm">
+<div className="banner banner-info banner-md">
   If one of the axis is defined as `visible`, and the other axis is defined as something else, then
   the `visible` axis will be considered to be `auto`.
 </div>
diff --git a/packages/styles/src/components/floating-label.scss b/packages/styles/src/components/floating-label.scss
@@ -21,8 +21,7 @@ tokens.$default-map: components.$post-text-input;
 .form-floating {
   position: relative;
 
-  > .form-control ~ label,
-  > textarea ~ label {
+  > input.form-control ~ label {
     position: absolute;
     z-index: 2;
     text-align: start;
@@ -48,7 +47,7 @@ tokens.$default-map: components.$post-text-input;
     background-color: tokens.get('input-color-enabled-bg');
   }
 
-  > .form-control {
+  > input.form-control {
     height: tokens.get('input-sizing-height');
     min-height: tokens.get('input-sizing-height');
 
@@ -103,15 +102,8 @@ tokens.$default-map: components.$post-text-input;
     }
   }
 
-  > textarea:disabled ~ label,
-  > .form-control:disabled ~ label {
-    // Required for `.form-control`s because of specificity
-    color: tokens.get('input-color-disabled-fg');
-    background-color: tokens.get('input-color-disabled-bg');
-  }
-
   // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
-  > .form-control:-webkit-autofill {
+  > input.form-control:-webkit-autofill {
     padding-block-start: tokens.get('input-padding-block-start');
     padding-block-end: tokens.get('input-padding-block-end');
 
@@ -122,63 +114,8 @@ tokens.$default-map: components.$post-text-input;
     }
   }
 
-  > :disabled ~ label,
-  > .form-control:disabled ~ label {
-    // Required for `.form-control`s because of specificity
-    color: tokens.get('input-color-disabled-fg');
-    background-color: tokens.get('input-color-disabled-bg');
-  }
-
-  > textarea.form-control {
-    padding-block-start: forms.$form-floating-textarea-padding-t !important;
-    padding-block-end: spacing.$size-mini;
-    padding-inline-end: spacing.$size-large;
-    min-height: (forms.$form-floating-label-font-size * forms.$input-line-height-lg) +
-      forms.$form-floating-textarea-padding-t + spacing.$size-mini +
-      sizing.px-to-rem(forms.$input-border-width * 2);
-    height: auto;
-
-    ~ label {
-      padding-block-end: 0;
-      width: calc(100% - (#{tokens.get('input-border-width')} * 2));
-      max-width: none;
-      height: unset;
-      padding-block-start: spacing.$size-regular;
-    }
-
-    &:focus,
-    &:not(:placeholder-shown) {
-      padding-block-end: spacing.$size-mini;
-
-      ~ label {
-        padding-block-start: spacing.$size-mini;
-        width: calc(100% - (#{tokens.get('input-border-width')} * 2));
-        max-width: none;
-        background-color: tokens.get('input-color-selected-bg');
-      }
-    }
-
-    &:is(.is-valid, .is-invalid) {
-      ~ label {
-        width: calc(
-          100% - (#{tokens.get('input-border-width')} * 2) - #{spacing.$size-mini} - #{tokens.get(
-              'input-sizing-height'
-            )}
-        );
-      }
-
-      &:focus,
-      &:not(:placeholder-shown) {
-        ~ label {
-          width: calc(100% - (#{tokens.get('input-border-width')} * 2));
-        }
-      }
-    }
-  }
-
   @include utilities-mx.high-contrast-mode() {
-    > input,
-    > textarea {
+    > input {
       @include forms-mx.placeholder() {
         opacity: 0;
       }