Using flex gap

[FlyersPh9]

I would like to start using flex gap, but I am aware that Internet Explorer does not support gap. I'm proposing we start using gap & make it clear that if a team needs to support IE that they use a polyfill.

[veekeys]

Do you have a specific case which was not possible to solve without using gap? I know you had that being used before, but we easily replaced that with other css rules..

[veekeys]

If this is a question about in general moving to new stuff (which does not support IE), I would suggest waiting with that one till next year, when Microsoft will officially drop the IE support.
Unless we have situations, which are really hard to solve...

[mayank99]

The use case in mind was "RTL stacked user lists" like this one:

Currently, we only support LTR because we are using margin-left:

iTwinUI/src/user-icon/user-icon.scss

Line 138 in 17a36e5

margin-left: -$iui-xs;

The initial thought was that gap would allow supporting both, without resetting margin-left. But apprently, gap doesn't accept negative values, so I guess there is no point now.

(However, margin-inline-start (also not supported in IE) would allow achieving the same thing)

[mayank99]

I think this is a great first step towards completely dropping IE support. It seems that IE often blocks us from doing things.

Microsoft was finally bold enough to announce EOL for 2022: https://blogs.windows.com/windowsexperience/2021/05/19/the-future-of-internet-explorer-on-windows-10-is-in-microsoft-edge/

The bad news is that they are supporting "IE mode" in Edge until at least 2029: https://docs.microsoft.com/en-us/lifecycle/faq/internet-explorer-microsoft-edge

[bentleyvk]

The bad news is that they are supporting "IE mode" in Edge until at least 2029: https://docs.microsoft.com/en-us/lifecycle/faq/internet-explorer-microsoft-edge

I don't think our users will use that. It should be used only for apps that only work in IE (for whatever reason 😃).

[FlyersPh9]

Flex gap would be useful for the spacing between swatches in #253. @mayank99 and I are thinking we can work around this by using @supports(flex-gap).

[bentleyvk]

If you will be using @supports(flex-gap), you will still have to write all the CSS for IE. The only plus I see here is that after IE support is dropped, it would require just to delete workaround.

[mayank99]

The only plus I see here is that after IE support is dropped, it would require just to delete workaround.

That is definitely a plus. It's better to "group" the old/new code now while we're implementing it, rather than come back in a year and try to figure out which rules to remove.

Another plus is that modern browsers will use the "proper" CSS output (and look better too).

If you look at these swatches, this is what it looks like with margin:

With gap, we'd be able to eliminate that extra space after the last column, without using a negative margin. For older browsers, we can leave the extra space.