[pickers] DateTimePicker's OpenPickerButton does not get the same size as InputAdornment

[lukigarazus]

Steps to reproduce

Link to live example: (required) Codesandbox (7.7.0 is not available there but I tested it with 7.7.0 as well) Steps:

1. Inspect Input Adornment and see that the class includes size small
2. Inspect Open Picker Button and see that the class does not include size small but instead includes size medium

Current behavior

When I pass size: "small" to DateTimePicker's textField slop props the adornment changes to small but the button inside the adornment does not, it stays "medium".

Expected behavior

When I pass size: "small" to DateTimePicker's textField slop props the adornment and the button inside the adornment changes to small.

Context

I have a custom theme for MUI. In the default one, this does not cause any issues because the button is still smaller than the input, but in my custom theme it gets a lot bigger, which causes weird behavior and look.

I know that I can just always pass slot props for size, but it introduces a lot of complexity with default props etc. Moreover, the current behavior is not consistent with the behavior of the rest of the system.

This place seems to be the culprit. When I pass "medium" or "small" to textField slot the adornment's class changes as well, so it correctly depends on its parent, but the button does not.

Your environment

No response

Search keywords: pickers size adornment

[michelengelen]

Hey @lukigarazus ... it is not very discoverable. I do agree on that. 🙇🏼 It is however possible with using slotProps:

slotProps={{
  textField: { size: 'small' },
  openPickerButton: { size: 'small' },
  openPickerIcon: { fontSize: 'small' },
}}

Would that solve your issue?

[lukigarazus]

Thanks for the reply @michelengelen . I did mention this solution in my post, and I said as well that this is not a comprehensive approach. In my opinion the current behavior is not consistent and having to add props to a component just to make it consistent does not seem like a good thing.

[michelengelen]

OK, got it. I will add this to the board as an enhancement request. Thanks for raising it!

[LukasTy]

I'm not sure if this is something that we should handle internally. 🤔 Given the input adornment documentation it does not seem that there is any "magic" built into it as well—if you want to control the size of different elements, you do that by passing the size prop where needed, like it is needed for Pickers. WDYT @mui/explore?

P.S. The narrative would change if we supported a top-level (Picker) size prop. 🤔

[arthurbalduini]

I understand it could be expected that the button, being a child of the adornment, would inherit its size from the parent. However, in my opinion, it seems correct that the sizes of different components are manipulated through different props. How exactly using the slot props adds more complexity for you @lukigarazus ?

[flaviendelangle]

Isn't it purely a topic for @mui/material?

If they don't have automatic size adjustment from the button to the icon, should we diverge from them on this?

https://mui.com/material-ui/react-button/#sizes-2