Merge branch 'marcel-update-deprecated-button-3' into 'master'

Update gldeprecatedbutton to glbutton

Closes #219775

See merge request gitlab-org/gitlab!38763

app/assets/javascripts/jobs/components/job_log_controllers.vue

 <script>
 /* eslint-disable vue/no-v-html */
-import { GlTooltipDirective, GlLink, GlDeprecatedButton, GlIcon } from '@gitlab/ui';
+import { GlTooltipDirective, GlLink, GlButton } from '@gitlab/ui';
 import { polyfillSticky } from '~/lib/utils/sticky';
 import { numberToHumanSize } from '~/lib/utils/number_utils';
 import { __, sprintf } from '~/locale';
@@ -8,9 +8,8 @@ import scrollDown from '../svg/scroll_down.svg';
 
 export default {
   components: {
-    GlIcon,
     GlLink,
-    GlDeprecatedButton,
+    GlButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -87,18 +86,17 @@ export default {
 
     <div class="controllers float-right">
       <!-- links -->
-      <gl-link
+      <gl-button
         v-if="rawPath"
         v-gl-tooltip.body
         :title="s__('Job|Show complete raw')"
         :href="rawPath"
         class="controllers-buttons"
         data-testid="job-raw-link-controller"
-      >
-        <gl-icon name="doc-text" />
-      </gl-link>
+        icon="doc-text"
+      />
 
-      <gl-link
+      <gl-button
         v-if="erasePath"
         v-gl-tooltip.body
         :title="s__('Job|Erase job log')"
@@ -107,30 +105,28 @@ export default {
         class="controllers-buttons"
         data-testid="job-log-erase-link"
         data-method="post"
-      >
-        <gl-icon name="remove" />
-      </gl-link>
+        icon="remove"
+      />
       <!-- eo links -->
 
       <!-- scroll buttons -->
       <div v-gl-tooltip :title="s__('Job|Scroll to top')" class="controllers-buttons">
-        <gl-deprecated-button
+        <gl-button
           :disabled="isScrollTopDisabled"
-          type="button"
           class="btn-scroll btn-transparent btn-blank"
           data-testid="job-controller-scroll-top"
+          icon="scroll_up"
           @click="handleScrollToTop"
-        >
-          <gl-icon name="scroll_up" />
-        </gl-deprecated-button>
+        />
       </div>
 
       <div v-gl-tooltip :title="s__('Job|Scroll to bottom')" class="controllers-buttons">
-        <gl-deprecated-button
+        <gl-button
           :disabled="isScrollBottomDisabled"
           class="js-scroll-bottom btn-scroll btn-transparent btn-blank"
-          :class="{ animate: isScrollingDown }"
           data-testid="job-controller-scroll-bottom"
+          icon="scroll_down"
+          :class="{ animate: isScrollingDown }"
           @click="handleScrollToBottom"
           v-html="$options.scrollDown"
         />

app/assets/stylesheets/pages/builds.scss

@@ -63,7 +63,7 @@
   }
 
   .top-bar {
-    @include build-trace-top-bar(35px);
+    @include build-trace-top-bar(50px);
 
     &.has-archived-block {
       top: $header-height + 28px;