fix(select): reposition chevron SVG

[emyarod]

Closes #5651

This PR resolves a chevron SVG positioning issue in the select component on IE11

Testing / Reviewing

Confirm the select component is visually correct on all browsers

[netlify]

Deploy preview for carbon-elements ready!

Built with commit af948de

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

[netlify]

Deploy preview for carbon-components-react ready!

Built with commit af948de

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

[jdcai]

The height: 100% needs to be on the svg instead for it to look correct
.#{$prefix}--select__arrow > svg { height: 100%; }

[emyarod]

.bx--select__arrow selects the svg

carbon/packages/react/src/components/Select/Select.js

Line 84 in 5d8392d

<ChevronDown16 className={`${prefix}--select__arrow`} />

[jdcai]

Oh looks like its an angular specific thing. The class is not on the svg so it doesn't display properly without the > svg.

[emyarod]

I see, you may want to open that issue separately against @carbon/icons-angular (related carbon-design-system/carbon-icons-angular#10?)

[asudoh]

LGTM 👍 - Thanks @emyarod!

[cal-smith]

Oh looks like its an angular specific thing. The class is not on the svg so it doesn't display properly without the > svg.

Check the icons-angular README: https://github.com/carbon-design-system/carbon-icons-angular#api

We support innerClass for the component form, but the directive form should be preferred in general, since it makes styling and positioning easier ... We should be able to use carbon-design-system/carbon-components-angular#1143 to update it to the correct form.