Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(date-picker): add pf-date-picker #2599

Draft
wants to merge 19 commits into
base: main
Choose a base branch
from

Conversation

Arathy-s
Copy link
Collaborator

What I did

Created date-picker component to resolve the issue #2536.

@changeset-bot
Copy link

changeset-bot bot commented Sep 27, 2023

⚠️ No Changeset found

Latest commit: e9e9833

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@Arathy-s Arathy-s marked this pull request as ready for review September 27, 2023 13:48
@bennypowers bennypowers changed the title Feature/pf date picker feat(date-picker): add pf-date-picker Sep 27, 2023
@bennypowers bennypowers added this to the PatternFly Elements 3 milestone Nov 8, 2023
@bennypowers bennypowers removed this from the PatternFly Elements 3 milestone Dec 4, 2023
Copy link
Member

@bennypowers bennypowers left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

some initial review to get the ball rolling

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we should prefer to inline all the css and js for the demos directly into the html files

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added inline css and js for the html demo files.

<section>
<h2>Date Format</h2>
<pre><code>&lt;pf-date-picker dateFormatInput="YYYY-DD-MM"&gt;&lt;/pf-date-picker&gt;</code></pre>
<pf-date-picker dateFormatInput="YYYY-DD-MM"></pf-date-picker>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we should prefer dash-case attributes for camelCase DOM properties, i.e. date-format-input, since HTML attributes are case-insensitive.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Changed the DOM properties format from cameCase to dash-case.

<section>
<h2>Disabled</h2>
<pre><code>&lt;pf-date-picker isDisabled="true"&gt;&lt;/pf-date-picker&gt;</code></pre>
<pf-date-picker isDisabled="true"></pf-date-picker>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We typically remove the is prefix for boolean attributes, see <pf-button disabled> for example

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed the is prefix form the disabled property.

Comment on lines 36 to 42
"./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",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Done.
Removed the child components exports list.

export class PfCalendar extends LitElement {
static readonly styles = [styles];

private currentDate: Date = new Date();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

prefer ecmascript private fields where possible

Suggested change
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

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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();
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Suggested change
@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;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we shouldn't need this to be a public @property

Comment on lines 73 to 76
constructor() {
super();
}

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
constructor() {
super();
}

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Removed the constructor.

Comment on lines 54 to 55
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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if these are constants, we probably don't need to store them on the class.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added constants to the helper file.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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)

Copy link
Collaborator Author

@Arathy-s Arathy-s Jun 29, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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">?

@bennypowers bennypowers marked this pull request as draft July 18, 2024 14:25
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants