mui / mui/material-ui

[autocomplete] Inconsistent IconButton size between end adornment vs in date/time pickers

Open
#47,372 5 comments 0 reactions 1 assignee View on GitHub

Nobody has claimed this yet.

has workaround scope: autocomplete type: bug
Dominant language
JavaScript
Stars
99.1k
Forks
32.5k
Avg merge
2d 17h
Merged PRs (30d)
106

Description

Steps to reproduce

Steps:

  1. Open this link to live example: https://mui.com/material-ui/react-autocomplete/#combo-box and https://mui.com/x/react-date-pickers/date-picker/#basic-usage
  2. Observe IconButton size on both components
  3. That's it!
Current behavior

It seems to me that date/time pickers have IconButton size large for the end adornment, while Autocomplete component has IconButton size small. I am unsure if this is the desired behavior.

Expected behavior

Consistent IconButton size across components - by default.

Context

EDIT: From what I can see, IconButton components for both components are set to size medium, and SVGs are 24x24 px. However, the IconButton in Autocomplete component is 28x28 px, while the IconButton in picker component is 40x40 px.
The difference is in padding. Autocomplete has 2 px padding, while picker has 8 px padding.

I'd also like to note that the adornment in pickers has no right margin, but perhaps this should be a separate issue.

Your environment

Not relevant, as the issue can be reproduced even in official MUI docs.

Search keywords: iconbutton endadornment autocomplete pickers

Search keywords:

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.