Updated horizontal ellipsis icon for text-expander

6 files changed, 28 insertions, 7 deletions

diff --git a/app/assets/javascripts/vue_shared/components/expand_button.vue b/app/assets/javascripts/vue_shared/components/expand_button.vue
index 0fdea651130..e6e92594b65 100644
--- a/app/assets/javascripts/vue_shared/components/expand_button.vue
+++ b/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>
diff --git a/app/assets/stylesheets/pages/commits.scss b/app/assets/stylesheets/pages/commits.scss
index dc8842212e0..49226ae8eac 100644
--- a/app/assets/stylesheets/pages/commits.scss
+++ b/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;
   }
 
diff --git a/app/views/projects/commits/_commit.html.haml b/app/views/projects/commits/_commit.html.haml
index 12b27eb9b66..90e55fd0fb0 100644
--- a/app/views/projects/commits/_commit.html.haml
+++ b/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)
diff --git a/app/views/projects/pipelines/_info.html.haml b/app/views/projects/pipelines/_info.html.haml
index aa53fc3ea28..04131a90a57 100644
--- a/app/views/projects/pipelines/_info.html.haml
+++ b/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")
diff --git a/changelogs/unreleased/text-expander-icon-update.yml b/changelogs/unreleased/text-expander-icon-update.yml
new file mode 100644
index 00000000000..be9dc98728f
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/spec/javascripts/vue_shared/components/expand_button_spec.js b/spec/javascripts/vue_shared/components/expand_button_spec.js
index af9693c48fd..98fee9a74a5 100644
--- a/spec/javascripts/vue_shared/components/expand_button_spec.js
+++ b/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 => {