feat(datepicker): date format utils #1060

iropolo · 2023-07-06T16:09:23Z

Date format utils

🛠️ Type Of Change

Feature

📖 Description

We expose date utils format following https://dialpad.design/guides/writing-guidelines/#dates

https://dialpad.atlassian.net/browse/DLT-721

github-actions · 2023-07-06T16:09:37Z

Thanks for contributing to Dialtone Vue! Please read below for some important info regarding Vue 3 compatibility.

Currently we need to maintain two branches in Dialtone Vue, one for Vue 2, one for Vue 3.

This means you must create two PRs for every feature change you make. One into staging and one into staging-vue3.

Many times the change you have made in Vue 2 will be identical to the change you need to make in Vue 3. To make this easier we have made a script that can copy your changes from this branch to a new branch off of staging-vue3 suffixed with -vue3.

run ./copy_pr_vue3.sh from the root dialtone-vue directory.

Once the new branch is created, you will need to look at your code to make sure it still makes sense and test that your changes all work in vue 3. If everything is good you can push it and create a PR into staging-vue3.

It is a required check for every PR to have a corresponding branch called yourbranch-vue3 so that we do not forget to do it. In the special case that you need to make a change to vue2 without making it in vue3, you can set the label vue2-only on this PR.

I got "commit SHA is a merge but no -m option was given."

This happens if there are merge commits in your branch. It's no problem, you can simply skip them with git cherry-pick --skip. We don't want to copy merge commits to the Vue 3 branch.

What if I make more changes to my vue 2 branch after running ./copy_pr_vue3.sh?

You can copy these to the existing -vue3 branch by running the script with a git SHA param like so:

./copy_pr_vue3.sh 2a78db7

where 2a78db7 is the last commit from your branch that was copied to the other branch (all commits after this will be copied)

If it's just one or two commits, you may prefer to just manually use git cherry-pick which will work fine as well.

What if I get a conflict?

It's possible to get a conflict when running copy_pr_vue3.sh as there are differences in Vue 2 and Vue 3 code. If this happens you can manually fix the conflict, commit it and do git cherry-pick --continue.

github-actions · 2023-07-06T16:12:06Z

✔️ Deploy Preview ready!
😎 Browse the preview: https://vue.dialpad.design/deploy-previews/pr-1060/
🔨 If you experience an SSL issue then wait 2 minutes and try again.

iropolo · 2023-07-06T16:28:28Z

Hmm... why in the preview the styles are not working correctly?
but in https://vue.dialpad.design/?path=/story/components-datepicker--default it does....

Local works properly

braddialpad · 2023-07-06T16:59:34Z

Hmm... why in the preview the styles are not working correctly?

Hmm.. you are certainly getting some weird issues lately.. Maybe it doesn't like the scoped styles? Try unscoped styles

iropolo · 2023-07-06T17:26:50Z

Hmm... why in the preview the styles are not working correctly?

Hmm.. you are certainly getting some weird issues lately.. Maybe it doesn't like the scoped styles? Try unscoped styles

The styles are just for the table and they are in the default template, I dont think it is related or maybe you are talking about something else.

I would like to merge this and I will deploy it. Will see if this is sth internal of the preview or.. sth else...

... But ye lemme check it... strange solutions for strange issues, lets see if it is works

braddialpad · 2023-07-06T17:31:07Z

The styles are just for the table and they are in the default template, I dont think it is related or maybe you are talking about something else.

Yeah I know but sometimes weird stuff happens so it might be worth trying. I only mentioned because we don't used scoped CSS often so it's something that is different from normal.

github-actions · 2023-07-06T17:34:03Z

✔️ Deploy Preview ready!
😎 Browse the preview: https://vue.dialpad.design/deploy-previews/pr-1060/
🔨 If you experience an SSL issue then wait 2 minutes and try again.

iropolo · 2023-07-06T17:36:25Z

The styles are just for the table and they are in the default template, I dont think it is related or maybe you are talking about something else.

Yeah I know but sometimes weird stuff happens so it might be worth trying. I only mentioned because we don't used scoped CSS often so it's something that is different from normal.

Could be this related to the issue? seems like it is not installing dialtone vue dependencies idk..

github-actions · 2023-07-06T17:44:05Z

