Add auto direction to support rtl languages

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"

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"

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>

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…"

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"

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

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

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"

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()"

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)"

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;

app/assets/stylesheets/pages/issuable.scss

@@ -60,6 +60,7 @@
     overflow-wrap: break-word;
     min-width: 0;
     width: 100%;
+    text-align: initial;
   }
   .btn-edit {

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

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

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= """.html_safe + event.target.title + "&quot".html_safe
+      %span.event-target-title.append-right-4{ dir: "auto" }
+        = """.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)

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= """.html_safe + event.target.title + "&quot".html_safe
+  %span.event-target-title.append-right-4{ dir: "auto" }
+    = """.html_safe + event.target.title + "&quot".html_safe
   = render "events/event_scope", event: event

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

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)

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

changelogs/unreleased/48479-auto-direction-for-issue-title.yml

+---
+title: Add auto direction for issue title
+merge_request: 27378
+author: Ahmad Haghighi
+type: fixed