Merge pull request #211 from IBM/text-input

feat: support size prop for input components

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/ListBox/ListBox.svelte

@@ -1,11 +1,11 @@
 <script>
   export let size = undefined; // "sm" | "xl"
   export let type = "default"; // "default" | "inline"
+  export let open = false;
+  export let light = false;
   export let disabled = false;
   export let invalid = false;
   export let invalidText = "";
-  export let light = false;
-  export let open = false;
 </script>
 
 <div
@@ -17,8 +17,9 @@
   class:bx--list-box--disabled={disabled}
   class:bx--list-box--expanded={open}
   class:bx--list-box--light={light}
-  class={size && `bx--list-box--${size}`}
   {...$$restProps}
+  class="{size && `bx--list-box--${size}`}
+  {$$restProps.class}"
   on:keydown
   on:keydown={e => {
     if (e.key === 'Escape') {

src/ListBox/ListBoxField.svelte

@@ -1,10 +1,10 @@
 <script>
-  export const translationIds = { close: "close", open: "open" };
   export let disabled = false;
-  export let id = "ccs-" + Math.random().toString(36);
   export let role = "combobox";
   export let tabindex = "-1";
+  export const translationIds = { close: "close", open: "open" };
   export let translateWithId = id => defaultTranslations[id];
+  export let id = "ccs-" + Math.random().toString(36);
   export let ref = null;
 
   import { getContext } from "svelte";

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 }) => {