feat: add input floating label (#2649)

Co-authored-by: Sérgio Fonseca <42741644+smfonseca@users.noreply.github.com>

Author: auroraVasconcelos

.changeset/itchy-olives-shake.md

@@ -0,0 +1,6 @@
+---
+'@solid-design-system/components': patch
+'@solid-design-system/docs': patch
+---
+
+Added `sd-input` `floating-label` attribute.

.changeset/wild-webs-win.md

@@ -0,0 +1,5 @@
+---
+'@solid-design-system/tokens': patch
+---
+
+Add new font-size `text-xs`.

packages/components/src/components/input/input.test.ts

@@ -45,6 +45,7 @@ describe('<sd-input>', () => {
     expect(el.inputmode).to.be.undefined;
     expect(el.valueAsDate).to.be.null;
     expect(isNaN(el.valueAsNumber)).to.be.true;
+    expect(el.floatingLabel).to.be.false;
   });
 
   it('should have title if title attribute is set', async () => {
@@ -102,6 +103,18 @@ describe('<sd-input>', () => {
     expect(labelParentElement!.contains(tooltip)).to.be.false;
   });
 
+  it('should render floating label part instead of label if floating label is active', async () => {
+    const el = await fixture<SdInput>(html` <sd-input label="test" floating-label> </sd-input> `);
+
+    const labelParentElement = el.shadowRoot!.querySelector('[part~="form-control"]');
+    const label = el.shadowRoot!.querySelector('[part~="form-control-label"]');
+    const floatingLabel = el.shadowRoot!.querySelector('[part~="form-control-floating-label"]');
+
+    expect(labelParentElement).to.exist;
+    expect(labelParentElement!.contains(label)).to.be.false;
+    expect(labelParentElement!.contains(floatingLabel)).to.be.true;
+  });
+
   describe('value methods', () => {
     it('should set the value as a date when using valueAsDate', async () => {
       const el = await fixture<SdInput>(html` <sd-input type="date"></sd-input> `);

packages/components/src/components/input/input.ts

@@ -54,6 +54,7 @@ const isFirefox = isChromium ? false : navigator.userAgent.includes('Firefox');
  * @csspart form-control-label - The label's wrapper.
  * @csspart form-control-input - The input's wrapper.
  * @csspart form-control-help-text - The help text's wrapper.
+ * @csspart form-control-floating-label - The floating label text's wrapper.
  * @csspart base - The component's base wrapper.
  * @csspart border - The base part's absolutely positioned border. Allows for easy adjustment of border thickness without affecting component dimensions.
  * @csspart input - The internal `<input>` control.
@@ -192,6 +193,9 @@ export default class SdInput extends SolidElement implements SolidFormControl {
   /** Makes the input a required field. */
   @property({ type: Boolean, reflect: true }) required = false;
 
+  /** Enables the floating label behavior for the input. */
+  @property({ attribute: 'floating-label', type: Boolean, reflect: true }) floatingLabel = false;
+
   /** A regular expression pattern to validate input against. */
   @property() pattern: string;
 
@@ -508,6 +512,9 @@ export default class SdInput extends SolidElement implements SolidFormControl {
     const hasHelpText = this.helpText ? true : !!slots['helpText'];
     const hasClearIcon = this.clearable && !this.readonly && (typeof this.value === 'number' || this.value.length > 0);
     const hasTooltip = !!slots['tooltip'];
+    const hasIconLeft = slots['left'];
+    const hasValue = this.value !== null && String(this.value).length > 0;
+    const isFloatingLabelActive = this.floatingLabel && hasLabel && (this.hasFocus || hasValue || this.placeholder);
     // Hierarchy of input states:
     const inputState = this.disabled
       ? 'disabled'
@@ -549,10 +556,25 @@ export default class SdInput extends SolidElement implements SolidFormControl {
       md: 'text-lg',
       lg: 'text-xl'
     }[this.size];
+    const verticalPadding =
+      this.size === 'lg'
+        ? !this.floatingLabel
+          ? 'py-2'
+          : isFloatingLabelActive
+            ? 'py-3'
+            : 'py-4'
+        : !this.floatingLabel
+          ? 'py-1'
+          : isFloatingLabelActive
+            ? 'py-2'
+            : 'py-3';
+    const floatingLabelHorizontalAlignmentWithIconLeft = { sm: 'left-[36px]', md: 'left-[44px]', lg: 'left-12' }[
+      this.size
+    ];
     // Render
     return html`
       <div part="form-control" class=${cx((this.disabled || this.visuallyDisabled) && 'cursor-not-allowed')}>
-        ${hasLabel || hasTooltip
+        ${(hasLabel || hasTooltip) && !this.floatingLabel
           ? html`<div class="flex items-center gap-1 mb-2">
               <label
                 part="form-control-label"
@@ -567,7 +589,6 @@ export default class SdInput extends SolidElement implements SolidFormControl {
               ${slots['tooltip'] ? html`<slot name="tooltip"></slot>` : ''}
             </div>`
           : null}
-
         <div
           part="form-control-input"
           class=${cx(
@@ -587,12 +608,11 @@ export default class SdInput extends SolidElement implements SolidFormControl {
             part="base"
             class=${cx(
               'px-4 flex flex-row items-center rounded-default transition-colors ease-in-out duration-medium hover:duration-fast',
-              // Vertical Padding
-              this.size === 'lg' ? 'py-2' : 'py-1',
               // States
               !this.disabled && !this.readonly && !this.visuallyDisabled ? 'hover:bg-neutral-200' : '',
               this.readonly ? 'bg-neutral-100' : 'bg-white',
-              inputState === 'disabled' || inputState === 'visuallyDisabled' ? 'text-neutral-500' : 'text-black'
+              inputState === 'disabled' || inputState === 'visuallyDisabled' ? 'text-neutral-500' : 'text-black',
+              verticalPadding
             )}
           >
             ${slots['left']
@@ -610,8 +630,9 @@ export default class SdInput extends SolidElement implements SolidFormControl {
                 this.visuallyDisabled || this.disabled
                   ? 'placeholder-neutral-500 cursor-not-allowed'
                   : 'placeholder-neutral-700',
-                this.size === 'sm' ? 'h-6' : 'h-8',
-                textSize
+                this.size === 'sm' ? (isFloatingLabelActive ? 'h-4' : 'h-6') : isFloatingLabelActive ? 'h-6' : 'h-8',
+                textSize,
+                isFloatingLabelActive && 'leading-none mt-4'
               )}
               type=${this.type === 'password' && this.passwordVisible ? 'text' : this.type}
               title=${this.title /* An empty title prevents browser validation tooltips from appearing on hover */}
@@ -647,6 +668,40 @@ export default class SdInput extends SolidElement implements SolidFormControl {
               @focus=${this.handleFocus}
               @blur=${this.handleBlur}
             />
+            ${hasLabel && this.floatingLabel
+              ? html`
+                  <label
+                    part="form-control-floating-label"
+                    class=${cx(
+                      'pointer-events-none absolute',
+                      hasIconLeft ? floatingLabelHorizontalAlignmentWithIconLeft : 'left-4',
+                      !this.readonly && 'transition-all duration-medium ease-out',
+                      !isFloatingLabelActive || (!hasValue && (this.readonly || this.visuallyDisabled))
+                        ? 'top-1/2 -translate-y-1/2'
+                        : this.size === 'lg'
+                          ? 'top-2'
+                          : 'top-1'
+                    )}
+                    for="input"
+                    aria-hidden=${hasLabel ? 'false' : 'true'}
+                  >
+                    <span
+                      id="floating-label"
+                      class=${cx(
+                        'pointer-events-none leading-none',
+                        !this.readonly && 'transition-all duration-medium ease-out',
+                        !isFloatingLabelActive || (!hasValue && (this.readonly || this.visuallyDisabled))
+                          ? 'text-base'
+                          : 'text-xs',
+                        (this.visuallyDisabled || this.disabled) && 'text-neutral-500',
+                        isFloatingLabelActive && !this.visuallyDisabled && !this.disabled && 'text-neutral-700'
+                      )}
+                    >
+                      ${this.label}
+                    </span>
+                  </label>
+                `
+              : null}
             ${hasClearIcon
               ? html`
                   <button
@@ -659,7 +714,10 @@ export default class SdInput extends SolidElement implements SolidFormControl {
                   >
                     <slot name="clear-icon">
                       <sd-icon
-                        class=${cx('text-neutral-700', iconSize)}
+                        class=${cx(
+                          this.disabled || this.visuallyDisabled ? 'text-neutral-500' : 'text-neutral-700',
+                          iconSize
+                        )}
                         library="_internal"
                         name="closing-round"
                       ></sd-icon>
@@ -823,7 +881,7 @@ export default class SdInput extends SolidElement implements SolidFormControl {
         @apply block;
       }
 
-      :host([required]) #label::after {
+      :host([required]) :is(#label, #floating-label)::after {
         content: ' *';
       }
 

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

@@ -31,8 +31,28 @@ Used to allow users to enter text. It can be displayed in several ways, dependin
 - Collect user data in forms, including names, emails, dates, and passwords.
 - Allow users to enter numerical values like quantities or prices.
 
+#### Default Input
+
+Use the “default” variant when clarity, scannability, and accessibility are your primary concerns.
+
+- Long or descriptive labels, helper text, or units are needed.
+- Forms with many fields that users must scan quickly.
+- Complex fields with adornments, counters, or tooltips.
+
+#### Floating Label Input
+
+Use the “floating-label” variant to conserve vertical space and streamline simple forms, while still keeping the label visible.
+
+- Compact layouts and simple fields.
+- Short labels (1–3 words); minimal helper text.
+- You want a clean look without duplicate placeholder text.
+
 ### Usage Guidelines
 
+#### Variant Consistency
+
+- Do not mix the two variants (default / floating label) within the same product, flow or form. Read the use cases above to know when to use each type.
+
 #### Labels and Placeholders
 
 - Use descriptive and concise labels.

packages/docs/src/stories/components/input.stories.ts

@@ -27,7 +27,7 @@ export default {
 
 export const Default = {
   render: (args: any) => {
-    return html`<div class="w-[250px]">${generateTemplate({ args })}</div> `;
+    return html`<div class="w-[300px]">${generateTemplate({ args })}</div> `;
   }
 };
 
@@ -64,6 +64,19 @@ export const Label = {
   `
 };
 
+/**
+ * Use the `floating-label` attribute to enable a floating label on the input.
+ *
+ * __Note:__ Floating labels only work with the `label` attribute. The `label` slot is not supported.
+ */
+export const FloatingLabel = {
+  render: () => html`
+    <div class="w-[350px]">
+      <sd-input label="Floating Label" floating-label></sd-input>
+    </div>
+  `
+};
+
 /**
  * Use the `placeholder` attribute to add a placeholder.
  */

packages/docs/src/stories/components/input.test.stories.ts

@@ -94,6 +94,23 @@ export const Labels = {
   }
 };
 
+/**
+ * Use the `floating-label` attribute to enable a floating label on the input.
+ */
+export const FloatingLabel = {
+  name: 'Floating Label',
+  args: overrideArgs([{ type: 'attribute', name: 'floating-label', value: true }]),
+  render: (args: any) => {
+    return html`
+      <div class="w-[350px]">
+        ${generateTemplate({
+          args
+        })}
+      </div>
+    `;
+  }
+};
+
 /**
  * Add descriptive help text to an input with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead.
  */
@@ -277,7 +294,7 @@ export const StyleOnValid = {
 
     for (const el of els) {
       await waitUntil(() => el?.shadowRoot?.querySelector('input'));
-      await userEvent.type(el.shadowRoot!.querySelector('input')!, 'e');
+      await userEvent.type(el.shadowRoot!.querySelector('input')!, ' ');
     }
 
     // tab to next element to loose focus
@@ -864,6 +881,7 @@ export const Mouseless = {
 export const Combination = generateScreenshotStory([
   Default,
   Labels,
+  FloatingLabel,
   HelpText,
   Placeholders,
   Clearable,

packages/tokens/src/tokens.json

@@ -637,6 +637,11 @@
       "type": "color",
       "description": "very high value fluctuation"
     },
+    "text-xs": {
+      "value": "0.75rem",
+      "type": "fontSizes",
+      "description": "12px"
+    },
     "text-sm": {
       "value": "0.875rem",
       "type": "fontSizes",
@@ -1107,7 +1112,7 @@
       "white": {
         "value": "{white}",
         "type": "color",
-        "description": "Default background color (light mode) 
Used for inverted button"
+        "description": "Default background color (light mode)\nUsed for inverted button"
       },
       "accent-300": {
         "value": "{green.300}",
@@ -2189,4 +2194,4 @@
       "UI Semantic"
     ]
   }
-}
+}