feat: number_input_fluid_components

packages/web-components/src/components/fluid-number-input/fluid-number-input-skeleton.ts

@@ -0,0 +1,28 @@
+/**
+ * Copyright IBM Corp.2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { prefix } from '../../globals/settings';
+import { html } from 'lit';
+import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
+import styles from './fluid-number-input.scss?lit';
+import CDSNumberInputSkeleton from '../number-input/number-input-skeleton';
+
+/**
+ * Fluid number input.
+ *
+ * @element cds-fluid-number-input-skeleton
+ */
+@customElement(`${prefix}-fluid-number-input-skeleton`)
+class CDSFluidNumberInputSkeleton extends CDSNumberInputSkeleton {
+  render() {
+    return html` ${super.render()} `;
+  }
+
+  static styles = [CDSNumberInputSkeleton.styles, styles];
+}
+
+export default CDSFluidNumberInputSkeleton;

packages/web-components/src/components/fluid-number-input/fluid-number-input.scss

@@ -0,0 +1,27 @@
+/**
+ * Copyright IBM Corp.2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+$css--plex: true !default;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/components/fluid-number-input/index';
+@use '@carbon/styles/scss/components/fluid-text-input' as *;
+@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities/skeleton' as *;
+
+:host(#{$prefix}-fluid-number-input) {
+  @extend .#{$prefix}--number-input--fluid;
+  @include emit-layout-tokens();
+}
+
+:host(#{$prefix}-fluid-number-input-skeleton) {
+  @extend .#{$prefix}--text-input--fluid__skeleton;
+
+  display: block;
+}

packages/web-components/src/components/fluid-number-input/fluid-number-input.stories.ts

@@ -0,0 +1,180 @@
+/**
+ * Copyright IBM Corp.2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import '../toggle-tip/toggletip';
+import './fluid-number-input';
+import './fluid-number-input-skeleton';
+
+const args = {
+  defaultWidth: 300,
+  allowEmpty: false,
+  disabled: false,
+  invalid: false,
+  invalidText: 'Number is not valid',
+  label: 'Label',
+  readOnly: false,
+  value: 50,
+  warn: false,
+  warnText: 'Warning text',
+  min: 0,
+  max: 100,
+  step: 1,
+};
+
+const argTypes = {
+  defaultWidth: {
+    control: { type: 'range', min: 300, max: 800, step: 50 },
+  },
+  defaultValue: {
+    control: {
+      type: 'number',
+    },
+  },
+  invalid: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  invalidText: {
+    control: {
+      type: 'text',
+    },
+  },
+  disabled: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  label: {
+    control: {
+      type: 'text',
+    },
+  },
+  warn: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  warnText: {
+    control: {
+      type: 'text',
+    },
+  },
+};
+
+export const Default = {
+  args,
+  argTypes,
+  render: (args) => {
+    const {
+      allowEmpty,
+      disabled,
+      invalid,
+      invalidText,
+      label,
+      readOnly,
+      warn,
+      warnText,
+      value,
+      min,
+      max,
+      step,
+      onInput,
+    } = args ?? {};
+    return html`
+      <cds-form-item>
+        <cds-fluid-number-input
+          ?allow-empty="${allowEmpty}"
+          ?invalid="${invalid}"
+          invalid-text="${ifDefined(invalidText)}"
+          label="${ifDefined(label)}"
+          ?readonly="${readOnly}"
+          value="${ifDefined(value)}"
+          ?warn="${warn}"
+          warn-text="${ifDefined(warnText)}"
+          ?disabled="${disabled}"
+          min="${ifDefined(min)}"
+          max="${ifDefined(max)}"
+          step="${ifDefined(step)}"
+          @input="${onInput}">
+        </cds-fluid-number-input>
+      </cds-form-item>
+    `;
+  },
+};
+
+export const DefaultWithToggletip = {
+  args,
+  argTypes,
+  render: (args) => {
+    const {
+      allowEmpty,
+      disabled,
+      invalid,
+      invalidText,
+      label,
+      readOnly,
+      warn,
+      warnText,
+      value,
+      min,
+      max,
+      step,
+      onInput,
+    } = args ?? {};
+    return html`
+      <cds-form-item>
+        <cds-fluid-number-input
+          ?allow-empty="${allowEmpty}"
+          ?invalid="${invalid}"
+          invalid-text="${ifDefined(invalidText)}"
+          label="${ifDefined(label)}"
+          ?readonly="${readOnly}"
+          value="${ifDefined(value)}"
+          ?warn="${warn}"
+          warn-text="${ifDefined(warnText)}"
+          ?disabled="${disabled}"
+          min="${ifDefined(min)}"
+          max="${ifDefined(max)}"
+          step="${ifDefined(step)}"
+          @input="${onInput}">
+          <cds-toggletip autoAlign="true" slot="label-text">
+            Label
+            <p slot="body-text">Additional field information here.</p>
+          </cds-toggletip>
+        </cds-fluid-number-input>
+      </cds-form-item>
+    `;
+  },
+};
+
+export const Skeleton = {
+  parameters: {
+    percy: {
+      skip: true,
+    },
+  },
+  args: {
+    defaultWidth: 300,
+  },
+  argTypes: {
+    defaultWidth: {
+      control: { type: 'range', min: 300, max: 800, step: 50 },
+    },
+  },
+  render: ({ defaultWidth }) => html`
+    <div style="width: ${defaultWidth}px;">
+      <cds-fluid-number-input-skeleton></cds-fluid-number-input-skeleton>
+    </div>
+  `,
+};
+
+export default {
+  title: 'Components/Fluid Components/FluidNumberInput',
+};

packages/web-components/src/components/fluid-number-input/fluid-number-input.ts

@@ -0,0 +1,32 @@
+/**
+ * Copyright IBM Corp.2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { prefix } from '../../globals/settings';
+import { html } from 'lit';
+import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
+import CDSNumberInput from '../number-input/number-input';
+import styles from './fluid-number-input.scss?lit';
+import { property } from 'lit/decorators.js';
+
+/**
+ * Fluid number input.
+ *
+ * @element cds-fluid-number-input
+ */
+@customElement(`${prefix}-fluid-number-input`)
+class CDSFluidNumberInput extends CDSNumberInput {
+  @property({ type: Boolean })
+  isFluid = true;
+
+  render() {
+    return html` ${super.render()} `;
+  }
+
+  static styles = [CDSNumberInput.styles, styles];
+}
+
+export default CDSFluidNumberInput;

