From b82e8e4d860b5ad78594ba01958517751dae10ea Mon Sep 17 00:00:00 2001 From: Yuri Astrakhan Date: Tue, 1 Sep 2020 22:53:36 -0400 Subject: [PATCH] [WIP][rtl][css] Fix button margins for RTL langs (#3974) When showing a button in RTL, margin-left/right shows up incorrectly. The needed CSS seems to be `margin-inline-start/end`. Partially relates to #3960 Those values do not exist in IE. I tested these changes with a search bar's filters and `EuiHeaderLink` with icons. english | current RTL | desired RTL ---|---|--- ![image](https://user-images.githubusercontent.com/1641515/91629484-7629b600-e997-11ea-8a29-85a7871443d4.png) | ![image](https://user-images.githubusercontent.com/1641515/91629493-95c0de80-e997-11ea-92ed-68c6af62c4c3.png) | ![image](https://user-images.githubusercontent.com/1641515/91629489-8b9ee000-e997-11ea-87c7-367749d876e2.png) Co-authored-by: Caroline Horn <549577+cchaos@users.noreply.github.com> --- CHANGELOG.md | 1 + src/global_styling/mixins/_button.scss | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 9e04562daaa..e67fa8f9de5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4,6 +4,7 @@ - Fixed bug in `EuiComboBox` where the input was dropping to the next line when a `EuiBadge` had a very long text ([#3968](https://github.com/elastic/eui/pull/3968)) - Fixed type mismatch between `EuiSelectable` options extended via `EuiSelectableOption` and internal option types ([#3983](https://github.com/elastic/eui/pull/3983)) +- Fixed `EuiButton` CSS for RTL languages by using `margin-inline-[pos]` instead of `margin-[pos]` ([#3974](https://github.com/elastic/eui/pull/3974)) ## [`28.3.0`](https://github.com/elastic/eui/tree/v28.3.0) diff --git a/src/global_styling/mixins/_button.scss b/src/global_styling/mixins/_button.scss index 673b6347c17..f5069625e8a 100644 --- a/src/global_styling/mixins/_button.scss +++ b/src/global_styling/mixins/_button.scss @@ -72,8 +72,8 @@ flex-direction: row-reverse; > * + * { - margin-left: 0; // 1, 2 - margin-right: $euiSizeS; // 1, 2 + margin-inline-start: 0; // 1, 2 + margin-inline-end: $euiSizeS; // 1, 2 } } @else { display: flex; @@ -81,7 +81,7 @@ align-items: center; > * + * { - margin-left: $euiSizeS; // 1 + margin-inline-start: $euiSizeS; // 1 } } }