feature: document textfield native pickers usage (#809)

* feature: document textfield native pickers usage * implement showpicker * Update libs/web-components/textfield/README.md Co-authored-by: dorsaf frigui <[email protected]> Co-authored-by: dorsaf frigui <[email protected]>
Finastra · Aug 3, 2022 · 3f3ddf4 · 3f3ddf4
1 parent 43c641b
commit 3f3ddf4
Show file tree

Hide file tree

Showing 4 changed files with 74 additions and 3 deletions.
diff --git a/libs/web-components/textfield/README.md b/libs/web-components/textfield/README.md
@@ -31,3 +31,15 @@ import '@finastra/textfield';
 <fds-textfield label="Field me in">
 </fds-textfield>
 ```
+
+### Native pickers
+
+Date pickers and Time pickers allow selecting a value from a standard format.
+
+The **Textfield** support date `type="date"`, time `type="time"` and date&time `type="datetime-local"` pickers. See [MDN web docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date) for more information about the different `input` types.
+
+#### Example
+
+```html
+<fds-textfield type="date" iconTrailing="calendar_today"></fds-textfield>
+```
diff --git a/libs/web-components/textfield/demo/index.html b/libs/web-components/textfield/demo/index.html
@@ -18,6 +18,14 @@
   <fds-textfield label="Label" showActionButton placeholder="Placeholder" icon="lock_outline" disabled>
     <fds-icon-button slot="actionButton" icon="visibility_off" onclick="myFunction(this)"></fds-icon-button>
   </fds-textfield>
+
+
+  <fds-textfield type="date" iconTrailing="calendar_today" dense></fds-textfield>
+
+  <fds-textfield type="datetime-local" iconTrailing="calendar_today" dense></fds-textfield>
+
+  <fds-textfield type="date" iconTrailing="calendar_today" dense disabled></fds-textfield>
+
 </div>
 
 <script>

diff --git a/libs/web-components/textfield/src/textfield.ts b/libs/web-components/textfield/src/textfield.ts
@@ -57,7 +57,7 @@ export class Textfield extends TextFieldBase {
 
     return html`
       ${!this.labelInside ? this.renderLabelOutside() : ''}
-      <label class="mdc-text-field ${classMap(classes)}">
+      <label class="mdc-text-field ${classMap(classes)}" @click="${this._handleClick}">
         ${this.renderRipple()}
         ${this.renderOutline()}
         ${this.renderLeadingIcon()}
@@ -71,6 +71,16 @@ export class Textfield extends TextFieldBase {
     `;
   }
 
+  protected _handleClick(e) {
+    if (!this.disabled && (this.type === "date" || "datetime-local" || "month" || "week" || "time")) {
+      e.path.forEach(p => {
+        if (p.nodeName === "INPUT") {
+          p.showPicker();
+        }
+      });
+    }
+  }
+
   protected renderTrailingIcon(): TemplateResult | string {
     return this.showActionButton
       ? html`

diff --git a/libs/web-components/textfield/stories/textfield.stories.ts b/libs/web-components/textfield/stories/textfield.stories.ts
@@ -18,14 +18,14 @@ export default {
       url: 'https://www.figma.com/file/E1Mb1556RT3HbAUVu2Q0LV/Finastra-design-system?node-id=105319%3A31992'
     },
     cssprops
-  },
+  }
 } as Meta;
 
 const Template: Story<Textfield> = ({ label, placeholder, icon, disabled, dense, required, iconTrailing, helper, labelInside}) => {
   return html`<fds-textfield label=${label} placeholder=${placeholder} icon=${icon} ?disabled=${disabled} ?dense=${dense} ?required=${required} iconTrailing=${iconTrailing} helper=${helper} ?labelInside=${labelInside}></fds-textfield>`;
 };
 
-const ValidationTemplate: Story<Textfield> = ({ label, icon, helper, type, validationMessage,pattern}) => {
+const ValidationTemplate: Story<Textfield> = ({ label, icon, helper, type, validationMessage, pattern}) => {
   return html`<fds-textfield label=${label} icon=${icon} type=${type} validationMessage=${validationMessage} ?helper=${helper} pattern=${pattern}></fds-textfield>`;
 };
 
@@ -37,6 +37,10 @@ const ActionButtonTemplate: Story<Textfield> = ({ label, icon, type, helper, sho
    `;
 };
 
+const NativeDatePickerTemplate: Story<Textfield> = ({ value, label, placeholder, icon, type, disabled, dense, required, iconTrailing, helper, labelInside}) => {
+  return html`<fds-textfield value=${value} label=${label} placeholder=${placeholder} icon=${icon} type=${type} ?disabled=${disabled} ?dense=${dense} ?required=${required} iconTrailing=${iconTrailing} helper=${helper} ?labelInside=${labelInside}></fds-textfield>`;
+};
+
 export const Default: Story<Textfield> = Template.bind({});
 Default.args = {
   label: 'Label',
@@ -108,3 +112,40 @@ LabelInside.args = {
   icon: 'person_outline',
   helper: "Helper text"
 }
+
+export const NativeDatePicker: Story<Textfield> = NativeDatePickerTemplate.bind({});
+NativeDatePicker.args = {
+  dense: true,
+  type: 'date',
+  icon: 'calendar_today',
+  label: 'Datepicker',
+  value: '2017-05-24'
+};
+
+export const NativeTimePicker: Story<Textfield> = NativeDatePickerTemplate.bind({});
+NativeTimePicker.args = {
+  dense: true,
+  type: 'time',
+  icon: 'schedule',
+  label: 'Timepicker',
+  value: '07:30'
+};
+
+export const NativeDateTimePicker: Story<Textfield> = NativeDatePickerTemplate.bind({});
+NativeDateTimePicker.args = {
+  dense: true,
+  type: 'datetime-local',
+  icon: 'calendar_today',
+  label: 'Datepicker',
+  value: '2017-05-24T10:30'
+};
+
+export const NativeDatePickerDisabled: Story<Textfield> = NativeDatePickerTemplate.bind({});
+NativeDatePickerDisabled.args = {
+  dense: true,
+  type: 'date',
+  icon: 'calendar_today',
+  label: 'Datepicker',
+  disabled: true,
+  value: '2017-05-24'
+};