packages/web-components/src/components/fluid-number-input/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2025
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import './fluid-number-input';
+import './fluid-number-input-skeleton';

packages/web-components/src/components/number-input/number-input.scss

@@ -13,6 +13,7 @@ $css--plex: true !default;
 @use '@carbon/styles/scss/utilities';
 @use '@carbon/styles/scss/components/form';
 @use '@carbon/styles/scss/components/number-input/index';
+@use '@carbon/styles/scss/components/fluid-number-input' as *;
 @use '@carbon/styles/scss/utilities/ai-gradient' as *;
 @use '@carbon/styles/scss/spacing' as *;
 
@@ -85,3 +86,15 @@ $css--plex: true !default;
 :host(#{$prefix}-number-input[ai-label]) input {
   @include ai-gradient;
 }
+
+:host(#{$prefix}-number-input[invalid][fluid]) {
+  @extend .#{$prefix}--number-input--fluid--invalid;
+}
+
+:host(#{$prefix}-number-input[focused][fluid]) {
+  @extend .#{$prefix}--number-input--fluid--focus;
+}
+
+:host(#{$prefix}-number-input[disabled][fluid]) {
+  @extend .#{$prefix}--number-input--fluid--disabled;
+}

packages/web-components/src/components/number-input/number-input.ts

@@ -246,6 +246,12 @@ class CDSNumberInput extends CDSTextInput {
   @property({ type: Boolean, attribute: 'disable-wheel', reflect: true })
   disableWheel = false;
 
+  /**
+   * Set to true to use the fluid variant.
+   */
+  @property({ type: Boolean })
+  isFluid = false;
+
   /**
    * The input box size.
    */
@@ -302,15 +308,13 @@ class CDSNumberInput extends CDSTextInput {
     } = this;
 
     const isValid = this._getInputValidity();
-
     const invalidIcon = iconLoader(WarningFilled16, {
       class: `${prefix}--number__invalid`,
     });
 
     const warnIcon = iconLoader(WarningAltFilled16, {
       class: `${prefix}--number__invalid ${prefix}--number__invalid--warning`,
     });
-
     const normalizedProps: {
       disabled: boolean;
       invalid: boolean;
@@ -417,6 +421,25 @@ class CDSNumberInput extends CDSTextInput {
       normalizedProps['slot-name'] = 'warn-text';
       normalizedProps['slot-text'] = this.warnText;
     }
+    const validationMessage =
+      normalizedProps.invalid || normalizedProps.warn
+        ? html`<div
+            class="${prefix}--form-requirement"
+            ?hidden="${!normalizedProps.invalid && !normalizedProps.warn}">
+            <slot name="${normalizedProps['slot-name']}">
+              ${normalizedProps['slot-text']}
+            </slot>
+          </div>`
+        : null;
+
+    const helper = this.helperText
+      ? html`<div
+          class="${helperTextClasses}"
+          id="helper-text"
+          ?hidden="${normalizedProps.invalid || normalizedProps.warn}">
+          <slot name="helper-text"> ${this.helperText} </slot>
+        </div>`
+      : null;
 
     return html`
       <div class="${wrapperClasses}" ?data-invalid=${normalizedProps.invalid}>
@@ -432,19 +455,12 @@ class CDSNumberInput extends CDSTextInput {
               ? html`${decrementButton} ${incrementButton}`
               : null}
           </div>
+          ${this.isFluid
+            ? html`<hr class="${prefix}--text-input__divider" />`
+            : null}
         </div>
-        <div
-          class="${helperTextClasses}"
-          ?hidden="${normalizedProps.invalid || normalizedProps.warn}">
-          <slot name="helper-text"> ${this.helperText} </slot>
-        </div>
-        <div
-          class="${prefix}--form-requirement"
-          ?hidden="${!normalizedProps.invalid && !normalizedProps.warn}">
-          <slot name="${normalizedProps['slot-name']}">
-            ${normalizedProps['slot-text']}
-          </slot>
-        </div>
+        ${/* Non-fluid: validation and helper outside field wrapper */ ''}
+        ${!this.isFluid ? validationMessage || helper : null}
       </div>
     `;
   }