Merge branch 'viewer-switcher-icon' into 'master'

Update viewer switcher button icon

Closes #219868 and #229979

See merge request gitlab-org/gitlab!37369

app/assets/javascripts/blob/components/blob_header.vue

@@ -71,7 +71,7 @@ export default {
       </template>
     </blob-filepath>
 
-    <div class="file-actions d-none d-sm-flex">
+    <div class="gl-display-none gl-display-sm-flex">
       <viewer-switcher v-if="showViewerSwitcher" v-model="viewer" />
 
       <slot name="actions"></slot>

app/assets/javascripts/blob/components/blob_header_default_actions.vue

 <script>
-import { GlDeprecatedButton, GlButtonGroup, GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { GlButton, GlButtonGroup, GlTooltipDirective } from '@gitlab/ui';
 import {
   BTN_COPY_CONTENTS_TITLE,
   BTN_DOWNLOAD_TITLE,
@@ -10,9 +10,8 @@ import {
 
 export default {
   components: {
-    GlIcon,
     GlButtonGroup,
-    GlDeprecatedButton,
+    GlButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -48,7 +47,7 @@ export default {
 </script>
 <template>
   <gl-button-group>
-    <gl-deprecated-button
+    <gl-button
       v-if="!hasRenderError"
       v-gl-tooltip.hover
       :aria-label="$options.BTN_COPY_CONTENTS_TITLE"
@@ -56,26 +55,29 @@ export default {
       :disabled="copyDisabled"
       data-clipboard-target="#blob-code-content"
       data-testid="copyContentsButton"
-    >
-      <gl-icon name="copy-to-clipboard" :size="14" />
-    </gl-deprecated-button>
-    <gl-deprecated-button
+      icon="copy-to-clipboard"
+      category="primary"
+      variant="default"
+    />
+    <gl-button
       v-gl-tooltip.hover
       :aria-label="$options.BTN_RAW_TITLE"
       :title="$options.BTN_RAW_TITLE"
       :href="rawPath"
       target="_blank"
-    >
-      <gl-icon name="doc-code" :size="14" />
-    </gl-deprecated-button>
-    <gl-deprecated-button
+      icon="doc-code"
+      category="primary"
+      variant="default"
+    />
+    <gl-button
       v-gl-tooltip.hover
       :aria-label="$options.BTN_DOWNLOAD_TITLE"
       :title="$options.BTN_DOWNLOAD_TITLE"
       :href="downloadUrl"
       target="_blank"
-    >
-      <gl-icon name="download" :size="14" />
-    </gl-deprecated-button>
+      icon="download"
+      category="primary"
+      variant="default"
+    />
   </gl-button-group>
 </template>

app/assets/javascripts/blob/components/blob_header_viewer_switcher.vue

 <script>
-import { GlButton, GlButtonGroup, GlIcon, GlTooltipDirective } from '@gitlab/ui';
+import { GlButton, GlButtonGroup, GlTooltipDirective } from '@gitlab/ui';
 import {
   RICH_BLOB_VIEWER,
   RICH_BLOB_VIEWER_TITLE,
@@ -9,7 +9,6 @@ import {
 
 export default {
   components: {
-    GlIcon,
     GlButtonGroup,
     GlButton,
   },
@@ -52,19 +51,21 @@ export default {
       :title="$options.SIMPLE_BLOB_VIEWER_TITLE"
       :selected="isSimpleViewer"
       :class="{ active: isSimpleViewer }"
+      icon="code"
+      category="primary"
+      variant="default"
       @click="switchToViewer($options.SIMPLE_BLOB_VIEWER)"
-    >
-      <gl-icon name="code" :size="14" />
-    </gl-button>
+    />
     <gl-button
       v-gl-tooltip.hover
       :aria-label="$options.RICH_BLOB_VIEWER_TITLE"
       :title="$options.RICH_BLOB_VIEWER_TITLE"
       :selected="isRichViewer"
       :class="{ active: isRichViewer }"
+      icon="document"
+      category="primary"
+      variant="default"
       @click="switchToViewer($options.RICH_BLOB_VIEWER)"
-    >
-      <gl-icon name="document" :size="14" />
-    </gl-button>
+    />
   </gl-button-group>
 </template>

spec/frontend/blob/components/__snapshots__/blob_header_spec.js.snap

@@ -9,7 +9,7 @@ exports[`Blob Header Default Actions rendering matches the snapshot 1`] = `
   />
    
   <div
-    class="file-actions d-none d-sm-flex"
+    class="gl-display-none gl-display-sm-flex"
   >
     <viewer-switcher-stub
       value="simple"

spec/frontend/blob/components/blob_header_default_actions_spec.js

@@ -6,7 +6,7 @@ import {
   BTN_RAW_TITLE,
   RICH_BLOB_VIEWER,
 } from '~/blob/components/constants';
-import { GlButtonGroup, GlDeprecatedButton } from '@gitlab/ui';
+import { GlButtonGroup, GlButton } from '@gitlab/ui';
 import { Blob } from './mock_data';
 
 describe('Blob Header Default Actions', () => {
@@ -26,7 +26,7 @@ describe('Blob Header Default Actions', () => {
   beforeEach(() => {
     createComponent();
     btnGroup = wrapper.find(GlButtonGroup);
-    buttons = wrapper.findAll(GlDeprecatedButton);
+    buttons = wrapper.findAll(GlButton);
   });
 
   afterEach(() => {
@@ -61,7 +61,7 @@ describe('Blob Header Default Actions', () => {
       createComponent({
         activeViewer: RICH_BLOB_VIEWER,
       });
-      buttons = wrapper.findAll(GlDeprecatedButton);
+      buttons = wrapper.findAll(GlButton);
 
       expect(buttons.at(0).attributes('disabled')).toBeTruthy();
     });