From 139916532bf01ca6778f8cfaf4071bdc9332da6c Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Mon, 18 Jul 2022 11:39:32 -0700
Subject: [PATCH 1/4] Fix multiple missing CSS logical properties in EuiText

---
 src/components/text/text.styles.ts | 31 +++++++++++++++---------------
 1 file changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/components/text/text.styles.ts b/src/components/text/text.styles.ts
index 1fa9fafe0cc..b3bcb551f71 100644
--- a/src/components/text/text.styles.ts
+++ b/src/components/text/text.styles.ts
@@ -195,13 +195,14 @@ const euiScaleText = (
     
     kbd::after {
       content: '';
-      border-bottom: ${euiTheme.border.width.thin} solid ${
-            euiTheme.colors.text
-          };
+      ${logicalCSS(
+        'border-bottom',
+        `${euiTheme.border.width.thin} solid ${euiTheme.colors.text}`
+      )}
       position: absolute;
-      bottom: ${euiTheme.size.xxs};
-      left: 0;
-      width: 100%;
+      ${logicalCSS('bottom', euiTheme.size.xxs)}
+      ${logicalCSS('left', 0)}
+      ${logicalCSS('width', '100%')}
     }`
         : ''
     }
@@ -249,26 +250,26 @@ export const euiTextStyles = (euiThemeContext: UseEuiTheme) => {
         letter-spacing: normal;
 
         p:last-child {
-          margin-bottom: 0;
+          ${logicalCSS('margin-bottom', '0')}
         }
 
         &:before,
         &:after {
           position: absolute;
           content: '';
-          height: ${euiTheme.border.width.thick};
-          width: 50%;
-          right: 0;
-          transform: translateX(-50%);
+          ${logicalCSS('height', euiTheme.border.width.thick)}
+          ${logicalCSS('width', '50%')}
+          ${logicalCSS('left', '25%')}
+          ${logicalCSS('right', '25%')}
           background: ${euiTheme.colors.darkShade};
         }
 
         &:before {
-          top: 0;
+          ${logicalCSS('top', '0')}
         }
 
         &:after {
-          bottom: 0;
+          ${logicalCSS('bottom', '0')}
         }
       }
 
@@ -324,7 +325,7 @@ export const euiTextStyles = (euiThemeContext: UseEuiTheme) => {
       }
 
       > :last-child {
-        margin-bottom: 0 !important;
+        ${logicalCSS('margin-bottom', '0 !important')}
       }
 
       kbd {
@@ -338,7 +339,7 @@ export const euiTextStyles = (euiThemeContext: UseEuiTheme) => {
       }
     `,
     constrainedWidth: css`
-      max-width: ${euiTextConstrainedMaxWidth};
+      ${logicalCSS('max-width', euiTextConstrainedMaxWidth)}
     `,
     // Sizes
     m: css`

From e6c461f62996e5cf51c9c7c3c610012dac4076fa Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Mon, 18 Jul 2022 11:53:02 -0700
Subject: [PATCH 2/4] Changelog

---
 upcoming_changelogs/6059.md | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 upcoming_changelogs/6059.md

diff --git a/upcoming_changelogs/6059.md b/upcoming_changelogs/6059.md
new file mode 100644
index 00000000000..db268d44178
--- /dev/null
+++ b/upcoming_changelogs/6059.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed multiple missing CSS logical properties within `EuiText` children

From 78abec0e337ec2e3072a80f0b1b5dc8dfeffffd3 Mon Sep 17 00:00:00 2001
From: Constance <constancecchen@users.noreply.github.com>
Date: Mon, 18 Jul 2022 13:53:09 -0700
Subject: [PATCH 3/4] [PR feedback] logicalTextAlignCSS for text-align: center

---
 src/components/text/text.styles.ts | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/text/text.styles.ts b/src/components/text/text.styles.ts
index b3bcb551f71..96948c1103b 100644
--- a/src/components/text/text.styles.ts
+++ b/src/components/text/text.styles.ts
@@ -10,6 +10,7 @@ import { css } from '@emotion/react';
 import { UseEuiTheme } from '../../services';
 import {
   logicalCSS,
+  logicalTextAlignCSS,
   euiFontSize,
   euiBackgroundColor,
   _FontScaleOptions,
@@ -190,7 +191,7 @@ const euiScaleText = (
       ${logicalCSS('padding-bottom', euiTheme.size.xs)}
       // ensures when only one character the shape looks like a square
       ${logicalCSS('min-width', euiTheme.size.l)}
-      text-align: center;
+      ${logicalTextAlignCSS('center')}
     }
     
     kbd::after {
@@ -243,7 +244,7 @@ export const euiTextStyles = (euiThemeContext: UseEuiTheme) => {
 
       blockquote:not(.euiMarkdownFormat__blockquote) {
         position: relative;
-        text-align: center;
+        ${logicalTextAlignCSS('center')}
         ${logicalCSS('margin-horizontal', 'auto')}
         font-family: ${euiTheme.font.familySerif};
         font-style: italic;

From 80b3f0f1d4b5c11aee55a59eee39d95e46a8a964 Mon Sep 17 00:00:00 2001
From: Constance Chen <constance.chen.3@gmail.com>
Date: Mon, 18 Jul 2022 14:46:33 -0700
Subject: [PATCH 4/4] what are snapshots? baby don't hurt me, don't hurt me, no
 more

---
 .../text/__snapshots__/text.styles.test.ts.snap           | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/text/__snapshots__/text.styles.test.ts.snap b/src/components/text/__snapshots__/text.styles.test.ts.snap
index 597942fd593..23acf9107b3 100644
--- a/src/components/text/__snapshots__/text.styles.test.ts.snap
+++ b/src/components/text/__snapshots__/text.styles.test.ts.snap
@@ -134,11 +134,11 @@ exports[`euiTextStyles sizes m 1`] = `
     
     kbd::after {
       content: '';
-      border-bottom: 1px solid #343741;
+      border-block-end: 1px solid #343741;
       position: absolute;
-      bottom: 2px;
-      left: 0;
-      width: 100%;
+      inset-block-end: 2px;
+      inset-inline-start: 0;
+      inline-size: 100%;
     }
   ;;label:m;"
 `;