search

etn-ccis / blui-progress-icons

This is a library of icons with dynamic fill capabilities that can be used to show progress.
4 stars 7 forks source link

Pie Icon Overrides transform styles #2

Open joebochill opened 4 years ago

joebochill commented 4 years ago

Describe the bug

The Pie Progress icon explicitly sets a transform property to rotate it into the correct position. This transform will stomp over any existing transform supplied by the user.

What is the expected behavior?

User should be able to specify a transform style rule on the icon and have it combined (applied after) with the rotate transform.

What are the steps to reproduce?

  1. Go to angular component showcase
  2. Flip the Layout to RTL
  3. Observe that the Pie Icon is not flipped

Screenshots or links to minimum reproduction example

image

Environment

This was observed for angular.

joebochill commented 4 years ago

Fix for react has been merged...Angular doesn't allow for any style overrides at the moment...looking into updating this to allow the icons to be flipped

joebochill commented 4 years ago

So I'm a little out of my element on the Angular side.

It doesn't seem like it's very easy to just do something like (putting styles directly onto a component):

<pxb-pie-progress style="_____"><pxb-pie-progress>

I tried exposing a style input, but when I try to assign it back to the styles attribute on the svg, I get issues with 'unsafe' values. If I try to do [styles._____] it works, but I don't want to have to parse every single option from the style string. Seems overkill.

I thought about maybe exposing a class used on the SVG element, but then for RTL teams will have to know to also include the rotation transform themselves or it will be stomped on. Another option would be to wrap the SVG in another element that does our transform, and then they could use the class to do whatever they want with the styles (including additional transforms).

@emclaug2 had also mentioned doing a directive, but I'm assuming that would just be some sort of boolean to flip the icon for people using RTL. But that doesn't give them the ability to do any styles that they want, e.g.:

<pxb-pie-progress style="margin-right: 10px"><pxb-pie-progress>
emclaug2 commented 4 years ago

Easiest way is probably to add another wrapper to the inner svg for the pie icon and the outter wrapper has no transform applied to it.