fix: 💄 add RTL mixin, improve Breadcrumbs styles

deriv-com · Oct 4, 2024 · b709799 · b709799
1 parent 1b6334b
commit b709799
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 15 deletions.
diff --git a/src/components/Breadcrumbs/Breadcrumbs.scss b/src/components/Breadcrumbs/Breadcrumbs.scss
@@ -1,31 +1,40 @@
 .deriv-breadcrumbs {
+    width: 100%;
     margin: 0;
     padding: 0;
 
     &__item {
         float: left;
         list-style-type: none;
-    }
 
-    &__text {
-        color: var(--du-text-less-prominent, #999999);
-
-        &--active {
-            color: var(--du-text-prominent, #333333);
+        @include rtl {
+            float: right;
         }
 
         &:not(:last-child) {
             cursor: pointer;
 
-            &:hover {
+            .deriv-breadcrumbs__text:hover {
                 color: var(--du-text-general, #333333);
             }
         }
     }
 
+    &__text {
+        color: var(--du-text-less-prominent, #999999);
+
+        &--active {
+            color: var(--du-text-prominent, #333333);
+        }
+    }
+
+    &__separator-container {
+        cursor: default;
+    }
+
     &__chevron-icon {
         margin: 0 5px;
-        vertical-align: middle;
+        vertical-align: sub;
 
         path {
             fill: var(--du-text-less-prominent, #999999);
@@ -34,5 +43,9 @@
         @include mobile {
             margin: 0 2.5px;
         }
+
+        @include rtl {
+            transform: rotate(180deg);
+        }
     }
 }
diff --git a/src/components/Breadcrumbs/index.tsx b/src/components/Breadcrumbs/index.tsx
@@ -43,13 +43,16 @@ export const Breadcrumbs = ({
                         >
                             {item.text}
                         </Text>
-                        {!isLastItem &&
-                            (separator ?? (
-                                <LegacyChevronRight1pxIcon
-                                    className="deriv-breadcrumbs__chevron-icon"
-                                    iconSize="xs"
-                                />
-                            ))}
+                        {!isLastItem && (
+                            <span className="deriv-breadcrumbs__separator-container">
+                                {separator || (
+                                    <LegacyChevronRight1pxIcon
+                                        className="deriv-breadcrumbs__chevron-icon"
+                                        iconSize="xs"
+                                    />
+                                )}
+                            </span>
+                        )}
                     </li>
                 );
             })}

diff --git a/src/styles/abstracts/_layout.scss b/src/styles/abstracts/_layout.scss
@@ -0,0 +1,7 @@
+/*RTL Language Mixin*/
+
+@mixin rtl {
+    [dir="rtl"] & {
+        @content;
+    }
+}
diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -1,4 +1,5 @@
 @import "./base/reset";
+@import "./abstracts/layout";
 @import "./abstracts/variables";
 @import "./abstracts/typography";
 @import "./abstracts/devices";