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.

Sign up for GitHub

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

Jump to bottom

feat(custom-date-picker): updated custom date, time, date range pickers w flatpickr #242

Merged
merged 115 commits into from
Oct 22, 2024
Merged

feat(custom-date-picker): updated custom date, time, date range pickers w flatpickr #242

merged 115 commits into from
Oct 22, 2024

Conversation

wbarbee
Copy link
Contributor

@wbarbee wbarbee commented Sep 30, 2024 •
edited
Loading

Summary

Refactors datepicker, timepicker, date range picker components, utilizing flatpickr third-party library.

ADO Story or GitHub Issue Link

UI: Datepicker User Story
UI: Date/time range picker User Story
UI: Timepicker User Story
UI: Flatpickr theme User Story

Figma Link

https://www.figma.com/design/dhPuQQrqxHqMvtmnMMuTry/Santorini---Global-Filters?node-id=518-47488&node-type=frame&m=dev

Notes

primary considerations:

  • validation -- flatpickr out of the box/plugins vs. dropping all validations except for invalidText
  • custom shidoka theming

To Do

  • potential 2.0 breaking changes chore -- restructure Storybook side nav items for these three components, possibly nesting them under a common folder (e.g., dateTimePicker, Date Time Picker)

Checklist

  • Used Conventional Commit messages as outlined in the contributing guide.
    • Noted breaking changes (if any).
  • Documented/updated all props, events, slots, parts, etc with JSDoc.
    • Ran the analyze command to update Storybook docs.
  • Added/updated Stories with controls to cover all variants.
  • Ran test locally to address any failures.
  • Added/updated the Figma link for the Story's Design tab.
  • Added any new component exports to the src/index.ts file

Screenshots

Screenshot 2024-10-16 at 9 45 04 AM Screenshot 2024-10-16 at 4 51 30 PM Screenshot 2024-10-16 at 9 45 51 AM Screenshot 2024-10-16 at 9 46 54 AM

@netlify Netlify
Copy link

netlify bot commented Sep 30, 2024 •
edited
Loading

❌ Deploy Preview for shidoka-applications failed.

Name Link
🔨 Latest commit 28f9ee6
🔍 Latest deploy log https://app.netlify.com/sites/shidoka-applications/deploys/6717b80a43332d0008ad3020

@wbarbee wbarbee changed the title feat(custom-date-picker): new custom datepicker, timepicker, date range picker using third-party lib feat(custom-date-picker): replace with new custom datepicker, timepicker, date range Sep 30, 2024
@wbarbee wbarbee changed the title feat(custom-date-picker): replace with new custom datepicker, timepicker, date range feat(custom-date-picker): updated custom datepicker, timepicker, date range w flatpickr Oct 1, 2024
@wbarbee wbarbee changed the base branch from main to next October 3, 2024 14:31
@wbarbee wbarbee changed the title feat(custom-date-picker): updated custom datepicker, timepicker, date range w flatpickr feat(custom-date-picker)!: updated custom datepicker, timepicker, date range w flatpickr Oct 3, 2024
wbarbee
wbarbee commented Oct 3, 2024
View reviewed changes
.gitignore Show resolved Hide resolved
@brian-patrick-3
Copy link
Contributor

LGTM! Once QA approves, you can squash merge and include the BREAKING CHANGE: footer notes in the extended description textarea.

@srpriyankashetty
Copy link

Hi William,
It would be good if we have a clear option to clear in date range/date picker. - is it removed intentionally?

@wbarbee
Copy link
Contributor Author

wbarbee commented Oct 22, 2024 •
edited
Loading

fixed the following:

  1. minDate / maxDate: when these values are set to the same year (ex: 2024), Flatpickr hides the year from the date header in each calendar
    FIX: we are now detecting this and removing year element entirely when minDate and maxDate are explicitly set and are of the same year -- otherwise, the year will show as normal
  2. AM/PM bug: Flatpickr applies locale translation to AM/PM ONLY when date picker and timepicker are standalone components.
    FIX: all non-english locales will default to 24H mode (no AM/PM) unless the twentyFourHourFormat boolean is explicitly set to true or false for those locales (otherwise undefined). for all english locales, it will default to 12H format
  3. changed example hindi label to english to prevent confusion for devs so that they don't assume this value is being translated via the locale value. label is a string property and is to be set by developers, not shidoka's responsibility
  4. added reset button to all 3 components (date picker, time picker, date range picker)
  5. added multi-select date picker example on the patterns/forms page
  6. corrected labels that read Date / Time to read Date + Time

attn: @brian-patrick-3 -- please see item 2 above and let me know your thoughts

great work and thanks for your help @srpriyankashetty !!

srpriyankashetty
srpriyankashetty approved these changes Oct 22, 2024
View reviewed changes
Copy link

@srpriyankashetty srpriyankashetty left a comment

Choose a reason for hiding this comment

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

  1. Verified the new Date picker, Date range picker and Time picker changes and looks good
  2. Verified that Required error message is displayed for all the pickers
  3. Verified the min max range for all the pickers
  4. Verified the range selections
  5. Verified that Storybook >> Forms has all the above listed picker
  6. Verified the date pickers and time pickers in Chrome, Edge and Firefox browser and looks fine
  7. Verified the time for 12hrs and 24hrs format
  8. Verified setting the locale and language changes in the calendar accordingly

Verified bugs list
Reset/clear button when a value is selected in all the pickers - Fixed
Multi select date picker is missing in the form page - Fixed
The label to 'Date / Time' must be changed to 'Date + Time' in form - Fixed
AM and PM is not changing based on the Locale set - set the time to 24hrs format
When there is Min and Max date range set, the year is not showing in the calendar. Also shows some arrows beside the month - Fixed

