From f47b1591d1f7981e2e981cb28e44a92f65f2df39 Mon Sep 17 00:00:00 2001
From: Scott de Jonge <sdejonge@gitlab.com>
Date: Mon, 10 Mar 2025 20:54:38 +1100
Subject: [PATCH] Use design tokens in rich text editor controls
Update button selected state to use GlButton selected prop
Use dropdown background in link popover
Use feedback design tokens for table creator
---
.../components/bubble_menus/link_bubble_menu.vue | 2 +-
.../javascripts/content_editor/components/toolbar_button.vue | 2 +-
.../content_editor/components/toolbar_table_button.vue | 2 +-
app/assets/stylesheets/components/content_editor.scss | 3 ++-
.../components/bubble_menus/link_bubble_menu_spec.js | 2 +-
spec/frontend/content_editor/components/toolbar_button_spec.js | 2 +-
6 files changed, 7 insertions(+), 6 deletions(-)
diff --git a/app/assets/javascripts/content_editor/components/bubble_menus/link_bubble_menu.vue b/app/assets/javascripts/content_editor/components/bubble_menus/link_bubble_menu.vue
index 01fcd6f3e07d..7a1567b92494 100644
--- a/app/assets/javascripts/content_editor/components/bubble_menus/link_bubble_menu.vue
+++ b/app/assets/javascripts/content_editor/components/bubble_menus/link_bubble_menu.vue
@@ -208,7 +208,7 @@ export default {
>
<bubble-menu
data-testid="link-bubble-menu"
- class="gl-rounded-base gl-bg-white gl-shadow"
+ class="gl-rounded-base gl-bg-dropdown gl-shadow"
plugin-key="bubbleMenuLink"
:should-show="shouldShow"
:tippy-options="$options.tippyOptions"
diff --git a/app/assets/javascripts/content_editor/components/toolbar_button.vue b/app/assets/javascripts/content_editor/components/toolbar_button.vue
index 1beae6b23512..f581c07a8375 100644
--- a/app/assets/javascripts/content_editor/components/toolbar_button.vue
+++ b/app/assets/javascripts/content_editor/components/toolbar_button.vue
@@ -83,7 +83,7 @@ export default {
:variant="variant"
:category="category"
:size="size"
- :class="{ '!gl-bg-gray-100': showActiveState && isActive }"
+ :selected="showActiveState && isActive"
:aria-label="label"
:title="label"
:icon="iconName"
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 ce1fd5a8c79f..b3a82fa2af82 100644
--- a/app/assets/javascripts/content_editor/components/toolbar_table_button.vue
+++ b/app/assets/javascripts/content_editor/components/toolbar_table_button.vue
@@ -102,7 +102,7 @@ export default {
<div v-for="c of list(maxCols)" :key="c" role="gridcell">
<gl-button
:ref="`table-${r}-${c}`"
- :class="{ 'active !gl-bg-blue-50': r <= rows && c <= cols }"
+ :class="{ active: r <= rows && c <= cols }"
:aria-label="getButtonLabel(r, c)"
class="table-creator-grid-item gl-m-2 !gl-rounded-none !gl-p-0"
@mouseover="setRowsAndCols(r, c)"
diff --git a/app/assets/stylesheets/components/content_editor.scss b/app/assets/stylesheets/components/content_editor.scss
index 78da3b9077a3..8d73febc7db3 100644
--- a/app/assets/stylesheets/components/content_editor.scss
+++ b/app/assets/stylesheets/components/content_editor.scss
@@ -329,7 +329,8 @@
min-width: 1rem !important;
&.active {
- border-color: $blue-500 !important;
+ border-color: var(--gl-feedback-info-text-color) !important;
+ background-color: var(--gl-feedback-info-background-color) !important;
border-width: 2px;
}
diff --git a/spec/frontend/content_editor/components/bubble_menus/link_bubble_menu_spec.js b/spec/frontend/content_editor/components/bubble_menus/link_bubble_menu_spec.js
index edb3b34dac8b..cbcd58474b15 100644
--- a/spec/frontend/content_editor/components/bubble_menus/link_bubble_menu_spec.js
+++ b/spec/frontend/content_editor/components/bubble_menus/link_bubble_menu_spec.js
@@ -74,7 +74,7 @@ describe('content_editor/components/bubble_menus/link_bubble_menu', () => {
it('renders bubble menu component', async () => {
await buildWrapperAndDisplayMenu();
- expect(findBubbleMenu().classes()).toEqual(['gl-rounded-base', 'gl-bg-white', 'gl-shadow']);
+ expect(findBubbleMenu().classes()).toEqual(['gl-rounded-base', 'gl-bg-dropdown', 'gl-shadow']);
});
it('shows a clickable link to the URL in the link node', async () => {
diff --git a/spec/frontend/content_editor/components/toolbar_button_spec.js b/spec/frontend/content_editor/components/toolbar_button_spec.js
index b9cf631fb409..7415d25523b3 100644
--- a/spec/frontend/content_editor/components/toolbar_button_spec.js
+++ b/spec/frontend/content_editor/components/toolbar_button_spec.js
@@ -81,7 +81,7 @@ describe('content_editor/components/toolbar_button', () => {
await emitEditorEvent({ event: 'transaction', tiptapEditor });
- expect(findButton().classes().includes('!gl-bg-gray-100')).toBe(outcome);
+ expect(findButton().props('selected')).toBe(outcome);
expect(tiptapEditor.isActive).toHaveBeenCalledWith(CONTENT_TYPE);
},
);
--
GitLab