✔️ Deploy Preview ready!
😎 Browse the preview: https://vue.dialpad.design/deploy-previews/pr-1060/
🔨 If you experience an SSL issue then wait 2 minutes and try again.

braddialpad · 2023-07-06T17:44:27Z

Could be this related to the issue? seems like it is not installing dialtone vue dependencies idk..

It doesn't need to install them when it makes a cache hit

github-actions · 2023-07-07T19:49:19Z

✔️ Deploy Preview ready!
😎 Browse the preview: https://vue.dialpad.design/deploy-previews/pr-1060/
🔨 If you experience an SSL issue then wait 2 minutes and try again.

braddialpad · 2023-07-07T20:43:11Z

We ever figure out what is going on here?

iropolo · 2023-07-07T21:41:25Z

We ever figure out what is going on here?

Same as #1061

Dialtone wasn't updated with emoji-picker and datepicker styles (now is updated).
Emojipicker and datepicker are using dt- (dialtone 8 styles) they will not work.

Local datepicker in staging branch

Local emojipicker in staging-vue3 branch

github-actions · 2023-07-10T15:10:00Z

✔️ Deploy Preview ready!
😎 Browse the preview: https://vue.dialpad.design/deploy-previews/pr-1060/
🔨 If you experience an SSL issue then wait 2 minutes and try again.

braddialpad · 2023-07-10T15:38:17Z

Same as #1061

Dialtone wasn't updated with emoji-picker and datepicker styles (now is updated).

Emojipicker and datepicker are using dt- (dialtone 8 styles) they will not work.

Local datepicker in staging branch
Local emojipicker in staging-vue3 branch

I think we'll need to change the variables to work on the dialtone 7 branch. The changes to dt- variables should only be on the "dialtone-8" branch

iropolo · 2023-07-10T16:09:15Z

Styles migrations will be tackled in another PR. Because this one is not related to that.

# [2.91.0](v2.90.1...v2.91.0) (2023-07-11) ### Bug Fixes * **Contact Info Avatar:** show avatar halo as required ([#1059](#1059)) ([901e7cd](901e7cd)) * update dialtone to 7.29.0 ([b9eaba6](b9eaba6)) ### Features * **Datepicker:** date format utils ([#1060](#1060)) ([00464f4](00464f4))

# [2.91.0](v2.90.1...v2.91.0) (2023-07-14) ### Bug Fixes * **Contact Info Avatar:** show avatar halo as required ([#1059](#1059)) ([901e7cd](901e7cd)) * **General Row:** overridden display property ([#1069](#1069)) ([21d0e6d](21d0e6d)) * update dialtone to 7.29.0 ([b9eaba6](b9eaba6)) ### Documentation * **Collapsible:** fix opened event not displayed on panel ([#1064](#1064)) ([21b2988](21b2988)) ### Features * **Datepicker:** date format utils ([#1060](#1060)) ([00464f4](00464f4))

* feat(datepicker): date format utils * feat(datepicker): test styles fix issue * feat(datepicker): exported format utils * feat(datepicker): rollback to scoped styles * feat(datepicker): date format doc and package update --------- Co-authored-by: iropolo <ignacio.ropolo@dialpad.com>

# [2.92.0-dialtone8.1](v2.91.2-dialtone8.1...v2.92.0-dialtone8.1) (2023-07-14) ### Bug Fixes * **Contact Info Avatar:** show avatar halo as required ([#1059](#1059)) ([b429531](b429531)) * **General Row:** overridden display property ([#1069](#1069)) ([7b5f27b](7b5f27b)) ### Documentation * **Collapsible:** fix opened event not displayed on panel ([#1064](#1064)) ([51a8f52](51a8f52)) ### Features * **Datepicker:** date format utils ([#1060](#1060)) ([42b8572](42b8572))

# [2.91.0](v2.90.1...v2.91.0) (2023-07-14) ### Bug Fixes * **Contact Info Avatar:** show avatar halo as required ([#1059](#1059)) ([901e7cd](901e7cd)) * update dialtone to 7.29.0 ([b9eaba6](b9eaba6)) ### Documentation * **Collapsible:** fix opened event not displayed on panel ([#1064](#1064)) ([21b2988](21b2988)) ### Features * **Datepicker:** date format utils ([#1060](#1060)) ([00464f4](00464f4)) * **General Row:** overridden display property ([#1069](#1069)) ([1fea8e8](1fea8e8))

