Merge branch '329568-update-md-header-buttons' into 'master'

Migrate md header buttons to gl-buttons

See merge request gitlab-org/gitlab!67872

app/assets/javascripts/vue_shared/components/markdown/header.vue

 <script>
-import { GlPopover, GlButton, GlTooltipDirective, GlIcon } from '@gitlab/ui';
+import { GlPopover, GlButton, GlTooltipDirective } from '@gitlab/ui';
 import $ from 'jquery';
 import { keysFor, BOLD_TEXT, ITALIC_TEXT, LINK_TEXT } from '~/behaviors/shortcuts/keybindings';
 import { getSelectedFragment } from '~/lib/utils/common_utils';
@@ -10,7 +10,6 @@ import ToolbarButton from './toolbar_button.vue';
 export default {
   components: {
     ToolbarButton,
-    GlIcon,
     GlPopover,
     GlButton,
   },
@@ -46,6 +45,7 @@ export default {
   data() {
     return {
       tag: '> ',
+      suggestPopoverVisible: false,
     };
   },
   computed: {
@@ -76,15 +76,27 @@ export default {
       return this.isMac ? '⌘' : s__('KeyboardKey|Ctrl+');
     },
   },
+  watch: {
+    showSuggestPopover() {
+      this.updateSuggestPopoverVisibility();
+    },
+  },
   mounted() {
     $(document).on('markdown-preview:show.vue', this.previewMarkdownTab);
     $(document).on('markdown-preview:hide.vue', this.writeMarkdownTab);
+
+    this.updateSuggestPopoverVisibility();
   },
   beforeDestroy() {
     $(document).off('markdown-preview:show.vue', this.previewMarkdownTab);
     $(document).off('markdown-preview:hide.vue', this.writeMarkdownTab);
   },
   methods: {
+    async updateSuggestPopoverVisibility() {
+      await this.$nextTick();
+
+      this.suggestPopoverVisible = this.showSuggestPopover && this.canSuggest;
+    },
     isValid(form) {
       return (
         !form ||
@@ -153,7 +165,6 @@ export default {
         </button>
       </li>
       <li :class="{ active: !previewMarkdown }" class="md-header-toolbar">
-        <div class="d-inline-block">
         <toolbar-button
           tag="**"
           :button-title="
@@ -177,8 +188,6 @@ export default {
           icon="quote"
           @click="handleQuote"
         />
-        </div>
-        <div class="d-inline-block ml-md-2 ml-0">
         <template v-if="canSuggest">
           <toolbar-button
             ref="suggestButton"
@@ -193,11 +202,11 @@ export default {
             @click="handleSuggestDismissed"
           />
           <gl-popover
-              v-if="showSuggestPopover && $refs.suggestButton"
-              :target="$refs.suggestButton"
+            v-if="suggestPopoverVisible"
+            :target="$refs.suggestButton.$el"
             :css-classes="['diff-suggest-popover']"
             placement="bottom"
-              :show="showSuggestPopover"
+            :show="suggestPopoverVisible"
           >
             <strong>{{ __('New! Suggest changes directly') }}</strong>
             <p class="mb-2">
@@ -210,7 +219,7 @@ export default {
             <gl-button
               variant="info"
               category="primary"
-                size="sm"
+              size="small"
               @click="handleSuggestDismissed"
             >
               {{ __('Got it') }}
@@ -227,8 +236,6 @@ export default {
           :shortcuts="$options.shortcuts.link"
           icon="link"
         />
-        </div>
-        <div class="d-inline-block ml-md-2 ml-0">
         <toolbar-button
           :prepend="true"
           tag="- "
@@ -260,20 +267,12 @@ export default {
           :button-title="__('Add a table')"
           icon="table"
         />
-        </div>
-        <div class="d-inline-block ml-md-2 ml-0">
-          <button
-            v-gl-tooltip
-            :aria-label="__('Go full screen')"
-            class="toolbar-btn toolbar-fullscreen-btn js-zen-enter"
-            data-container="body"
-            tabindex="-1"
-            :title="__('Go full screen')"
-            type="button"
-          >
-            <gl-icon name="maximize" />
-          </button>
-        </div>
+        <toolbar-button
+          class="js-zen-enter"
+          :prepend="true"
+          :button-title="__('Go full screen')"
+          icon="maximize"
+        />
       </li>
     </ul>
   </div>

app/assets/javascripts/vue_shared/components/markdown/toolbar_button.vue

 <script>
-import { GlTooltipDirective, GlIcon } from '@gitlab/ui';
+import { GlTooltipDirective, GlButton } from '@gitlab/ui';
 
 export default {
   components: {
-    GlIcon,
+    GlButton,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -19,7 +19,8 @@ export default {
     },
     tag: {
       type: String,
-      required: true,
+      required: false,
+      default: '',
     },
     tagBlock: {
       type: String,
@@ -71,7 +72,7 @@ export default {
 </script>
 
 <template>
-  <button
+  <gl-button
     v-gl-tooltip
     :data-md-tag="tag"
     :data-md-cursor-offset="cursorOffset"
@@ -82,11 +83,11 @@ export default {
     :data-md-shortcuts="shortcutsString"
     :title="buttonTitle"
     :aria-label="buttonTitle"
+    :icon="icon"
     type="button"
-    class="toolbar-btn js-md"
+    category="tertiary"
+    class="js-md"
     data-container="body"
     @click="() => $emit('click')"
-  >
-    <gl-icon :name="icon" />
-  </button>
+  />
 </template>

app/assets/stylesheets/framework/animations.scss

@@ -98,7 +98,6 @@
 }
 
 .note-action-button,
-.toolbar-btn,
 .dropdown-toggle-caret {
   @include transition(color);
 }

app/assets/stylesheets/framework/markdown_area.scss

@@ -131,36 +131,6 @@
   width: 100%;
 }
 
-.toolbar-btn {
-  float: left;
-  padding: 0 7px;
-  background: transparent;
-  border: 0;
-  outline: 0;
-
-  svg {
-    width: 14px;
-    height: 14px;
-    vertical-align: middle;
-    fill: $gl-text-color-secondary;
-  }
-
-  &:hover,
-  &:focus {
-    svg {
-      fill: $blue-600;
-    }
-  }
-}
-
-.toolbar-fullscreen-btn {
-  margin-right: -5px;
-
-  @include media-breakpoint-down(xs) {
-    margin-right: 0;
-  }
-}
-
 .md-suggestion-diff {
   display: table !important;
   border: 1px solid $border-color !important;

app/helpers/markup_helper.rb

@@ -250,7 +250,7 @@ module MarkupHelper
     data = options[:data].merge({ container: 'body' })
     content_tag :button,
       type: 'button',
-      class: 'toolbar-btn js-md has-tooltip',
+      class: 'gl-button btn btn-default-tertiary btn-icon js-md has-tooltip',
       data: data,
       title: options[:title],
       aria: { label: options[:title] } do

app/views/shared/blob/_markdown_buttons.html.haml

@@ -24,5 +24,5 @@
                               title: _("Add a collapsible section") })
   = markdown_toolbar_button({ icon: "table", data: { "md-tag" => "| header | header |\n| ------ | ------ |\n| cell | cell |\n| cell | cell |", "md-prepend" => true }, title: _("Add a table") })
   - if show_fullscreen_button
-    %button.toolbar-btn.toolbar-fullscreen-btn.js-zen-enter.has-tooltip{ type: "button", tabindex: -1, "aria-label": "Go full screen", title: _("Go full screen"), data: { container: "body" } }
+    %button.gl-button.btn.btn-default-tertiary.btn-icon.js-zen-enter.has-tooltip{ type: "button", tabindex: -1, "aria-label": "Go full screen", title: _("Go full screen"), data: { container: "body" } }
       = sprite_icon("maximize")

spec/features/projects/tags/user_edits_tags_spec.rb

@@ -55,7 +55,7 @@ RSpec.describe 'Project > Tags', :js do
           note_textarea = page.find('.js-gfm-input')
 
           # Click on Bold button
-          page.find('.md-header-toolbar button.toolbar-btn:first-child').click
+          page.find('.md-header-toolbar button:first-child').click
 
           expect(note_textarea.value).to eq('****')
         end

spec/frontend/vue_shared/components/markdown/toolbar_button_spec.js

+import { GlButton } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import ToolbarButton from '~/vue_shared/components/markdown/toolbar_button.vue';
 
@@ -25,7 +26,7 @@ describe('toolbar_button', () => {
   });
 
   const getButtonShortcutsAttr = () => {
-    return wrapper.find('button').attributes('data-md-shortcuts');
+    return wrapper.find(GlButton).attributes('data-md-shortcuts');
   };
 
   describe('keyboard shortcuts', () => {