From 331dc4a656b9e2268b1ea2af76ffa3ea521c77e4 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Mon, 20 Jul 2020 20:29:50 -0700
Subject: [PATCH] feat: support size prop for input components

- DatePickerInput, NumberInput, Select, PasswordInput, TextInput
---
 src/DatePicker/DatePicker.stories.js   |  9 +++++++++
 src/DatePicker/DatePickerInput.svelte  | 18 ++++++++++--------
 src/NumberInput/NumberInput.stories.js | 15 ++++++++++++++-
 src/NumberInput/NumberInput.svelte     |  4 +++-
 src/Select/Select.stories.js           |  9 ++++++++-
 src/Select/Select.svelte               |  3 +++
 src/TextInput/PasswordInput.svelte     |  2 ++
 src/TextInput/TextInput.stories.js     |  9 +++++++++
 src/TextInput/TextInput.svelte         |  2 ++
 9 files changed, 60 insertions(+), 11 deletions(-)

diff --git a/src/DatePicker/DatePicker.stories.js b/src/DatePicker/DatePicker.stories.js
index 9fcaa6ae..2c2ae900 100644
--- a/src/DatePicker/DatePicker.stories.js
+++ b/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"
diff --git a/src/DatePicker/DatePickerInput.svelte b/src/DatePicker/DatePickerInput.svelte
index b86b560c..a2b8b6b0 100644
--- a/src/DatePicker/DatePickerInput.svelte
+++ b/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"
diff --git a/src/NumberInput/NumberInput.stories.js b/src/NumberInput/NumberInput.stories.js
index 424eefda..5af385ff 100644
--- a/src/NumberInput/NumberInput.stories.js
+++ b/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"),
diff --git a/src/NumberInput/NumberInput.svelte b/src/NumberInput/NumberInput.svelte
index 21aea508..2d512837 100644
--- a/src/NumberInput/NumberInput.svelte
+++ b/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
diff --git a/src/Select/Select.stories.js b/src/Select/Select.stories.js
index 57a9d9d2..1a81fecc 100644
--- a/src/Select/Select.stories.js
+++ b/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>)",
diff --git a/src/Select/Select.svelte b/src/Select/Select.svelte
index 7bc7cd8b..3fae6a05 100644
--- a/src/Select/Select.svelte
+++ b/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);
           }}
diff --git a/src/TextInput/PasswordInput.svelte b/src/TextInput/PasswordInput.svelte
index d05e8ba6..b7a4f87a 100644
--- a/src/TextInput/PasswordInput.svelte
+++ b/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 }) => {
diff --git a/src/TextInput/TextInput.stories.js b/src/TextInput/TextInput.stories.js
index c9adc07c..7089af2c 100644
--- a/src/TextInput/TextInput.stories.js
+++ b/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),
diff --git a/src/TextInput/TextInput.svelte b/src/TextInput/TextInput.svelte
index a94e3466..e24e8179 100644
--- a/src/TextInput/TextInput.svelte
+++ b/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 }) => {