diff --git a/app/assets/javascripts/content_editor/components/formatting_toolbar.vue b/app/assets/javascripts/content_editor/components/formatting_toolbar.vue
index dc27278d2555a4125738330e852b57f341dd1fc9..f4c28ff9dda36b92d44c29c029e1801868d2b672 100644
--- a/app/assets/javascripts/content_editor/components/formatting_toolbar.vue
+++ b/app/assets/javascripts/content_editor/components/formatting_toolbar.vue
@@ -3,6 +3,7 @@ import CommentTemplatesDropdown from '~/vue_shared/components/markdown/comment_t
import { __, sprintf } from '~/locale';
import { getModifierKey } from '~/constants';
import trackUIControl from '../services/track_ui_control';
+import HeaderDivider from '../../vue_shared/components/markdown/header_divider.vue';
import ToolbarButton from './toolbar_button.vue';
import ToolbarAttachmentButton from './toolbar_attachment_button.vue';
import ToolbarTableButton from './toolbar_table_button.vue';
@@ -17,6 +18,7 @@ export default {
ToolbarAttachmentButton,
ToolbarMoreDropdown,
CommentTemplatesDropdown,
+ HeaderDivider,
},
inject: {
newCommentTemplatePath: { default: null },
@@ -76,21 +78,27 @@ export default {
class="gl-w-full gl-display-flex gl-align-items-center gl-flex-wrap gl-border-b gl-border-gray-100 gl-px-3 gl-rounded-top-base gl-justify-content-space-between"
data-testid="formatting-toolbar"
>
- <div class="gl-py-3 gl-display-flex gl-flex-wrap">
- <toolbar-text-style-dropdown
- data-testid="text-styles"
- @execute="trackToolbarControlExecution"
- />
- <toolbar-button
- v-if="codeSuggestionsEnabled"
- data-testid="code-suggestion"
- content-type="codeSuggestion"
- icon-name="doc-code"
- editor-command="insertCodeSuggestion"
- :label="__('Insert suggestion')"
- :show-active-state="false"
- @execute="trackToolbarControlExecution"
- />
+ <div class="gl-py-3 gl-w-full gl-display-flex gl-align-items-flex-start">
+ <div class="gl-display-flex">
+ <toolbar-text-style-dropdown
+ data-testid="text-styles"
+ @execute="trackToolbarControlExecution"
+ />
+ <header-divider />
+ </div>
+ <div v-if="codeSuggestionsEnabled" class="gl-display-flex">
+ <toolbar-button
+ v-if="codeSuggestionsEnabled"
+ data-testid="code-suggestion"
+ content-type="codeSuggestion"
+ icon-name="doc-code"
+ editor-command="insertCodeSuggestion"
+ :label="__('Insert suggestion')"
+ :show-active-state="false"
+ @execute="trackToolbarControlExecution"
+ />
+ <header-divider />
+ </div>
<toolbar-button
data-testid="bold"
content-type="bold"
@@ -107,14 +115,17 @@ export default {
:label="i18n.italic"
@execute="trackToolbarControlExecution"
/>
- <toolbar-button
- data-testid="strike"
- content-type="strike"
- icon-name="strikethrough"
- editor-command="toggleStrike"
- :label="i18n.strike"
- @execute="trackToolbarControlExecution"
- />
+ <div class="gl-display-flex">
+ <toolbar-button
+ data-testid="strike"
+ content-type="strike"
+ icon-name="strikethrough"
+ editor-command="toggleStrike"
+ :label="i18n.strike"
+ @execute="trackToolbarControlExecution"
+ />
+ <header-divider />
+ </div>
<toolbar-button
data-testid="blockquote"
content-type="blockquote"
@@ -157,32 +168,38 @@ export default {
:label="i18n.numberedList"
@execute="trackToolbarControlExecution"
/>
- <toolbar-button
- data-testid="task-list"
- content-type="taskList"
- icon-name="list-task"
- class="gl-display-none gl-sm-display-inline"
- editor-command="toggleTaskList"
- :label="i18n.taskList"
- @execute="trackToolbarControlExecution"
- />
+ <div class="gl-display-flex">
+ <toolbar-button
+ data-testid="task-list"
+ content-type="taskList"
+ icon-name="list-task"
+ class="gl-display-none gl-sm-display-inline"
+ editor-command="toggleTaskList"
+ :label="i18n.taskList"
+ @execute="trackToolbarControlExecution"
+ />
+ <header-divider />
+ </div>
<toolbar-table-button data-testid="table" @execute="trackToolbarControlExecution" />
- <toolbar-attachment-button
- v-if="!hideAttachmentButton"
- data-testid="attachment"
- @execute="trackToolbarControlExecution"
- />
- <!-- TODO Add icon and trigger functionality from here -->
- <toolbar-button
- v-if="supportsQuickActions"
- data-testid="quick-actions"
- content-type="quickAction"
- icon-name="quick-actions"
- class="gl-display-none gl-sm-display-inline"
- editor-command="insertQuickAction"
- :label="__('Add a quick action')"
- @execute="trackToolbarControlExecution"
- />
+ <div class="gl-display-flex">
+ <toolbar-attachment-button
+ v-if="!hideAttachmentButton"
+ data-testid="attachment"
+ @execute="trackToolbarControlExecution"
+ />
+ <!-- TODO Add icon and trigger functionality from here -->
+ <toolbar-button
+ v-if="supportsQuickActions"
+ data-testid="quick-actions"
+ content-type="quickAction"
+ icon-name="quick-actions"
+ class="gl-display-none gl-sm-display-inline"
+ editor-command="insertQuickAction"
+ :label="__('Add a quick action')"
+ @execute="trackToolbarControlExecution"
+ />
+ <header-divider v-if="newCommentTemplatePath" />
+ </div>
<comment-templates-dropdown
v-if="newCommentTemplatePath"
:new-comment-template-path="newCommentTemplatePath"
diff --git a/app/assets/javascripts/content_editor/components/toolbar_attachment_button.vue b/app/assets/javascripts/content_editor/components/toolbar_attachment_button.vue
index 78a01693f14f450427ec1b6b8a83eaa45f0c12e4..9093fc323cc11af48484bc6cc44ca4e722d121bd 100644
--- a/app/assets/javascripts/content_editor/components/toolbar_attachment_button.vue
+++ b/app/assets/javascripts/content_editor/components/toolbar_attachment_button.vue
@@ -47,7 +47,7 @@ export default {
category="tertiary"
icon="paperclip"
size="small"
- class="gl-mr-3"
+ class="gl-mr-2"
lazy
@click="openFileUpload"
/>
diff --git a/app/assets/javascripts/content_editor/components/toolbar_button.vue b/app/assets/javascripts/content_editor/components/toolbar_button.vue
index 60bfaab25a53b9ee637afb625225fc4650dededb..a4c4814fde9091fb0b027e24283bc8f7a1a55b4d 100644
--- a/app/assets/javascripts/content_editor/components/toolbar_button.vue
+++ b/app/assets/javascripts/content_editor/components/toolbar_button.vue
@@ -87,7 +87,7 @@ export default {
:aria-label="label"
:title="label"
:icon="iconName"
- class="gl-mr-3"
+ class="gl-mr-2"
@click="execute"
/>
</editor-state-observer>
diff --git a/app/assets/javascripts/content_editor/components/toolbar_table_button.vue b/app/assets/javascripts/content_editor/components/toolbar_table_button.vue
index ab1546b9016bc3fb6f8a833137e0221378a19822..f09d583996c1a2ede005e7541a070591480b1d32 100644
--- a/app/assets/javascripts/content_editor/components/toolbar_table_button.vue
+++ b/app/assets/javascripts/content_editor/components/toolbar_table_button.vue
@@ -93,7 +93,7 @@ export default {
:aria-label="__('Insert table')"
:toggle-text="__('Insert table')"
positioning-strategy="fixed"
- class="content-editor-table-dropdown gl-mr-3"
+ class="content-editor-table-dropdown gl-mr-2"
text-sr-only
:fluid-width="true"
@shown="setFocus(1, 1)"
diff --git a/spec/frontend/content_editor/components/__snapshots__/toolbar_button_spec.js.snap b/spec/frontend/content_editor/components/__snapshots__/toolbar_button_spec.js.snap
index a708f7d5f479da94fd0c9bb3456db1a080b4eaef..0fafd42095b85db2ce88d79b713828f17486d2b9 100644
--- a/spec/frontend/content_editor/components/__snapshots__/toolbar_button_spec.js.snap
+++ b/spec/frontend/content_editor/components/__snapshots__/toolbar_button_spec.js.snap
@@ -3,7 +3,7 @@
exports[`content_editor/components/toolbar_button displays tertiary, medium button with a provided label and icon 1`] = `
<b-button-stub
aria-label="Bold"
- class="btn-default-tertiary btn-icon gl-button gl-mr-3"
+ class="btn-default-tertiary btn-icon gl-button gl-mr-2"
size="sm"
tag="button"
title="Bold"