Chip element goes full-width in MS Edge

[IBestuzhev]

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

When using the Chip element, behavior differs in browser. While in Chrome it has width calculated based on label and avatar, in MS Edge the element is 100% width. I did a CodeSandbox snippet to reproduce it.

Expected Behavior

The Chip should be as narrow as its content, like it does in Chrome

Current Behavior

On MS Edge (versions: Microsoft Edge 41.16299.15.0; Microsoft EdgeHTML 16.16299) the Chip element is full width

Steps to Reproduce (for bugs)

1. CodeSandbox snippet
2. Add a Chip element to App
3. The rendering differs in Chrome and Edge
4. Wrapping Chip with inline-flex container (e.g. Badge or custom div) fixes an issue.

Context

I'm rendering a statistic page, where Avatar shows ID and label displays aggregation data. I show each chip on new line (in a narrow Grid element) so it's not a big problem, but in this case Avatar is not left-most.

Your Environment

Tech	Version
Material-UI	1.0.0-beta.24
React	16.2
browser	Edge
Microsoft Edge	41.16299.15.0
Microsoft EdgeHTML	16.16299

[oliviertassinari]

Cc @mbrookes

[IBestuzhev]

I take a look at styles and see that Chip Element has width: fit-content. But intrinsic-width properties are not supported by MS: caniuse and Edge dev site. It's under consideration with low priority.

[oliviertassinari]

@IBestuzhev Good catch, then we gonna have to remove this style:
https://github.com/mui-org/material-ui/blob/701c97295617ca028ae6a4da1d9fe3f07c3cfacb/src/Chip/Chip.js#L27

[oliviertassinari]

@IBestuzhev What do you think of removing fit-content and using display: inline-flex? I do think that it should be the default behavior given the context the component will most likely be used in.

[IBestuzhev]

@oliviertassinari I discovered this fix as I have some Chips wrapped in Badge. But looks like it works even if applied to Chip itself, without wrapping:

<Chip label="Fix no wrapped" avatar={<Avatar>{3}</Avatar>} style={{display: "inline-flex"}} />

I think it's OK. The chip element is inline by design, so this solution looks natural.
I hope it does not break other cases.

[oliviertassinari]

@IBestuzhev Do you want to submit a pull-request to update the implementation?

[IBestuzhev]

No, I don't have any changes to material-ui code at the moment. I just did some checks on Code Sandbox.

[mbrookes]

@IBestuzhev The question was, do you want to apply that change to Chip and submit a PR?

[IBestuzhev]

Not really, I don't feel myself skilled enough to provide the correct tests for this.

…

On Thu, Dec 28, 2017, 05:10 Matt Brookes ***@***.***> wrote: @IBestuzhev <https://github.com/ibestuzhev> The question was, do you want to apply that change to Chip and submit a PR? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#9615 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AAQz7edBBYv3SiK8DxUnNFYCqbWu-Z_gks5tEwaQgaJpZM4RMoPk> .