Convert bootstrap carets to svg chevrons

- snippet comments
- notification settings
- web hook test

app/assets/stylesheets/framework/dropdowns.scss

@@ -341,7 +341,8 @@
 }
 
 .droplab-dropdown {
-  .dropdown-toggle > i {
+  .dropdown-toggle > i,
+  .dropdown-toggle > svg {
     pointer-events: none;
   }
 

app/assets/stylesheets/pages/notifications.scss

 .notification-list-item {
-  line-height: 34px;
-
   .dropdown-menu {
     @extend .dropdown-menu-right;
   }

app/views/profiles/notifications/_group_settings.html.haml

@@ -12,5 +12,5 @@
     = render 'shared/notifications/button', notification_setting: setting, emails_disabled: emails_disabled
 
   .table-section.section-30
-    = form_for setting, url: profile_notifications_group_path(group), method: :put, html: { class: 'update-notifications' } do |f|
+    = form_for setting, url: profile_notifications_group_path(group), method: :put, html: { class: 'update-notifications gl-display-flex' } do |f|
       = f.select :notification_email, @user.public_verified_emails, { include_blank: 'Global notification email' }, class: 'select2 js-group-notification-email'

app/views/shared/notes/_comment_button.html.haml

@@ -5,7 +5,7 @@
 
   - if @note.can_be_discussion_note?
     = button_tag type: 'button', class: 'btn btn-nr dropdown-toggle btn-success js-note-new-discussion js-disable-on-submit', data: { 'dropdown-trigger' => '#resolvable-comment-menu' }, 'aria-label' => _('Open comment type dropdown') do
-      = icon('caret-down', class: 'toggle-icon')
+      = sprite_icon('chevron-down')
 
     %ul#resolvable-comment-menu.dropdown-menu.dropdown-open-top{ data: { dropdown: true } }
       %li#comment.droplab-item-selected{ data: { value: '', 'submit-text' => _('Comment'), 'close-text' => _("Comment & close %{noteable_name}") % { noteable_name: noteable_name }, 'reopen-text' => _("Comment & reopen %{noteable_name}") % { noteable_name: noteable_name } } }

app/views/shared/notifications/_button.html.haml

@@ -20,8 +20,8 @@
             %button.dropdown-new.btn.btn-default.btn-icon.gl-button.has-tooltip.notifications-btn.text-left#notifications-button{ type: "button", title: button_title, class: "#{btn_class}", "aria-label" => aria_label, data: { container: "body", toggle: "modal", target: "#" + notifications_menu_identifier("modal", notification_setting), display: 'static' } }
               = sprite_icon("notifications", css_class: "js-notification-loading")
               = notification_title(notification_setting.level)
-            %button.btn.dropdown-toggle.d-flex{ data: { toggle: "dropdown", target: notifications_menu_identifier("dropdown", notification_setting), flip: "false" } }
-              = icon('caret-down')
+            %button.btn.dropdown-toggle.gl-display-flex.gl-align-items-center{ data: { toggle: "dropdown", target: notifications_menu_identifier("dropdown", notification_setting), flip: "false" } }
+              = sprite_icon('chevron-down')
               .sr-only Toggle dropdown
           - else
             %button.dropdown-new.btn.btn-default.btn-icon.gl-button.has-tooltip.notifications-btn#notifications-button{ type: "button", title: button_title, class: "#{btn_class}", "aria-label" => aria_label, data: { container: "body", toggle: "dropdown", target: notifications_menu_identifier("dropdown", notification_setting), flip: "false" } }
@@ -29,7 +29,7 @@
                 = sprite_icon("notifications", css_class: "js-notification-loading")
                 = notification_title(notification_setting.level)
               .float-right
-                = icon("caret-down")
+                = sprite_icon("chevron-down")
 
           = render "shared/notifications/notification_dropdown", notification_setting: notification_setting
 

app/views/shared/web_hooks/_test_button.html.haml

@@ -5,7 +5,7 @@
 .hook-test-button.dropdown.inline>
   %button.btn{ 'data-toggle' => 'dropdown', class: button_class }
     = _('Test')
-    = icon('caret-down')
+    = sprite_icon('chevron-down')
   %ul.dropdown-menu.dropdown-menu-right{ role: 'menu' }
     - triggers.each_value do |event|
       %li

changelogs/unreleased/225957-convert-to-svg-caret-down-comments.yml

+---
+title: Convert bootstrap carets to svg chevrons
+merge_request: 48492
+author:
+type: other