# [2.93.0-dialtone8.1](v2.92.4...v2.93.0-dialtone8.1) (2023-07-27) ### Bug Fixes * `contact_info` style override issue ([#1078](#1078)) ([2090704](2090704)) * add customized css to badge label and contact info ([#1076](#1076)) ([6e8b374](6e8b374)) * add placeholder text for richtexteditor ([#1004](#1004)) ([19e1ef9](19e1ef9)) * **Avatar:** thin border behind image ([#1098](#1098)) ([c942386](c942386)) * change to fnv algo ([f6e01a1](f6e01a1)) * **Combobox Multi Select:** fix ref not existing error ([#1083](#1083)) ([de054f4](de054f4)) * component documentation link class ([#985](#985)) ([95c178c](95c178c)) * **Contact Info Avatar:** show avatar halo as required ([#1059](#1059)) ([b429531](b429531)) * **Contact Info, Leftbar Row:** stylings ([#1085](#1085)) ([34c27e8](34c27e8)) * **Contact Info:** avatar's border color ([#1097](#1097)) ([1639989](1639989)) * **Contact Row, Group Row, General Row:** null on description ([#1013](#1013)) ([8092faf](8092faf)) * DIALTONE-1089 pagination muted clear button error ([4bd3170](4bd3170)) * **General Row:** adjust label width on prop change ([#1095](#1095)) ([01ed220](01ed220)) * **General Row:** call resize handler on mounted ([#1093](#1093)) ([53768c1](53768c1)) * **General Row:** overridden display property ([#1069](#1069)) ([7b5f27b](7b5f27b)) * **General Row:** resize observer ([#1074](#1074)) ([7e27e9c](7e27e9c)) * **Item Layout:** remove align-self from item layout ([80ab209](80ab209)) * **Keyboard Shortcut:** inverted border color ([b68387c](b68387c)) * **Leftbar General Row:** add href for focusability ([#994](#994)) ([73bc4e0](73bc4e0)) * merge branch 'staging' into dialtone8 ([aa95eb4](aa95eb4)) * merge branch 'staging' into dialtone8 ([2dec412](2dec412)) * missing migrations ([7483e16](7483e16)) * **Modal:** secondary action button kind ([#1011](#1011)) ([f899cb8](f899cb8)) * package-lock ([48f3120](48f3120)) * remove peer dep ([b5be026](b5be026)) * revert [DIALTONE-1089] fix: pagination muted clear button error ([f43066c](f43066c)) * set node engine minimum to 12.20 ([#988](#988)) ([a53db3c](a53db3c)) * **Tooltip:** change anchor tag to span ([#1088](#1088)) ([0735fc8](0735fc8)) * update dialtone-icons ([9a8c31a](9a8c31a)) ### Code Refactoring * **Datepicker:** name refactoring ([#1049](#1049)) ([f6d34aa](f6d34aa)) ### Documentation * **Collapsible:** fix opened event not displayed on panel ([#1064](#1064)) ([51a8f52](51a8f52)) * fix broken story ([8097ff2](8097ff2)) ### Features * **Avatar:** update to flat colors ([#982](#982)) ([469fe05](469fe05)) * **Confact Info:** add `showAvatar` and `avatarIcon` props ([#981](#981)) ([4a7a674](4a7a674)) * **Datepicker:** date format utils ([#1060](#1060)) ([42b8572](42b8572)) * **Datepicker:** datepicker component ([#1007](#1007)) ([335af23](335af23)) * **General Row:** overridden display property ([#1069](#1069)) ([d6fd5ac](d6fd5ac)) * **General Row:** overridden display property ([#1069](#1069)) ([080afc0](080afc0)) * merge branch 'staging' into dialtone8 ([cf8d810](cf8d810)) * Merge branch 'staging' into dialtone8 ([001d2f7](001d2f7)) * migration to dialtone 8 ([#979](#979)) ([defcb77](defcb77)), closes [#993](#993) * **Modal:** show event and initial-focus-element ([#1009](#1009)) ([935d6da](935d6da)) * **Rich Text Editor:** link extension ([#991](#991)) ([d88e704](d88e704)) * **Rich Text Editor:** tests for rich text editor link extension and utils ([#1001](#1001)) ([b947270](b947270)) * state changes for feed item row ([#1002](#1002)) ([9aeefc6](9aeefc6)) * update dialtone-icons ([1fb19be](1fb19be)) * update item-layout to use tokens ([c9151aa](c9151aa)) ### Reverts * Revert "feat(general-row): overridden display property (#1069)" ([3e619ba](3e619ba)), closes [#1069](#1069) * revert fix(general-row): overridden display property (#1069) ([5355902](5355902)), closes [#1069](#1069)

