Merge branch 'migrate-expand-button' into 'master'

Update Expand button

Closes #219806

See merge request gitlab-org/gitlab!36625

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

 <script>
-import { GlDeprecatedButton } from '@gitlab/ui';
+import { GlButton } from '@gitlab/ui';
 import { __ } from '~/locale';
-import Icon from '~/vue_shared/components/icon.vue';
 
 /**
  * Port of detail_behavior expand button.
@@ -16,8 +15,7 @@ import Icon from '~/vue_shared/components/icon.vue';
 export default {
   name: 'ExpandButton',
   components: {
-    GlDeprecatedButton,
-    Icon,
+    GlButton,
   },
   data() {
     return {
@@ -41,25 +39,23 @@ export default {
 </script>
 <template>
   <span>
-    <gl-deprecated-button
+    <gl-button
       v-show="isCollapsed"
       :aria-label="ariaLabel"
       type="button"
       class="js-text-expander-prepend text-expander btn-blank"
+      icon="ellipsis_h"
       @click="onClick"
-    >
-      <icon :size="12" name="ellipsis_h" />
-    </gl-deprecated-button>
+    />
     <span v-if="isCollapsed"> <slot name="short"></slot> </span>
     <span v-if="!isCollapsed"> <slot name="expanded"></slot> </span>
-    <gl-deprecated-button
+    <gl-button
       v-show="!isCollapsed"
       :aria-label="ariaLabel"
       type="button"
       class="js-text-expander-append text-expander btn-blank"
+      icon="ellipsis_h"
       @click="onClick"
-    >
-      <icon :size="12" name="ellipsis_h" />
-    </gl-deprecated-button>
+    />
   </span>
 </template>

spec/frontend/vue_shared/components/__snapshots__/expand_button_spec.js.snap

@@ -4,20 +4,22 @@ exports[`Expand button on click when short text is provided renders button after
 <span>
   <button
     aria-label="Click to expand text"
-    class="btn js-text-expander-prepend text-expander btn-blank btn-secondary btn-md"
+    class="btn js-text-expander-prepend text-expander btn-blank btn-default btn-md btn-icon button-ellipsis-horizontal gl-button"
     style="display: none;"
     type="button"
   >
     <!---->
      
     <svg
-      aria-hidden="true"
-      class="s12 ic-ellipsis_h"
+      class="gl-icon s16"
+      data-testid="ellipsis_h-icon"
     >
       <use
-        xlink:href="#ellipsis_h"
+        href="#ellipsis_h"
       />
     </svg>
+      
+    <!---->
   </button>
    
   <!---->
@@ -30,20 +32,22 @@ exports[`Expand button on click when short text is provided renders button after
    
   <button
     aria-label="Click to expand text"
-    class="btn js-text-expander-append text-expander btn-blank btn-secondary btn-md"
+    class="btn js-text-expander-append text-expander btn-blank btn-default btn-md btn-icon button-ellipsis-horizontal gl-button"
     style=""
     type="button"
   >
     <!---->
      
     <svg
-      aria-hidden="true"
-      class="s12 ic-ellipsis_h"
+      class="gl-icon s16"
+      data-testid="ellipsis_h-icon"
     >
       <use
-        xlink:href="#ellipsis_h"
+        href="#ellipsis_h"
       />
     </svg>
+      
+    <!---->
   </button>
 </span>
 `;
@@ -52,19 +56,21 @@ exports[`Expand button when short text is provided renders button before text 1`
 <span>
   <button
     aria-label="Click to expand text"
-    class="btn js-text-expander-prepend text-expander btn-blank btn-secondary btn-md"
+    class="btn js-text-expander-prepend text-expander btn-blank btn-default btn-md btn-icon button-ellipsis-horizontal gl-button"
     type="button"
   >
     <!---->
      
     <svg
-      aria-hidden="true"
-      class="s12 ic-ellipsis_h"
+      class="gl-icon s16"
+      data-testid="ellipsis_h-icon"
     >
       <use
-        xlink:href="#ellipsis_h"
+        href="#ellipsis_h"
       />
     </svg>
+      
+    <!---->
   </button>
    
   <span>
@@ -77,20 +83,22 @@ exports[`Expand button when short text is provided renders button before text 1`
    
   <button
     aria-label="Click to expand text"
-    class="btn js-text-expander-append text-expander btn-blank btn-secondary btn-md"
+    class="btn js-text-expander-append text-expander btn-blank btn-default btn-md btn-icon button-ellipsis-horizontal gl-button"
     style="display: none;"
     type="button"
   >
     <!---->
      
     <svg
-      aria-hidden="true"
-      class="s12 ic-ellipsis_h"
+      class="gl-icon s16"
+      data-testid="ellipsis_h-icon"
     >
       <use
-        xlink:href="#ellipsis_h"
+        href="#ellipsis_h"
       />
     </svg>
+      
+    <!---->
   </button>
 </span>
 `;