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

Update dependency @mui/x-date-pickers to v6 #213

Merged
merged 27 commits into from
Nov 21, 2023
Merged

Update dependency @mui/x-date-pickers to v6 #213

merged 27 commits into from
Nov 21, 2023

Conversation

renovate[bot]
Copy link
Contributor

@renovate renovate bot commented Mar 6, 2023 •
edited
Loading

Mend Renovate

This PR contains the following updates:

Package Change Age Adoption Passing Confidence
@mui/x-date-pickers (source) 5.0.7 -> 6.11.1 age adoption passing confidence

Release Notes

mui/mui-x (@​mui/x-date-pickers)

v6.11.1

Compare Source

Aug 11, 2023

We'd like to offer a big thanks to the 8 contributors who made this release possible. Here are some highlights ✨:

  • 💫 Add theme augmentation to @mui/x-tree-view
  • 📈 Enable charts customization using slot and slotProps props
  • 🌍 Improve Finnish (fi-FI) and Icelandic (is-IS) locales on the pickers
  • 🐞 Bugfixes
  • 📚 Documentation improvements
Data Grid
@mui/[email protected]
@mui/[email protected] pro

Same changes as in @mui/[email protected].

@mui/[email protected] premium

Same changes as in @mui/[email protected].

Date Pickers
@mui/[email protected]
@mui/[email protected] pro

Same changes as in @mui/[email protected].

Charts / @mui/[email protected]
Tree View / @mui/[email protected]
Docs
Core

v6.11.0

Compare Source

Aug 4, 2023

We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:

  • ⌚️ Move the tree view component from @mui/lab package

    The <TreeView /> component has been moved to the MUI X repository.
    It is now accessible from its own package: @mui/x-tree-view.

  • 🌍 Improve Hebrew (he-IL), Finnish (fi-FI), and Italian (it-IT) locales on the data grid

  • 🐞 Bugfixes

  • 📚 Documentation improvements

Data Grid
@mui/[email protected]
@mui/[email protected] pro

Same changes as in @mui/[email protected].

@mui/[email protected] premium

Same changes as in @mui/[email protected].

Date Pickers
@mui/[email protected]
@mui/[email protected] pro

Same changes as in @mui/[email protected].

Charts / @mui/[email protected]
Tree View / @mui/[email protected]
Docs
Core

v6.10.2

Compare Source

Jul 27, 2023

We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:

  • 🚀 Improve scatter charts performance
  • 📚 Redesigned component API documentation and side navigation
  • 🐞 Bugfixes
Data Grid
@mui/[email protected]
@mui/[email protected] pro

Same changes as in @mui/[email protected].

@mui/[email protected] premium

Same changes as in @mui/[email protected], plus:

Date Pickers
@mui/[email protected]
@mui/[email protected] pro

Same changes as in @mui/[email protected].

Charts / @mui/[email protected]
Docs
Core

v6.10.1

Compare Source

Jul 20, 2023

We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:

  • 🎁 Fix CSV export for values containing double quotes
  • 🚀 Improve tree data performance
  • 🐞 Bugfixes
  • 📚 Documentation improvements
Data Grid
@mui/[email protected]
@mui/[email protected] pro

Same changes as in @mui/[email protected], plus:

@mui/[email protected] premium

Same changes as in @mui/[email protected].

Date Pickers
@mui/[email protected]
@mui/[email protected] pro

Same changes as in @mui/[email protected].

Charts / @mui/[email protected]
Docs
Core

v6.10.0

Compare Source

Jul 13, 2023

We'd like to offer a big thanks to the 10 contributors who made this release possible. Here are some highlights ✨:

  • ⚡ Improve data grid filtering performance
  • 🎁 Include column groups in the CSV export
  • 🌍 Improve Polish (pl-PL) locale for the data grid
  • 🌍 Improve Norwegian (nb-NO) locale for the pickers
