Add right-to-left (RTL) support for the caret of select inputs (#11313)

Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>

CHANGELOG.txt

@@ -736,6 +736,7 @@ Changelog
  * Fix: Prevent memory exhaustion when purging a large number of revisions (Jake Howard)
  * Fix: Add right-to-left (RTL) support for the following form components: Switch, Minimap, live preview (Thibaud Colas)
  * Fix: Improve right-to-left (RTL) positioning for the following components: Page explorer, Sidebar sub-menu, rich text tooltips, rich text toolbar trigger, editor section headers (Thibaud Colas)
+ * Fix: Add right-to-left (RTL) support for the caret of select inputs (Badr Fourane)
  * Fix: Use the workflow name as the workflow information dialog title (Sage Abdullah)
  * Fix: Link to workflow history view instead of page history view in the workflow information dialog (Sage Abdullah)
  * Fix: Fix in-progress count in warning message when disabling workflows (Sage Abdullah)

CONTRIBUTORS.md

@@ -779,6 +779,7 @@
 * Sai Srikar Dumpeti
 * Nikhil S Kalburgi
 * Salvo Polizzi
+* Badr Fourane
 
 ## Translators
 

client/scss/components/forms/_select.scss

@@ -2,10 +2,8 @@
 @use 'sass:math';
 
 $select-size: $text-input-height;
-$chevron-width: 0.375rem;
-$chevron-height: 0.375rem;
-$chevron-top-offset: math.div($select-size - $chevron-height, 2);
-$chevron-inline-end-offset: math.div($select-size - $chevron-width, 2);
+$chevron-size: 0.375rem;
+$chevron-offset: math.div($select-size - $chevron-size, 2);
 
 @mixin select-arrow() {
   background-image: linear-gradient(
@@ -22,12 +20,18 @@ $chevron-inline-end-offset: math.div($select-size - $chevron-width, 2);
       theme('colors.text-label') 66%,
       transparent 66%
     );
-  background-position:
-    calc(100% - $chevron-top-offset - $chevron-width) $chevron-top-offset,
-    calc(100% - $chevron-inline-end-offset) $chevron-top-offset;
+  background-position-y: $chevron-offset, $chevron-offset;
+  background-position-x: calc(100% - $chevron-offset - $chevron-size),
+    calc(100% - $chevron-offset);
+
+  [dir='rtl'] & {
+    background-position-x: $chevron-offset,
+      calc($chevron-offset + $chevron-size);
+  }
+
   background-size:
-    $chevron-width $chevron-width,
-    $chevron-width $chevron-width;
+    $chevron-size $chevron-size,
+    $chevron-size $chevron-size;
   background-repeat: no-repeat;
 }
 

docs/releases/6.0.md

@@ -25,6 +25,8 @@ This tutorial series was created by Damilola Oladele as part of the Google Seaso
 
 The admin interface now supports right-to-left languages, such as Persian, Arabic, Hebrew. Though there are still some areas that need improvement, all admin views will now be displayed in the correct direction.
 
+Thank you to Thibaud Colas and Badr Fourane for their work on this feature.
+
 ### Other features
 
  * Added `search_index` option to StreamField blocks to control whether the block is indexed for searching (Vedant Pandey)