Merge branch '24129-underline-all-links' into 'master'

Add underline hover state to all links

Closes #24129

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

app/assets/stylesheets/framework/common.scss

@@ -39,7 +39,6 @@
   color: $brand-info;
 }
 
-.underlined-link { text-decoration: underline; }
 .hint { font-style: italic; color: $hint-color; }
 .light { color: $common-gray; }
 

app/assets/stylesheets/framework/gfm.scss

@@ -14,6 +14,5 @@
 
   &:hover {
     background-color: $user-mention-bg-hover;
-    text-decoration: none;
   }
 }

app/assets/stylesheets/framework/wells.scss

@@ -20,6 +20,11 @@
 
       .ref-name {
         font-size: 12px;
+
+        &:hover {
+          text-decoration: underline;
+          color: $gl-text-color;
+        }
       }
     }
 

app/assets/stylesheets/pages/issuable.scss

@@ -110,6 +110,10 @@
       padding: 6px 10px;
       border-radius: $label-border-radius;
     }
+
+    &:hover .color-label {
+      text-decoration: underline;
+    }
   }
 
   &.has-labels {
@@ -174,6 +178,14 @@
         color: $gray-darkest;
       }
     }
+
+    &.assignee {
+      .author_link:hover {
+        .author {
+          text-decoration: underline;
+        }
+      }
+    }
   }
 
   .block-first {
@@ -468,7 +480,6 @@
   a:not(.btn-retry) {
     &:hover {
       color: $md-link-color;
-      text-decoration: none;
 
       .avatar {
         border-color: rgba($avatar-border, .2);

app/assets/stylesheets/pages/notes.scss

@@ -208,7 +208,6 @@ ul.notes {
 
       a {
         color: $gl-link-color;
-        text-decoration: none;
       }
 
       p {
@@ -395,6 +394,10 @@ ul.notes {
     &:focus,
     &:hover {
       text-decoration: none;
+
+      .note-header-author-name {
+        text-decoration: underline;
+      }
     }
   }
 
@@ -461,6 +464,10 @@ ul.notes {
   .system-note-message {
     white-space: normal;
   }
+
+  a:hover {
+    text-decoration: underline;
+  }
 }
 
 /**

app/assets/stylesheets/pages/profile.scss

@@ -73,7 +73,7 @@
 .profile-link-holder {
   display: inline;
 
-  a {
+  a:not(.text-link) {
     text-decoration: none;
   }
 }

app/assets/stylesheets/pages/projects.scss

@@ -811,6 +811,7 @@ a.deploy-project-label {
         &:hover,
         &:focus {
           color: $gl-text-color;
+          text-decoration: underline;
         }
       }
     }

app/assets/stylesheets/pages/wiki.scss

@@ -124,7 +124,11 @@
 
     &:hover,
     &.active {
-      color: $black;
+      text-decoration: none;
+
+      span {
+        text-decoration: underline;
+      }
     }
   }
 

app/helpers/commits_helper.rb

@@ -63,7 +63,7 @@ module CommitsHelper
   # Returns a link formatted as a commit branch link
   def commit_branch_link(url, text)
     link_to(url, class: 'label label-gray ref-name branch-link') do
-      icon('code-fork') + " #{text}"
+      icon('code-fork', class: 'append-right-5') + "#{text}"
     end
   end
 
@@ -77,7 +77,7 @@ module CommitsHelper
   # Returns a link formatted as a commit tag link
   def commit_tag_link(url, text)
     link_to(url, class: 'label label-gray ref-name') do
-      icon('tag') + " #{text}"
+      icon('tag', class: 'append-right-5') + "#{text}"
     end
   end
 

app/views/projects/_readme.html.haml

@@ -19,5 +19,5 @@
         distributed with computer software, forming part of its documentation.
       %p
         We recommend you to
-        = link_to "add a README", add_special_file_path(@project, file_name: 'README.md'), class: 'underlined-link'
+        = link_to "add a README", add_special_file_path(@project, file_name: 'README.md')
         file to the repository and GitLab will render it here instead of this message.

app/views/projects/artifacts/_tree_directory.html.haml

@@ -3,6 +3,6 @@
 %tr.tree-item{ 'data-link' => path_to_directory }
   %td.tree-item-file-name
     = tree_icon('folder', '755', directory.name)
-    = link_to path_to_directory do
-      %span.str-truncated= directory.name
+    = link_to path_to_directory, class: 'str-truncated' do
+      %span= directory.name
   %td

app/views/projects/artifacts/_tree_file.html.haml

@@ -6,12 +6,12 @@
   %td.tree-item-file-name
     = tree_icon('file', blob.mode, blob.name)
     - if external_link
-      = link_to path_to_file, class: 'tree-item-file-external-link js-artifact-tree-tooltip',
+      = link_to path_to_file, class: 'tree-item-file-external-link js-artifact-tree-tooltip str-truncated',
           target: '_blank', rel: 'noopener noreferrer', title: _('Opens in a new window') do
-        %span.str-truncated>= blob.name
+        %span>= blob.name
       = icon('external-link', class: 'js-artifact-tree-external-icon')
     - else
-      = link_to path_to_file do
-        %span.str-truncated= blob.name
+      = link_to path_to_file, class: 'str-truncated' do
+        %span= blob.name
   %td
     = number_to_human_size(blob.size, precision: 2)

app/views/projects/branches/_branch.html.haml

@@ -8,8 +8,7 @@
 %li{ class: "js-branch-#{branch.name}" }
   %div
     = link_to project_tree_path(@project, branch.name), class: 'item-title str-truncated ref-name' do
-      = icon('code-fork')
-      = branch.name
+      = icon('code-fork', class: 'append-right-5') + "#{branch.name}"
      
     - if branch.name == @repository.root_ref
       %span.label.label-primary default

app/views/projects/commits/_commit.html.haml

@@ -41,6 +41,6 @@
         - if commit.status(ref)
           = render_commit_status(commit, ref: ref)
 
-        = link_to commit.short_id, project_commit_path(project, commit), class: "commit-sha btn btn-transparent"
+        = link_to commit.short_id, project_commit_path(project, commit), class: "commit-sha btn btn-transparent btn-link"
         = clipboard_button(text: commit.id, title: _("Copy commit SHA to clipboard"))
         = link_to_browse_code(project, commit)

app/views/projects/empty.html.haml

@@ -14,12 +14,12 @@
     %p
       Otherwise you can start with adding a
       = succeed ',' do
-        = link_to "README", add_special_file_path(@project, file_name: 'README.md'), class: 'underlined-link'
+        = link_to "README", add_special_file_path(@project, file_name: 'README.md')
       a
       = succeed ',' do
-        = link_to "LICENSE", add_special_file_path(@project, file_name: 'LICENSE'), class: 'underlined-link'
+        = link_to "LICENSE", add_special_file_path(@project, file_name: 'LICENSE')
       or a
-      = link_to '.gitignore', add_special_file_path(@project, file_name: '.gitignore'), class: 'underlined-link'
+      = link_to '.gitignore', add_special_file_path(@project, file_name: '.gitignore')
       to this project.
     %p
       You will need to be owner or have the master permission level for the initial push, as the master branch is automatically protected.

app/views/projects/protected_branches/shared/_index.html.haml

@@ -16,7 +16,7 @@
         %li prevent pushes from everybody except Masters
         %li prevent <strong>anyone</strong> from force pushing to the branch
         %li prevent <strong>anyone</strong> from deleting the branch
-      %p Read more about #{link_to "protected branches", help_page_path("user/project/protected_branches"), class: "underlined-link"} and #{link_to "project permissions", help_page_path("user/permissions"), class: "underlined-link"}.
+      %p Read more about #{link_to "protected branches", help_page_path("user/project/protected_branches")} and #{link_to "project permissions", help_page_path("user/permissions")}.
 
     - if can? current_user, :admin_project, @project
       = content_for :create_protected_branch

app/views/projects/protected_tags/shared/_index.html.haml

@@ -16,7 +16,7 @@
         %li Prevent <strong>anyone</strong> from updating the tag
         %li Prevent <strong>anyone</strong> from deleting the tag
 
-    %p Read more about #{link_to "protected tags", help_page_path("user/project/protected_tags"), class: "underlined-link"}.
+    %p Read more about #{link_to "protected tags", help_page_path("user/project/protected_tags")}.
 
     - if can? current_user, :admin_project, @project
       = yield :create_protected_tag

app/views/projects/tree/_blob_item.html.haml

@@ -2,8 +2,8 @@
   %td.tree-item-file-name
     = tree_icon(type, blob_item.mode, blob_item.name)
     - file_name = blob_item.name
-    = link_to project_blob_path(@project, tree_join(@id || @commit.id, blob_item.name)), title: file_name do
-      %span.str-truncated= file_name
+    = link_to project_blob_path(@project, tree_join(@id || @commit.id, blob_item.name)), class: 'str-truncated', title: file_name do
+      %span= file_name
   %td.hidden-xs.tree-commit
   %td.tree-time-ago.cgray.text-right
     = render 'projects/tree/spinner'

app/views/projects/tree/_tree_item.html.haml

@@ -2,8 +2,8 @@
   %td.tree-item-file-name
     = tree_icon(type, tree_item.mode, tree_item.name)
     - path = flatten_tree(@path, tree_item)
-    = link_to project_tree_path(@project, tree_join(@id || @commit.id, path)), title: path do
-      %span.str-truncated= path
+    = link_to project_tree_path(@project, tree_join(@id || @commit.id, path)), class: 'str-truncated', title: path do
+      %span= path
   %td.hidden-xs.tree-commit
   %td.tree-time-ago.text-right
     = render 'projects/tree/spinner'

app/views/projects/wikis/_sidebar.html.haml

@@ -6,9 +6,8 @@
 
       - git_access_url = project_wikis_git_access_path(@project)
       = link_to git_access_url, class: active_nav_link?(path: 'wikis#git_access') ? 'active' : '' do
-        = succeed ' ' do
-          = icon('cloud-download')
-        = _("Clone repository")
+        = icon('cloud-download', class: 'append-right-5')
+        %span= _("Clone repository")
 
     .blocks-container
       .block.block-first

app/views/shared/_label.html.haml

@@ -38,9 +38,9 @@
             = link_to 'Delete', destroy_label_path(label), title: 'Delete', method: :delete, data: {confirm: 'Remove this label? Are you sure?'}
 
   .pull-right.hidden-xs.hidden-sm.hidden-md
-    = link_to_label(label, subject: subject, type: :merge_request, css_class: 'btn btn-transparent btn-action') do
+    = link_to_label(label, subject: subject, type: :merge_request, css_class: 'btn btn-transparent btn-action btn-link') do
       view merge requests
-    = link_to_label(label, subject: subject, css_class: 'btn btn-transparent btn-action') do
+    = link_to_label(label, subject: subject, css_class: 'btn btn-transparent btn-action btn-link') do
       view open issues
 
     - if current_user

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

@@ -31,8 +31,7 @@
       .note-header
         .note-header-info
           %a{ href: user_path(note.author) }
-            %span.note-header-author-name
-              = sanitize(note.author.name)
+            %span.note-header-author-name= sanitize(note.author.name)
             %span.note-headline-light
               = note.author.to_reference
           %span.note-headline-light

app/views/users/show.html.haml

@@ -51,7 +51,7 @@
         .cover-desc
           - unless @user.public_email.blank?
             .profile-link-holder.middle-dot-divider
-              = link_to @user.public_email, "mailto:#{@user.public_email}"
+              = link_to @user.public_email, "mailto:#{@user.public_email}", class: 'text-link'
           - unless @user.skype.blank?
             .profile-link-holder.middle-dot-divider
               = link_to "skype:#{@user.skype}", title: "Skype" do
@@ -66,7 +66,7 @@
                 = icon('twitter-square')
           - unless @user.website_url.blank?
             .profile-link-holder.middle-dot-divider
-              = link_to @user.short_website_url, @user.full_website_url
+              = link_to @user.short_website_url, @user.full_website_url, class: 'text-link'
           - unless @user.location.blank?
             .profile-link-holder.middle-dot-divider
               = icon('map-marker')

doc/development/doc_styleguide.md

@@ -170,12 +170,6 @@ You can combine one or more of the following:
     = link_to 'Help page', help_page_path('user/permissions'),  class: 'btn btn-info'
     ```
 
-1. **Underlining a link.**
-
-    ```haml
-    = link_to 'Help page', help_page_path('user/permissions'), class: 'underlined-link'
-    ```
-
 1. **Using links inline of some text.**
 
     ```haml