Add auto direction to support rtl languages

20 files changed, 29 insertions, 6 deletions

diff --git a/app/assets/javascripts/boards/components/issue_card_inner.vue b/app/assets/javascripts/boards/components/issue_card_inner.vue
index 6aa689b4056..17de7b2cf1e 100644
--- a/app/assets/javascripts/boards/components/issue_card_inner.vue
+++ b/app/assets/javascripts/boards/components/issue_card_inner.vue
@@ -168,7 +168,7 @@ export default {
 </script>
 <template>
   <div>
-    <div class="d-flex board-card-header">
+    <div class="d-flex board-card-header" dir="auto">
       <h4 class="board-card-title append-bottom-0 prepend-top-0">
         <icon
           v-if="issue.confidential"
diff --git a/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue b/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue
index 00b2d236da3..6b0aa5b2b2b 100644
--- a/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue
+++ b/app/assets/javascripts/ide/components/commit_sidebar/message_field.vue
@@ -108,6 +108,7 @@ export default {
           :placeholder="placeholder"
           :value="text"
           class="note-textarea ide-commit-message-textarea"
+          dir="auto"
           name="commit-message"
           @scroll="handleScroll"
           @input="onInput"
diff --git a/app/assets/javascripts/issue_show/components/description.vue b/app/assets/javascripts/issue_show/components/description.vue
index 385e9543973..f2462e50093 100644
--- a/app/assets/javascripts/issue_show/components/description.vue
+++ b/app/assets/javascripts/issue_show/components/description.vue
@@ -149,6 +149,7 @@ export default {
       v-model="descriptionText"
       :data-update-url="updateUrl"
       class="hidden js-task-list-field"
+      dir="auto"
     >
     </textarea>
 
diff --git a/app/assets/javascripts/issue_show/components/fields/description.vue b/app/assets/javascripts/issue_show/components/fields/description.vue
index 299130e56ae..d27dd873125 100644
--- a/app/assets/javascripts/issue_show/components/fields/description.vue
+++ b/app/assets/javascripts/issue_show/components/fields/description.vue
@@ -53,6 +53,7 @@ export default {
         v-model="formState.description"
         class="note-textarea js-gfm-input js-autosize markdown-area
         qa-description-textarea"
+        dir="auto"
         data-supports-quick-actions="false"
         aria-label="Description"
         placeholder="Write a comment or drag your files here…"
diff --git a/app/assets/javascripts/issue_show/components/fields/title.vue b/app/assets/javascripts/issue_show/components/fields/title.vue
index a3371cb9614..ce4baf17d09 100644
--- a/app/assets/javascripts/issue_show/components/fields/title.vue
+++ b/app/assets/javascripts/issue_show/components/fields/title.vue
@@ -20,6 +20,7 @@ export default {
       ref="input"
       v-model="formState.title"
       class="form-control qa-title-input"
+      dir="auto"
       type="text"
       placeholder="Title"
       aria-label="Title"
diff --git a/app/assets/javascripts/issue_show/components/title.vue b/app/assets/javascripts/issue_show/components/title.vue
index 3b5c95ccded..d2f33dc31a7 100644
--- a/app/assets/javascripts/issue_show/components/title.vue
+++ b/app/assets/javascripts/issue_show/components/title.vue
@@ -72,6 +72,7 @@ export default {
         'issue-realtime-trigger-pulse': pulseAnimation,
       }"
       class="title"
+      dir="auto"
       v-html="titleHtml"
     ></h2>
     <button
diff --git a/app/assets/javascripts/notes/components/comment_form.vue b/app/assets/javascripts/notes/components/comment_form.vue
index caf22f71bf9..688c06878ac 100644
--- a/app/assets/javascripts/notes/components/comment_form.vue
+++ b/app/assets/javascripts/notes/components/comment_form.vue
@@ -351,6 +351,7 @@ Please check your network connection and try again.`;
                 ref="textarea"
                 slot="textarea"
                 v-model="note"
+                dir="auto"
                 :disabled="isSubmitting"
                 name="note[note]"
                 class="note-textarea js-vue-comment-form js-note-text
diff --git a/app/assets/javascripts/notes/components/note_body.vue b/app/assets/javascripts/notes/components/note_body.vue
index fbf75ed0e41..8ddd5b8514a 100644
--- a/app/assets/javascripts/notes/components/note_body.vue
+++ b/app/assets/javascripts/notes/components/note_body.vue
@@ -122,6 +122,7 @@ export default {
       v-model="note.note"
       :data-update-url="note.path"
       class="hidden js-task-list-field"
+      dir="auto"
     ></textarea>
     <note-edited-text
       v-if="note.last_edited_at"
diff --git a/app/assets/javascripts/notes/components/note_form.vue b/app/assets/javascripts/notes/components/note_form.vue
index 471323bfc83..fb098095cf3 100644
--- a/app/assets/javascripts/notes/components/note_form.vue
+++ b/app/assets/javascripts/notes/components/note_form.vue
@@ -268,6 +268,7 @@ export default {
           :data-supports-quick-actions="!isEditing"
           name="note[note]"
           class="note-textarea js-gfm-input js-note-text js-autosize markdown-area js-vue-issue-note-form js-vue-textarea qa-reply-input"
+          dir="auto"
           aria-label="Description"
           placeholder="Write a comment or drag your files here…"
           @keydown.meta.enter="handleKeySubmit()"
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/states/commit_edit.vue b/app/assets/javascripts/vue_merge_request_widget/components/states/commit_edit.vue
index a38f25cce35..acd8037cfb2 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/states/commit_edit.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/states/commit_edit.vue
@@ -30,6 +30,7 @@ export default {
         :id="inputId"
         :value="value"
         class="form-control js-gfm-input append-bottom-default commit-message-edit"
+        dir="auto"
         required="required"
         rows="7"
         @input="$emit('input', $event.target.value)"
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 61fab445793..02a95c04b8b 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -256,6 +256,10 @@
   }
 }
 
+.board-card-header {
+  text-align: initial;
+}
+
 .board-card-assignee {
   margin-top: -$gl-padding-4;
   margin-bottom: -$gl-padding-4;
diff --git a/app/assets/stylesheets/pages/issuable.scss b/app/assets/stylesheets/pages/issuable.scss
index f8620eec46d..04c66006027 100644
--- a/app/assets/stylesheets/pages/issuable.scss
+++ b/app/assets/stylesheets/pages/issuable.scss
@@ -60,6 +60,7 @@
     overflow-wrap: break-word;
     min-width: 0;
     width: 100%;
+    text-align: initial;
   }
 
   .btn-edit {
diff --git a/app/helpers/broadcast_messages_helper.rb b/app/helpers/broadcast_messages_helper.rb
index 289cb44f1e8..495c29d3e24 100644
--- a/app/helpers/broadcast_messages_helper.rb
+++ b/app/helpers/broadcast_messages_helper.rb
@@ -4,7 +4,7 @@ module BroadcastMessagesHelper
   def broadcast_message(message)
     return unless message.present?
 
-    content_tag :div, class: 'broadcast-message', style: broadcast_message_style(message) do
+    content_tag :div, dir: 'auto', class: 'broadcast-message', style: broadcast_message_style(message) do
       icon('bullhorn') << ' ' << render_broadcast_message(message)
     end
   end
diff --git a/app/views/admin/broadcast_messages/_form.html.haml b/app/views/admin/broadcast_messages/_form.html.haml
index c465d9f51d6..46beca0465e 100644
--- a/app/views/admin/broadcast_messages/_form.html.haml
+++ b/app/views/admin/broadcast_messages/_form.html.haml
@@ -14,6 +14,7 @@
     .col-sm-10
       = f.text_area :message, class: "form-control js-autosize",
         required: true,
+        dir: 'auto',
         data: { preview_path: preview_admin_broadcast_messages_path }
   .form-group.row.js-toggle-colors-container
     .col-sm-10.offset-sm-2
diff --git a/app/views/events/event/_common.html.haml b/app/views/events/event/_common.html.haml
index 96d6553a2ac..b02fdb4b638 100644
--- a/app/views/events/event/_common.html.haml
+++ b/app/views/events/event/_common.html.haml
@@ -11,7 +11,8 @@
     = link_to [event.project.namespace.becomes(Namespace), event.project, event.target], class: 'has-tooltip event-target-link append-right-4', title: event.target_title do
       = event.target.reference_link_text
     - unless event.milestone?
-      %span.event-target-title.append-right-4= "&quot;".html_safe + event.target.title + "&quot".html_safe
+      %span.event-target-title.append-right-4{ dir: "auto" }
+        = "&quot;".html_safe + event.target.title + "&quot".html_safe
   - else
     %span.event-type.d-inline-block.append-right-4{ class: event.action_name }
       = event_action_name(event)
diff --git a/app/views/events/event/_note.html.haml b/app/views/events/event/_note.html.haml
index 90ed8e41d32..7e2103287f7 100644
--- a/app/views/events/event/_note.html.haml
+++ b/app/views/events/event/_note.html.haml
@@ -7,7 +7,8 @@
   %span.event-type.d-inline-block.append-right-4{ class: event.action_name }
     = event.action_name
   = event_note_title_html(event)
-  %span.event-target-title.append-right-4= "&quot;".html_safe + event.target.title + "&quot".html_safe
+  %span.event-target-title.append-right-4{ dir: "auto" }
+    = "&quot;".html_safe + event.target.title + "&quot".html_safe
 
   = render "events/event_scope", event: event
 
diff --git a/app/views/projects/_zen.html.haml b/app/views/projects/_zen.html.haml
index afc40ca4eab..c502b392384 100644
--- a/app/views/projects/_zen.html.haml
+++ b/app/views/projects/_zen.html.haml
@@ -8,6 +8,7 @@
     = f.text_area attr,
       class: classes,
       placeholder: placeholder,
+      dir: 'auto',
       data: { supports_quick_actions: supports_quick_actions,
         supports_autocomplete: supports_autocomplete }
   - else
diff --git a/app/views/projects/issues/_issue.html.haml b/app/views/projects/issues/_issue.html.haml
index 945d1b00b08..0d8d7123a01 100644
--- a/app/views/projects/issues/_issue.html.haml
+++ b/app/views/projects/issues/_issue.html.haml
@@ -6,7 +6,7 @@
     .issuable-info-container
       .issuable-main-info
         .issue-title.title
-          %span.issue-title-text
+          %span.issue-title-text{ dir: "auto" }
             - if issue.confidential?
               %span.has-tooltip{ title: _('Confidential') }
                 = confidential_icon(issue)
diff --git a/app/views/shared/issuable/form/_title.html.haml b/app/views/shared/issuable/form/_title.html.haml
index 56c4b021eab..75e9ab547ce 100644
--- a/app/views/shared/issuable/form/_title.html.haml
+++ b/app/views/shared/issuable/form/_title.html.haml
@@ -6,7 +6,7 @@
 
 %div{ class: div_class }
   = form.text_field :title, required: true, maxlength: 255, autofocus: true,
-      autocomplete: 'off', class: 'form-control pad qa-issuable-form-title', placeholder: _('Title')
+      autocomplete: 'off', class: 'form-control pad qa-issuable-form-title', placeholder: _('Title'), dir: 'auto'
 
   - if issuable.respond_to?(:work_in_progress?)
     .form-text.text-muted
diff --git a/changelogs/unreleased/48479-auto-direction-for-issue-title.yml b/changelogs/unreleased/48479-auto-direction-for-issue-title.yml
new file mode 100644
index 00000000000..0571f58ab4d
--- /dev/null
+++ b/changelogs/unreleased/48479-auto-direction-for-issue-title.yml
@@ -0,0 +1,5 @@
+---
+title: Add auto direction for issue title
+merge_request: 27378
+author: Ahmad Haghighi
+type: fixed