feat: support size prop for input components

- DatePickerInput, NumberInput, Select, PasswordInput, TextInput

src/DatePicker/DatePicker.stories.js

@@ -8,6 +8,12 @@ const patterns = {
   "Regular (d{1,2}/d{1,2}/d{4})": "d{1,2}/d{1,2}/d{4}",
 };
 
+const sizes = {
+  "Extra large size (xl)": "xl",
+  "Default size": undefined,
+  "Small size (sm)": "sm",
+};
+
 export const Default = () => ({
   Component,
   props: {
@@ -19,6 +25,7 @@ export const Default = () => ({
     datePickerInput: {
       id: "date-picker-input-id",
       name: "date-picker-input-name",
+      size: select("Field size (size)", sizes, undefined) || undefined,
       labelText: text(
         "Label text (labelText in <DatePickerInput>)",
         "Date Picker label"
@@ -63,6 +70,7 @@ export const Single = () => ({
     },
     datePickerInput: {
       id: "date-picker-input-id",
+      size: select("Field size (size)", sizes, undefined) || undefined,
       labelText: text(
         "Label text (labelText in <DatePickerInput>)",
         "Date Picker label"
@@ -105,6 +113,7 @@ export const Range = () => ({
     },
     datePickerInput: {
       id: "date-picker-input-id",
+      size: select("Field size (size)", sizes, undefined) || undefined,
       labelText: text(
         "Label text (labelText in <DatePickerInput>)",
         "Date Picker label"

src/DatePicker/DatePickerInput.svelte

@@ -1,4 +1,5 @@
 <script>
+  export let size = undefined; // "sm" | "xl"
   export let type = "text";
   export let placeholder = "";
   export let pattern = "\\d{1,2}\\/\\d{1,2}\\/\\d{4}";
@@ -51,7 +52,15 @@
     <input
       bind:this={ref}
       data-invalid={invalid || undefined}
+      value={!$range ? $inputValue : undefined}
+      {id}
+      {name}
+      {placeholder}
+      {type}
+      {pattern}
+      {disabled}
       class:bx--date-picker__input={true}
+      class={size && `bx--date-picker__input--${size}`}
       on:input
       on:input={({ target }) => {
         updateValue({ type: 'input', value: target.value });
@@ -68,14 +77,7 @@
       on:blur
       on:blur={({ relatedTarget }) => {
         blurInput(relatedTarget);
-      }}
+      }} />
-      {id}
-      {name}
-      {placeholder}
-      {type}
-      {pattern}
-      {disabled}
-      value={!$range ? $inputValue : undefined} />
     {#if $hasCalendar}
       <Calendar16
         role="img"

src/NumberInput/NumberInput.stories.js

@@ -1,11 +1,24 @@
-import { withKnobs, text, boolean, number } from "@storybook/addon-knobs";
+import {
+  withKnobs,
+  text,
+  boolean,
+  number,
+  select,
+} from "@storybook/addon-knobs";
 import Component from "./NumberInput.Story.svelte";
 
 export default { title: "NumberInput", decorators: [withKnobs] };
 
+const sizes = {
+  "Extra large size (xl)": "xl",
+  "Default size": undefined,
+  "Small size (sm)": "sm",
+};
+
 export const Default = () => ({
   Component,
   props: {
+    size: select("Field size (size)", sizes, undefined) || undefined,
     id: text("NumberInput id", "number-input-id"),
     name: text("NumberInput name", "number-input-name"),
     label: text("Label (label)", "Number Input label"),

src/NumberInput/NumberInput.svelte

@@ -1,4 +1,5 @@
 <script>
+  export let size = undefined; // "sm" | "xl"
   export let value = "";
   export let step = 1;
   export let max = undefined;
@@ -76,7 +77,8 @@
     class:bx--number--readonly={readonly}
     class:bx--number--light={light}
     class:bx--number--nolabel={hideLabel}
-    class:bx--number--mobile={mobile}>
+    class:bx--number--mobile={mobile}
+    class={size && `bx--number--${size}`}>
     {#if mobile}
       {#if label}
         <label

src/Select/Select.stories.js

@@ -1,12 +1,19 @@
-import { withKnobs, text, boolean } from "@storybook/addon-knobs";
+import { withKnobs, text, boolean, select } from "@storybook/addon-knobs";
 import Component from "./Select.Story.svelte";
 
 export default { title: "Select", decorators: [withKnobs] };
 
+const sizes = {
+  "Extra large size (xl)": "xl",
+  "Default size": undefined,
+  "Small size (sm)": "sm",
+};
+
 export const Default = () => ({
   Component,
   props: {
     select: {
+      size: select("Field size (size)", sizes, undefined) || undefined,
       light: boolean("Light variant (light in <Select>)", false),
       inline: boolean(
         "Put control in-line with label (inline in <Select>)",

src/Select/Select.svelte

@@ -1,4 +1,5 @@
 <script>
+  export let size = undefined; // "sm" | "xl"
   export let selected = undefined;
   export let inline = false;
   export let light = false;
@@ -68,6 +69,7 @@
             {id}
             {name}
             class:bx--select-input={true}
+            class={size && `bx--select-input--${size}`}
             on:change={({ target }) => {
               selectedValue.set(target.value);
             }}
@@ -105,6 +107,7 @@
           disabled={disabled || undefined}
           aria-invalid={invalid || undefined}
           class:bx--select-input={true}
+          class={size && `bx--select-input--${size}`}
           on:change={({ target }) => {
             selectedValue.set(target.value);
           }}

src/TextInput/PasswordInput.svelte

@@ -1,4 +1,5 @@
 <script>
+  export let size = undefined; // "sm" | "xl"
   export let type = "password";
   export let value = "";
   export let hidePasswordLabel = "Hide password";
@@ -70,6 +71,7 @@
       class:bx--password-input={true}
       class:bx--text-input--light={light}
       class:bx--text-input--invalid={invalid}
+      class={size && `bx--text-input--${size}`}
       on:change
       on:input
       on:input={({ target }) => {

src/TextInput/TextInput.stories.js

@@ -3,9 +3,16 @@ import Component from "./TextInput.Story.svelte";
 
 export default { title: "TextInput", decorators: [withKnobs] };
 
+const sizes = {
+  "Extra large size (xl)": "xl",
+  "Default size": undefined,
+  "Small size (sm)": "sm",
+};
+
 export const Default = () => ({
   Component,
   props: {
+    size: select("Field size (size)", sizes, undefined) || undefined,
     disabled: boolean("Disabled (disabled)", false),
     light: boolean("Light variant (light)", false),
     hideLabel: boolean("No label (hideLabel)", false),
@@ -25,6 +32,7 @@ export const TogglePasswordVisibility = () => ({
   Component,
   props: {
     story: "password-visibility",
+    size: select("Field size (size)", sizes, undefined) || undefined,
     disabled: boolean("Disabled (disabled)", false),
     light: boolean("Light variant (light)", false),
     hideLabel: boolean("No label (hideLabel)", false),
@@ -62,6 +70,7 @@ export const ControlledTogglePasswordVisibility = () => ({
   Component,
   props: {
     story: "controlled",
+    size: select("Field size (size)", sizes, undefined) || undefined,
     disabled: boolean("Disabled (disabled)", false),
     light: boolean("Light variant (light)", false),
     hideLabel: boolean("No label (hideLabel)", false),

src/TextInput/TextInput.svelte

@@ -1,4 +1,5 @@
 <script>
+  export let size = undefined; // "sm" | "xl"
   export let type = "";
   export let value = "";
   export let placeholder = "";
@@ -62,6 +63,7 @@
       class:bx--text-input={true}
       class:bx--text-input--light={light}
       class:bx--text-input--invalid={invalid}
+      class={size && `bx--text-input--${size}`}
       on:change
       on:input
       on:input={({ target }) => {