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

[fields] Allow to override the separator between the start and the end date in all range fields #12174

Merged
merged 9 commits into from
Mar 20, 2024
Merged

[fields] Allow to override the separator between the start and the end date in all range fields #12174

merged 9 commits into from
Mar 20, 2024

Conversation

flaviendelangle
Copy link
Member

@flaviendelangle flaviendelangle commented Feb 22, 2024 •
edited
Loading

@flaviendelangle flaviendelangle self-assigned this Feb 22, 2024
@flaviendelangle flaviendelangle added the component: pickers This is the name of the generic UI component, not the React module! label Feb 22, 2024
@flaviendelangle flaviendelangle marked this pull request as draft February 22, 2024 14:16
flaviendelangle
flaviendelangle commented Feb 22, 2024
View reviewed changes
packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx
@@ -154,6 +151,9 @@ const MultiInputDateRangeField = React.forwardRef(function MultiInputDateRangeFi
const separatorProps = useSlotProps({
elementType: Separator,
externalSlotProps: slotProps?.separator,
additionalProps: {
Copy link
Member Author

Choose a reason for hiding this comment

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

I also applied the new prop to the multi input range fields because IMHO it makes the DX more consistent (even though people could use slotProps.fieldSeparator.children to achieve the same behavior.
Note that the old DX still works.

packages/x-date-pickers-pro/src/MultiInputDateRangeField/MultiInputDateRangeField.tsx
overridesResolver: (props, styles) => styles.separator,
},
)({});
const MultiInputDateRangeFieldSeparator = styled(Typography, {
Copy link
Member Author

Choose a reason for hiding this comment

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

One less component in the tree 👌

docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.js Outdated Show resolved Hide resolved
docs/data/date-pickers/custom-field/custom-field.md
@@ -49,6 +49,12 @@ You can manually add an `endAdornment` if you want your range picker to look exa
This adornment is purely decorative, the focus remains on the field when the picker is opened.
:::

### Change the separator of range fields [<span class="plan-pro"></span>](/x/introduction/licensing/#pro-plan 'Pro plan')
Copy link
Member Author

Choose a reason for hiding this comment

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

I moved this one below the introduction of the single input range fields since it uses them

@flaviendelangle flaviendelangle changed the title [fields] New prop dateSeparator on range fields [fields] Allow to override the separator between the start and the end date in all range fields Feb 22, 2024
@mui-bot
Copy link

mui-bot commented Feb 22, 2024 •
edited
Loading

Deploy preview: https://deploy-preview-12174--material-ui-x.netlify.app/

Updated pages:

Generated by 🚫 dangerJS against f29d30e

@flaviendelangle flaviendelangle marked this pull request as ready for review February 22, 2024 14:54
@github-actions github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 12, 2024
@github-actions GitHub Actions
Copy link

This pull request has conflicts, please resolve those before we can evaluate the pull request.

@github-actions github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Mar 12, 2024
@LukasTy LukasTy added the enhancement This is not a bug, nor a new feature label Mar 15, 2024
LukasTy
LukasTy approved these changes Mar 15, 2024
View reviewed changes
Copy link
Member

@LukasTy LukasTy left a comment

Choose a reason for hiding this comment

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

Great addition! 👏
Nice work. 💯
WDYT, would it make sense to cherry-pick it to v6? 🤔

docs/data/date-pickers/custom-field/MultiInputFieldSeparatorSlotProps.js Outdated Show resolved Hide resolved
docs/data/date-pickers/custom-field/custom-field.md Outdated Show resolved Hide resolved
packages/x-date-pickers-pro/src/models/fields.ts Outdated Show resolved Hide resolved
packages/x-date-pickers-pro/src/models/fields.ts Show resolved Hide resolved
@flaviendelangle
Copy link
Member Author

WDYT, would it make sense to cherry-pick it to v6?

I would say no since we are releasing v7 this week

@LukasTy
Copy link
Member

LukasTy commented Mar 19, 2024

WDYT, would it make sense to cherry-pick it to v6?

I would say no since we are releasing v7 this week

Makes sense, but on the other hand, let's not forget, that users tend to stick to a previous major for quite some time... 🙈
That's why I'd lean towards cherry-picking it. 🤔

@flaviendelangle flaviendelangle added the needs cherry-pick The PR should be cherry-picked to master after merge label Mar 20, 2024
@flaviendelangle flaviendelangle merged commit 719dc04 into mui:next Mar 20, 2024
18 checks passed
@flaviendelangle flaviendelangle deleted the custom-date-separator branch March 20, 2024 07:44
@flaviendelangle flaviendelangle removed the needs cherry-pick The PR should be cherry-picked to master after merge label Mar 20, 2024
thomasmoon pushed a commit to thomasmoon/mui-x that referenced this pull request Sep 9, 2024
@flaviendelangle @LukasTy @thomasmoon
[fields] Allow to override the separator between the start and the en…
27862ea 
…d date in all range fields (mui#12174)

Signed-off-by: Flavien DELANGLE <[email protected]>
Co-authored-by: Lukas <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@LukasTy LukasTy LukasTy approved these changes

@noraleonte noraleonte Awaiting requested review from noraleonte

Assignees

@flaviendelangle flaviendelangle

Labels
component: pickers This is the name of the generic UI component, not the React module! enhancement This is not a bug, nor a new feature
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[pickers] Allow to override the separator between start and end date in single input range fields
3 participants
@flaviendelangle @mui-bot @LukasTy