# [2.93.0](v2.92.4...v2.93.0) (2023-08-04) ### Bug Fixes * `contact_info` style override issue ([#1078](#1078)) ([2090704](2090704)) * add customized css to badge label and contact info ([#1076](#1076)) ([6e8b374](6e8b374)) * add placeholder text for richtexteditor ([#1004](#1004)) ([19e1ef9](19e1ef9)) * **Avatar:** remove util classes, set tokens ([#1106](#1106)) ([3a24d2c](3a24d2c)) * **Avatar:** thin border behind image ([#1098](#1098)) ([c942386](c942386)) * change to fnv algo ([f6e01a1](f6e01a1)) * **Combobox Multi Select:** fix ref not existing error ([#1083](#1083)) ([de054f4](de054f4)) * component documentation link class ([#985](#985)) ([95c178c](95c178c)) * **Contact Info Avatar:** show avatar halo as required ([#1059](#1059)) ([b429531](b429531)) * **Contact Info, Leftbar Row:** stylings ([#1085](#1085)) ([34c27e8](34c27e8)) * **Contact Info:** avatar's border color ([#1097](#1097)) ([1639989](1639989)) * **Contact Row, Group Row, General Row:** null on description ([#1013](#1013)) ([8092faf](8092faf)) * DIALTONE-1089 pagination muted clear button error ([4bd3170](4bd3170)) * **General Row:** adjust label width on prop change ([#1095](#1095)) ([01ed220](01ed220)) * **General Row:** call resize handler on mounted ([#1093](#1093)) ([53768c1](53768c1)) * **General Row:** overridden display property ([#1069](#1069)) ([7b5f27b](7b5f27b)) * **General Row:** resize observer ([#1074](#1074)) ([7e27e9c](7e27e9c)) * **Item Layout:** remove align-self from item layout ([80ab209](80ab209)) * **Keyboard Shortcut:** inverted border color ([b68387c](b68387c)) * **Leftbar General Row:** add href for focusability ([#994](#994)) ([73bc4e0](73bc4e0)) * **Leftbar Row:** presence border color on selected row ([#1110](#1110)) ([05c9b15](05c9b15)) * merge branch 'staging' into dialtone8 ([aa95eb4](aa95eb4)) * merge branch 'staging' into dialtone8 ([2dec412](2dec412)) * missing migrations ([7483e16](7483e16)) * **Modal:** secondary action button kind ([#1011](#1011)) ([f899cb8](f899cb8)) * package-lock ([48f3120](48f3120)) * remove peer dep ([b5be026](b5be026)) * revert [DIALTONE-1089] fix: pagination muted clear button error ([f43066c](f43066c)) * set node engine minimum to 12.20 ([#988](#988)) ([a53db3c](a53db3c)) * **Tooltip:** change anchor tag to span ([#1088](#1088)) ([0735fc8](0735fc8)) * update dialtone-icons ([9a8c31a](9a8c31a)) ### Code Refactoring * **Datepicker:** name refactoring ([#1049](#1049)) ([f6d34aa](f6d34aa)) ### Documentation * **Collapsible:** fix opened event not displayed on panel ([#1064](#1064)) ([51a8f52](51a8f52)) * fix broken story ([8097ff2](8097ff2)) ### Features * add typescript ([#1108](#1108)) ([4f5e2ec](4f5e2ec)) * **Avatar:** add icon-class prop ([#1111](#1111)) ([43b0561](43b0561)) * **Avatar:** extract initials from full name ([6c80963](6c80963)) * **Avatar:** extract initials from full name ([#1102](#1102)) ([3082209](3082209)), closes [#1097](#1097) [#1098](#1098) * **Avatar:** update to flat colors ([#982](#982)) ([469fe05](469fe05)) * **Confact Info:** add `showAvatar` and `avatarIcon` props ([#981](#981)) ([4a7a674](4a7a674)) * **Datepicker:** date format utils ([#1060](#1060)) ([42b8572](42b8572)) * **Datepicker:** datepicker component ([#1007](#1007)) ([335af23](335af23)) * **General Row:** overridden display property ([#1069](#1069)) ([d6fd5ac](d6fd5ac)) * **General Row:** overridden display property ([#1069](#1069)) ([080afc0](080afc0)) * merge branch 'staging' into dialtone8 ([cf8d810](cf8d810)) * Merge branch 'staging' into dialtone8 ([001d2f7](001d2f7)) * migration to dialtone 8 ([#979](#979)) ([defcb77](defcb77)), closes [#993](#993) * **Modal:** show event and initial-focus-element ([#1009](#1009)) ([935d6da](935d6da)) * **Rich Text Editor:** link extension ([#991](#991)) ([d88e704](d88e704)) * **Rich Text Editor:** tests for rich text editor link extension and utils ([#1001](#1001)) ([b947270](b947270)) * state changes for feed item row ([#1002](#1002)) ([9aeefc6](9aeefc6)) * update dialtone-icons ([1fb19be](1fb19be)) * update item-layout to use tokens ([c9151aa](c9151aa)) ### Reverts * Revert "feat(general-row): overridden display property (#1069)" ([3e619ba](3e619ba)), closes [#1069](#1069) * revert fix(general-row): overridden display property (#1069) ([5355902](5355902)), closes [#1069](#1069)

