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.

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

Chip outlined variant misaligned #13533

Closed
2 tasks done
izyb opened this issue Nov 6, 2018 · 3 comments
Closed
2 tasks done

Chip outlined variant misaligned #13533

izyb opened this issue Nov 6, 2018 · 3 comments
Labels
bug 🐛 Something doesn't work component: chip This is the name of the generic UI component, not the React module! good first issue Great for first contributions. Enable to learn the contribution process.

Comments

@izyb
Copy link
Contributor

izyb commented Nov 6, 2018

When using Chip with the "outlined" variant and an Avatar in place of an icon, the circle containing the avatar is misaligned from the main body of the chip.
chip1
Default zoom

chip2
Zoomed in 400%

  • This is not a v0.x issue.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

The avatar circle should align with the border of the chip, as shown in the demo site. The reason the demo site is fine is because the box-sizing property is inherited in all the Chips, rather than being set on the components themselves:
screenshot from 2018-11-06 14-37-58

Current Behavior

Since the box-sizing: border-box property is not set, the placement of the avatar icon is misaligned with what was intended.

Steps to Reproduce

Demo

Your Environment

Shown in the sandbox:

Tech Version
Material-UI v1.3.4
React 16.5.2
Browser chrome 67
TypeScript
etc.
@oliviertassinari oliviertassinari added bug 🐛 Something doesn't work good first issue Great for first contributions. Enable to learn the contribution process. component: chip This is the name of the generic UI component, not the React module! labels Nov 6, 2018
@oliviertassinari
Copy link
Member

oliviertassinari commented Nov 6, 2018 •
edited

@izyb You are 💯 right here. We need to apply your patch to the core component. box-sizing: border-box; is set on the documentation, when box-sizing: content-box; is set on the regression test. We should have spotted it. Do you want to submit a pull request? :)

@izyb
Copy link
Contributor Author

izyb commented Nov 6, 2018

@oliviertassinari absolutely :)

izyb added a commit to izyb/material-ui that referenced this issue Nov 7, 2018
@izyb
add box-sizing: border-box to chip root class to prevent misalignment…
b32fef7 
… for bordered chips. mui#13533
izyb added a commit to izyb/material-ui that referenced this issue Nov 7, 2018
@izyb
add 1px horizontal adjustment of chip avatar if variant='outlined' to…
02c5edd 
… account for horizontal misalignment. mui#13533
@izyb
Copy link
Contributor Author

izyb commented Nov 7, 2018

@oliviertassinari I also notice that the avatar circle is slightly horizontally misaligned as well:
nomarginleft

In my pull request I've added a new class to the avatar if variant="outlined" to account for this offset:
marginleft

Here is another screenshot with lowered opacity to show that it is not overlapping the border, but perfectly aligned with it:
marginleftranslucent

@izyb izyb mentioned this issue Nov 7, 2018
Merged
1 task
oliviertassinari pushed a commit that referenced this issue Nov 7, 2018
@izyb @oliviertassinari
[Chip] Alignment fix (#13536)
24cc1f6 
* add box-sizing: border-box to chip root class to prevent misalignment for bordered chips. #13533

* add 1px horizontal adjustment of chip avatar if variant='outlined' to account for horizontal misalignment. #13533

* add space in between icon prop and following prop in chip playground JSX code display to prevent markdown parser from misinterpreting the code block. #13532

* [docs] Update chip API

* remove the style rule
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug 🐛 Something doesn't work component: chip This is the name of the generic UI component, not the React module! good first issue Great for first contributions. Enable to learn the contribution process.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@oliviertassinari @izyb