Data Grid
@mui/[email protected]
@mui/[email protected] pro

Same changes as in @mui/[email protected].

@mui/[email protected] premium

Same changes as in @mui/[email protected].

Date Pickers
@mui/[email protected]
@mui/[email protected] pro

Same changes as in @mui/[email protected].

Charts / @mui/[email protected]
Docs
Core

v6.9.2

Compare Source

Jul 6, 2023

We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:

Data Grid
@mui/[email protected]
@mui/[email protected] pro

Same changes as in @mui/[email protected].

@mui/[email protected] premium

Same changes as in @mui/[email protected], plus:

Date Pickers
@mui/[email protected]
@mui/[email protected] pro

Same changes as in @mui/[email protected].

Charts / @mui/[email protected]
Docs
Core

v6.9.1

Compare Source

Jun 30, 2023

We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:

  • 🔎 Add experimental API for faster filtering performance
  • 🌍 Add Chinese (Hong Kong) (zh-HK) locale on the pickers
  • 🌍 Improve Romanian (ro-RO) and Hungarian (hu-HU) translations on the pickers and the data grid
  • 🐞 Bugfixes
  • 📚 Documentation improvements
Data Grid
@mui/[email protected]
@mui/[email protected] pro

Same changes as in @mui/[email protected], plus:

@mui/[email protected] premium

Same changes as in @mui/[email protected].

Date Pickers
@mui/[email protected]
@mui/[email protected] pro

Same changes as in @mui/[email protected].

Charts / @mui/[email protected]
Docs
Core

v6.9.0

Compare Source

Jun 22, 2023

We'd like to offer a big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:

  • 🎁 We released a new open-source package: @mui/x-charts. This package aims at simplifying the integration of charts into your dashboards. 📊

    charts

    It already contains line, bar, and scatter charts, with basic customization features. Check out the documentation to see what it can do, and open issues to get the feature you need implemented.

  • 🚀 Introducing UTC and timezone support for pickers.

    Visit the documentation to learn how to use it.

  • 🌍 Improve Brazilian Portuguese (pt-BR) on the data grid

  • 🌍 Improve Czech (cs-CZ) locale on the pickers

  • 🚅 Performance improvements

  • 🐞 Bugfixes

  • 📚 Documentation improvements

Data Grid
@mui/[email protected]
@mui/[email protected] pro

Same changes as in @mui/[email protected].

@mui/[email protected] premium

Same changes as in @mui/[email protected].

Date Pickers
@mui/[email protected]
@mui/[email protected] pro

Same changes as in @mui/[email protected].

Charts / @mui/[email protected]
Docs
Core

v6.8.0

Compare Source

Jun 16, 2023

We'd like to offer a big thanks to the 13 contributors who made this release possible. Here are some highlights ✨:

  • 🌍 Add Greek (el-GR) locale on Pickers and improve on Data Grid
  • 🚅 Performance improvements
  • 🐞 Bugfixes
  • 📚 Documentation improvements
Data Grid
@mui/[email protected]
@mui/[email protected] pro

Same changes as in @mui/[email protected].

@mui/[email protected] premium

Same changes as in @mui/[email protected].

Date Pickers
@mui/[email protected]
@mui/[email protected] pro

Same changes as in @mui/[email protected].

Docs
Core

v6.7.0

Compare Source

Jun 9, 2023

We'd like to offer a big thanks to the 12 contributors who made this release possible. Here are some highlights ✨:

  • 🎁 Improve the default format prop value on the pickers.

    Here are a few examples:

    <TimePicker views={['hours', 'minutes', 'seconds']} ampm />
// Format before v6.7.0: `hh:mm aa`
// Format after v6.7.0: `hh:mm:ss aa`

<DatePicker views={['year']} />
// Format before v6.7.0: `MM/DD/YYYY`
// Format after v6.7.0: `YYYY`

