feat(eek): flipped EEK direction (#2588)

Author: agliga

.changeset/heavy-webs-try.md

@@ -0,0 +1,5 @@
+---
+"@ebay/skin": minor
+---
+
+feat(eek): flipped EEK direction

dist/eek/eek.css

@@ -1,6 +1,7 @@
 .eek {
     align-items: stretch;
     display: inline-flex;
+    flex-direction: row-reverse;
     font-family: Arial, sans-serif;
     font-weight: 700;
     height: 24px;
@@ -14,12 +15,14 @@
 .eek__container {
     align-items: center;
     border: 1px solid #000;
-    border-radius: 2px 0 0 2px;
-    border-right: none;
+    border-left: none;
+    border-radius: 0 2px 2px 0;
     display: inline-flex;
+    flex-direction: row-reverse;
 }
 
 .eek .icon--eek-arrow {
+    rotate: 180deg;
     width: 9px;
 }
 
@@ -38,7 +41,7 @@
     content: "";
     display: block;
     height: 19.7989898732px;
-    margin-top: 2.3px;
+    margin-block-start: 2.3px;
     position: relative;
     right: 12px;
     transform: rotate(45deg);
@@ -105,7 +108,7 @@
     color: #fff;
     display: inline-block;
     font-size: 18px;
-    margin-left: 8px;
+    margin-inline-end: 8px;
     text-shadow:
         -0.5px 0.5px 0 #000,
         0.5px 0.5px 0 #000,
@@ -161,10 +164,6 @@
         }
     }
 }
-[dir="rtl"] .eek .icon--eek-arrow {
-    transform: rotate(180deg);
-}
-[dir="rtl"] .eek__container {
-    border-left: none;
-    border-right: 1px solid #000;
+[dir="rtl"] .eek {
+    direction: ltr;
 }

src/routes/_index/component/eek/+page.marko

@@ -360,9 +360,6 @@
         </svg>
     </div>
     </highlight-code>
-
-
-
 </div>
 export const metadata = {
     component: "eek",

src/sass/eek/eek.scss

@@ -21,6 +21,9 @@ $eek-border-color: $eek-color;
 .eek {
     align-items: stretch;
     display: inline-flex;
+
+    // TODO remove flex-direction next major version and swap markup to be icon first
+    flex-direction: row-reverse;
     font-family: Arial, sans-serif;
     font-weight: 700;
     height: 24px;
@@ -34,12 +37,16 @@ $eek-border-color: $eek-color;
 .eek__container {
     align-items: center;
     border: 1px solid $eek-color;
-    border-radius: 2px 0 0 2px;
-    border-right: none;
+    border-left: none;
+    border-radius: 0 2px 2px 0;
     display: inline-flex;
+
+    // TODO remove flex-direction next major version and swap markup to be icon first
+    flex-direction: row-reverse;
 }
 
 .eek .icon--eek-arrow {
+    rotate: 180deg;
     width: 9px;
 }
 
@@ -58,7 +65,7 @@ $eek-border-color: $eek-color;
     content: "";
     display: block;
     height: $eek-arrow-size;
-    margin-top: 2.3px;
+    margin-block-start: 2.3px;
     position: relative;
     right: 12px;
     transform: rotate(45deg);
@@ -118,7 +125,7 @@ $eek-border-color: $eek-color;
     color: $eek-background-color;
     display: inline-block;
     font-size: 18px;
-    margin-left: 8px;
+    margin-inline-end: 8px;
     text-shadow:
         -0.5px 0.5px 0 $eek-color,
         0.5px 0.5px 0 $eek-color,
@@ -181,11 +188,8 @@ Changed a bit of styles there only in order to make it work
 }
 
 [dir="rtl"] {
-    .eek .icon--eek-arrow {
-        transform: rotate(180deg);
-    }
-    .eek__container {
-        border-left: none;
-        border-right: 1px solid $eek-color;
+    .eek {
+        // Since this is a legal requirement component, we need to ensure that the text is always left-to-right
+        direction: ltr;
     }
 }