Skip to content

[DatePicker] Provide prop to customize the icons #23604

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
Closed
Philipp91 opened this issue Apr 20, 2020 · 10 comments
Closed

[DatePicker] Provide prop to customize the icons #23604

Philipp91 opened this issue Apr 20, 2020 · 10 comments
Assignees
@Philipp91
Labels
component: date picker This is the name of the generic UI component, not the React module! new feature New feature or request

Comments

@Philipp91
Copy link
Contributor

Philipp91 commented Apr 20, 2020 •
edited by oliviertassinari
Loading

The icons are currently hard-coded:

https://github.com/mui-org/material-ui/blob/29fbcceb44e851a3a856e42035f86865dacd1fcd/packages/material-ui-lab/src/internal/pickers/PickersToolbar.tsx#L98-L102

There is already a keyboardIcon prop, but that one controls the icon in the input adornment. I don't really understand why that prop has "keyboard" in its name. It does not show a keyboard on the icon. And one would click that button precisely when not using the keyboard but rather the mouse to input a date. I'd call that one openIcon (by function) or calendarIcon (by icon content).
@dmtrKovalenko
Copy link
Member

Yeah, it is reaaly legacy name. Should be nice to change in scope of v4-alpha breaking changes

@dmtrKovalenko dmtrKovalenko changed the title Customizing KeyboardIcon and PenIcon for keyboard view toggle Rename keyboardIcon prop Apr 20, 2020
@dmtrKovalenko
Copy link
Member

Would you like to open PR?

@Philipp91
Copy link
Contributor Author

Well it's not just about renaming the existing prop, but also about exposing new props for those two hard-coded icons.

@dmtrKovalenko dmtrKovalenko changed the title Rename keyboardIcon prop Provide prop for PickerToolbar icons Apr 20, 2020
@dmtrKovalenko
Copy link
Member

Yeah so I propose these changes:

  1. Rename keyboardIcon => calendarIcon
  2. Use this icon also for rendering mobile keyboard input view
  3. Add new prop editIcon for the mobile keyboard input view

@dmtrKovalenko dmtrKovalenko changed the title Provide prop for PickerToolbar icons Provide props for PickerToolbar icons Apr 20, 2020
@Philipp91
Copy link
Contributor Author

Sure, I can take a stab at this. I can't assign myself in GitHub, but stay tuned.

@Philipp91
Copy link
Contributor Author

Yeah so I propose these changes:

  1. Rename keyboardIcon => calendarIcon

Naming the prop after the icon content doesn't play well with this usage, where we'd end up with calendarIcon: <ClockIcon/> even those two are sort-of opposites and shouldn't be equated like that.

So perhaps openIcon or something else in the direction of the icon's functionality (adornmentIcon, buttonIcon) would be better?

@dmtrKovalenko
Copy link
Member

Hmm really, openPickerIcon should be nice?

Philipp91 referenced this issue in Philipp91/material-ui-pickers Apr 20, 2020
@Philipp91
Rename keyboardIcon prop to openPickerIcon #1693
5c33418 
The prop should be named after the icon's functionality/usage. The new name matches the `hideOpenPickerButton` prop. The documentation on the prop already matches this wording. Tested by verifying that the two affected demo pages still work and show the customized icon.
dmtrKovalenko referenced this issue in mui/material-ui-pickers Apr 21, 2020
@Philipp91 @dmtrKovalenko @oliviertassinari
Rename keyboardIcon => openPickerIcon (#1696)
07e91bd 
* Rename KeyboardIcon to CalendarIcon

The icon components should be named after their content.

* Rename `keyboardIcon` prop to `openPickerIcon` #1693

The prop should be named after the icon's functionality/usage. The new name matches the `hideOpenPickerButton` prop. The documentation on the prop already matches this wording. Tested by verifying that the two affected demo pages still work and show the customized icon.

* Update lib/src/_shared/icons/CalendarIcon.tsx

Co-Authored-By: Olivier Tassinari <[email protected]>

Co-authored-by: Dmitriy Kovalenko <[email protected]>
Co-authored-by: Olivier Tassinari <[email protected]>
@Philipp91
Copy link
Contributor Author

  1. Use this icon also for rendering mobile keyboard input view
  2. Add new prop editIcon for the mobile keyboard input view

Just like for the other one, I don't think we should name the props after the icon content. How about mobileKeyboardViewIcon (that's the pen that switches to the textbox/keyboard view) and mobileDefaultViewIcon (that's the calendar icon that switches back to the regular mobile view)?

Philipp91 referenced this issue in Philipp91/material-ui-pickers Apr 24, 2020
@Philipp91
Expose mobile{Keyboard,Default}ViewIcon props from PickerToolbar (clo…
317eef3 
…ses #1693)

To make the previously hard-coded icons configurable.
Philipp91 referenced this issue in Philipp91/material-ui-pickers Apr 24, 2020
@Philipp91
Expose mobile{Keyboard,Default}ViewIcon props from PickerToolbar (clo…
7b9a510 
…ses #1693)

To make the previously hard-coded icons configurable.
@oliviertassinari oliviertassinari changed the title Provide props for PickerToolbar icons [DatePicker] Provide props to customize the icons Nov 18, 2020
@oliviertassinari oliviertassinari changed the title [DatePicker] Provide props to customize the icons [DatePicker] Provide prop to customize the icons Nov 18, 2020
@oliviertassinari oliviertassinari transferred this issue from mui/material-ui-pickers Nov 18, 2020
@oliviertassinari oliviertassinari added component: date picker This is the name of the generic UI component, not the React module! new feature New feature or request labels Nov 18, 2020
@oliviertassinari
Copy link
Member

Regarding the resolution, I would suggest we go in the direction of #21453. Meaning a components prop with keys for each customization points.

@oliviertassinari oliviertassinari mentioned this issue Nov 18, 2020
Closed
@oliviertassinari
Copy link
Member

Duplicate of #23673

@oliviertassinari oliviertassinari marked this as a duplicate of #23673 Dec 12, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@Philipp91 Philipp91

Labels
component: date picker This is the name of the generic UI component, not the React module! new feature New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Philipp91 @oliviertassinari @dmtrKovalenko