<DateTimePicker views={['day', 'hours', 'minutes']} ampm />
// Format before v6.7.0: `MM/DD/YYYY hh:mm aa`
// Format after v6.7.0: `DD hh:mm aa`

  • 🌍 Add Romanian (ro-RO) locale on the pickers

  • 🌍 Improve German (de-DE) locale on the pickers

  • 🌍 Improve Czech (cs-CZ), German (de-DE) and Turkish (tr-TR) locales on the data grid

  • 🚀 Performance improvements

  • 🐞 Bugfixes

  • 📚 Documentation improvements

Data Grid
@mui/[email protected]
@mui/[email protected] pro

Same changes as in @mui/[email protected], plus:

@mui/[email protected] premium

Same changes as in @mui/[email protected], plus:

Pickers
@mui/[email protected]
@mui/[email protected] pro

Same changes as in @mui/[email protected], plus:

Docs
Core

Configuration

📅 Schedule: Branch creation - "after 10pm every weekday,before 5am every weekday,every weekend" (UTC), Automerge - At any time (no schedule defined).

🚦 Automerge: Disabled by config. Please merge this manually once you are satisfied.

♻ Rebasing: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 Ignore: Close this PR and you won't be reminded about this update again.

  • If you want to rebase/retry this PR, check this box

This PR has been generated by Mend Renovate. View repository job log here.

@renovate renovate bot added the dependencies label Mar 6, 2023
@renovate renovate bot force-pushed the renovate/mui-x-date-pickers-6.x branch 2 times, most recently from 04b6b82 to 747afbc Compare March 19, 2023 15:58
@renovate renovate bot force-pushed the renovate/mui-x-date-pickers-6.x branch 2 times, most recently from b27419f to 5ebeea4 Compare March 26, 2023 20:06
@renovate renovate bot force-pushed the renovate/mui-x-date-pickers-6.x branch 2 times, most recently from 830ba68 to 8fa49f3 Compare April 2, 2023 16:55
@renovate renovate bot force-pushed the renovate/mui-x-date-pickers-6.x branch 2 times, most recently from 94c54e9 to 4475461 Compare April 17, 2023 11:08
@renovate renovate bot force-pushed the renovate/mui-x-date-pickers-6.x branch from 4475461 to 2c86210 Compare April 23, 2023 13:53
@renovate renovate bot force-pushed the renovate/mui-x-date-pickers-6.x branch from 2c86210 to 68e0bcc Compare May 1, 2023 08:40
@louise-davies
Copy link
Member

We should probably wait for the integration of the new clock component into the DateTimePicker before upgrading to save "upgrading twice"

@renovate renovate bot force-pushed the renovate/mui-x-date-pickers-6.x branch 3 times, most recently from bdd50e3 to 5671cd3 Compare May 9, 2023 08:24
@renovate renovate bot force-pushed the renovate/mui-x-date-pickers-6.x branch 2 times, most recently from 535e381 to 0572fc8 Compare May 22, 2023 14:34
@renovate renovate bot force-pushed the renovate/mui-x-date-pickers-6.x branch from 0572fc8 to d4995de Compare June 4, 2023 16:18
@renovate renovate bot force-pushed the renovate/mui-x-date-pickers-6.x branch from d4995de to 29c3967 Compare June 12, 2023 11:54
@renovate renovate bot force-pushed the renovate/mui-x-date-pickers-6.x branch 2 times, most recently from be7934a to 63a0fe0 Compare June 25, 2023 15:44
@louise-davies louise-davies added the good first issue Good for newcomers label Jul 3, 2023
@renovate renovate bot force-pushed the renovate/mui-x-date-pickers-6.x branch 8 times, most recently from dfe7f86 to 8f850ec Compare July 6, 2023 15:55
@kaperoo
Copy link
Contributor

kaperoo commented Nov 1, 2023

Migrating date-pickers from v5 to v6

