fix(ui-shell): fix onclick menu bugs

[tw15egan]

Closes #4718
Closes #4413

Issue 1 can be seen here: https://codesandbox.io/s/header-with-actions-and-nav-qre4k

For some reason, will-change: transform that is hardcoded on the SVG was causing issues on expansion in a few instances in UI-shell

Changelog

Changed

• Use ChevronDown16 instead of ChevronDownGlyph

Removed

• unset will-change property on the chevron SVG's

Testing / Reviewing

Check the CodeSandbox, inspect the chevron SVG, and remove the will-change property. See how the dropdown works properly when this is removed.

[netlify]

Deploy preview for carbon-components-react ready!

Built with commit 366df08

https://deploy-preview-5274--carbon-components-react.netlify.com

[netlify]

Deploy preview for carbon-elements ready!

Built with commit 366df08

https://deploy-preview-5274--carbon-elements.netlify.com

[asudoh]

LGTM 👍 - Thanks @tw15egan!

[aagonzales]

LGTM

[xxxle0]

@tw15egan, i saw we have a lots of SVG have this property will-change: transform. I think we should investigate what is actual behavior of it. How do you think ?

[tw15egan]

@xxxle0 agreed, would like to know why this is causing issues

[emyarod]

not sure why will-change needs to be on our icons by default, but if it's not necessary we could remove it from the icon builder package instead of overriding in UI shell

[tw15egan]

@emyarod I'm not sure why it is there by default either, @joshblack any idea where that attribute is coming from/if it is needed?

[joshblack]

Ah yeah, it has a specific purpose for rendering correctly in Firefox 😞 Reference: https://github.com/carbon-design-system/carbon/blob/master/packages/icon-helpers/src/getAttributes.js#L15-L17

ckeditor/ckeditor5#668 (comment)

It could easily not be needed anymore, but it did come up with our icons last year.

[emyarod]

it seems to be unnecessary now so we can probably remove it as well (ckeditor/ckeditor5#1053 ckeditor/ckeditor5-ui#529)? I didn't notice any blurriness when reviewing @tw15egan's PR on Firefox

[joshblack]

@emyarod nice, then yeah can 100% remove it upstream

[tw15egan]

@asudoh @emyarod @joshblack updated the PR to simply remove adding the will-change: transform to all SVG elements, as the reason for its addition seems to be resolved on the Firefox end.

[joshblack]

@tw15egan it seems like the preview for icons from netlify ran into an issue 🤔

I believe it's related to this line: https://github.com/carbon-design-system/carbon/blob/master/packages/icons/examples/preview/index.js#L203-L204 which was assuming style was always defined and was a string, but now it's undefined and caused the preview to fial.

[tw15egan]

@joshblack should be resolved now

[joshblack]

🔥