[pickers] Create new component `PickersSectionList` #11352

flaviendelangle · 2023-12-08T13:54:52Z

The idea is that useField expects PickersSectionList to be used but it does not care about PickersTextField / PickersInput.
So the Joy implementation (or unstyled one) can have whatever structure they want, as long as they use PickersSectionList.

Right now useField imports classes from PickersInput which is link to Material Design.

mui-bot · 2023-12-08T13:58:59Z

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

Generated by 🚫 dangerJS against f48c9a8

flaviendelangle · 2023-12-08T14:10:58Z

packages/x-date-pickers/src/internals/components/PickersTextField/PickersInput.tsx

  outline: 'none',
+  flexGrow: 1,
+  ...(theme.direction === 'rtl' && { textAlign: 'right /*! @noflip */' as any }),


Small fix for RTL

flaviendelangle · 2023-12-08T14:11:15Z

packages/x-date-pickers/src/internals/components/PickersTextField/PickersInput.tsx

@@ -70,11 +72,13 @@ const PickersInputSectionsContainer = styled('div', {
  slot: 'SectionsContainer',
  overridesResolver: (props, styles) => styles.sectionsContainer,
 })<{ ownerState: OwnerStateType }>(({ theme, ownerState }) => ({
+  direction: 'ltr /*! @noflip */' as any,


Small fix for RTL
I try to do the value flip in JS and render always in LTR

flaviendelangle · 2023-12-08T14:11:24Z

packages/x-date-pickers/src/internals/components/PickersTextField/PickersInput.tsx

@@ -46,6 +46,8 @@ const PickersInputRoot = styled(Box, {
      borderWidth: 2,
    },
    [`&.${pickersInputClasses.disabled}`]: {
+      pointerEvents: 'none',


We had hover effect when disabled

Do we by any chance also need appropriate adjustments to the onChange handler to not work when the field is disabled or readonly, but user manually removes the class from DOM?

In the onInput handler (equivalent of onChange for contentEditable elements), we have conditions for readOnly, I can add some for disabled to be more robust.

Makes sense. 👍

flaviendelangle · 2023-12-08T14:11:50Z

packages/x-date-pickers/src/PickersSectionList/pickersSectionListClasses.ts

+
+export const pickersSectionListClasses = generateUtilityClasses<PickersSectionListClassKey>(
+  'MuiPickersSectionList',
+  ['sectionContent'],


I'm adding this class because the field should never rely on PickersInput since people can pass custom ones.
I'll probably add a root one

flaviendelangle · 2023-12-08T14:30:38Z

packages/x-date-pickers/src/internals/components/PickersTextField/PickersTextField.tsx

@@ -135,7 +135,7 @@ export const PickersTextField = React.forwardRef(function PickersTextField(
        fullWidth={fullWidth}
        inputProps={inputProps}
        inputRef={inputRef}
-        sectionsContainerRef={sectionsContainerRef}
+        sectionListRef={sectionListRef}


I renamed this prop to match the component name

noraleonte

Looks good! 🎉

Very small nitpick, what do you think about calling this component PickersSectionsList and keep the plural form?

flaviendelangle · 2023-12-12T11:40:46Z

I'd be curious to have @LukasTy opinion on the naming.
For me, it's a list of thing, not a list of things, so "section list" instead of "sections list".
But I'm not a native speaker

LukasTy

LGTM! 👍

I'd be curious to have LukasTy opinion on the naming.
For me, it's a list of thing, not a list of things, so "section list" instead of "sections list".
But I'm not a native speaker

I'm also not a native speaker, but am a bit torn on this one. 🙈
When in doubt, I like to check the number of google search results to help guide my decision. 🤷

In this case, "Section List" clearly takes the lead.
However, my gut also leans towards PickersSectionsLIst for this particular component, but I think that both forms are correct in this case and I do not urge changing it. 👍

packages/x-date-pickers/src/PickersSectionList/PickersSectionList.tsx

LukasTy · 2023-12-12T12:22:25Z

packages/x-date-pickers/src/internals/components/PickersTextField/PickersInput.tsx

@@ -46,6 +46,8 @@ const PickersInputRoot = styled(Box, {
      borderWidth: 2,
    },
    [`&.${pickersInputClasses.disabled}`]: {
+      pointerEvents: 'none',


Do we by any chance also need appropriate adjustments to the onChange handler to not work when the field is disabled or readonly, but user manually removes the class from DOM?

samuelsycamore · 2023-12-13T16:21:21Z

My thoughts on the naming: I often see strung-together plurals like PickersSectionsList in the MUI codebase, and it's a pretty awkward structure by English standards. I would argue that something like this should be called PickerSectionList, where all of the words are singular. I can't cite any specific grammar rules I'm aware of that say why it should be this way, but it's what my gut says as a native speaker. I see that the Date and Time Picker naming conventions default to Pickers, and it'd probably be too much of a hassle to try to change all of those instances now (but if it were up to me, the naming would be PickerInput, PickerTextField, etc.). So for the sake of predictability, I'd opt for PickersSectionList here.

[pickers] Create new component PickersInputList

18e7191

flaviendelangle self-assigned this Dec 8, 2023

Fix

2c4606b

flaviendelangle commented Dec 8, 2023

View reviewed changes

flaviendelangle added 3 commits December 8, 2023 15:16

Add root export

4f2f948

Fix

4454e3f

Rename ref

7ae564f

flaviendelangle commented Dec 8, 2023

View reviewed changes

flaviendelangle marked this pull request as ready for review December 8, 2023 15:00

flaviendelangle requested review from noraleonte and LukasTy December 8, 2023 15:00

flaviendelangle added the component: pickers This is the name of the generic UI component, not the React module! label Dec 8, 2023

flaviendelangle changed the title ~~[pickers] Create new component PickersSectionsList~~ [pickers] Create new component PickersSectionList Dec 8, 2023

flaviendelangle force-pushed the pickers-sections-list branch from 4194ac6 to 20eb708 Compare December 8, 2023 16:51

Fix

de1111c

flaviendelangle force-pushed the pickers-sections-list branch from 20eb708 to de1111c Compare December 8, 2023 16:51

flaviendelangle added 3 commits December 11, 2023 09:14

Merge branch 'next' into pickers-sections-list

9f96bce

Update

7dd7c44

Fix

d2e2f4a

noraleonte approved these changes Dec 11, 2023

View reviewed changes

LukasTy approved these changes Dec 12, 2023

View reviewed changes

flaviendelangle added 4 commits December 13, 2023 11:22

Merge branch 'next' into pickers-sections-list

397ae62

Code review: Lukas

c4fa9e7

Sync from main PR

a5b8dc3

Fix

e493f72

flaviendelangle force-pushed the pickers-sections-list branch from 187f5d3 to 700d8b5 Compare December 15, 2023 07:39

Sync

f48c9a8

flaviendelangle force-pushed the pickers-sections-list branch from 700d8b5 to f48c9a8 Compare December 15, 2023 07:43

flaviendelangle merged commit 908585b into mui:next Dec 15, 2023
15 checks passed

flaviendelangle deleted the pickers-sections-list branch December 15, 2023 07:58

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[pickers] Create new component `PickersSectionList` #11352

[pickers] Create new component `PickersSectionList` #11352

flaviendelangle commented Dec 8, 2023 •

edited

Loading

mui-bot commented Dec 8, 2023 •

edited

Loading

flaviendelangle Dec 8, 2023

flaviendelangle Dec 8, 2023

flaviendelangle Dec 8, 2023

LukasTy Dec 12, 2023

flaviendelangle Dec 12, 2023

LukasTy Dec 12, 2023

flaviendelangle Dec 8, 2023

flaviendelangle Dec 8, 2023

noraleonte left a comment

flaviendelangle commented Dec 12, 2023

LukasTy left a comment

LukasTy Dec 12, 2023

samuelsycamore commented Dec 13, 2023

[pickers] Create new component PickersSectionList #11352

[pickers] Create new component PickersSectionList #11352

Conversation

flaviendelangle commented Dec 8, 2023 • edited Loading

mui-bot commented Dec 8, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

noraleonte left a comment

Choose a reason for hiding this comment

flaviendelangle commented Dec 12, 2023

LukasTy left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

samuelsycamore commented Dec 13, 2023

[pickers] Create new component `PickersSectionList` #11352

[pickers] Create new component `PickersSectionList` #11352

flaviendelangle commented Dec 8, 2023 •

edited

Loading

mui-bot commented Dec 8, 2023 •

edited

Loading