Same as in DG - updated mui DateTime pickers to v6.
Extracted custom text field logic into a separate component to prevent popup anchoring bugs.

Testing

Updated unit, e2e and playwright tests as methods like .clear and .fill don't seem to work with the new pickers for some reason. For now, I found a workaround using keyboard events, but I left the old code commented out in case they fix these issues :).

louise-davies
louise-davies reviewed Nov 3, 2023
View reviewed changes
src/search/components/dateTime.component.tsx
size: 'small',
'aria-label': 'from, date-time picker',
slots={{
textField: CustomTextField,
}}
Copy link
Member

Choose a reason for hiding this comment

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

Aren't we missing specifying the custom day?

Copy link
Contributor

Choose a reason for hiding this comment

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

Yes, this commit (e1f879d) moved the custom day to slots, but missed one in the "from" picker. I'll add it back.

louise-davies
louise-davies reviewed Nov 3, 2023
View reviewed changes
src/search/searchBar.component.test.tsx Outdated
Comment on lines 361 to 365
// .clear doesn't work with datepickers in v6
await user.click(dateFilterFromDate);
await user.keyboard('{Control>}a{/Control}');
await user.keyboard('{Delete}');
// await user.clear(dateFilterFromDate);
Copy link
Member

Choose a reason for hiding this comment

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

This workaround is no longer required - this was fixed in 6.16.0

louise-davies
louise-davies reviewed Nov 3, 2023
View reviewed changes
cypress/integration/table/search.spec.ts Outdated
Comment on lines 43 to 44
// For some reason this doesn't work with date pickers v6
// Commenting out for now
Copy link
Member

Choose a reason for hiding this comment

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

This fix was originally a work around to ensure that desktop date pickers are used. If this fix is no longer required, then we can remove them

louise-davies
louise-davies reviewed Nov 3, 2023
View reviewed changes
cypress/integration/table/search.spec.ts Outdated
Comment on lines 1218 to 1219
// .clear doesn't work with datepickers in v6
// cy.findByLabelText('from, date-time input').clear();
Copy link
Member

Choose a reason for hiding this comment

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

Again, this workaround may no longer be needed

Copy link
Contributor

Choose a reason for hiding this comment

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

I've checked and .clear still doesn't work in cypress e2e tests.

louise-davies
louise-davies reviewed Nov 3, 2023
View reviewed changes
package.json
@@ -7,10 +7,11 @@
"@emotion/cache": "11.11.0",
"@emotion/react": "11.11.1",
"@emotion/styled": "11.11.0",
"@mui/base": "5.0.0-beta.12",
Copy link
Member

Choose a reason for hiding this comment

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

Why was this added? Maybe we can remove it? Unless it was needed for the patch...

Copy link
Contributor

Choose a reason for hiding this comment

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

It was added in this commit: 6114409. It seems to be needed for the patch, as the code won't compile without it.

louise-davies
louise-davies requested changes Nov 3, 2023
View reviewed changes
Copy link
Member

@louise-davies louise-davies left a comment

Choose a reason for hiding this comment

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

Can we make it so that if a user clicks out of the picker it gets dismissed? This is especially useful in the plotting component, as the size of the picker is huge compared to the default window size and you can't see the accept/ok button. Saying that - the search date pickers don't have the accept/ok button - we should probably unify this

Also need to wait for mui/mui-x#10847 before we merge this

@kaperoo
Copy link
Contributor

kaperoo commented Nov 6, 2023

Pickers should close by default when you click away, but for some reason it doesn't work in the plotting component. I used a workaround mentioned here to fix this.

I also removed the accept and close buttons from the action bar in the xAxisTab component pickers and added today (only in the end date picker) to make them consistent with pickers in the dateTime component.

