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
| 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.
What I did
Created date-picker component to resolve the issue #2536.