[5.x] Fix some RTL issues (#10029)

Co-authored-by: Jason Varga <jason@pixelfear.com>

resources/css/components/fieldtypes/markdown.css

@@ -204,6 +204,7 @@
         @apply rounded px-4 py-2;
         color: #c7254e;
         background-color: #f9f2f4;
+        direction: ltr;
 
         code { @apply p-0 }
     }

resources/css/elements/tables.css

@@ -37,7 +37,7 @@
 	overflow-x: auto;
 
     thead {
-		@apply bg-gray-100 text-xs text-gray-700 text-gray-900;
+		@apply bg-gray-100 text-xs text-gray-900;
 
 		tr {
 			@apply border-b;

resources/js/components/FavoriteCreator.vue

@@ -29,7 +29,7 @@ export default {
 
     data() {
         return {
-            name: document.title.replace(` ${this.$config.get('direction', 'rtl') === 'ltr' ? '‹' : '›'} Statamic`, ''),
+            name: document.title.replace(` ${this.$config.get('direction', 'ltr') === 'ltr' ? '‹' : '›'} Statamic`, ''),
             currentUrl: this.$config.get('urlPath')
         }
     },
@@ -53,7 +53,7 @@ export default {
         },
 
         direction() {
-            return this.$config.get('direction', 'rtl');
+            return this.$config.get('direction', 'ltr');
         },
     },
 

resources/js/components/data-list/Pagination.vue

@@ -167,7 +167,7 @@ export default {
         },
 
         direction() {
-            return this.$config.get('direction', 'rtl');
+            return this.$config.get('direction', 'ltr');
         },
 
     },

resources/js/components/entries/PublishForm.vue

@@ -486,6 +486,10 @@ export default {
                 }));
         },
 
+        direction() {
+            return this.$config.get('direction', 'ltr');
+        },
+
     },
 
     watch: {
@@ -547,7 +551,8 @@ export default {
                 this.title = response.data.data.title;
                 this.isWorkingCopy = true;
                 if (this.isBase) {
-                    document.title = this.title + ' ‹ ' + this.breadcrumbs[1].text + ' ‹ ' + this.breadcrumbs[0].text + ' ‹ Statamic';
+                    const arrow = this.direction === 'ltr' ? '‹' : '›';
+                    document.title = `${this.title} ${arrow} ${this.breadcrumbs[1].text} ${arrow} ${this.breadcrumbs[0].text} ${arrow} Statamic`;
                 }
                 if (!this.revisionsEnabled) this.permalink = response.data.data.permalink;
                 if (!this.isCreating && !this.isAutosave) this.$toast.success(__('Saved'));

resources/js/components/fieldtypes/TextFieldtype.vue

@@ -14,6 +14,7 @@
         :placeholder="__(config.placeholder)"
         :name="name"
         :id="fieldId"
+        :direction="config.direction"
         @input="inputUpdated"
         @focus="$emit('focus')"
         @blur="$emit('blur')"

resources/js/components/nav/Builder.vue

@@ -317,7 +317,7 @@ export default {
         },
 
         direction() {
-            return this.$config.get('direction', 'rtl');
+            return this.$config.get('direction', 'ltr');
         },
 
     },

resources/js/components/navigation/View.vue

@@ -249,7 +249,7 @@ export default {
         },
 
         direction() {
-            return this.$config.get('direction', 'rtl');
+            return this.$config.get('direction', 'ltr');
         },
 
     },

resources/js/components/roles/PermissionTree.vue

@@ -47,7 +47,7 @@ export default {
 
     computed: {
         direction() {
-            return this.$config.get('direction', 'rtl');
+            return this.$config.get('direction', 'ltr');
         }
     }
 

resources/js/components/stacks/Stack.vue

@@ -99,7 +99,7 @@ export default {
         },
 
         direction() {
-            return this.$config.get('direction', 'rtl');
+            return this.$config.get('direction', 'ltr');
         }
 
     },

resources/js/components/structures/PageTree.vue

@@ -118,7 +118,7 @@ export default {
         },
 
         direction() {
-            return this.$config.get('direction', 'rtl');
+            return this.$config.get('direction', 'ltr');
         },
 
     },

resources/js/components/users/Wizard.vue

