Style ToastUI contextual menu's

Styled the menus to match design mockups

app/assets/javascripts/vue_shared/components/rich_content_editor/editor_service.js

@@ -22,10 +22,9 @@ export const generateToolbarItem = config => {
   return {
     type: 'button',
     options: {
-      el: buildWrapper({ props: { icon }, class: classes }),
+      el: buildWrapper({ props: { icon, tooltip }, class: classes }),
       event,
       command,
-      tooltip,
     },
   };
 };

app/assets/javascripts/vue_shared/components/rich_content_editor/toolbar_item.vue

 <script>
-import { GlIcon } from '@gitlab/ui';
+import { GlIcon, GlTooltipDirective } from '@gitlab/ui';
 
 export default {
   components: {
     GlIcon,
   },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
   props: {
     icon: {
       type: String,
       required: true,
     },
+    tooltip: {
+      type: String,
+      required: true,
+    },
   },
 };
 </script>
 <template>
-  <button class="p-0 gl-display-flex toolbar-button">
-    <gl-icon class="gl-mx-auto" :name="icon" />
+  <button v-gl-tooltip="{ title: tooltip }" class="p-0 gl-display-flex toolbar-button">
+    <gl-icon class="gl-mx-auto gl-align-self-center" :name="icon" />
   </button>
 </template>

app/assets/stylesheets/components/rich_content_editor.scss

-// Overrides styles from ToastUI editor
+/**
+* Overrides styles from ToastUI editor
+*/
+
+// Toolbar buttons
 .tui-editor-defaultUI-toolbar .toolbar-button {
   color: $gl-gray-600;
   border: 0;
@@ -9,3 +13,19 @@
     border: 0;
   }
 }
+
+// Contextual menu's & popups
+.tui-editor-defaultUI .tui-popup-wrapper {
+  @include gl-overflow-hidden;
+  @include gl-rounded-base;
+  @include gl-border-gray-400;
+
+  hr {
+    @include gl-m-0;
+    @include gl-bg-gray-400;
+  }
+
+  button {
+    @include gl-text-gray-800;
+  }
+}

changelogs/unreleased/216797-style-toastui-menus.yml

+---
+title: Style ToastUI contextual menus
+merge_request: 33719
+author:
+type: changed

spec/frontend/vue_shared/components/rich_content_editor/editor_service_spec.js

@@ -29,10 +29,6 @@ describe('Editor Service', () => {
       expect(generatedItem.options.command).toBe(config.command);
     });
 
-    it('generates the correct tooltip', () => {
-      expect(generatedItem.options.tooltip).toBe(config.tooltip);
-    });
-
     it('generates the correct event', () => {
       expect(generatedItem.options.event).toBe(config.event);
     });

spec/frontend/vue_shared/components/rich_content_editor/toolbar_item_spec.js

 import { shallowMount } from '@vue/test-utils';
+import { createMockDirective, getBinding } from 'helpers/vue_mock_directive';
 import { GlIcon } from '@gitlab/ui';
 import ToolbarItem from '~/vue_shared/components/rich_content_editor/toolbar_item.vue';
 
@@ -9,33 +10,45 @@ describe('Toolbar Item', () => {
   const findButton = () => wrapper.find('button');
 
   const buildWrapper = propsData => {
-    wrapper = shallowMount(ToolbarItem, { propsData });
+    wrapper = shallowMount(ToolbarItem, {
+      propsData,
+      directives: {
+        GlTooltip: createMockDirective(),
+      },
+    });
   };
 
   describe.each`
-    icon
-    ${'heading'}
-    ${'bold'}
-    ${'italic'}
-    ${'strikethrough'}
-    ${'quote'}
-    ${'link'}
-    ${'doc-code'}
-    ${'list-bulleted'}
-    ${'list-numbered'}
-    ${'list-task'}
-    ${'list-indent'}
-    ${'list-outdent'}
-    ${'dash'}
-    ${'table'}
-    ${'code'}
-  `('toolbar item component', ({ icon }) => {
-    beforeEach(() => buildWrapper({ icon }));
+    icon               | tooltip
+    ${'heading'}       | ${'Headings'}
+    ${'bold'}          | ${'Add bold text'}
+    ${'italic'}        | ${'Add italic text'}
+    ${'strikethrough'} | ${'Add strikethrough text'}
+    ${'quote'}         | ${'Insert a quote'}
+    ${'link'}          | ${'Add a link'}
+    ${'doc-code'}      | ${'Insert a code block'}
+    ${'list-bulleted'} | ${'Add a bullet list'}
+    ${'list-numbered'} | ${'Add a numbered list'}
+    ${'list-task'}     | ${'Add a task list'}
+    ${'list-indent'}   | ${'Indent'}
+    ${'list-outdent'}  | ${'Outdent'}
+    ${'dash'}          | ${'Add a line'}
+    ${'table'}         | ${'Add a table'}
+    ${'code'}          | ${'Insert an image'}
+    ${'code'}          | ${'Insert inline code'}
+  `('toolbar item component', ({ icon, tooltip }) => {
+    beforeEach(() => buildWrapper({ icon, tooltip }));
 
     it('renders a toolbar button', () => {
       expect(findButton().exists()).toBe(true);
     });
 
+    it('renders the correct tooltip', () => {
+      const buttonTooltip = getBinding(wrapper.element, 'gl-tooltip');
+      expect(buttonTooltip).toBeDefined();
+      expect(buttonTooltip.value.title).toBe(tooltip);
+    });
+
     it(`renders the ${icon} icon`, () => {
       expect(findIcon().exists()).toBe(true);
       expect(findIcon().props().name).toBe(icon);