Merge branch '229306-create-label-dropdown' into 'master'

Update create label modal to gl-buttons

Closes #229306

See merge request gitlab-org/gitlab!41707

app/assets/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue

@@ -28,21 +28,24 @@ export default {
 
 <template>
   <div class="dropdown-page-two dropdown-new-label">
-    <div class="dropdown-title">
+    <div
+      class="dropdown-title gl-display-flex gl-justify-content-space-between gl-align-items-center"
+    >
       <gl-button
         :aria-label="__('Go back')"
         category="tertiary"
-        class="dropdown-title-button dropdown-menu-back"
+        class="dropdown-menu-back"
         icon="arrow-left"
+        size="small"
       />
       {{ headerTitle }}
-      <button
+      <gl-button
         :aria-label="__('Close')"
-        type="button"
-        class="dropdown-title-button dropdown-menu-close"
-      >
-        <i aria-hidden="true" class="fa fa-times dropdown-menu-close-icon" data-hidden="true"> </i>
-      </button>
+        category="tertiary"
+        class="dropdown-menu-close"
+        icon="close"
+        size="small"
+      />
     </div>
     <div class="dropdown-content">
       <div class="dropdown-labels-error js-label-error"></div>
@@ -77,12 +80,12 @@ export default {
         />
       </div>
       <div class="clearfix">
-        <button type="button" class="btn btn-primary float-left js-new-label-btn disabled">
+        <gl-button category="secondary" class="float-left js-new-label-btn disabled">
           {{ __('Create') }}
-        </button>
-        <button type="button" class="btn btn-default float-right js-cancel-label-btn">
+        </gl-button>
+        <gl-button category="secondary" class="float-right js-cancel-label-btn">
           {{ __('Cancel') }}
-        </button>
+        </gl-button>
       </div>
     </div>
   </div>

spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js

@@ -38,9 +38,7 @@ describe('DropdownCreateLabelComponent', () => {
     });
 
     it('renders `Go back` button on component header', () => {
-      const backButtonEl = vm.$el.querySelector(
-        '.dropdown-title button.dropdown-title-button.dropdown-menu-back',
-      );
+      const backButtonEl = vm.$el.querySelector('.dropdown-title .dropdown-menu-back');
 
       expect(backButtonEl).not.toBe(null);
       expect(backButtonEl.querySelector('[data-testid="arrow-left-icon"]')).not.toBe(null);
@@ -62,12 +60,9 @@ describe('DropdownCreateLabelComponent', () => {
     });
 
     it('renders `Close` button on component header', () => {
-      const closeButtonEl = vm.$el.querySelector(
-        '.dropdown-title button.dropdown-title-button.dropdown-menu-close',
-      );
+      const closeButtonEl = vm.$el.querySelector('.dropdown-title .dropdown-menu-close');
 
       expect(closeButtonEl).not.toBe(null);
-      expect(closeButtonEl.querySelector('.fa-times.dropdown-menu-close-icon')).not.toBe(null);
     });
 
     it('renders `Name new label` input element', () => {