fix: month Year Dropdown

freshworks · May 22, 2020 · 8ac0322 · 8ac0322
1 parent 9208e76
commit 8ac0322
Show file tree

Hide file tree

Showing 11 changed files with 443 additions and 231 deletions.
diff --git a/src/components.d.ts b/src/components.d.ts
@@ -47,14 +47,38 @@ export namespace Components {
         "value": string;
     }
     interface FwDatepicker {
+        /**
+          * Selected Date will be retured in the given date format
+         */
         "dateFormat": string;
-        "dateValue": any;
-        "endDate": any;
-        "maxDate": any;
-        "minDate": any;
+        /**
+          * From date that is selected in the date range picker mode
+         */
+        "fromDate": string;
+        /**
+          * Maximum date that are allowed to select in the calender
+         */
+        "maxDate": string;
+        /**
+          * Minimum date that are allowed to select in the calender
+         */
+        "minDate": string;
+        /**
+          * Shows single date or date range picker based on mode
+         */
         "mode": string;
+        /**
+          * Placeholder to display in the input field
+         */
         "placeholder": string;
-        "startDate": any;
+        /**
+          * To date that is selected in the date range picker mode
+         */
+        "toDate": string;
+        /**
+          * Value selected in the single date picker mode
+         */
+        "value": any;
     }
     interface FwIcon {
         /**
@@ -591,15 +615,42 @@ declare namespace LocalJSX {
         "value"?: string;
     }
     interface FwDatepicker {
+        /**
+          * Selected Date will be retured in the given date format
+         */
         "dateFormat"?: string;
-        "dateValue"?: any;
-        "endDate"?: any;
-        "maxDate"?: any;
-        "minDate"?: any;
+        /**
+          * From date that is selected in the date range picker mode
+         */
+        "fromDate"?: string;
+        /**
+          * Maximum date that are allowed to select in the calender
+         */
+        "maxDate"?: string;
+        /**
+          * Minimum date that are allowed to select in the calender
+         */
+        "minDate"?: string;
+        /**
+          * Shows single date or date range picker based on mode
+         */
         "mode"?: string;
+        /**
+          * Triggered when the update button clicked
+         */
         "onFwChange"?: (event: CustomEvent<any>) => void;
+        /**
+          * Placeholder to display in the input field
+         */
         "placeholder"?: string;
-        "startDate"?: any;
+        /**
+          * To date that is selected in the date range picker mode
+         */
+        "toDate"?: string;
+        /**
+          * Value selected in the single date picker mode
+         */
+        "value"?: any;
     }
     interface FwIcon {
         /**

diff --git a/src/components/datepicker/datepicker.scss b/src/components/datepicker/datepicker.scss
@@ -1,20 +1,10 @@
-.MyDatePicker {
-  position: relative;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
-}
-
-.MyDatePicker * {
-  /* Chrome/Safari/Opera */
-  -webkit-user-select: none;
-
-  /* Firefox */
-  -moz-user-select: none;
+@import "../../styles/freshworks";
 
-  /* Edge */
-  -ms-user-select: none;
-
-  /* Non-prefixed version, currently */
-  user-select: none;
+.date-picker {
+  position: relative;
+  * {
+    user-select: none;
+  }
 }
 
 .mdp-container,
@@ -25,7 +15,7 @@
   top: 40px;
   width: 300px;
   min-height: 336px;
-  background: #fff;
+  background: var(--color-milk);
   box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.2);
   border-radius: 5px;
   overflow: hidden;
@@ -41,8 +31,8 @@
   top: 344px;
   width: 317px;
   padding: 8px;
-  background: #f5f7f9;
-  border-top: 1px solid #ebeff3;
+  background: var(--color-smoke-25);
+  border-top: 1px solid var(--color-smoke-50);
   margin-top: 15.5px;
   box-shadow: 4px 9px 20px rgba(0, 0, 0, 0.2);
   border-radius: 0 0 5px 5px;
@@ -78,7 +68,7 @@
 
   .mdpc-body-right {
     float: right;
-    border-left: 1px solid #e4f2fd;
+    border-left: 1px solid var(--color-smoke-50);
     padding-left: 10px;
   }
 }
@@ -101,7 +91,7 @@
 
 .mdpchb-inner:hover {
   cursor: pointer;
-  background: #ebeff3;
+  background: var(--color-smoke-50);
 }
 
 .mdpchb-inner {
@@ -128,8 +118,8 @@
   float: left;
   width: 6px;
   height: 6px;
-  border-left: 2px solid #888;
-  border-bottom: 2px solid #888;
+  border-left: 2px solid var(--color-smoke-300);
+  border-bottom: 2px solid var(--color-smoke-300);
   position: absolute;
 }
 
@@ -185,19 +175,25 @@
   float: left;
   height: 30px;
   font-size: 16px;
-  color: #666;
+  color: var(--color-smoke-700);
   text-align: center;
-  margin-top: 16px;
+  margin-top: 6px;
+  width: 90px;
 }
 
 .mdpchc-month {
   float: left;
   height: 15px;
   font-size: 16px;
-  color: #666;
+  color: var(--color-smoke-700);
   text-align: center;
-  margin-top: 16px;
+  margin-top: 6px;
   margin-right: 10px;
+  width: 90px;
+
+  fw-select .input-container-inner input {
+    width: 98%;
+  }
 }
 
 /**
@@ -207,15 +203,12 @@
 .c-day-container,
 .cc-body,
 .cc-head,
-.cc-month,
 .cch-name,
 .cdc-day,
 .cdc-day span {
   position: relative;
   display: block;
   float: left;
-  -webkit-box-sizing: border-box;
-  -moz-box-sizing: border-box;
   box-sizing: border-box;
 }
 
@@ -224,14 +217,6 @@
   height: 100%;
 }
 
-.cc-month {
-  height: 30px;
-  width: 100%;
-  font-size: 16px;
-  line-height: 30px;
-  color: #666;
-}
-
 .cc-head {
   height: 30px;
   width: 100%;
@@ -242,7 +227,7 @@
   height: 30px;
   line-height: 30px;
   font-weight: 700;
-  color: #666;
+  color: var(--color-smoke-700);
   font-size: 13px;
   text-align: center;
 }
@@ -263,13 +248,13 @@
   height: 100%;
   font-size: 12px;
   font-weight: 300;
-  color: #444;
+  color: var(--color-smoke-700);
   text-align: center;
 }
 
 .cdc-day span:hover {
   cursor: pointer;
-  background: #ebeff3;
+  background: var(--color-smoke-50);
 }
 
 .cdc-day span {
@@ -290,22 +275,22 @@
   pointer-events: none;
 }
 
-.dateinput {
+.date-input {
   width: 210px;
 }
 
 .c-day-container.disabled .cdc-day span {
-  color: #ddd;
-  background: #fff !important;
+  color: var(--color-smoke-100);
+  background: var(--color-milk) !important;
 }
 
-.c-day-container.highlight .cdc-day span {
-  border: 1px solid #d2dae0;
+.c-day-container.highlight:not(.disabled) .cdc-day span {
+  border: 1px solid var(--color-smoke-100);
 }
 
-.c-day-container.highlight-blue .cdc-day span {
-  background: #2e5dc5;
-  color: #fdfefe;
+.c-day-container.highlight-blue:not(.disabled) .cdc-day span {
+  background: var(--color-azure-800);
+  color: var(--color-smoke-25);
 }
 
 .c-day-container.start-day {