louise-davies
louise-davies reviewed Nov 20, 2023
View reviewed changes
src/plotting/plotSettings/xAxisTab.component.tsx Outdated
textField: CustomTextField,
}}
slotProps={{
actionBar: { actions: ['clear'] },
Copy link
Member

Choose a reason for hiding this comment

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

This picker only has the clear option whereas the to picker has both clear and today options

louise-davies
louise-davies reviewed Nov 20, 2023
View reviewed changes
src/search/components/dateTime.component.tsx
textField: CustomTextField,
}}
slotProps={{
actionBar: { actions: ['clear', 'today'] },
Copy link
Member

Choose a reason for hiding this comment

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

Again, the to pickers have clear and today whereas the from pickers only have clear. I know today (i.e. now) is a less useful option for the from picker, but I think it makes sense for them to match

louise-davies
louise-davies reviewed Nov 20, 2023
View reviewed changes
src/search/searchBar.component.test.tsx Outdated
Comment on lines 66 to 74
await user.click(dateFilterFromDate);
await user.keyboard('{Control>}a{/Control}');
await user.keyboard('{Delete}');
// await user.clear(dateFilterFromDate);

await user.click(dateFilterToDate);
await user.keyboard('{Control>}a{/Control}');
await user.keyboard('{Delete}');
// await user.clear(dateFilterToDate);
Copy link
Member

Choose a reason for hiding this comment

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

We can use clear in unit tests now

Copy link
Contributor

@kaperoo kaperoo Nov 21, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

I checked and it still doesn't seem to work 🤔

Copy link
Member

@louise-davies louise-davies Nov 21, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

@mui/x-date-pickers needs to be upgraded to 6.16.0 (or later)

Copy link
Member

Choose a reason for hiding this comment

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

I'm pushing a commit that updates the package and our patch

Copy link
Member

Choose a reason for hiding this comment

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

This might mean we can use the clear command in e2e tests now as well

Copy link
Contributor

Choose a reason for hiding this comment

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

After updates, clear works in unit test, but still not in cypress tests

Copy link
Contributor

Choose a reason for hiding this comment

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

In fact, the update broke the e2e tests even more

louise-davies
louise-davies reviewed Nov 20, 2023
View reviewed changes
src/search/searchBar.component.test.tsx Outdated
Comment on lines 376 to 384
await user.click(dateFilterFromDate);
await user.keyboard('{Control>}a{/Control}');
await user.keyboard('{Delete}');
// await user.clear(dateFilterFromDate);

await user.type(dateFilterToDate, '2023-01-01 00:00');
await user.click(dateFilterToDate);
await user.keyboard('{Control>}a{/Control}');
await user.keyboard('{Delete}');
// await user.clear(dateFilterToDate);
Copy link
Member

Choose a reason for hiding this comment

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

Can use clear

louise-davies
louise-davies reviewed Nov 20, 2023
View reviewed changes
src/search/searchBar.component.test.tsx Outdated
Comment on lines 567 to 572
// .clear doesn't work with datepickers in v6
await user.click(dateFilterFromDate);
await user.keyboard('{Control>}a{/Control}');
await user.keyboard('{Delete}');
// await user.clear(dateFilterFromDate);
await user.type(dateFilterFromDate, '2022-01-02_00:00');
Copy link
Member

Choose a reason for hiding this comment

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

Can use clear

louise-davies
louise-davies approved these changes Nov 21, 2023
View reviewed changes
Copy link
Member

@louise-davies louise-davies left a comment

Choose a reason for hiding this comment

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

LGTM - I'll put an issue in JIRA to track that we need to get our patch merged into the main library at some point

@kaperoo kaperoo merged commit 7ccb63d into develop Nov 21, 2023
4 checks passed
@renovate renovate bot deleted the renovate/mui-x-date-pickers-6.x branch August 6, 2024 09:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@kaperoo kaperoo kaperoo left review comments

@louise-davies louise-davies louise-davies approved these changes

Assignees

@kaperoo kaperoo

Labels
dependencies good first issue Good for newcomers
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
3 participants
@louise-davies @kaperoo @kennethnym