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"