feat(component): text input

.changeset/metal-pens-explode.md

@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': patch
+'@swisspost/design-system-styles': patch
+---
+
+Updated `.form-control` text input to new Post design.

.changeset/soft-moles-whisper.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': major
+---
+
+Removed sizes option for text inputs.

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

@@ -23,7 +23,10 @@ Custom input elements need only the class `.form-control` to trigger the custom
   <Controls of={InputStories.Default} />
 </div>
 
-<StylesPackageImport components={["forms"]} required={{ 'floating-label': true, 'form-feedback': true }} />
+<StylesPackageImport
+  components={['forms']}
+  required={{ 'floating-label': true, 'form-feedback': true }}
+/>
 
 ## Concrete Examples of Application
 
@@ -36,28 +39,7 @@ But note that the `<input>` element must come first, so we can ensure the correc
 
 Ensure that `placeholder` attribute is set (even with an empty value) so the label can act as a placeholder when no value is set.
 
-    <Canvas of={InputStories.FloatingLabel} />
-
-### 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-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="alert alert-info">
-  Regular and medium size classes are not available on floating-label elements
-</div>
-
-<Canvas of={InputStories.Size} />
+<Canvas of={InputStories.FloatingLabel} />
 
 ### Validation
 

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

@@ -22,18 +22,17 @@ function renderInputSnapshot(_args: Args, context: StoryContext) {
       label: `Label - with Value`,
       value: 'Lorem Ipsum',
     },
-    {
-      label: `Label - Floating label`,
-      floatingLabel: true,
-    },
   ];
   return html`
     <div class="d-flex flex-wrap align-items-start gap-16">
       ${['bg-white', 'bg-dark'].map(
         bg => html`
-          <div class="${bg} d-flex gap-16 flex-column p-16">
-            <h3>Sizes</h3>
-            ${getCombinations('size', context.argTypes.size.options, combinations)
+          <div
+            class="${bg} d-flex gap-16 flex-column p-16"
+            data-color-scheme=${bg === 'bg-white' ? 'light' : 'dark'}
+          >
+            <h3>Standard</h3>
+            ${getCombinations('floatingLabel', [false], combinations)
               .filter(
                 (args: Args) =>
                   !args.value ||
@@ -44,15 +43,6 @@ function renderInputSnapshot(_args: Args, context: StoryContext) {
                 context.id = `a-${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>
                 `;

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

@@ -17,17 +17,15 @@ const meta: MetaComponent = {
     badges: [],
     design: {
       type: 'figma',
-      url: 'https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=21923-74274&mode=design&t=3lniLiZhl7q9Gqgn-4',
+      url: 'https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=21-168&node-type=canvas&t=BXfJ1qmQAdwMxjBE-0',
     },
   },
   args: {
     label: 'Label',
-    floatingLabel: false,
+    floatingLabel: true,
     hiddenLabel: false,
     placeholder: 'Placeholder',
     type: 'text',
-    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',
@@ -102,46 +100,6 @@ const meta: MetaComponent = {
         category: 'General',
       },
     },
-    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',
-      },
-    },
     hint: {
       name: 'Helper Text',
       description: 'Text to place in the help text area of the component.',
@@ -188,14 +146,7 @@ type Story = StoryObj;
 
 function render(args: Args, context: StoryContext) {
   const id = context.id ?? `ExampleTextarea_${context.name}`;
-  const classes = [
-    'form-control',
-    args.size,
-    args.floatingLabel ? args.sizeFloatingLabel : '',
-    args.validation,
-  ]
-    .filter(c => c && c !== 'null')
-    .join(' ');
+  const classes = ['form-control', args.validation].filter(c => c && c !== 'null').join(' ');
 
   const useAriaLabel = !args.floatingLabel && args.hiddenLabel;
   const label: TemplateResult | null = !useAriaLabel
@@ -238,7 +189,7 @@ export const Default: Story = {};
 export const FloatingLabel: Story = {
   parameters: {
     controls: {
-      exclude: ['Hidden Label', 'Size', 'Helper Text', 'Disabled', 'Validation'],
+      exclude: ['Hidden Label', 'Helper Text', 'Disabled', 'Validation'],
     },
   },
   args: {
@@ -247,26 +198,15 @@ export const FloatingLabel: Story = {
   },
 };
 
-export const Size: Story = {
-  parameters: {
-    controls: {
-      exclude: ['Label', 'Floating Label', 'Hidden Label', 'Helper Text', 'Disabled', 'Validation'],
-    },
-  },
-  args: {
-    size: 'form-control-sm',
-    hint: '',
-  },
-};
-
 export const Validation: Story = {
   parameters: {
     controls: {
-      exclude: ['Label', 'Floating Label', 'Hidden Label', 'Size', 'Helper Text', 'Disabled'],
+      exclude: ['Label', 'Floating Label', 'Hidden Label', 'Helper Text', 'Disabled'],
     },
   },
   args: {
     validation: 'is-invalid',
     hint: '',
+    floatingLabel: true,
   },
 };

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

@@ -73,7 +73,10 @@ export const Select: Story = {
       <div class="d-flex gap-16 flex-column">
         ${['bg-white', 'bg-dark'].map(bg => {
           return html`
-            <div class="${bg} d-flex gap-16 flex-column p-16">
+            <div
+              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`

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

@@ -39,7 +39,10 @@ export const Textarea: Story = {
       <div class="d-flex flex-wrap align-items-start gap-16">
         ${['bg-white', 'bg-dark'].map(
           bg => html`
-            <div class="${bg} d-flex gap-16 flex-column p-16">
+            <div
+              class="${bg} d-flex gap-16 flex-column p-16"
+              data-color-scheme=${bg === 'bg-white' ? 'light' : 'dark'}
+            >
               <h3>Sizes</h3>
               ${getCombinations('size', context.argTypes.size.options, combinations).map(
                 (args: Args) => {

packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_variables.scss

@@ -22,7 +22,7 @@ $shade300: post.$gray-10 !default; //border, divider
 $shade400: post.$input-border-color !default; //input border
 $shade500: post.$error !default; //unused
 $shade600: post.$text-muted !default; //text secondary color
-$shade700: post.$input-color !default; //input text color
+$shade700: post.$black !default; //input text color
 $shade800: post.$error !default; //unused
 $shade900: var(--post-contrast-color) !default; //text color