Sitelet https://web.archive.org/web/20211216015325im_/https://github.com/mui-org/material-ui/issues/29965
Skip to content
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

Jump to bottom

[Button] small button text not vertically centered with Roboto #29965

Open
2 tasks done
apokusin opened this issue Nov 30, 2021 · 4 comments
Open
2 tasks done

[Button] small button text not vertically centered with Roboto #29965

apokusin opened this issue Nov 30, 2021 · 4 comments
Assignees
@danilo-leal
Labels
component: button good first issue material design

Comments

@apokusin
Copy link

@apokusin apokusin commented Nov 30, 2021

Duplicates

  • I have searched the existing issues

Latest version

  • I have tested the latest version

Current behavior 😯

The text inside of a button with size="small" is not centered vertically. This is especially obvious when used with an icon or a contained/outlined button.

Expected behavior 🤔

The text inside of a button with size="small" is centered vertically.

Steps to reproduce 🕹

Steps:

  1. Use <Button size="small">text</Button>
  2. Observe text

Context 🔦

Codesandbox link

Screenshots:
Medium (alignment ok)
medium

Small (text too high)
small

Your environment 🌎

`npx @mui/envinfo` 
  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.
@mnajdova
Copy link
Member

@mnajdova mnajdova commented Nov 30, 2021

I can notice it. It could be a regression after the span wrapping the text was removed. @danilo-leal could you double-check this please?

Loading

@apokusin
Copy link
Author

@apokusin apokusin commented Nov 30, 2021 •
edited
Loading

The CodeSandbox I've linked to above uses MUI 5.2.2, but I'm also seeing the issue as far back as 5.0.0-rc.0.

Loading

@danilo-leal
Copy link
Member

@danilo-leal danilo-leal commented Nov 30, 2021

I suppose it could be related to the text line-height. The tricky thing is that it seems the overall Button height is composed of the text line-height. In the below example, the texts are without line-hight which makes the Buttons smaller. They seem to be centered though.

Screen Shot 2021-11-30 at 16 38 21

If we were about to remove the typography variant button line-height, we should probably add a minHeight to each component size variant so they don't shrink. Does that make sense?

Loading

@siriwatknp
Copy link
Member

@siriwatknp siriwatknp commented Dec 15, 2021 •
edited
Loading

If we were about to remove the typography variant button line-height, we should probably add a minHeight to each component size variant so they don't shrink. Does that make sense?

At this point, I suggest only adjusting to line-height: 1.5 for size small because changing to use minHeight in v5 might be a breaking change. In v6, we can revisit the size implementation again.

Loading

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@danilo-leal danilo-leal

Labels
component: button good first issue material design
Projects
None yet
Milestone
No milestone
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
4 participants
@apokusin @mnajdova @siriwatknp @danilo-leal