feat(Icon): mark icons that should be rotated in rtl for teams theme

[mnajdova]

This PR adds mechanism for marking icon definitions that should rotate in rtl. Also the following icons are already marked and will be rotated in rtl:

• bullets
• indent
• leave
• outdent
• redo
• send
• undo

LTR:

RTL:

Question:

How should we handle icons that have text or numbers? For example the numbers of the number-list icon in rtl are mirrored, which is not something we want... Any ideas will be appreciated. - Will be resolved in another PR.

[mnajdova]

This was change because of console errors for invalid dom structure (div inside p element)

[notandrew]

Is <Label> referring to an HTML element or a Stardust element?

[mnajdova]

It is Stardust component: https://stardust-ui.github.io/react/components/label

[miroslavstastny]

How should we handle icons that have text or numbers? For example the numbers of the number-list icon in rtl are mirrored, which is not something we want... Any ideas will be appreciated.

I think that for these special cases, the Icon component must render different SVG paths in RTL.

[mnajdova]

How should we handle icons that have text or numbers? For example the numbers of the number-list icon in rtl are mirrored, which is not something we want... Any ideas will be appreciated.

I think that for these special cases, the Icon component must render different SVG paths in RTL.

@miroslavstastny thanks for your feedback. Do we want to support this somehow, or should this be user's responsibility then? We may add mapping icon name for RLT for this special icons...

[kuzhelov]

@miroslavstastny thanks for your feedback. Do we want to support this somehow, or should this be user's responsibility then? We may add mapping icon name for RLT for this special icons...

would suggest just to pass rtl value to icon's path rendering logic (currently we are just passing classes there) - and then it will be up to the client's logic to decide how this case should be processed

[mnajdova]

would suggest just to pass rtl value to icon's path rendering logic (currently we are just passing classes there) - and then it will be up to the client's logic to decide how this case should be processed

@kuzhelov will created this as other PR once we are certain what we want to do in such cases.

[layershifter]

LGTM, only one thing disturbs me, do we have a better name than rotateInRtl? 💭

[codepretty]

Is there a case where we have one icon that is flipped in some cases, but not others and it just depends on context? I was reading through Material Design's bidirectionality docs and it appears like it will be based on the icon...?

[codepretty]

How should we handle icons that have text or numbers? For example the numbers of the number-list icon in rtl are mirrored, which is not something we want... Any ideas will be appreciated.

I think that for these special cases, the Icon component must render different SVG paths in RTL.

I agree. We have icons that will use different paths for different sizes for example. It would be great to think about both cases when you implement a solution for showing different paths for rtl.

[mnajdova]

@codepretty currently for the icons we are providing just the classes, but if we realize that we need more context there (props, theme etc), we can add these things. Let's just go step by step and add them only when necessary.