feat(date-picker): add pf-date-picker by ArathyKumar · Pull Request #2599 · patternfly/patternfly-elements · GitHub

What I did

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

⚠️ 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

some initial review to get the ball rolling

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

Added inline css and js for the html demo files.

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

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

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

Removed the is prefix form the disabled property.

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

Done.
Removed the child components exports list.

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

Added ES6 private fields

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();

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

Suggested change

      
              constructor() {
          
                super();
          
              }

Removed the constructor.

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

Added constants to the helper file.

These shouldn't be separate elements, but rather pf-button in the parent template

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)

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.

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

Arathy Kumar added 2 commits September 25, 2023 13:34

feat: add pf-date-picker

ad5106e

chore: added date picker component

2b0ff7d

ArathyKumar marked this pull request as ready for review September 27, 2023 13:48

bennypowers changed the title Feature/pf date picker feat(date-picker): add pf-date-picker Sep 27, 2023

bennypowers requested a review from nikkimk October 15, 2023 07:14

bennypowers added this to the PatternFly Elements 3 milestone Nov 8, 2023

Merge branch 'main' into feature/pf-date-picker

690a889

bennypowers removed this from the PatternFly Elements 3 milestone Dec 4, 2023

Merge branch 'main' into feature/pf-date-picker

832d1f6

bennypowers requested changes Mar 27, 2024

View reviewed changes

Arathy Kumar and others added 11 commits March 28, 2024 12:33

fix: code updated to work with pf-3

549822b

Merge branch 'patternfly:main' into feature/pf-date-picker

36f9aca

fix: translation and popover fixes updated

08820f3

chore: split large demo files to individual files

19e0e11

fix: css fixes

1ae65c5

fix: button css fix on focus

52456d7

chore: component image added

0c94f75

fix: removed the date-picker child components from package.json

dde0275

fix: added constants in the helper file

988447d

fix: removed the constructor

412b41d

fix: changed the format of DOM properties from camelCase to dash-case

543394f

bennypowers reviewed Jun 25, 2024

View reviewed changes

zeroedin reviewed Jun 26, 2024

View reviewed changes

Arathy Kumar added 4 commits June 29, 2024 16:26

Merge remote-tracking branch 'origin/main' into feature/pf-date-picker

80615e4

chore: readme updated

c04282e

fix: changed extend composedevent to event

9580ff1

fix: added ecmascript private variables

e9e9833

bennypowers marked this pull request as draft July 18, 2024 14:25

+                <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>

+                <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>

+                  "./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",

+                @property() currentMonth: number = this.currentDate.getMonth();
+                @property() currentWeek = 0;
+                @property() selectedDay: number = this.currentDate.getDate();
+                @property() focusRef!: HTMLButtonElement;

+                                      </pf-previous-button>
+                                    </div>
+                                    <div class="date-picker-table-col date-picker-table-month-year">
+                                      <pf-month-select

+              export class PfCalendar extends LitElement {
+                static readonly styles = [styles];
+                private currentDate: Date = new Date();

	private currentDate: Date = new Date();
	#currentDate = new Date();

+                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();

	@property() currentYear: number = this.currentDate.getFullYear();
	@property({ type: Number, attribute: 'current-year' }) currentYear: number = this.currentDate.getFullYear();

		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

+                                        @monthExpandState=${this.#getMonthExpandState}
+                                        .isMonthExpanded=${this.monthExpand}>
+                                      </pf-month-select>
+                                      <pf-year-input

feat(date-picker): add pf-date-picker by ArathyKumar · Pull Request #2599 · patternfly/patternfly-elements · GitHub

Uh oh!

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

feat(date-picker): add pf-date-picker#2599ArathyKumar wants to merge 19 commits intopatternfly:mainpatternfly/patternfly-elements:mainfrom ArathyKumar:feature/pf-date-pickerArathyKumar/patternfly-elements:feature/pf-date-pickerCopy head branch name to clipboard

Conversation

ArathyKumar commented Sep 27, 2023

What I did

Uh oh!

changeset-bot Bot commented Sep 27, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

bennypowers left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ArathyKumar Jun 29, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

feat(date-picker): add pf-date-picker#2599
ArathyKumar wants to merge 19 commits into
patternfly:mainfrom
ArathyKumar:feature/pf-date-picker

changeset-bot Bot commented Sep 27, 2023 •
edited
Loading

ArathyKumar Jun 29, 2024 •
edited
Loading