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

[Avatar] Inline Chips size ignored. #4849

Closed
BlockChange opened this issue Jul 29, 2016 · 7 comments
Closed

[Avatar] Inline Chips size ignored. #4849

BlockChange opened this issue Jul 29, 2016 · 7 comments
Labels
bug 🐛 Something doesn't work component: avatar This is the name of the generic UI component, not the React module! 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

@BlockChange
Copy link

BlockChange commented Jul 29, 2016

When I override the style for a chip to display: inline, it will shrinks the right side to the height of the text.

<Chip style={{ display: 'inline' }} ><Avatar size={23} src="/images/logos/logo.png" />{name}</Chip>

I was going to compromize by setting the Avatar size prop, but it gets overridden by the chip it seems.

  • Are there plans for supporting inline chips? (I've not been able to find the style that would fix the shrinking issue)
  • The Avatar size should be adhered to.

(Mui 0.15.2)

@BlockChange
Copy link
Author

BlockChange commented Jul 29, 2016

Ok, solution turns out to be very simple:

{ display: 'inline-block' }

@BlockChange
Copy link
Author

BlockChange commented Jul 29, 2016

I think adding a new prop inline would be nice to support these usecases.

Although it would need a size prop as well I think, and the avatar size prop need to be applied.

@mpontikes mpontikes mentioned this issue Aug 5, 2016
13 tasks
@oliviertassinari oliviertassinari changed the title Inline Chips & Avatar size ignored. [Avatar] Inline Chips size ignored. Sep 18, 2016
@oliviertassinari
Copy link
Member

oliviertassinari commented Sep 18, 2016

but it gets overridden by the chip it seems.

@BlockChange You are right. I think that we should consider it a bug, at this line.

I'm not sure to understand your use case for the inline stuff. Do you have a visual explanation?

@oliviertassinari oliviertassinari added bug 🐛 Something doesn't work good first issue Great for first contributions. Enable to learn the contribution process. labels Sep 18, 2016
@oliviertassinari oliviertassinari added component: avatar This is the name of the generic UI component, not the React module! component: chip This is the name of the generic UI component, not the React module! and removed component: chip This is the name of the generic UI component, not the React module! labels Dec 18, 2016
@danep93
Copy link

danep93 commented Mar 4, 2017

Problem seems solved, this should be closed

@oliviertassinari
Copy link
Member

I'm going to close the issue. Things aren't perfect but the pain point seem addressed.

@peterpuzos
Copy link

peterpuzos commented Jul 7, 2017

@oliviertassinari Although the post talks about "inline" chip styles. The real issue for this ticket should be the Avatar size prop in Chips is currently hard coded at 32.

Therefore you can't pass down a size prop from Avatar when its used within. This needs to be fixed as when a chip is styled to be smaller, the avatar shouldn't remain at 32, it should take the prop that is being passed down.

That line should be
size: avatar.props.size || 32

@oliviertassinari
Copy link
Member

oliviertassinari commented Jul 7, 2017

@peterpuzos Yes, I think that you are right! Do you want to submit a PR with that fix and the corresponding test?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work component: avatar This is the name of the generic UI component, not the React module! 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
Development

No branches or pull requests

4 participants