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
[blog] The Date Pickers gets a stable v5 release #34152
Merged
Merged
Changes from 2 commits
Commits
Show all changes
12 commits
Select commit
Hold shift + click to select a range
c105c92
[blog] The Date pickers gets a stable v5 release
alexfauquette 3f4bc28
prettier
alexfauquette 329a226
Apply suggestions from code review
alexfauquette c203b3f
Apply suggestions from code review
alexfauquette 1dfd92d
Apply suggestions from code review
alexfauquette 813340a
Apply suggestions from code review
alexfauquette b90b0f7
Merge remote-tracking branch 'upstream/master' into pickers-v5
alexfauquette 4be3876
prettier
alexfauquette 5662462
add card
alexfauquette 01513c7
Apply suggestions from code review
alexfauquette 635b745
Apply suggestions from code review
alexfauquette c7e66eb
Small suggestion for a commit
joserodolfofreitas File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
import * as React from 'react'; | ||
import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; | ||
import { docs } from './date-pickers-stable-v5.md?@mui/markdown'; | ||
|
||
export default function Page() { | ||
return <TopLayoutBlog docs={docs} />; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,97 @@ | ||
--- | ||
title: 'The Date pickers gets a stable v5 release' | ||
alexfauquette marked this conversation as resolved.
Show resolved
Hide resolved
|
||
description: Date pickers are now stable. Here is the summary of what changed. | ||
alexfauquette marked this conversation as resolved.
Show resolved
Hide resolved
|
||
date: 2022-09-05T00:00:00.000Z | ||
authors: ['josefreitas', 'alexfauquette'] | ||
alexfauquette marked this conversation as resolved.
Show resolved
Hide resolved
|
||
tags: ['MUI X', 'News'] | ||
card: true | ||
--- | ||
|
||
About four months ago, we moved the date and time pickers from `@mui/lab` and released the first alpha version of the date pickers package. We have focused on improving stability and developer experience since then, and now, we’re happy to announce the first official `@mui/x-date-pickers` [v5 release](https://github.com/mui/mui-x/releases/tag/v5.17.0). | ||
alexfauquette marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
## TL;DR | ||
|
||
- The beta phase is over. You can now download `v5.0.0`. | ||
- Dozens of bugs have been fixed since the first alpha. | ||
- A few improvements to DX and overall API consistency. | ||
alexfauquette marked this conversation as resolved.
Show resolved
Hide resolved
|
||
- Improved customizability. | ||
- Follow the [installation instructions](https://mui.com/x/react-date-pickers/getting-started/) and the [migration guide](https://mui.com/x/react-date-pickers/migration-lab/). | ||
|
||
## What changed? | ||
alexfauquette marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
### Documentation | ||
|
||
We revamped the [getting started](https://mui.com/x/react-date-pickers/getting-started/) page to ease the burden with installation, and improved sections that are key to customization, like the documentation of component [slots](https://mui.com/x/react-date-pickers/custom-components/). | ||
|
||
### Bug fixes and other issues | ||
|
||
More than 150 issues were solved during the pre-releases (alpha/beta), including the epic [refactoring of the date/time selection behavior](https://github.com/mui/mui-x/pull/4408), which has clarified edge cases about how a date is selected, accepted, dismissed, and which callbacks are triggered. | ||
alexfauquette marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
A big thanks to all the contributors who took the time to clarify the edge cases they faced. It has been a huge help to refine the components’ behaviors. | ||
alexfauquette marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
<img src="/static/blog/date-pickers-stable-v5/monkeyuser-237-fov.png" style="width: 796px; margin-top: 16px; margin-bottom: 8px;" alt="Bug illustration from monkeyuser.com" /> | ||
alexfauquette marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
### Better APIs and improved customization | ||
|
||
The property names and customization strategies were standardized to flatten the learning curve. | ||
|
||
For example, the `MonthPicker`’s prop `onMonthChange` and the `YearPicker`’s prop `onYearChange` have both been renamed to `onChange`. | ||
|
||
We also added new customizable slots: | ||
|
||
- The `ActionBar` allows you to customize the actions below the picker. It replaces the props `clearable`, `showTodayButton`, `cancelText`, `okText` | ||
alexfauquette marked this conversation as resolved.
Show resolved
Hide resolved
|
||
- The `PaperContent` allows you to add custom elements in the Desktop view | ||
alexfauquette marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
### Integrated localization | ||
|
||
It’s not obvious at first glance, but pickers contain some textual information. The action buttons, of course, but also all the aria-labels needed to support accessibility (a11y). | ||
alexfauquette marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
We integrated a [new localization](https://mui.com/x/react-date-pickers/localization/#translation-keys) pipeline similar to the one used by the data grid. It allows you to import translations directly into the main theme in a few lines. And thanks to the amazing contributors, translations for 11 languages are already available. 🎉 | ||
alexfauquette marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
```jsx | ||
import { createTheme, ThemeProvider } from '@mui/material/styles'; | ||
import { DataGrid, bgBG as dataGridBgBG } from '@mui/x-data-grid'; | ||
import { bgBG as coreBgBG } from '@mui/material/locale'; | ||
import bgLocale from 'date-fns/locale/bg'; | ||
import { CalendarPicker, LocalizationProvider, bgBG } from '@mui/x-date-pickers'; | ||
import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs'; | ||
|
||
const theme = createTheme( | ||
{ | ||
palette: { | ||
primary: { main: '#1976d2' }, | ||
}, | ||
}, | ||
bgBG, // x-date-pickers translations | ||
dataGridBgBG, // x-data-grid translations | ||
coreBgBG, // core translations | ||
); | ||
``` | ||
|
||
## Evolution of the community | ||
alexfauquette marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
With all those changes, we wondered if the community has been interested by the new versions. | ||
alexfauquette marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
From npm download statistics, less than 40% of the community is still using a version shared with `@mui/lab` (versions alpha.0 and alpha.1). | ||
alexfauquette marked this conversation as resolved.
Show resolved
Hide resolved
|
||
So a big part of you already did the migration from `@mui/lab`. | ||
alexfauquette marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
And the adoption speed accros versions is very encouraging. | ||
alexfauquette marked this conversation as resolved.
Show resolved
Hide resolved
|
||
You are already 40% to use a beta version. 🚀 | ||
alexfauquette marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
<img src="/static/blog/date-pickers-stable-v5/date-picker-versions.png" style="width: 796px; margin-top: 16px; margin-bottom: 2px;" alt="Evolution of downloaded version of @mui/x-data-pickers" /> | ||
LukasTy marked this conversation as resolved.
Show resolved
Hide resolved
alexfauquette marked this conversation as resolved.
Show resolved
Hide resolved
|
||
<p class="blog-description" style="text-align: center;">Relative distribution of `@mui/x-date-pickers` versions between jun and august.</p> | ||
alexfauquette marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
## Installation and migration from `@mui/lab` | ||
|
||
You can find the installation instructions in our [getting started](https://mui.com/x/react-date-pickers/getting-started/) page. | ||
If you are migrating from the `@mui/lab` package, we’ve prepared a migration guide to support you, including a codemod to replace the date pickers declarations. | ||
alexfauquette marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
## What to expect next? | ||
|
||
After working on stability and developer experience, we’re now pushing to improve the components’ usability. | ||
alexfauquette marked this conversation as resolved.
Show resolved
Hide resolved
|
||
|
||
We’ve been exploring different approaches and implementations for the date fields, and we’ll soon release a v6 alpha version to start iterating on the new and improved components. | ||
|
||
You can expect support for v5 stable release with patches for critical bugs, but we encourage the community to help us build the next generation of date pickers and migrate whenever possible to the v6 pre-releases. | ||
|
||
If you want to help steer the direction of the new components, please consider [contacting us](https://forms.gle/vsBv6CLPz9h57xg8A) to schedule a 30-minute user interview session. We’re working on MUI X v6, and we’d love to hear more about your pain points and use cases. |
Binary file added
BIN
+167 KB
docs/public/static/blog/date-pickers-stable-v5/date-picker-versions.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@samuelsycamore, I'm a bit confused about the case on this one, since "Date Pickers" is not really a component but more like a reference to package(?).
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@joserodolfofreitas That's the last element to modify or not. Otherswise it's good for publiction