@@ -257,7 +257,7 @@ export default {
             return this.invitation.send ? __('Create and Send Email') : __('Create User');
         },
         direction() {
-            return this.$config.get('direction', 'rtl');
+            return this.$config.get('direction', 'ltr');
         },
     },
 

resources/views/utilities/git.blade.php

@@ -28,7 +28,7 @@
         @forelse($statuses ?? [] as $path => $status)
             <div class="p-4 {{ $loop->first ? '' : 'border-t' }}">
                 <h2>{{ __('Repository path') }}: <code class="font-normal">{{ $path }}</code></h2>
-                <pre class="mt-4 p-4 rounded text-sm font-mono bg-gray-300 text-gray-700">{{ $status->status }}</pre>
+                <pre class="mt-4 p-4 rounded text-sm font-mono bg-gray-300 text-gray-700" dir="ltr">{{ $status->status }}</pre>
                 <div class="mt-4 text-sm text-gray flex">
                     <div class="rtl:ml-4 ltr:mr-4 badge-pill-sm"><span class="text-gray-800 font-medium">{{ __('Affected files') }}:</span> {{ $status->totalCount }}</div>
                     @if ($status->addedCount)

resources/views/utilities/phpinfo.blade.php

@@ -13,8 +13,8 @@
         <h1>{{ __('PHP Info') }}</h1>
     </header>
 
-    <div class="card p-0">
-        <table class="data-table">
+    <div class="card p-0" dir="ltr">
+        <table class="data-table ltr:text-left">
             <tr>
                 <th class="rtl:pr-4 ltr:pl-4 py-2 w-1/4">{{ __('PHP Version') }}</th>
                 <td>{{ PHP_VERSION }}</td>
@@ -23,9 +23,9 @@
     </div>
 
     @foreach ($phpinfo as $section => $items)
-        <h2 class="mt-8 mb-2 font-bold text-lg">{{ $section }}</h2>
-        <div class="card p-0">
-            <table class="data-table">
+        <h2 class="mt-8 mb-2 font-bold text-lg" dir="ltr">{{ $section }}</h2>
+        <div class="card p-0" dir="ltr">
+            <table class="data-table ltr:text-left">
                 @foreach ($items as $name => $value)
                 <tr>
                     <th class="rtl:pr-4 ltr:pl-4 py-2 w-1/4">{{ $name }}</th>

src/CP/Breadcrumbs.php

@@ -4,6 +4,7 @@
 
 use Illuminate\Contracts\Support\Arrayable;
 use JsonSerializable;
+use Statamic\Statamic;
 
 class Breadcrumbs implements Arrayable, JsonSerializable
 {
@@ -43,6 +44,8 @@ public function title($title = null)
             $crumbs->push(__($title));
         }
 
-        return $crumbs->reverse()->join(' ‹ ');
+        $arrow = Statamic::cpDirection() === 'ltr' ? ' ‹ ' : ' › ';
+
+        return $crumbs->reverse()->join($arrow);
     }
 }

src/Sites/Sites.php

@@ -173,6 +173,7 @@ public function blueprint()
                     'instructions' => __('statamic::messages.site_configure_url_instructions'),
                     'required' => true,
                     'width' => 33,
+                    'direction' => 'ltr',
                 ],
             ],
             [
@@ -182,6 +183,7 @@ public function blueprint()
                     'instructions' => __('statamic::messages.site_configure_locale_instructions'),
                     'required' => true,
                     'width' => 33,
+                    'direction' => 'ltr',
                 ],
             ],
             [
@@ -190,6 +192,7 @@ public function blueprint()
                     'type' => 'text',
                     'instructions' => __('statamic::messages.site_configure_lang_instructions'),
                     'width' => 33,
+                    'direction' => 'ltr',
                 ],
             ],
             [

src/Statamic.php

@@ -338,7 +338,9 @@ public static function flash()
 
     public static function crumb(...$values)
     {
-        return implode(' ‹ ', array_map(fn ($str) => Statamic::trans($str), $values));
+        $arrow = Statamic::cpDirection() === 'ltr' ? ' ‹ ' : ' › ';
+
+        return implode($arrow, array_map(fn ($str) => Statamic::trans($str), $values));
     }
 
     public static function docsUrl($url)