use gap instead of margin for tab

[JosephChotard]

By doing this, tabs can natively support RTL without breaking any LTR

Changes proposed in this pull request:

Instead of using margin for tab spacing use flex gap

Reviewers should focus on:

• Checking that it looks the same in both LTR
• That it's no longer broken in RTL

Screenshot

Looks identical

[svc-palantir-github]

use gap instead of margin

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

[svc-palantir-github]

made a mistake in 1 line PR

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

[svc-palantir-github]

ugh alphabetical

Build artifact links for this commit: documentation | landing | table | demo

This is an automated comment from the deploy-preview CircleCI job.

[JosephChotard]

Existing view in RTL mode (notice margins break)

New view:

LTR looks identical
For these screenshots I added direction: rtl to a wrapper around the tab. We use RTL for Arabic / Hebrew text

[JosephChotard]

Example in arabic.

Now:

Before:

[gluxon]

Thank you!

Glad to see older CSS hacks cleaned up as gap for flexbox properties gets wider browser usage.

This might break if something overrides the .bp5-tab-list display property, but Blueprint consumers shouldn't be doing that anyway.

[stewartfeasby]

Hi

This completely breaks vertical tabbing now, which previously had no gap but now has massive gaps.

Thanks

[gluxon]

Thanks for catching that @stewartfeasby. Putting up a fix here: #6885