Merge branch '27697-make-arrow-icons-consistent-in-dropdown' into 'master'

[#27697] Make the arrow icons consistent in dropdown

Closes #27697

See merge request !9659

app/assets/stylesheets/framework/forms.scss

@@ -125,10 +125,11 @@ label {
 .select-wrapper {
   position: relative;
 
-  .fa-caret-down {
+  .fa-chevron-down {
     position: absolute;
+    font-size: 10px;
     right: 10px;
-    top: 10px;
+    top: 12px;
     color: $gray-darkest;
     pointer-events: none;
   }
@@ -138,6 +139,12 @@ label {
   padding-left: 10px;
   padding-right: 10px;
   -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+
+  &::-ms-expand {
+    display: none;
+  }
 }
 
 .form-control-inline {

app/assets/stylesheets/framework/selects.scss

@@ -18,19 +18,28 @@
       background-image: none;
       background-color: transparent;
       border: none;
-      padding-top: 6px;
-      padding-right: 10px;
+      padding-top: 12px;
+      padding-right: 20px;
+      font-size: 10px;
 
       b {
-        display: inline-block;
-        width: 0;
-        height: 0;
-        margin-left: 2px;
-        vertical-align: middle;
-        border-top: 5px dashed;
-        border-right: 5px solid transparent;
-        border-left: 5px solid transparent;
+        display: none;
+      }
+
+      &::after {
+        content: "\f078";
+        position: absolute;
+        z-index: 1;
+        text-align: center;
+        pointer-events: none;
+        box-sizing: border-box;
         color: $gray-darkest;
+        display: inline-block;
+        font: normal normal normal 14px/1 FontAwesome;
+        font-size: inherit;
+        text-rendering: auto;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
       }
     }
 

app/helpers/projects_helper.rb

@@ -151,14 +151,21 @@ module ProjectsHelper
       disabled: disabled_option
     )
 
+    content_tag :div, class: "select-wrapper" do
+      concat(
         content_tag(
           :select,
           options,
           name: "project[project_feature_attributes][#{field}]",
           id: "project_project_feature_attributes_#{field}",
-      class: "pull-right form-control #{repo_children_classes(field)}",
+          class: "pull-right form-control select-control #{repo_children_classes(field)} ",
           data: { field: field }
-    ).html_safe
+        )
+      )
+      concat(
+        icon('chevron-down')
+      )
+    end.html_safe
   end
 
   def link_to_autodeploy_doc

app/views/projects/_visibility_select.html.haml

 - if can_change_visibility_level?(@project, current_user)
-  = form.select(model_method, visibility_select_options(@project, selected_level), {}, class: 'form-control visibility-select')
+  .select-wrapper
+    = form.select(model_method, visibility_select_options(@project, selected_level), {}, class: 'form-control visibility-select select-control')
+    = icon('chevron-down')
 - else
   .info.js-locked{ data: { help_block: visibility_level_description(@project.visibility_level, @project) } }
     = visibility_level_icon(@project.visibility_level)

app/views/projects/edit.html.haml

@@ -99,9 +99,9 @@
                   Git Large File Storage
                   = link_to icon('question-circle'), help_page_path('workflow/lfs/manage_large_binaries_with_git_lfs')
               .col-md-3
-                = f.select :lfs_enabled, [%w(Enabled true), %w(Disabled false)], {}, selected: @project.lfs_enabled?, class: 'pull-right form-control project-repo-select', data: { field: 'lfs_enabled' }
-
-
+                .select-wrapper
+                  = f.select :lfs_enabled, [%w(Enabled true), %w(Disabled false)], {}, selected: @project.lfs_enabled?, class: 'pull-right form-control project-repo-select select-control', data: { field: 'lfs_enabled' }
+                  = icon('chevron-down')
         - if Gitlab.config.registry.enabled
           .form-group.js-container-registry{ style: ("display: none;" if @project.project_feature.send(:repository_access_level) == 0) }
             .checkbox

app/views/projects/project_members/_new_project_member.html.haml

@@ -6,7 +6,9 @@
         = users_select_tag(:user_ids, multiple: true, class: "input-clamp", scope: :all, email_user: true, placeholder: "Search for members to update or invite")
       .form-group
         = label_tag :access_level, "Choose a role permission", class: "label-light"
-        = select_tag :access_level, options_for_select(ProjectMember.access_level_roles, @project_member.access_level), class: "form-control project-access-select"
+        .select-wrapper
+          = select_tag :access_level, options_for_select(ProjectMember.access_level_roles, @project_member.access_level), class: "form-control project-access-select select-control"
+          = icon('chevron-down')
         .help-block.append-bottom-10
           = link_to "Read more", help_page_path("user/permissions"), class: "vlink"
           about role permissions

app/views/projects/project_members/_new_shared_group.html.haml

@@ -8,7 +8,7 @@
         = label_tag :link_group_access, "Max access level", class: "label-light"
         .select-wrapper
           = select_tag :link_group_access, options_for_select(ProjectGroupLink.access_options, ProjectGroupLink.default_access), class: "form-control select-control"
-          = icon('caret-down')
+          = icon('chevron-down')
         .help-block.append-bottom-10
           = link_to "Read more", help_page_path("user/permissions"), class: "vlink"
           about role permissions

changelogs/unreleased/27697-make-arrow-icons-consistent-in-dropdown.yml

+---
+title: Use fa-chevron-down on dropdown arrows for consistency
+merge_request: 9659
+author: TM Lee