From 5a5587c1151cd47ec1b81f8bbc1f4443218fafd5 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Thu, 29 Oct 2020 13:05:36 -0700
Subject: [PATCH] feat(timepicker): support "sm", "xl" size variants

---
 COMPONENT_INDEX.md                       |  1 +
 docs/src/PUBLIC_API.json                 | 40 ++++++++++++++----------
 docs/src/pages/components/TimePicker.svx | 26 +++++++++++++++
 src/TimePicker/TimePicker.svelte         |  8 +++++
 types/index.d.ts                         |  5 +++
 5 files changed, 64 insertions(+), 16 deletions(-)

diff --git a/COMPONENT_INDEX.md b/COMPONENT_INDEX.md
index bc2c5cf2..31e3050a 100644
--- a/COMPONENT_INDEX.md
+++ b/COMPONENT_INDEX.md
@@ -4987,6 +4987,7 @@ import { TimePicker } from "carbon-components-svelte";
 
 | Prop name   | Type                                      | Default value | Description                                    |
 | :---------- | :---------------------------------------- | :------------ | :--------------------------------------------- |
+| size        | <code>"sm" &#124; "xl"</code>             | --            | Specify the size of the input.                 |
 | value       | <code>string</code>                       | `""`          | Specify the input value.                       |
 | type        | <code>string</code>                       | `"text"`      | Specify the input type.                        |
 | placeholder | <code>string</code>                       | `"hh=mm"`     | Specify the input placeholder text.            |
diff --git a/docs/src/PUBLIC_API.json b/docs/src/PUBLIC_API.json
index 4e531a64..42c557b5 100644
--- a/docs/src/PUBLIC_API.json
+++ b/docs/src/PUBLIC_API.json
@@ -14581,6 +14581,14 @@
     "TimePicker": {
       "moduleName": "TimePicker",
       "props": [
+        [
+          "size",
+          {
+            "kind": "let",
+            "type": "\"sm\" | \"xl\"",
+            "description": "Specify the size of the input"
+          }
+        ],
         [
           "value",
           {
@@ -14721,8 +14729,8 @@
         [
           "click",
           {
-            "start": 1853,
-            "end": 1861,
+            "start": 1965,
+            "end": 1973,
             "type": "EventHandler",
             "name": "click",
             "modifiers": [],
@@ -14732,8 +14740,8 @@
         [
           "mouseover",
           {
-            "start": 1864,
-            "end": 1876,
+            "start": 1976,
+            "end": 1988,
             "type": "EventHandler",
             "name": "mouseover",
             "modifiers": [],
@@ -14743,8 +14751,8 @@
         [
           "mouseenter",
           {
-            "start": 1879,
-            "end": 1892,
+            "start": 1991,
+            "end": 2004,
             "type": "EventHandler",
             "name": "mouseenter",
             "modifiers": [],
@@ -14754,8 +14762,8 @@
         [
           "mouseleave",
           {
-            "start": 1895,
-            "end": 1908,
+            "start": 2007,
+            "end": 2020,
             "type": "EventHandler",
             "name": "mouseleave",
             "modifiers": [],
@@ -14765,8 +14773,8 @@
         [
           "change",
           {
-            "start": 2830,
-            "end": 2839,
+            "start": 3036,
+            "end": 3045,
             "type": "EventHandler",
             "name": "change",
             "modifiers": [],
@@ -14776,8 +14784,8 @@
         [
           "input",
           {
-            "start": 2848,
-            "end": 2856,
+            "start": 3054,
+            "end": 3062,
             "type": "EventHandler",
             "name": "input",
             "modifiers": [],
@@ -14787,8 +14795,8 @@
         [
           "focus",
           {
-            "start": 2946,
-            "end": 2954,
+            "start": 3152,
+            "end": 3160,
             "type": "EventHandler",
             "name": "focus",
             "modifiers": [],
@@ -14798,8 +14806,8 @@
         [
           "blur",
           {
-            "start": 2963,
-            "end": 2970,
+            "start": 3169,
+            "end": 3176,
             "type": "EventHandler",
             "name": "blur",
             "modifiers": [],
diff --git a/docs/src/pages/components/TimePicker.svx b/docs/src/pages/components/TimePicker.svx
index 9ed795fa..a70b4ca5 100644
--- a/docs/src/pages/components/TimePicker.svx
+++ b/docs/src/pages/components/TimePicker.svx
@@ -33,6 +33,32 @@ components: ["TimePicker", "TimePickerSelect", "SelectItem"]
   </TimePickerSelect>
 </TimePicker>
 
+### Extra-large size
+
+<TimePicker size="xl" labelText="Cron job" placeholder="hh:mm">
+  <TimePickerSelect value="PM">
+    <SelectItem value="am" text="AM" />
+    <SelectItem value="pm" text="PM" />
+  </TimePickerSelect>
+  <TimePickerSelect value="PDT">
+    <SelectItem value="pdt" text="PDT" />
+    <SelectItem value="gmt" text="GMT" />
+  </TimePickerSelect>
+</TimePicker>
+
+### Small size
+
+<TimePicker size="sm" labelText="Cron job" placeholder="hh:mm">
+  <TimePickerSelect value="PM">
+    <SelectItem value="am" text="AM" />
+    <SelectItem value="pm" text="PM" />
+  </TimePickerSelect>
+  <TimePickerSelect value="PDT">
+    <SelectItem value="pdt" text="PDT" />
+    <SelectItem value="gmt" text="GMT" />
+  </TimePickerSelect>
+</TimePicker>
+
 ### Disabled
 
 <TimePicker labelText="Cron job" placeholder="hh:mm" disabled>
diff --git a/src/TimePicker/TimePicker.svelte b/src/TimePicker/TimePicker.svelte
index 2e69aa3f..f88169aa 100644
--- a/src/TimePicker/TimePicker.svelte
+++ b/src/TimePicker/TimePicker.svelte
@@ -1,4 +1,10 @@
 <script>
+  /**
+   * Specify the size of the input
+   * @type {"sm" | "xl"} [size]
+   */
+  export let size = undefined;
+
   /**
    * Specify the input value
    * @type {string} [value=""]
@@ -95,6 +101,8 @@
   <div
     class:bx--time-picker="{true}"
     class:bx--time-picker--light="{light}"
+    class:bx--time-picker--sm="{size === 'sm'}"
+    class:bx--time-picker--xl="{size === 'xl'}"
     class:bx--select--light="{light}"
   >
     <div class:bx--time-picker__input="{true}">
diff --git a/types/index.d.ts b/types/index.d.ts
index 462c0382..a0a8dd91 100644
--- a/types/index.d.ts
+++ b/types/index.d.ts
@@ -4794,6 +4794,11 @@ export class TileGroup extends CarbonSvelteComponent {
 
 export class TimePicker extends CarbonSvelteComponent {
   $$prop_def: {
+    /**
+     * Specify the size of the input
+     */
+    size?: "sm" | "xl";
+
     /**
      * Specify the input value
      * @default ""