feat(date-picker): add pf-date-picker #2599
Conversation
|
bennypowers
changed the title
There was a problem hiding this comment.
we should prefer to inline all the css and js for the demos directly into the html files
There was a problem hiding this comment.
Added inline css and js for the html demo files.
| <section> | ||
| <h2>Date Format</h2> | ||
| <pre><code><pf-date-picker dateFormatInput="YYYY-DD-MM"></pf-date-picker></code></pre> | ||
| <pf-date-picker dateFormatInput="YYYY-DD-MM"></pf-date-picker> |
There was a problem hiding this comment.
we should prefer dash-case attributes for camelCase DOM properties, i.e. date-format-input, since HTML attributes are case-insensitive.
There was a problem hiding this comment.
Changed the DOM properties format from cameCase to dash-case.
| <section> | ||
| <h2>Disabled</h2> | ||
| <pre><code><pf-date-picker isDisabled="true"></pf-date-picker></code></pre> | ||
| <pf-date-picker isDisabled="true"></pf-date-picker> |
There was a problem hiding this comment.
We typically remove the is prefix for boolean attributes, see <pf-button disabled> for example
There was a problem hiding this comment.
Removed the is prefix form the disabled property.
elements/package.json
Outdated
| "./pf-date-picker/date-picker-helper.js": "./pf-date-picker/date-picker-helper.js", | ||
| "./pf-date-picker/pf-calendar.js": "./pf-date-picker/pf-calendar.js", | ||
| "./pf-date-picker/pf-date-picker.js": "./pf-date-picker/pf-date-picker.js", | ||
| "./pf-date-picker/pf-month-select.js": "./pf-date-picker/pf-month-select.js", | ||
| "./pf-date-picker/pf-next-button.js": "./pf-date-picker/pf-next-button.js", | ||
| "./pf-date-picker/pf-previous-button.js": "./pf-date-picker/pf-previous-button.js", | ||
| "./pf-date-picker/pf-year-input.js": "./pf-date-picker/pf-year-input.js", |
There was a problem hiding this comment.
since upstream only provides the DatePicker react component, we should also try to limit the number of public components we ship here. We may make an exception if, for accessibility reasons, we need to put these elements in the same root. However, in the case of date picker, We can probably allow ourselves the luxury of doing everything in the same shadow root. We'll need to investigate that carefully
There was a problem hiding this comment.
Done.
Removed the child components exports list.
| export class PfCalendar extends LitElement { | ||
| static readonly styles = [styles]; | ||
|
|
||
| private currentDate: Date = new Date(); |
There was a problem hiding this comment.
prefer ecmascript private fields where possible
| private currentDate: Date = new Date(); | |
| #currentDate = new Date(); |
also note that in this case you can do without the type annotation, TS will figure it out from the initializer on the RHS
There was a problem hiding this comment.
Added ES6 private fields
| private weeks: number[] = [0, 1, 2, 3, 4, 5]; // 1 previous month week, 4 current month weeks, 1 next month week | ||
|
|
||
| // Input properties from the parent | ||
| @property() currentYear: number = this.currentDate.getFullYear(); |
There was a problem hiding this comment.
I noticed this isn't a public prop on pfv4 DatePicker or CalendarFormat, so do we need it to be a public @property here? or can it be a private field?
if it does need to be private, see notes on the demo file regarding attribute names
| @property() currentYear: number = this.currentDate.getFullYear(); | |
| @property({ type: Number, attribute: 'current-year' }) currentYear: number = this.currentDate.getFullYear(); |
| @property() currentMonth: number = this.currentDate.getMonth(); | ||
| @property() currentWeek = 0; | ||
| @property() selectedDay: number = this.currentDate.getDate(); | ||
| @property() focusRef!: HTMLButtonElement; |
There was a problem hiding this comment.
we shouldn't need this to be a public @property
| constructor() { | ||
| super(); | ||
| } | ||
|
|
There was a problem hiding this comment.
| constructor() { | |
| super(); | |
| } |
There was a problem hiding this comment.
Removed the constructor.
| private weekdays: number[] = [0, 1, 2, 3, 4, 5, 6]; // S, M, T, W, T, F, S | ||
| private weeks: number[] = [0, 1, 2, 3, 4, 5]; // 1 previous month week, 4 current month weeks, 1 next month week |
There was a problem hiding this comment.
if these are constants, we probably don't need to store them on the class.
There was a problem hiding this comment.
Added constants to the helper file.
There was a problem hiding this comment.
These shouldn't be separate elements, but rather pf-button in the parent template
| </pf-previous-button> | ||
| </div> | ||
| <div class="date-picker-table-col date-picker-table-month-year"> | ||
| <pf-month-select |
There was a problem hiding this comment.
I believe we'd want to use <pf-dropdown> here instead of creating the new component of <pf-month-select>.
This goes along with @bennypowers previous comment about public components #2599 (comment) and his comment about <pf-next/previous-button> #2599 (comment)
There was a problem hiding this comment.
Hey @zeroedin
Thank you so much for reviewing.
I developed the <pf-month-select> component for the date-picker because <pf-dropdown> was not yet available. I will go ahead and change it now to <pf-dropdown> as it will be a much simpler implementation.
| @monthExpandState=${this.#getMonthExpandState} | ||
| .isMonthExpanded=${this.monthExpand}> | ||
| </pf-month-select> | ||
| <pf-year-input |
There was a problem hiding this comment.
Similar to the above, I would think we'd want to use <pf-text-input type="number"> instead of creating a new component here. However I do see that pf-text-input doesn't support min and max attrs which are needed here, @bennypowers since PF4 doesn't appear to extend these attributes on a number type, would we just want to implement a standard <input type="number">?
What I did
Created date-picker component to resolve the issue #2536.