Merge branch '46877-bootstrap-4-lists' into 'master'

Resolve ""well-list" is removed from Bootstrap 4"

Closes #46877

See merge request gitlab-org/gitlab-ce!19207

app/assets/stylesheets/framework/lists.scss

@@ -2,7 +2,7 @@
  * Well styled list
  *
  */
-.card-body-list {
+.hover-list {
   position: relative;
   margin: 0;
   padding: 0;

app/views/admin/groups/show.html.haml

@@ -13,7 +13,7 @@
     .card
       .card-header
         Group info:
-      %ul.well-list
+      %ul.content-list
         %li
           .avatar-container.s60
             = group_icon(@group, class: "avatar s60")
@@ -64,7 +64,7 @@
           Projects
           %span.badge.badge-pill
             #{@group.projects.count}
-      %ul.well-list
+      %ul.content-list
         - @projects.each do |project|
           %li
             %strong
@@ -82,7 +82,7 @@
           Projects shared with #{@group.name}
           %span.badge.badge-pill
             #{@group.shared_projects.count}
-        %ul.well-list
+        %ul.content-list
           - @group.shared_projects.sort_by(&:name).each do |project|
             %li
               %strong
@@ -118,7 +118,7 @@
         %span.badge.badge-pill= @group.members.size
         .float-right
           = link_to icon('pencil-square-o', text: 'Manage access'), polymorphic_url([@group, :members]), class: "btn btn-sm"
-      %ul.well-list.group-users-list.content-list.members-list
+      %ul.content-list.group-users-list.content-list.members-list
         = render partial: 'shared/members/member', collection: @members, as: :member, locals: { show_controls: false }
       .card-footer
         = paginate @members, param_name: 'members_page', theme: 'gitlab'

app/views/admin/projects/show.html.haml

@@ -22,7 +22,7 @@
     .card
       .card-header
         Project info:
-      %ul.well-list
+      %ul.content-list
         %li
           %span.light Name:
           %strong
@@ -166,7 +166,7 @@
           .float-right
             = link_to admin_group_path(@group), class: 'btn btn-sm' do
               = icon('pencil-square-o', text: 'Manage access')
-        %ul.well-list.content-list.members-list
+        %ul.content-list.members-list
           = render partial: 'shared/members/member', collection: @group_members, as: :member, locals: { show_controls: false }
         .card-footer
           = paginate @group_members, param_name: 'group_members_page', theme: 'gitlab'
@@ -180,7 +180,7 @@
         %span.badge.badge-pill= @project.users.size
         .float-right
           = link_to icon('pencil-square-o', text: 'Manage access'), polymorphic_url([@project, :members]), class: "btn btn-sm"
-      %ul.well-list.project_members.content-list.members-list
+      %ul.content-list.project_members.members-list
         = render partial: 'shared/members/member', collection: @project_members, as: :member, locals: { show_controls: false }
       .card-footer
         = paginate @project_members, param_name: 'project_members_page', theme: 'gitlab'

app/views/admin/users/_profile.html.haml

 .card
   .card-header
     Profile
-  %ul.well-list
+  %ul.content-list
     %li
       %span.light Member since
       %strong= user.created_at.to_s(:medium)

app/views/admin/users/projects.html.haml

@@ -4,7 +4,7 @@
 - if @user.groups.any?
   .card
     .card-header Group projects
-    %ul.card-body-list
+    %ul.hover-list
       - @user.group_members.includes(:source).each do |group_member|
         - group = group_member.group
         %li.group_member
@@ -28,7 +28,7 @@
   .col-md-6
     .card
       .card-header Joined projects (#{@joined_projects.count})
-      %ul.card-body-list
+      %ul.hover-list
         - @joined_projects.sort_by(&:full_name).each do |project|
           - member = project.team.find_member(@user.id)
           %li.project_member

app/views/admin/users/show.html.haml

@@ -8,7 +8,7 @@
     .card
       .card-header
         = @user.name
-      %ul.well-list
+      %ul.content-list
         %li
           = image_tag avatar_icon_for_user(@user, 60), class: "avatar s60"
         %li
@@ -21,7 +21,7 @@
     .card
       .card-header
         Account:
-      %ul.well-list
+      %ul.content-list
         %li
           %span.light Name:
           %strong= @user.name

app/views/events/event/_push.html.haml

@@ -14,7 +14,7 @@
 
 - if event.push_with_commits?
   .event-body
-    %ul.well-list.event_commits
+    %ul.content-list.event_commits
       = render "events/commit", project: project, event: event
 
       - create_mr = event.new_ref? && create_mr_button?(project.default_branch, event.ref_name, project) && event.authored_by?(current_user)

app/views/groups/projects.html.haml

@@ -8,7 +8,7 @@
       .controls
         = link_to new_project_path(namespace_id: @group.id), class: "btn btn-sm btn-success" do
           New project
-  %ul.well-list
+  %ul.content-list
     - @projects.each do |project|
       %li
         .list-item-name

app/views/help/index.html.haml

@@ -36,7 +36,7 @@
     .card
       .card-header
         Quick help
-      %ul.well-list
+      %ul.content-list
         %li= link_to 'See our website for getting help', support_url
         %li
           %button.btn-blank.btn-link.js-trigger-search-bar{ type: 'button' }

app/views/help/ui.html.haml

@@ -116,9 +116,9 @@
 
   .lead
     List with hover effect
-    %code .well-list
+    %code .hover-list
   .example
-    %ul.well-list
+    %ul.hover-list
       %li
         One item
       %li
@@ -131,7 +131,7 @@
   .example
     .card
       .card-header Your list
-      %ul.well-list
+      %ul.content-list
         %li
           One item
         %li

app/views/profiles/_event_table.html.haml

 %h5.prepend-top-0
   History of authentications
 
-%ul.well-list
+%ul.content-list
   - events.each do |event|
     %li
       %span.description

app/views/profiles/gpg_keys/_key_table.html.haml

 - is_admin = local_assigns.fetch(:admin, false)
 
 - if @gpg_keys.any?
-  %ul.well-list
+  %ul.content-list
     = render partial: 'profiles/gpg_keys/key', collection: @gpg_keys, locals: { is_admin: is_admin }
 - else
   %p.settings-message.text-center

app/views/profiles/keys/_key_details.html.haml

@@ -4,7 +4,7 @@
     .card
       .card-header
         SSH Key
-      %ul.well-list
+      %ul.content-list
         %li
           %span.light Title:
           %strong= @key.title

app/views/profiles/keys/_key_table.html.haml

 - is_admin = local_assigns.fetch(:admin, false)
 
 - if @keys.any?
-  %ul.well-list
+  %ul.content-list
     = render partial: 'profiles/keys/key', collection: @keys, locals: { is_admin: is_admin }
 - else
   %p.settings-message.text-center

app/views/projects/hooks/_index.html.haml

@@ -15,7 +15,7 @@
     %h5.prepend-top-default
       Webhooks (#{@hooks.count})
     - if @hooks.any?
-      %ul.well-list
+      %ul.content-list
         - @hooks.each do |hook|
           = render 'project_hook', hook: hook
     - else

app/views/projects/pages/_list.html.haml

@@ -4,7 +4,7 @@
   .card
     .card-header
       Domains (#{@domains.count})
-    %ul.well-list.pages-domain-list{ class: ("has-verification-status" if verification_enabled) }
+    %ul.content-list.pages-domain-list{ class: ("has-verification-status" if verification_enabled) }
       - @domains.each do |domain|
         %li.pages-domain-list-item.unstyled
           - if verification_enabled

app/views/shared/milestones/_issuables.html.haml

@@ -11,7 +11,7 @@
         = number_with_delimiter(issuables.length)
 
   - class_prefix = dom_class(issuables).pluralize
-  %ul{ class: "well-list milestone-#{class_prefix}-list", id: "#{class_prefix}-list-#{id}" }
+  %ul{ class: "content-list milestone-#{class_prefix}-list", id: "#{class_prefix}-list-#{id}" }
     = render partial: 'shared/milestones/issuable',
              collection: issuables,
              as: :issuable,

app/views/sherlock/queries/_backtrace.html.haml

@@ -3,7 +3,7 @@
     .card-header
       %strong
         = t('sherlock.application_backtrace')
-    %ul.well-list
+    %ul.content-list
       - @query.application_backtrace.each do |location|
         %li
           %strong
@@ -19,7 +19,7 @@
     .card-header
       %strong
         = t('sherlock.full_backtrace')
-    %ul.well-list
+    %ul.content-list
       - @query.backtrace.each do |location|
         %li
           - if location.application?

app/views/sherlock/queries/_general.html.haml

@@ -3,7 +3,7 @@
     .card-header
       %strong
         = t('sherlock.general')
-    %ul.well-list
+    %ul.content-list
       %li
         %span.light
           #{t('sherlock.time')}:
@@ -32,7 +32,7 @@
           = @query.formatted_query
       %strong
         = t('sherlock.query')
-    %ul.well-list
+    %ul.content-list
       %li
         .code.js-syntax-highlight.sherlock-code
           :preserve
@@ -47,7 +47,7 @@
           = @query.explain
       %strong
         = t('sherlock.query_plan')
-    %ul.well-list
+    %ul.content-list
       %li
         .code.js-syntax-highlight.sherlock-code
           %pre

app/views/sherlock/transactions/_general.html.haml

@@ -3,7 +3,7 @@
     .card-header
       %strong
         = t('sherlock.general')
-    %ul.well-list
+    %ul.content-list
       %li
         %span.light
           #{t('sherlock.id')}:

doc/development/ux_guide/components.md

@@ -193,7 +193,7 @@ List with avatar, title and description using .content-list
 
 ![List with avatar](img/components-listwithavatar.png)
 
-List with hover effect .well-list
+List with hover effect .content-list
 
 ![List with hover effect](img/components-listwithhover.png)