Merge pull request #96 from ali2-godaddy/fix-rtl-issues

fix: Styling fixes for RTL documents and element hover

Author: chinrichs-godaddy

src/carousel.less

@@ -13,7 +13,7 @@
   .carousel-viewport {
     overflow: hidden;
     white-space: nowrap;
-    text-align: left;
+    text-align: start;
   }
 
   .carousel-arrow-default {

src/rtl.less

@@ -1,8 +1,4 @@
 [dir="rtl"] .carousel {
-  .carousel-viewport {
-    text-align: right;
-  }
-
   .carousel-left-arrow {
     left: unset;
     right: 23px;

src/stories/index.stories.jsx

@@ -470,12 +470,37 @@ export const RightAlignedSlides = {
   }
 };
 
+const RTL_TEXT_SLIDES = [
+  { label: 'RTL ←', text: 'Hello' },
+  { label: 'RTL ←', text: 'World' },
+  { label: 'RTL ←', text: 'Test' },
+  { label: 'RTL ←', text: '1' },
+  { label: 'RTL ←', text: '2' },
+  { label: 'RTL ←', text: '3' }
+].map(({ label, text }, index) => (
+  <div
+    key={ index }
+    style={{
+      minHeight: '200px',
+      padding: '24px',
+      background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
+      color: '#fff',
+      fontSize: '24px',
+      width: '250px',
+      borderRadius: '8px'
+    }}
+  >
+    <span style={{ fontSize: '14px', opacity: 0.9 }}>{label}</span>
+    <span>{text}</span>
+  </div>
+));
+
 export const Rtl = {
   args: {
     width: '450px',
     cellPadding: 5,
     dir: 'rtl',
-    children: imgElements
+    children: RTL_TEXT_SLIDES
   },
   render: (args) => (
     <div dir='rtl'>