Testing and base styles for epic label select

- Replace some CSS with utility classes
- Make sure all color selector look nice
- Improve testing

app/assets/javascripts/vue_shared/components/sidebar/labels_select_vue/dropdown_contents_create_view.vue

@@ -88,12 +88,16 @@ export default {
           @click.prevent="handleColorClick(color)"
         />
       </div>
-      <div class="color-input-container d-flex">
+      <div class="color-input-container gl-display-flex">
         <span
           class="dropdown-label-color-preview position-relative position-relative d-inline-block"
           :style="{ backgroundColor: selectedColor }"
         ></span>
-        <gl-form-input v-model.trim="selectedColor" :placeholder="__('Use custom color #FF0000')" />
+        <gl-form-input
+          v-model.trim="selectedColor"
+          class="gl-rounded-top-left-none gl-rounded-bottom-left-none"
+          :placeholder="__('Use custom color #FF0000')"
+        />
       </div>
     </div>
     <div class="dropdown-actions clearfix pt-2 px-2">

app/assets/stylesheets/framework/dropdowns.scss

@@ -1089,6 +1089,10 @@ header.header-content .dropdown-menu.frequent-items-dropdown-menu {
     .dropdown-label-color-preview {
       border: 1px solid $gray-100;
       border-right: 0;
+
+      &[style] {
+        border-color: transparent;
+      }
     }
   }
 }

ee/app/assets/stylesheets/pages/epics.scss

@@ -150,15 +150,4 @@
   .dropdown-footer .list-unstyled {
     @include gl-m-0;
   }
-
-  .color-input-container {
-    .dropdown-label-color-preview[style] {
-      @include gl-border-none;
-    }
-
-    .gl-form-input {
-      @include gl-rounded-top-left-none;
-      @include gl-rounded-bottom-left-none;
-    }
-  }
 }

spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_button_spec.js

 import Vuex from 'vuex';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 
-import { GlIcon } from '@gitlab/ui';
+import { GlIcon, GlButton } from '@gitlab/ui';
 import DropdownButton from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_button.vue';
 
 import labelSelectModule from '~/vue_shared/components/sidebar/labels_select_vue/store';
@@ -34,6 +34,10 @@ describe('DropdownButton', () => {
     wrapper.destroy();
   });
 
+  const findDropdownButton = () => wrapper.find(GlButton);
+  const findDropdownText = () => wrapper.find('.dropdown-toggle-text');
+  const findDropdownIcon = () => wrapper.find(GlIcon);
+
   describe('methods', () => {
     describe('handleButtonClick', () => {
       it.each`
@@ -41,24 +45,19 @@ describe('DropdownButton', () => {
         ${'standalone'}
         ${'embedded'}
       `(
-        'calls action `toggleDropdownContents` and stops event propagation when `state.variant` is "$variant"',
+        'toggles dropdown content and stops event propagation when `state.variant` is "$variant"',
         ({ variant }) => {
-          const event = {
-            stopPropagation: jest.fn(),
-          };
+          const event = { stopPropagation: jest.fn() };
+
           wrapper = createComponent({
             ...mockConfig,
             variant,
           });
 
-          jest.spyOn(wrapper.vm, 'toggleDropdownContents');
+          findDropdownButton().vm.$emit('click', event);
 
-          wrapper.vm.handleButtonClick(event);
-
-          expect(wrapper.vm.toggleDropdownContents).toHaveBeenCalled();
+          expect(store.state.showDropdownContents).toBe(true);
           expect(event.stopPropagation).toHaveBeenCalled();
-
-          wrapper.destroy();
         },
       );
     });
@@ -70,7 +69,7 @@ describe('DropdownButton', () => {
     });
 
     it('renders default button text element', () => {
-      const dropdownTextEl = wrapper.find('.dropdown-toggle-text');
+      const dropdownTextEl = findDropdownText();
 
       expect(dropdownTextEl.exists()).toBe(true);
       expect(dropdownTextEl.text()).toBe('Label');
@@ -78,7 +77,7 @@ describe('DropdownButton', () => {
 
     it('renders provided button text element', () => {
       store.state.dropdownButtonText = 'Custom label';
-      const dropdownTextEl = wrapper.find('.dropdown-toggle-text');
+      const dropdownTextEl = findDropdownText();
 
       return wrapper.vm.$nextTick().then(() => {
         expect(dropdownTextEl.text()).toBe('Custom label');
@@ -86,7 +85,7 @@ describe('DropdownButton', () => {
     });
 
     it('renders chevron icon element', () => {
-      const iconEl = wrapper.find(GlIcon);
+      const iconEl = findDropdownIcon();
 
       expect(iconEl.exists()).toBe(true);
       expect(iconEl.props('name')).toBe('chevron-down');

spec/frontend/vue_shared/components/sidebar/labels_select_vue/labels_select_root_spec.js

@@ -96,15 +96,13 @@ describe('LabelsSelectRoot', () => {
     `(
       'renders component root element with CSS class `$cssClass` when `state.variant` is "$variant"',
       ({ variant, cssClass }) => {
-        const wrapperStandalone = createComponent({
+        wrapper = createComponent({
           ...mockConfig,
           variant,
         });
 
-        return wrapperStandalone.vm.$nextTick(() => {
-          expect(wrapperStandalone.classes()).toContain(cssClass);
-
-          wrapperStandalone.destroy();
+        return wrapper.vm.$nextTick(() => {
+          expect(wrapper.classes()).toContain(cssClass);
         });
       },
     );