From 023c2e4919cb21f3061e187d6ef276a44f8c2079 Mon Sep 17 00:00:00 2001
From: Chad Lavimoniere <clavimoniere@gitlab.com>
Date: Thu, 7 Dec 2023 15:21:10 -0500
Subject: [PATCH] Fix rich text editor format toolbar wrapping
A previous update to the rich text editor formatting toolbar
accidentally omitted styles necessary to make toolbar content wrap
properly on narrow viewports and introduced the possibility of an empty
small div because of a button not displaying on XS viewports.
Changelog: fixed
---
.../components/formatting_toolbar.vue | 224 +++++++++---------
1 file changed, 112 insertions(+), 112 deletions(-)
diff --git a/app/assets/javascripts/content_editor/components/formatting_toolbar.vue b/app/assets/javascripts/content_editor/components/formatting_toolbar.vue
index f4c28ff9dda36..c1eae345f7284 100644
--- a/app/assets/javascripts/content_editor/components/formatting_toolbar.vue
+++ b/app/assets/javascripts/content_editor/components/formatting_toolbar.vue
@@ -75,137 +75,137 @@ export default {
</script>
<template>
<div
- 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"
+ class="gl-w-full gl-py-3 gl-row-gap-2 gl-display-flex gl-align-items-center gl-flex-wrap gl-border-b gl-border-gray-100 gl-px-3 gl-rounded-top-base"
data-testid="formatting-toolbar"
>
- <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"
- icon-name="bold"
- editor-command="toggleBold"
- :label="i18n.bold"
- @execute="trackToolbarControlExecution"
- />
- <toolbar-button
- data-testid="italic"
- content-type="italic"
- icon-name="italic"
- editor-command="toggleItalic"
- :label="i18n.italic"
+ <div class="gl-display-flex">
+ <toolbar-text-style-dropdown
+ data-testid="text-styles"
@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>
+ <header-divider />
+ </div>
+ <div v-if="codeSuggestionsEnabled" class="gl-display-flex">
<toolbar-button
- data-testid="blockquote"
- content-type="blockquote"
- icon-name="quote"
- editor-command="toggleBlockquote"
- :label="i18n.quote"
+ 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"
+ icon-name="bold"
+ editor-command="toggleBold"
+ :label="i18n.bold"
+ @execute="trackToolbarControlExecution"
+ />
+ <toolbar-button
+ data-testid="italic"
+ content-type="italic"
+ icon-name="italic"
+ editor-command="toggleItalic"
+ :label="i18n.italic"
+ @execute="trackToolbarControlExecution"
+ />
+ <div class="gl-display-flex">
<toolbar-button
- data-testid="code"
- content-type="code"
- icon-name="code"
- editor-command="toggleCode"
- :label="i18n.code"
+ 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"
+ icon-name="quote"
+ editor-command="toggleBlockquote"
+ :label="i18n.quote"
+ @execute="trackToolbarControlExecution"
+ />
+ <toolbar-button
+ data-testid="code"
+ content-type="code"
+ icon-name="code"
+ editor-command="toggleCode"
+ :label="i18n.code"
+ @execute="trackToolbarControlExecution"
+ />
+ <toolbar-button
+ data-testid="link"
+ content-type="link"
+ icon-name="link"
+ editor-command="editLink"
+ :label="i18n.link"
+ @execute="trackToolbarControlExecution"
+ />
+ <toolbar-button
+ data-testid="bullet-list"
+ content-type="bulletList"
+ icon-name="list-bulleted"
+ class="gl-display-none gl-sm-display-inline"
+ editor-command="toggleBulletList"
+ :label="i18n.bulletList"
+ @execute="trackToolbarControlExecution"
+ />
+ <toolbar-button
+ data-testid="ordered-list"
+ content-type="orderedList"
+ icon-name="list-numbered"
+ class="gl-display-none gl-sm-display-inline"
+ editor-command="toggleOrderedList"
+ :label="i18n.numberedList"
+ @execute="trackToolbarControlExecution"
+ />
+ <div class="gl-display-flex">
<toolbar-button
- data-testid="link"
- content-type="link"
- icon-name="link"
- editor-command="editLink"
- :label="i18n.link"
+ 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"
/>
- <toolbar-button
- data-testid="bullet-list"
- content-type="bulletList"
- icon-name="list-bulleted"
- class="gl-display-none gl-sm-display-inline"
- editor-command="toggleBulletList"
- :label="i18n.bulletList"
+ <div class="gl-display-none gl-sm-display-flex">
+ <header-divider />
+ </div>
+ </div>
+ <toolbar-table-button data-testid="table" @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
- data-testid="ordered-list"
- content-type="orderedList"
- icon-name="list-numbered"
+ v-if="supportsQuickActions"
+ data-testid="quick-actions"
+ content-type="quickAction"
+ icon-name="quick-actions"
class="gl-display-none gl-sm-display-inline"
- editor-command="toggleOrderedList"
- :label="i18n.numberedList"
+ editor-command="insertQuickAction"
+ :label="__('Add a quick action')"
@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" />
- <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"
- @select="insertSavedReply"
- />
- <toolbar-more-dropdown data-testid="more" @execute="trackToolbarControlExecution" />
+ <header-divider v-if="newCommentTemplatePath" />
</div>
+ <comment-templates-dropdown
+ v-if="newCommentTemplatePath"
+ :new-comment-template-path="newCommentTemplatePath"
+ @select="insertSavedReply"
+ />
+ <toolbar-more-dropdown data-testid="more" @execute="trackToolbarControlExecution" />
</div>
</template>
--
GitLab