@wbarbee wbarbee merged commit 17b2e41 into next Oct 22, 2024
5 checks passed
@wbarbee wbarbee deleted the feat/custom-date-picker branch October 22, 2024 14:55
@wbarbee wbarbee restored the feat/custom-date-picker branch October 22, 2024 14:56
@brian-patrick-3
Copy link
Contributor

🎉 This PR is included in version 2.0.0-next.10 🎉

The release is available on:

Your semantic-release bot 📦🚀

@wbarbee wbarbee deleted the feat/custom-date-picker branch October 22, 2024 15:19
wbarbee added a commit that referenced this pull request Oct 22, 2024
@wbarbee
feat(custom-date-picker): updated custom date, time, date range picke…
37b71ed 
…rs w flatpickr (#242)
wbarbee added a commit that referenced this pull request Dec 3, 2024
@wbarbee
fix(form components): : dark mode token updates (#277)
b25559e 
* feat(custom-date-picker): updated custom date, time, date range pickers w flatpickr (#242)

* feat(form components): dark mode for all form-related components

* feat: numberInput, radioButton, toggleButton first pass

* fix: checkbox color tokens (check: invalid and error message)

* feat: quick token adjustment on skeleton loader gradient using new color tokens

* fix: textArea, textInput

* feat: additional styles, instantiate kyn-checkbox in dropdown multiple selection

* fix: broken error icon in numberInput, begin radioButton token updates

* fix: handleChange for radioButton now working as expected

* fix: revert skeleton.scss, will handle in separate PR

* feat: checkbox and radioButton refactored to match figma

* fix: update dropdown, numberInput, toggleButton to match recent figma updates

* feat: bring checkbox and radioButton up to date with figma file

* fix: checkbox and dropdown updates

* fix: use secondary-state-default for now

* fix: reflect pushed token

* fix: playwright updates, fix tests

* fix: robert 25.11.2024 ready for dev updates

* feat: update with new foundation next version, more checks

* feat: refactor checkmark in checkbox to use single base64

* fix: toggle hover on focus styling
wbarbee added a commit that referenced this pull request Dec 3, 2024
@wbarbee
fix(date time picker): dark mode token updates (#279)
1f1e776 
* feat(custom-date-picker): updated custom date, time, date range pickers w flatpickr (#242)

* feat(date-time-picker): dark mode date time picker

* fix: build, tests

* fix: progressBar and @swc/core build test errors

* fix: remove unnecessary @swc/core install

* fix: merge in next fix

* feat(date-time-picker): update to next-14, update tokens in flatpickr-theme

* feat: match updated styles, better calendar positioning

* fix: trim down flatpickr scss variables, match timepicker dimensions

* fix: timepicker width, run analyze

* fix: code review minor changes

* fix: bug where multiple datepicker selections where not resetting clear icon

* fix: update figma links, fix disabled date/range/time picker disabled bug

* chore: analyze and update foundation

* fix: test errors

* fix: credit flatpickr in styling, reignite build

* fix: minor patterns/forms checkbox label slot correction
wbarbee added a commit that referenced this pull request Dec 11, 2024
@wbarbee @tulasigudibanda
fix(side drawer): dark mode token updates (#285)
123f6e1 
* feat(custom-date-picker): updated custom date, time, date range pickers w flatpickr (#242)

* feat(side drawer): dark mode side drawer

* fix: build

* fix: update rgba values with light-dark()

* fix: correct light-dark implementation

* chore: update figma link

* fix: checkbox label slot

* fix: box-shadow

* fix: update backdrop pseudo class values

* fix: consistent box-shadow

* fix: remove unnecessary, repetitive backdrop styling

* fix: code review updates

* fix: add ~ to scss use

* fix: new background and blur tokens

* fix: update foundation, merge

* fix: opacity token

* fix: code review comments addressed, need to add manual blur token

* fix: accessibility

* fix: classMap import

* fix: update foundation, update token

* feat: implement new close btn styles, new mixin

* feat: close-icon-btn mixin args

---------

Co-authored-by: tulasigudibanda <[email protected]>
wbarbee added a commit that referenced this pull request Jan 9, 2025
@wbarbee
fix(code view): dark mode token updates (#287)
91ac8e7 
* feat(custom-date-picker): updated custom date, time, date range pickers w flatpickr (#242)

* feat(side drawer): dark mode side drawer

* fix: build

* fix: update rgba values with light-dark()

* fix: correct light-dark implementation

* chore: update figma link

* fix: checkbox label slot

* fix: box-shadow

* feat(code-view): dark mode token implementation

* fix: system vs. property theme setting

* feat: inlineCodeBlock theme prioritization, icon fix

* fix: comment out tokens that are throwing accessibility errors, re-organize, alert UX

* fix: update to code-view tokens, needs foundation update

* fix: update, interpolation class

* chore: update foundation

* chore: run analyze

* fix: ensure code-view background color, needs ux adjustment

* fix: inline code view correcitons

* fix: token replacement block code view

* fix: remove sideDrawer file changes

* chore: restore untouched files

* fix: dont rely on constructor in inlineCodeView.ts

* fix: separate color-scheme, darkTheme setting, prioritizing

* feat: refactor copy, expand chevron buttons

* fix: system theme detection

* fix: mirror logic in inlineCodeView.ts

* chore: cleanup

* chore: remove console.logs

* fix: match ux updates

* fix: theming relying on built-in css

* chore: update foundation v

* chore: update packages

* fix: shidoka code view bg

* fix: update to new tertiary button for copy + expand
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@srpriyankashetty srpriyankashetty srpriyankashetty approved these changes

@brian-patrick-3 brian-patrick-3 brian-patrick-3 approved these changes

Assignees
No one assigned
Labels
released on @next
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@wbarbee @brian-patrick-3 @srpriyankashetty