1 files changed, 70 insertions, 68 deletions

diff --git a/app/assets/javascripts/diffs/components/settings_dropdown.vue b/app/assets/javascripts/diffs/components/settings_dropdown.vue
index c45de481a17..78647065c8e 100644
--- a/app/assets/javascripts/diffs/components/settings_dropdown.vue
+++ b/app/assets/javascripts/diffs/components/settings_dropdown.vue
@@ -1,17 +1,24 @@
 <script>
 import { mapActions, mapGetters, mapState } from 'vuex';
-import { GlDeprecatedButton } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
+import { GlButtonGroup, GlButton, GlDropdown } from '@gitlab/ui';
+import { __ } from '~/locale';
 
 export default {
   components: {
-    GlDeprecatedButton,
-    Icon,
+    GlButtonGroup,
+    GlButton,
+    GlDropdown,
   },
   computed: {
     ...mapGetters('diffs', ['isInlineView', 'isParallelView']),
     ...mapState('diffs', ['renderTreeList', 'showWhitespace']),
   },
+  mounted() {
+    this.patchAriaLabel();
+  },
+  updated() {
+    this.patchAriaLabel();
+  },
   methods: {
     ...mapActions('diffs', [
       'setInlineDiffViewType',
@@ -19,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"
-    >
-      <icon name="settings" /> <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>