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

This reverts merge request !67058

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

 <script>
-import { GlPopover, GlButton, GlTooltipDirective } from '@gitlab/ui';
+import { GlPopover, GlButton, GlTooltipDirective, GlIcon } 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,6 +10,7 @@ import ToolbarButton from './toolbar_button.vue';
 export default {
   components: {
     ToolbarButton,
+    GlIcon,
     GlPopover,
     GlButton,
   },
@@ -45,7 +46,6 @@ export default {
   data() {
     return {
       tag: '> ',
-      suggestPopoverVisible: false,
     };
   },
   computed: {
@@ -76,27 +76,15 @@ 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 ||
@@ -165,114 +153,127 @@ export default {
         </button>
       </li>
       <li :class="{ active: !previewMarkdown }" class="md-header-toolbar">
-        <toolbar-button
-          tag="**"
-          :button-title="
-            sprintf(s__('MarkdownEditor|Add bold text (%{modifierKey}B)'), { modifierKey })
-          "
-          :shortcuts="$options.shortcuts.bold"
-          icon="bold"
-        />
-        <toolbar-button
-          tag="_"
-          :button-title="
-            sprintf(s__('MarkdownEditor|Add italic text (%{modifierKey}I)'), { modifierKey })
-          "
-          :shortcuts="$options.shortcuts.italic"
-          icon="italic"
-        />
-        <toolbar-button
-          :prepend="true"
-          :tag="tag"
-          :button-title="__('Insert a quote')"
-          icon="quote"
-          @click="handleQuote"
-        />
-        <template v-if="canSuggest">
+        <div class="d-inline-block">
+          <toolbar-button
+            tag="**"
+            :button-title="
+              sprintf(s__('MarkdownEditor|Add bold text (%{modifierKey}B)'), { modifierKey })
+            "
+            :shortcuts="$options.shortcuts.bold"
+            icon="bold"
+          />
+          <toolbar-button
+            tag="_"
+            :button-title="
+              sprintf(s__('MarkdownEditor|Add italic text (%{modifierKey}I)'), { modifierKey })
+            "
+            :shortcuts="$options.shortcuts.italic"
+            icon="italic"
+          />
           <toolbar-button
-            ref="suggestButton"
-            :tag="mdSuggestion"
             :prepend="true"
-            :button-title="__('Insert suggestion')"
-            :cursor-offset="4"
-            :tag-content="lineContent"
-            icon="doc-code"
-            data-qa-selector="suggestion_button"
-            class="js-suggestion-btn"
-            @click="handleSuggestDismissed"
+            :tag="tag"
+            :button-title="__('Insert a quote')"
+            icon="quote"
+            @click="handleQuote"
           />
-          <gl-popover
-            v-if="suggestPopoverVisible"
-            :target="$refs.suggestButton.$el"
-            :css-classes="['diff-suggest-popover']"
-            placement="bottom"
-            :show="suggestPopoverVisible"
-          >
-            <strong>{{ __('New! Suggest changes directly') }}</strong>
-            <p class="mb-2">
-              {{
-                __(
-                  'Suggest code changes which can be immediately applied in one click. Try it out!',
-                )
-              }}
-            </p>
-            <gl-button
-              variant="info"
-              category="primary"
-              size="small"
+        </div>
+        <div class="d-inline-block ml-md-2 ml-0">
+          <template v-if="canSuggest">
+            <toolbar-button
+              ref="suggestButton"
+              :tag="mdSuggestion"
+              :prepend="true"
+              :button-title="__('Insert suggestion')"
+              :cursor-offset="4"
+              :tag-content="lineContent"
+              icon="doc-code"
+              data-qa-selector="suggestion_button"
+              class="js-suggestion-btn"
               @click="handleSuggestDismissed"
+            />
+            <gl-popover
+              v-if="showSuggestPopover && $refs.suggestButton"
+              :target="$refs.suggestButton"
+              :css-classes="['diff-suggest-popover']"
+              placement="bottom"
+              :show="showSuggestPopover"
             >
-              {{ __('Got it') }}
-            </gl-button>
-          </gl-popover>
-        </template>
-        <toolbar-button tag="`" tag-block="```" :button-title="__('Insert code')" icon="code" />
-        <toolbar-button
-          tag="[{text}](url)"
-          tag-select="url"
-          :button-title="
-            sprintf(s__('MarkdownEditor|Add a link (%{modifierKey}K)'), { modifierKey })
-          "
-          :shortcuts="$options.shortcuts.link"
-          icon="link"
-        />
-        <toolbar-button
-          :prepend="true"
-          tag="- "
-          :button-title="__('Add a bullet list')"
-          icon="list-bulleted"
-        />
-        <toolbar-button
-          :prepend="true"
-          tag="1. "
-          :button-title="__('Add a numbered list')"
-          icon="list-numbered"
-        />
-        <toolbar-button
-          :prepend="true"
-          tag="- [ ] "
-          :button-title="__('Add a task list')"
-          icon="list-task"
-        />
-        <toolbar-button
-          :tag="mdCollapsibleSection"
-          :prepend="true"
-          tag-select="Click to expand"
-          :button-title="__('Add a collapsible section')"
-          icon="details-block"
-        />
-        <toolbar-button
-          :tag="mdTable"
-          :prepend="true"
-          :button-title="__('Add a table')"
-          icon="table"
-        />
-        <toolbar-button
-          class="js-zen-enter"
-          :prepend="true"
-          :button-title="__('Go full screen')"
-          icon="maximize"
-        />
+              <strong>{{ __('New! Suggest changes directly') }}</strong>
+              <p class="mb-2">
+                {{
+                  __(
+                    'Suggest code changes which can be immediately applied in one click. Try it out!',
+                  )
+                }}
+              </p>
+              <gl-button
+                variant="info"
+                category="primary"
+                size="sm"
+                @click="handleSuggestDismissed"
+              >
+                {{ __('Got it') }}
+              </gl-button>
+            </gl-popover>
+          </template>
+          <toolbar-button tag="`" tag-block="```" :button-title="__('Insert code')" icon="code" />
+          <toolbar-button
+            tag="[{text}](url)"
+            tag-select="url"
+            :button-title="
+              sprintf(s__('MarkdownEditor|Add a link (%{modifierKey}K)'), { modifierKey })
+            "
+            :shortcuts="$options.shortcuts.link"
+            icon="link"
+          />
+        </div>
+        <div class="d-inline-block ml-md-2 ml-0">
+          <toolbar-button
+            :prepend="true"
+            tag="- "
+            :button-title="__('Add a bullet list')"
+            icon="list-bulleted"
+          />
+          <toolbar-button
+            :prepend="true"
+            tag="1. "
+            :button-title="__('Add a numbered list')"
+            icon="list-numbered"
+          />
+          <toolbar-button
+            :prepend="true"
+            tag="- [ ] "
+            :button-title="__('Add a task list')"
+            icon="list-task"
+          />
+          <toolbar-button
+            :tag="mdCollapsibleSection"
+            :prepend="true"
+            tag-select="Click to expand"
+            :button-title="__('Add a collapsible section')"
+            icon="details-block"
+          />
+          <toolbar-button
+            :tag="mdTable"
+            :prepend="true"
+            :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>
       </li>
     </ul>
   </div>

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

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

app/assets/stylesheets/framework/markdown_area.scss

@@ -83,7 +83,6 @@
   li.md-header-toolbar {
     margin-left: auto;
     display: none;
-    padding-bottom: $gl-padding-8;
 
     &.active {
       display: block;
@@ -92,9 +91,9 @@
         flex: none;
         display: flex;
         justify-content: center;
-        flex-wrap: wrap;
-        margin-top: $gl-padding-8;
         width: 100%;
+        padding-top: $gl-padding-top;
+        padding-bottom: $gl-padding-top;
       }
     }
   }
@@ -132,6 +131,36 @@
   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/assets/stylesheets/framework/secondary_navigation_elements.scss

@@ -14,6 +14,7 @@
     a,
     button {
       padding: $gl-padding-8;
+      padding-bottom: $gl-padding-8 + 1;
       font-size: 14px;
       line-height: 28px;
       color: $gl-text-color-secondary;

app/assets/stylesheets/pages/note_form.scss

@@ -54,7 +54,7 @@
 
 .common-note-form {
   .md-area {
-    padding: $gl-padding-8 $gl-padding;
+    padding: $gl-padding-top $gl-padding;
     border: 1px solid $border-color;
     border-radius: $border-radius-base;
     transition: border-color ease-in-out 0.15s,
@@ -323,7 +323,7 @@ table {
 }
 
 .comment-toolbar {
-  padding-top: $gl-padding-8;
+  padding-top: $gl-padding-top;
   color: $gl-text-color-secondary;
   border-top: 1px solid $border-color;
 }

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';
 
@@ -26,7 +25,7 @@ describe('toolbar_button', () => {
   });
 
   const getButtonShortcutsAttr = () => {
-    return wrapper.find(GlButton).attributes('data-md-shortcuts');
+    return wrapper.find('button').attributes('data-md-shortcuts');
   };
 
   describe('keyboard shortcuts', () => {