Migrate buttons to new components in …settings_dropdown.vue

app/assets/javascripts/diffs/components/settings_dropdown.vue

 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
-import { GlDeprecatedButton, GlIcon } from '@gitlab/ui';
+import { GlButtonGroup, GlButton, GlDropdown } from '@gitlab/ui';
+import { __ } from '~/locale';
 
 export default {
   components: {
-    GlDeprecatedButton,
-    GlIcon,
+    GlButtonGroup,
+    GlButton,
+    GlDropdown,
   },
   computed: {
     ...mapGetters('diffs', ['isInlineView', 'isParallelView']),
     ...mapState('diffs', ['renderTreeList', 'showWhitespace']),
   },
+  mounted() {
+    this.patchAriaLabel();
+  },
+  updated() {
+    this.patchAriaLabel();
+  },
   methods: {
     ...mapActions('diffs', [
       'setInlineDiffViewType',
@@ -18,74 +26,69 @@ export default {
       'setRenderTreeList',
       'setShowWhitespace',
     ]),
+    patchAriaLabel() {
+      this.$el
+        .querySelector('.js-show-diff-settings')
+        .setAttribute('aria-label', __('Diff view settings'));
+    },
   },
 };
 </script>
 
 <template>
-  <div class="dropdown">
-    <button
-      type="button"
-      class="btn btn-default js-show-diff-settings"
-      data-toggle="dropdown"
-      data-display="static"
-    >
-      <gl-icon name="settings" /> <gl-icon name="chevron-down" />
-    </button>
-    <div class="dropdown-menu dropdown-menu-right p-2 pt-3 pb-3">
-      <div>
-        <span class="bold d-block mb-1">{{ __('File browser') }}</span>
-        <div class="btn-group d-flex">
-          <gl-deprecated-button
-            :class="{ active: !renderTreeList }"
-            class="w-100 js-list-view"
-            @click="setRenderTreeList(false)"
-          >
-            {{ __('List view') }}
-          </gl-deprecated-button>
-          <gl-deprecated-button
-            :class="{ active: renderTreeList }"
-            class="w-100 js-tree-view"
-            @click="setRenderTreeList(true)"
-          >
-            {{ __('Tree view') }}
-          </gl-deprecated-button>
-        </div>
-      </div>
-      <div class="mt-2">
-        <span class="bold d-block mb-1">{{ __('Compare changes') }}</span>
-        <div class="btn-group d-flex js-diff-view-buttons">
-          <gl-deprecated-button
-            id="inline-diff-btn"
-            :class="{ active: isInlineView }"
-            class="w-100 js-inline-diff-button"
-            data-view-type="inline"
-            @click="setInlineDiffViewType"
-          >
-            {{ __('Inline') }}
-          </gl-deprecated-button>
-          <gl-deprecated-button
-            id="parallel-diff-btn"
-            :class="{ active: isParallelView }"
-            class="w-100 js-parallel-diff-button"
-            data-view-type="parallel"
-            @click="setParallelDiffViewType"
-          >
-            {{ __('Side-by-side') }}
-          </gl-deprecated-button>
-        </div>
-      </div>
-      <div class="mt-2">
-        <label class="mb-0">
-          <input
-            id="show-whitespace"
-            type="checkbox"
-            :checked="showWhitespace"
-            @change="setShowWhitespace({ showWhitespace: $event.target.checked, pushState: true })"
-          />
-          {{ __('Show whitespace changes') }}
-        </label>
-      </div>
+  <gl-dropdown icon="settings" toggle-class="js-show-diff-settings" right>
+    <div class="gl-px-3">
+      <span class="gl-font-weight-bold gl-display-block gl-mb-2">{{ __('File browser') }}</span>
+      <gl-button-group class="gl-display-flex">
+        <gl-button
+          :class="{ selected: !renderTreeList }"
+          class="gl-w-half js-list-view"
+          @click="setRenderTreeList(false)"
+        >
+          {{ __('List view') }}
+        </gl-button>
+        <gl-button
+          :class="{ selected: renderTreeList }"
+          class="gl-w-half js-tree-view"
+          @click="setRenderTreeList(true)"
+        >
+          {{ __('Tree view') }}
+        </gl-button>
+      </gl-button-group>
+    </div>
+    <div class="gl-mt-3 gl-px-3">
+      <span class="gl-font-weight-bold gl-display-block gl-mb-2">{{ __('Compare changes') }}</span>
+      <gl-button-group class="gl-display-flex js-diff-view-buttons">
+        <gl-button
+          id="inline-diff-btn"
+          :class="{ selected: isInlineView }"
+          class="gl-w-half js-inline-diff-button"
+          data-view-type="inline"
+          @click="setInlineDiffViewType"
+        >
+          {{ __('Inline') }}
+        </gl-button>
+        <gl-button
+          id="parallel-diff-btn"
+          :class="{ selected: isParallelView }"
+          class="gl-w-half js-parallel-diff-button"
+          data-view-type="parallel"
+          @click="setParallelDiffViewType"
+        >
+          {{ __('Side-by-side') }}
+        </gl-button>
+      </gl-button-group>
+    </div>
+    <div class="gl-mt-3 gl-px-3">
+      <label class="gl-mb-0">
+        <input
+          id="show-whitespace"
+          type="checkbox"
+          :checked="showWhitespace"
+          @change="setShowWhitespace({ showWhitespace: $event.target.checked, pushState: true })"
+        />
+        {{ __('Show whitespace changes') }}
+      </label>
     </div>
-  </div>
+  </gl-dropdown>
 </template>

changelogs/unreleased/229320-migrate-bootstrap-button-to-gitlab-ui-glbutton-in-app-assets-javas.yml

+---
+title: Migrating buttons and classes to match GitLab UI
+merge_request: 40409
+author:
+type: other

locale/gitlab.pot

@@ -8586,6 +8586,9 @@ msgstr ""
 msgid "Diff limits"
 msgstr ""
 
+msgid "Diff view settings"
+msgstr ""
+
 msgid "Difference between start date and now"
 msgstr ""
 

spec/frontend/diffs/components/settings_dropdown_spec.js

@@ -7,7 +7,7 @@ import { PARALLEL_DIFF_VIEW_TYPE, INLINE_DIFF_VIEW_TYPE } from '~/diffs/constant
 const localVue = createLocalVue();
 localVue.use(Vuex);
 
-describe('Diff settiings dropdown component', () => {
+describe('Diff settings dropdown component', () => {
   let vm;
   let actions;
 
@@ -61,50 +61,50 @@ describe('Diff settiings dropdown component', () => {
       expect(actions.setRenderTreeList).toHaveBeenCalledWith(expect.anything(), true, undefined);
     });
 
-    it('sets list button as active when renderTreeList is false', () => {
+    it('sets list button as selected when renderTreeList is false', () => {
       createComponent(store => {
         Object.assign(store.state.diffs, {
           renderTreeList: false,
         });
       });
 
-      expect(vm.find('.js-list-view').classes('active')).toBe(true);
-      expect(vm.find('.js-tree-view').classes('active')).toBe(false);
+      expect(vm.find('.js-list-view').classes('selected')).toBe(true);
+      expect(vm.find('.js-tree-view').classes('selected')).toBe(false);
     });
 
-    it('sets tree button as active when renderTreeList is true', () => {
+    it('sets tree button as selected when renderTreeList is true', () => {
       createComponent(store => {
         Object.assign(store.state.diffs, {
           renderTreeList: true,
         });
       });
 
-      expect(vm.find('.js-list-view').classes('active')).toBe(false);
-      expect(vm.find('.js-tree-view').classes('active')).toBe(true);
+      expect(vm.find('.js-list-view').classes('selected')).toBe(false);
+      expect(vm.find('.js-tree-view').classes('selected')).toBe(true);
     });
   });
 
   describe('compare changes', () => {
-    it('sets inline button as active', () => {
+    it('sets inline button as selected', () => {
       createComponent(store => {
         Object.assign(store.state.diffs, {
           diffViewType: INLINE_DIFF_VIEW_TYPE,
         });
       });
 
-      expect(vm.find('.js-inline-diff-button').classes('active')).toBe(true);
-      expect(vm.find('.js-parallel-diff-button').classes('active')).toBe(false);
+      expect(vm.find('.js-inline-diff-button').classes('selected')).toBe(true);
+      expect(vm.find('.js-parallel-diff-button').classes('selected')).toBe(false);
     });
 
-    it('sets parallel button as active', () => {
+    it('sets parallel button as selected', () => {
       createComponent(store => {
         Object.assign(store.state.diffs, {
           diffViewType: PARALLEL_DIFF_VIEW_TYPE,
         });
       });
 
-      expect(vm.find('.js-inline-diff-button').classes('active')).toBe(false);
-      expect(vm.find('.js-parallel-diff-button').classes('active')).toBe(true);
+      expect(vm.find('.js-inline-diff-button').classes('selected')).toBe(false);
+      expect(vm.find('.js-parallel-diff-button').classes('selected')).toBe(true);
     });
 
     it('calls setInlineDiffViewType when clicking inline button', () => {