feat(datepicker): date format utils

77717c9

iropolo requested review from juliodialpad and braddialpad as code owners July 6, 2023 16:09

iropolo mentioned this pull request Jul 6, 2023

feat(datepicker): date format utils vue3 #1061

Merged

feat(datepicker): test styles fix issue

411072b

Merge branch 'staging' into DLT-721-date-format-utils

fdefbba

feat(datepicker): exported format utils

4d5c89d

Merge branch 'staging' into DLT-721-date-format-utils

3cc3bcb

iropolo and others added 2 commits July 7, 2023 18:43

feat(datepicker): rollback to scoped styles

39a5be1

Merge branch 'staging' into DLT-721-date-format-utils

d048394

dialpad deleted a comment from github-actions bot Jul 10, 2023

feat(datepicker): date format doc and package update

70a27d4

dialpad deleted a comment from github-actions bot Jul 10, 2023

braddialpad approved these changes Jul 10, 2023

View reviewed changes

iropolo merged commit 00464f4 into staging Jul 10, 2023

iropolo deleted the DLT-721-date-format-utils branch July 10, 2023 16:18

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(datepicker): date format utils #1060

feat(datepicker): date format utils #1060

iropolo commented Jul 6, 2023

github-actions bot commented Jul 6, 2023

github-actions bot commented Jul 6, 2023

iropolo commented Jul 6, 2023 •

edited

Loading

braddialpad commented Jul 6, 2023

iropolo commented Jul 6, 2023 •

edited

Loading

braddialpad commented Jul 6, 2023

github-actions bot commented Jul 6, 2023

iropolo commented Jul 6, 2023

github-actions bot commented Jul 6, 2023

braddialpad commented Jul 6, 2023

github-actions bot commented Jul 7, 2023

braddialpad commented Jul 7, 2023

iropolo commented Jul 7, 2023

github-actions bot commented Jul 10, 2023

braddialpad commented Jul 10, 2023

iropolo commented Jul 10, 2023

feat(datepicker): date format utils #1060

feat(datepicker): date format utils #1060

Conversation

iropolo commented Jul 6, 2023

Date format utils

🛠️ Type Of Change

📖 Description

github-actions bot commented Jul 6, 2023

github-actions bot commented Jul 6, 2023

iropolo commented Jul 6, 2023 • edited Loading

braddialpad commented Jul 6, 2023

iropolo commented Jul 6, 2023 • edited Loading

braddialpad commented Jul 6, 2023

github-actions bot commented Jul 6, 2023

iropolo commented Jul 6, 2023

github-actions bot commented Jul 6, 2023

braddialpad commented Jul 6, 2023

github-actions bot commented Jul 7, 2023

braddialpad commented Jul 7, 2023

iropolo commented Jul 7, 2023

github-actions bot commented Jul 10, 2023

braddialpad commented Jul 10, 2023

iropolo commented Jul 10, 2023

iropolo commented Jul 6, 2023 •

edited

Loading

iropolo commented Jul 6, 2023 •

edited

Loading