Merge pull request #780 from janibolkvadze/FSPE-3448-Implement-chi-ti…

…me---chi-time-picker-web-components [FSPE-3448] implement Chi time & Chi Time Picker web components
CenturyLinkCloud · Dec 22, 2020 · fd8583c · fd8583c
2 parents dc0bfd5 + 6a2a85e
commit fd8583c
Show file tree

Hide file tree

Showing 15 changed files with 1,136 additions and 875 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 ### Components
 #### Added
 * Added: Time picker and Datetime picker components to allow users to enter a time through text input or choose a time from a picker.
+* Added: Date Picker web component now supports <code>resetDate</code> method.
 #### Changed
 * Changed: Modal components with theme `-portal` now align buttons in `chi-modal__footer` to the right (Chi's default) instead of center.
 * Changed: Picker group components with theme `-portal` now include a text color change on hover.

diff --git a/src/chi/components/date-picker/date-picker.scss b/src/chi/components/date-picker/date-picker.scss
@@ -167,6 +167,20 @@ $monday-starting-week: (
   }
 }
 
+.-time {
+  section {
+    &.chi-popover {
+      max-width: 30rem;
+    }
+
+    .chi-time-picker {
+      box-shadow: inset 0.0625rem 0 0 0 $color-border-base;
+      margin-left: 0.75rem;
+      padding: 0.5rem;
+    }
+  }
+}
+
 .chi-popover {
   .chi-datepicker {
     padding: 0.5rem 1rem;

diff --git a/src/chi/components/time-picker/time-picker.scss b/src/chi/components/time-picker/time-picker.scss
@@ -54,6 +54,7 @@
           background-color: $color-background-primary;
           color: $color-text-white;
           font-weight: $font-weight-semi-bold;
+          pointer-events: none;
         }
 
         &.-disabled {

diff --git a/src/custom-elements/docs/docs.json b/src/custom-elements/docs/docs.json
@@ -882,6 +882,23 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "mode",
+          "type": "string",
+          "mutable": false,
+          "attr": "mode",
+          "reflectToAttr": true,
+          "docs": "To render Date Picker with Time Picker",
+          "docsTags": [],
+          "default": "'date'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "value",
           "type": "string",
@@ -939,14 +956,16 @@
       "slots": [],
       "dependents": [],
       "dependencies": [
-        "chi-popover",
         "chi-date",
+        "chi-time",
+        "chi-popover",
         "chi-icon"
       ],
       "dependencyGraph": {
         "chi-date-picker": [
-          "chi-popover",
           "chi-date",
+          "chi-time",
+          "chi-popover",
           "chi-icon"
         ],
         "chi-date": [
@@ -1383,7 +1402,8 @@
         "chi-drawer",
         "chi-number-input",
         "chi-text-input",
-        "chi-textarea"
+        "chi-textarea",
+        "chi-time-picker"
       ],
       "dependencies": [],
       "dependencyGraph": {
@@ -1410,6 +1430,9 @@
         ],
         "chi-textarea": [
           "chi-icon"
+        ],
+        "chi-time-picker": [
+          "chi-icon"
         ]
       }
     },
@@ -2172,12 +2195,16 @@
       "styles": [],
       "slots": [],
       "dependents": [
-        "chi-date-picker"
+        "chi-date-picker",
+        "chi-time-picker"
       ],
       "dependencies": [],
       "dependencyGraph": {
         "chi-date-picker": [
           "chi-popover"
+        ],
+        "chi-time-picker": [
+          "chi-popover"
         ]
       }
     },
@@ -3173,6 +3200,243 @@
           "chi-icon"
         ]
       }
+    },
+    {
+      "filePath": "src/components/time/time.tsx",
+      "encapsulation": "scoped",
+      "tag": "chi-time",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "displaySeconds",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "display-seconds",
+          "reflectToAttr": true,
+          "docs": "Displaying seconds column",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "format",
+          "type": "string",
+          "mutable": false,
+          "attr": "format",
+          "reflectToAttr": true,
+          "docs": "To render Time Picker in 24 hours format",
+          "docsTags": [],
+          "default": "'12hr'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "stepped",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "stepped",
+          "reflectToAttr": true,
+          "docs": "To render Minutes and Seconds columns in stepped format",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "mutable": true,
+          "attr": "value",
+          "reflectToAttr": true,
+          "docs": "Selected time in the time picker",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [],
+      "events": [
+        {
+          "event": "chiTimeChange",
+          "detail": "any",
+          "bubbles": true,
+          "cancelable": true,
+          "composed": true,
+          "docs": "Time change value event",
+          "docsTags": []
+        }
+      ],
+      "styles": [],
+      "slots": [],
+      "dependents": [
+        "chi-date-picker",
+        "chi-time-picker"
+      ],
+      "dependencies": [],
+      "dependencyGraph": {
+        "chi-date-picker": [
+          "chi-time"
+        ],
+        "chi-time-picker": [
+          "chi-time"
+        ]
+      }
+    },
+    {
+      "filePath": "src/components/time-picker/time-picker.tsx",
+      "encapsulation": "scoped",
+      "tag": "chi-time-picker",
+      "docs": "",
+      "docsTags": [],
+      "usage": {},
+      "props": [
+        {
+          "name": "active",
+          "type": "boolean",
+          "mutable": true,
+          "attr": "active",
+          "reflectToAttr": true,
+          "docs": "Indicates whether the time picker popover is open or closed",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "disabled",
+          "reflectToAttr": true,
+          "docs": "To disable chi-time-picker.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "displaySeconds",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "display-seconds",
+          "reflectToAttr": true,
+          "docs": "Displaying seconds column",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "format",
+          "type": "string",
+          "mutable": false,
+          "attr": "format",
+          "reflectToAttr": true,
+          "docs": "To define format of Time Picker.",
+          "docsTags": [],
+          "default": "'12hr'",
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
+        {
+          "name": "value",
+          "type": "string",
+          "mutable": true,
+          "attr": "value",
+          "reflectToAttr": true,
+          "docs": "Selected time of Time Picker",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        }
+      ],
+      "methods": [
+        {
+          "name": "getTime",
+          "returns": {
+            "type": "Promise<string>",
+            "docs": ""
+          },
+          "signature": "getTime() => Promise<string>",
+          "parameters": [],
+          "docs": "Gets time",
+          "docsTags": []
+        },
+        {
+          "name": "setTime",
+          "returns": {
+            "type": "Promise<void>",
+            "docs": ""
+          },
+          "signature": "setTime(time: string) => Promise<void>",
+          "parameters": [],
+          "docs": "Sets time",
+          "docsTags": []
+        }
+      ],
+      "events": [],
+      "styles": [],
+      "slots": [],
+      "dependents": [],
+      "dependencies": [
+        "chi-popover",
+        "chi-time",
+        "chi-icon"
+      ],
+      "dependencyGraph": {
+        "chi-time-picker": [
+          "chi-popover",
+          "chi-time",
+          "chi-icon"
+        ]
+      }
     }
   ]
-}
+}