feat(datepicker): adding new variants to datepicker component (#502)

freshworks · Mar 29, 2022 · 9b170d8 · 9b170d8
1 parent 5e211b2
commit 9b170d8
Show file tree

Hide file tree

Showing 6 changed files with 205 additions and 158 deletions.
diff --git a/packages/crayons-core/src/components.d.ts b/packages/crayons-core/src/components.d.ts
@@ -247,6 +247,10 @@ export namespace Components {
     }
     interface FwDatepicker {
         "cancelText": string;
+        /**
+          * Displays a clear icon in the text box. Clicking the icon clears the value. Default `false`
+         */
+        "clearInput": boolean;
         /**
           * Format in which the date values selected in the calendar are populated in the input box. Defaults to the locale specific display format.
          */
@@ -315,6 +319,10 @@ export namespace Components {
           * Sets focus on a specific `fw-datepicker`. Use this method instead of the global `input.focus()`.
          */
         "setFocus": () => Promise<void>;
+        /**
+          * Indicates if footer needs to be shown. Default `true`.
+         */
+        "showFooter": boolean;
         /**
           * Theme based on which the input of the datepicker is styled.
          */
@@ -2486,6 +2494,10 @@ declare namespace LocalJSX {
     }
     interface FwDatepicker {
         "cancelText"?: string;
+        /**
+          * Displays a clear icon in the text box. Clicking the icon clears the value. Default `false`
+         */
+        "clearInput"?: boolean;
         /**
           * Format in which the date values selected in the calendar are populated in the input box. Defaults to the locale specific display format.
          */
@@ -2554,6 +2566,10 @@ declare namespace LocalJSX {
           * Specifies the input box as a mandatory field and displays an asterisk next to the label. If the attribute’s value is undefined, the value is set to false.
          */
         "required"?: boolean;
+        /**
+          * Indicates if footer needs to be shown. Default `true`.
+         */
+        "showFooter"?: boolean;
         /**
           * Theme based on which the input of the datepicker is styled.
          */

diff --git a/packages/crayons-core/src/components/datepicker/datepicker.scss b/packages/crayons-core/src/components/datepicker/datepicker.scss
@@ -26,8 +26,7 @@
   overflow: hidden;
 }
 
-.mdpc-footer,
-.mdpc-range-footer {
+.mdpc-footer {
   padding: 4px;
   display: flex;
   box-sizing: border-box;

diff --git a/packages/crayons-core/src/components/datepicker/datepicker.stories.mdx b/packages/crayons-core/src/components/datepicker/datepicker.stories.mdx
@@ -23,6 +23,16 @@ import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
 <Story name='DateRangePicker'>{() => '<fw-datepicker mode="range"></fw-datepicker>'}</Story>
 </Preview>
 
+### HideFooter
+<Preview>
+<Story name='hideFooter'>{() => '<fw-datepicker show-footer="false"></fw-datepicker>'}</Story>
+</Preview>
+
+### clearInput
+<Preview>
+<Story name='clearInput'>{() => '<fw-datepicker clear-input></fw-datepicker>'}</Story>
+</Preview>
+
 ### minDate and maxDate specified
 <Preview>
 <Story name='minDate and maxDate specified'>{() => '<fw-datepicker min-date="2020-04-10" max-date="2020-09-29"></fw-datepicker>'}</Story>