docs: add docs for AppDatePickerInput

Signed-off-by: Rong Sen Ng (motss) <wes.ngrongsen@gmail.com>
motss · Mar 13, 2022 · f531c50 · f531c50
1 parent b8968d6
commit f531c50
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 8 deletions.
diff --git a/docs/app-date-picker-dialog.md b/docs/app-date-picker-dialog.md
@@ -30,7 +30,7 @@ This includes all the methods from [MwcDialog](mwc-dialog-methods-url).
 
 ## Events
 
-It includes all the events from [AppDatePicker](app-date-picker-events-url) and [MwcDialog](mwc-dialog-events-url).
+It includes all the events from [AppDatePicker](app-date-picker-events-url) and all from [MwcDialog](mwc-dialog-events-url).
 
 
 
@@ -47,15 +47,10 @@ It includes all the CSS Shadow Parts from [AppDatePicker](app-date-picker-css-sh
 
 
 <!-- References -->
-[1970-01-01]: https://en.wikipedia.org/wiki/Epoch_(computing)
 [app-date-picker-css-custom-properties-url]: /docs/app-date-picker.md#css-custom-properties
+[app-date-picker-css-shadow-parts-url]: /docs/app-date-picker.md#css-shadow-parts
 [app-date-picker-events-url]: /docs/app-date-picker.md#events
 [app-date-picker-properties-url]: /docs/app-date-picker.md#properties
-[app-date-picker-css-shadow-parts-url]: /docs/app-date-picker.md#css-shadow-parts
-[AppDatePicker]: /docs/app-date-picker.md
-[ECMAScript epoch]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date#the_ecmascript_epoch_and_timestamps
-[ISO 639]: https://en.wikipedia.org/wiki/ISO_639
-[ISO 8601 date and time format]: https://en.wikipedia.org/wiki/ISO_8601
 [mwc-dialog-css-custom-properties-url]: https://github.com/material-components/material-web/tree/master/packages/dialog#css-custom-properties
 [mwc-dialog-events-url]: https://github.com/material-components/material-web/tree/master/packages/dialog#events
 [mwc-dialog-methods-url]: https://github.com/material-components/material-web/tree/master/packages/dialog#methods

diff --git a/docs/app-date-picker-input.md b/docs/app-date-picker-input.md
@@ -0,0 +1,65 @@
+# AppDatePickerInput
+
+![date-picker-inputs-in-different-themes](https://user-images.githubusercontent.com/10607759/158064167-2b06d9ac-1e31-41b8-803e-2a8e3769b8e3.png)
+
+
+
+## Properties
+
+It includes all properties from [AppDatePicker](app-date-picker-properties-url) and some of the properties from [MwcTextfield](mwc-textfield-properties-url).
+
+| Property | Type | Default | Description |
+| --- | --- | --- | --- |
+| `clearLabel` | [String] | `Clear` | Text label for the clear icon button. |
+
+
+
+## Methods
+
+This includes all the methods from [MwcTextfield](mwc-textfield-methods-url).
+
+| Method | Returns | Description |
+| --- | --- | --- |
+| `closePicker` | | Hide the picker. |
+| `reset` | | Reset the textfield's `value`. |
+| `showPicker` | | Show the picker. |
+
+
+
+## Events
+
+It includes all the events from [AppDatePicker](app-date-picker-events-url) and all from [MwcMenu](mwc-menu-events-url) except that the event target is `app-date-picker-input`.
+
+
+
+## CSS Custom Properties
+
+It includes all the CSS Custom properties from [AppDatePicker](app-date-picker-css-custom-properties-url) and all from [MwcTextfield](mwc-textfield-css-custom-properties-url).
+
+| Property | Default | Description |
+| --- | --- | --- |
+| `--date-picker-input-icon` | `rgba(0, 0, 0, .54)` | Color of the reset icon button. |
+
+
+## CSS Shadow Parts
+
+It includes all the CSS Shadow Parts from [AppDatePicker](app-date-picker-css-shadow-parts-url).
+
+
+
+<!-- References -->
+[1970-01-01]: https://en.wikipedia.org/wiki/Epoch_(computing)
+[app-date-picker-css-custom-properties-url]: /docs/app-date-picker.md#css-custom-properties
+[app-date-picker-events-url]: /docs/app-date-picker.md#events
+[app-date-picker-properties-url]: /docs/app-date-picker.md#properties
+[app-date-picker-css-shadow-parts-url]: /docs/app-date-picker.md#css-shadow-parts
+[mwc-textfield-properties-url]: https://github.com/material-components/material-web/tree/master/packages/textfield#propertiesattributes
+[mwc-textfield-methods-url]: https://github.com/material-components/material-web/tree/master/packages/textfield#methods
+[mwc-menu-events-url]: https://github.com/material-components/material-web/tree/master/packages/menu#events
+[mwc-textfield-css-custom-properties-url]: https://github.com/material-components/material-web/tree/master/packages/textfield#css-custom-properties
+
+<!-- MDN references -->
+[Boolean]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean
+[Date]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date
+[Number]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number
+[String]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String
diff --git a/src/date-picker/stylings.ts b/src/date-picker/stylings.ts
@@ -91,6 +91,8 @@ export const datePickerStyling = css`
   min-height: var(--_body-h);
   max-height: var(--_body-h);
   height: 100%;
+  overflow-x: hidden; /** NOTE(rongsen): Disabling overflow-x to avoid infrequent overflowing. */
+  overflow-y: auto;
 }
 
 .calendar {
@@ -99,7 +101,6 @@ export const datePickerStyling = css`
 
 .year-grid {
   padding: 4px 20px 8px 12px;
-  overflow: auto;
   overscroll-behavior: contain;
 }
 `;