Updated horizontal ellipsis icon for text-expander

app/assets/javascripts/vue_shared/components/expand_button.vue

@@ -1,5 +1,7 @@
 <script>
 import { __ } from '~/locale';
+import Icon from '~/vue_shared/components/icon.vue';
+
 /**
  * Port of detail_behavior expand button.
  *
@@ -12,6 +14,9 @@ import { __ } from '~/locale';
  */
 export default {
   name: 'ExpandButton',
+  components: {
+    Icon,
+  },
   data() {
     return {
       isCollapsed: true,
@@ -22,6 +27,9 @@ export default {
       return __('Click to expand text');
     },
   },
+  destroyed() {
+    this.isCollapsed = true;
+  },
   methods: {
     onClick() {
       this.isCollapsed = !this.isCollapsed;
@@ -37,7 +45,10 @@ export default {
       type="button"
       class="text-expander btn-blank"
       @click="onClick">
-      ...
+      <icon
+        :size="12"
+        name="ellipsis_h"
+      />
     </button>
     <span v-if="!isCollapsed">
       <slot name="expanded"></slot>

app/assets/stylesheets/pages/commits.scss

@@ -135,10 +135,10 @@
 }
 
 .text-expander {
-  display: inline-block;
+  display: inline-flex;
   background: $white-light;
   color: $gl-text-color-secondary;
-  padding: 0 4px;
+  padding: 1px $gl-padding-4;
   cursor: pointer;
   border: 1px solid $border-gray-dark;
   border-radius: $border-radius-default;
@@ -180,6 +180,11 @@
 .commit-content {
   padding-right: 10px;
   white-space: normal;
+
+  .commit-title {
+    display: flex;
+    align-items: center;
+  }
 }
 
 .commit-actions {
@@ -253,7 +258,6 @@
 .generic_commit_status {
   a,
   button {
-    color: $gl-text-color;
     vertical-align: baseline;
   }
 

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

@@ -34,7 +34,8 @@
           .d-block.d-sm-none
             = render_commit_status(commit, ref: ref)
         - if commit.description?
-          %button.text-expander.d-none.d-sm-inline-block.js-toggle-button{ type: "button" } ...
+          %button.text-expander.js-toggle-button
+            = sprite_icon('ellipsis_h', size: 12)
 
         .commiter
           - commit_author_link = commit_author_link(commit, avatar: false, size: 24)

app/views/projects/pipelines/_info.html.haml

@@ -29,7 +29,7 @@
       = link_to @commit.short_id, project_commit_path(@project, @pipeline.sha), class: "commit-sha js-details-short"
       = link_to("#", class: "js-details-expand d-none d-sm-none d-md-inline") do
         %span.text-expander
-          \...
+          = sprite_icon('ellipsis_h', size: 12)
       %span.js-details-content.hide
         = link_to @pipeline.sha, project_commit_path(@project, @pipeline.sha), class: "commit-sha commit-hash-full"
       = clipboard_button(text: @pipeline.sha, title: "Copy commit SHA to clipboard")

changelogs/unreleased/text-expander-icon-update.yml

@@ -0,0 +1,5 @@
+---
+title: Updated the icon for expand buttons to ellipsis
+merge_request: 18793
+author: Constance Okoghenun
+type: changed

spec/javascripts/vue_shared/components/expand_button_spec.js

@@ -19,7 +19,7 @@ describe('expand button', () => {
   });
 
   it('renders a collpased button', () => {
-    expect(vm.$el.textContent.trim()).toEqual('...');
+    expect(vm.$children[0].iconTestClass).toEqual('ic-ellipsis_h');
   });
 
   it('hides expander on click', done => {