-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
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
[fields] Use the PickersTextField
component in the fields
#10649
Conversation
Ideas on this direction:
|
People should still be able to fire an
That's something we discussed in a meeting a few weeks ago and the team agrees that both approaches can make sense. Do we have some MUI components where the Tab behavior is configurable? So that I can look at there DX. Making it configurable would be nice, and should not be that big of a deal.
Customization is the main drawback from this approach.
We still have to work on how to customize the new DOM structure, migrate the doc example and provide new ones. |
Even with end-to-end tests, e.g. using Playwright?
I'm aware of this one: https://mui.com/material-ui/react-tabs/#keyboard-navigation that's a bit related, but otherwise no.
Would the approach in https://mui.com/material-ui/react-select/#customization be able to solve this problem? With the Select the React structure looks like this:
We have a plan to create a new
I imagine that this structure could be applied to our case. Other ideas:
|
No indeed, for e2e it will most-likely impact how people are testing it.
Our use case seems quite similar.
We have a visually hidden
Not sure to understand this one. |
8f6f94a
to
21c11cf
Compare
8b01b3a
to
c335ebf
Compare
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.
Terrific work on this one! 💯 🚀
The other mentioned topics can be addressed in follow ups. 👌
docs/package.json
Outdated
@@ -93,7 +93,7 @@ | |||
"@babel/plugin-transform-react-constant-elements": "^7.23.3", | |||
"@babel/preset-typescript": "^7.23.3", | |||
"@mui-internal/docs-utils": "^1.0.0", | |||
"@mui-internal/typescript-to-proptypes": "^1.0.2", | |||
"@mui-internal/typescript-to-proptypes": "https://pkg.csb.dev/mui/material-ui/commit/fd499021/@mui-internal/typescript-to-proptypes", |
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.
Friendly reminder to merge and release the relevant package before merging this PR. 😉
BaseFieldProps<TValue, TDate, TSection, TEnableAccessibleFieldDOMStructure, TError>, | ||
'unstableFieldRef' | ||
> { | ||
sx?: SxProps<any>; |
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.
Nitpick: Shouldn't this be typed with Theme
as all the other instances? 🤔
sx?: SxProps<any>; | |
sx?: SxProps<Theme>; |
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.
If we do, the example with Joy are complaining because the theme of Joy is not the same 👍
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.
Hmm, that is an interesting problem. 🙈
Maybe @siriwatknp has any idea for an intermediate solution? 🤔
It seems that the SxProps
from Joy
is correctly typed with Joy
Theme
.
So, technically, this can be an annoying shortcoming. 🤷
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.
To summarize :
We have the field component which receives some props and passes them to its textfield.
We have the picker component which renders the fields with some props, including sx
(when doing <DatePicker sx={{}} />
, the sx
prop is forwarded to the field)
We have an interface that describes what the field receives from the picker, to help people building custom field without forgetting some callbacks / some ref / etc... this interface includes the sx
prop since the pickers passes it to the field.
For now, we have a single DatePicker
component which can be customized through a slot to accept a field built with the Joy UI textfield.
So the interface can use sx?: SxProps<Theme>
because Theme
is the material theme and not compatible when the field is built for Joy.
The current customization is clearly not optimal and for advanced customization like a Joy UI textfield, it would be better to expose a DatePicker
built with Joy UI.
> extends BaseFieldProps<TValue, TDate, TSection, TError> { | ||
interface BaseForwardedCommonSingleInputFieldProps extends ExportedUseClearableFieldProps { | ||
ref?: React.Ref<HTMLDivElement>; | ||
sx?: SxProps<any>; |
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.
Same question regarding typing of SxProps
.
Shouldn't it be Theme
here as well?
Could we also apply this diff (and necessary TS additions) to at least make the native diff --git a/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.tsx b/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.tsx
index e2eb22a23..c34f145de 100644
--- a/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.tsx
+++ b/packages/x-date-pickers/src/PickersTextField/PickersInputBase/PickersInputBase.tsx
@@ -195,6 +195,7 @@ const PickersInputBase = React.forwardRef(function PickersInputBase(
inputProps,
inputRef,
sectionListRef,
+ required,
...other
} = props;
@@ -301,6 +302,7 @@ const PickersInputBase = React.forwardRef(function PickersInputBase(
id={id}
aria-hidden="true"
tabIndex={-1}
+ required={required}
{...inputProps}
ref={handleInputRef}
/>
diff --git a/packages/x-date-pickers/src/PickersTextField/PickersTextField.tsx b/packages/x-date-pickers/src/PickersTextField/PickersTextField.tsx
index fc2194ab8..272fe5e84 100644
--- a/packages/x-date-pickers/src/PickersTextField/PickersTextField.tsx
+++ b/packages/x-date-pickers/src/PickersTextField/PickersTextField.tsx
@@ -154,6 +154,7 @@ const PickersTextField = React.forwardRef(function PickersTextField(
sectionListRef={sectionListRef}
label={label}
name={name}
+ required={required}
{...InputProps}
/>
{helperText && ( |
@LukasTy done, but I got Btw, should we also forward |
Nice, that's even better. 👌
Yup, could make sense, it won't hurt. |
|
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
This pull request has conflicts, please resolve those before we can evaluate the pull request. |
@LukasTy the prop-types are fixed 👌 |
Signed-off-by: Flavien DELANGLE <[email protected]> Signed-off-by: Lukas <[email protected]> Co-authored-by: Lukas <[email protected]> Co-authored-by: José Rodolfo Freitas <[email protected]>
Closes #6384
Closes #10699
The design part is handled in #10778
PR extracted
PickersTextField
and its dependencies public #11581Changelog
Breaking changes
The
selectedSections
prop no longer accepts start and end indexes.When selecting several — but not all — sections, the field components were not behaving correctly, you can now only select one or all sections:
The headless field hooks (e.g.:
useDateField
) now return a new prop calledenableAccessibleFieldDOMStructure
.This is used to know if the current UI expected is built using the accessible DOM structure or not. Learn more about this new accessible DOM structure.
When building a custom UI, you are most-likely only supporting one DOM structure, so you can remove
enableAccessibleFieldDOMStructure
before it is passed to the DOM:The following internal types were exported by mistake and have been removed from the public API:
UseDateFieldDefaultizedProps
UseTimeFieldDefaultizedProps
UseDateTimeFieldDefaultizedProps
UseSingleInputDateRangeFieldComponentProps
UseSingleInputTimeRangeFieldComponentProps
UseSingleInputDateTimeRangeFieldComponentProps