feat: adds min, max, and step property to the uui-input (#457)

Co-authored-by: Jacob Overgaard <[email protected]>

Author: loivsen

packages/uui-input/lib/uui-input.element.ts

@@ -148,7 +148,17 @@ export class UUIInputElement extends FormControlMixin(
   ];
 
   /**
-   * This is a minimum value of the input.
+   * Sets the min value of the input.
+   * Examples: the first date the user may pick in date and datetime-local, or the min numeric value the user can pick in a number input.
+   * @type {number | string}
+   * @attr
+   * @default undefined
+   */
+  @property()
+  min?: number | string;
+
+  /**
+   * Sets the minimum length of the value of the input.
    * @type {number}
    * @attr
    * @default undefined
@@ -166,7 +176,17 @@ export class UUIInputElement extends FormControlMixin(
   minlengthMessage = 'This field need more characters';
 
   /**
-   * This is a maximum value of the input.
+   * Sets the max value of the input.
+   * Examples: the last date the user may pick in date and datetime-local, or the max numeric value the user can pick in a number input.
+   * @type {number | string}
+   * @attr
+   * @default undefined
+   */
+  @property()
+  max?: number | string;
+
+  /**
+   * Sets the maximum length of the value of the input.
    * @type {number}
    * @attr
    * @default undefined
@@ -183,6 +203,15 @@ export class UUIInputElement extends FormControlMixin(
   @property({ type: String, attribute: 'maxlength-message' })
   maxlengthMessage = 'This field exceeds the allowed amount of characters';
 
+  /**
+   * Specifies the interval between legal numbers of the input
+   * @type {number}
+   * @attr
+   * @default undefined
+   */
+  @property({ type: Number })
+  step?: number;
+
   /**
    * Disables the input.
    * @type {boolean}
@@ -328,6 +357,9 @@ export class UUIInputElement extends FormControlMixin(
         .type=${this.type}
         .value=${this.value as string}
         .name=${this.name}
+        min=${ifDefined(this.min)}
+        max=${ifDefined(this.max)}
+        step=${ifDefined(this.step)}
         autocomplete=${ifDefined(this.autocomplete as any)}
         placeholder=${this.placeholder}
         aria-label=${this.label}

packages/uui-input/lib/uui-input.story.ts

@@ -38,6 +38,9 @@ export default {
 const Template: Story = props =>
   html`
     <uui-input
+      .min=${props.min}
+      .max=${props.max}
+      .step=${props.step}
       .disabled=${props.disabled}
       .readonly=${props.readonly}
       .error=${props.error}
@@ -61,6 +64,65 @@ AAAOverview.parameters = {
   },
 };
 
+export const NumberInput = Template.bind({});
+NumberInput.args = {
+  placeholder: 'Input number',
+  type: 'number',
+  step: 5,
+  value: '10',
+  min: -50,
+  max: 50,
+};
+NumberInput.parameters = {
+  controls: {
+    include: [
+      'type',
+      'value',
+      'label',
+      'min',
+      'max',
+      'step',
+      'disabled',
+      'readonly',
+    ],
+  },
+  docs: {
+    source: {
+      code: html` <uui-input
+        type="number"
+        value="5"
+        label="Label"
+        min="-50"
+        max="50"
+        step="5">
+      </uui-input>`.strings,
+    },
+  },
+};
+
+export const DateTimeLocal = Template.bind({});
+DateTimeLocal.args = {
+  type: 'datetime-local',
+  value: '2023-04-20T10:00',
+  min: '2023-04-13T10:00',
+  max: '2023-04-28T16:00',
+};
+DateTimeLocal.parameters = {
+  controls: {
+    include: ['type', 'value', 'min', 'max', 'step', 'disabled', 'readonly'],
+  },
+  docs: {
+    source: {
+      code: html` <uui-input
+        type="datetime-local"
+        min="2023-04-13T10:00"
+        value="2023-04-20T10:00"
+        max="2023-04-28T16:00">
+      </uui-input>`.strings,
+    },
+  },
+};
+
 export const Label = Template.bind({});
 Label.args = { type: 'text' };
 Label.parameters = {
@@ -97,6 +159,9 @@ Error.parameters = {
 export const PrependAndAppend: Story = props =>
   html`
     <uui-input
+      .min=${props.min}
+      .max=${props.max}
+      .step=${props.step}
       .disabled=${props.disabled}
       .readonly=${props.readonly}
       .error=${props.error}
@@ -140,6 +205,9 @@ export const PrependAndAppend: Story = props =>
 
 export const PrependIcon: Story = props =>
   html` <uui-input
+    .min=${props.min}
+    .max=${props.max}
+    .step=${props.step}
     .disabled=${props.disabled}
     .readonly=${props.readonly}
     .error=${props.error}
@@ -157,6 +225,9 @@ export const PrependIcon: Story = props =>
 
 export const AppendIcon: Story = props =>
   html` <uui-input
+    .min=${props.min}
+    .max=${props.max}
+    .step=${props.step}
     .disabled=${props.disabled}
     .readonly=${props.readonly}
     .error=${props.error}
@@ -177,6 +248,9 @@ export const AppendIcon: Story = props =>
 export const MultipleInputs: Story = props =>
   html`
     <uui-input
+      .min=${props.min}
+      .max=${props.max}
+      .step=${props.step}
       .disabled=${props.disabled}
       .readonly=${props.readonly}
       .error=${props.error}