Update rich text Link/Document Tooltip styles (wagtail#10639)

Co-authored-by: Thibaud Colas <thibaudcolas@gmail.com>
Stormheg · Jul 13, 2023 · 0b2ea1e · 0b2ea1e
1 parent 80b696c
commit 0b2ea1e
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 9 deletions.
diff --git a/CHANGELOG.txt b/CHANGELOG.txt
@@ -21,6 +21,7 @@ Changelog
  * Add support for adding HTML `attrs` on `FieldPanel`, `FieldRowPanel`, `MultiFieldPanel`, and others (Aman Pandey, Antoni Martyniuk, LB (Ben) Johnston)
  * Add support for `--template` option to `wagtail start` (Thibaud Colas)
  * Change to always cache renditions (Jake Howard)
+ * Update link/document rich text tooltips for consistency with the inline toolbar (Albina Starykova)
  * Fix: Prevent choosers from failing when initial value is an unrecognised ID, e.g. when moving a page from a location where `parent_page_types` would disallow it (Dan Braghis)
  * Fix: Move comment notifications toggle to the comments side panel (Sage Abdullah)
  * Fix: Remove comment button on InlinePanel fields (Sage Abdullah)

diff --git a/client/src/components/Draftail/Tooltip/Tooltip.scss b/client/src/components/Draftail/Tooltip/Tooltip.scss
@@ -11,14 +11,11 @@ $tooltip-z-index: $draftail-tooltip-z-index;
 $tooltip-color-no: theme('colors.critical.100');
 
 @mixin arrow--top {
-  margin-top: $tooltip-arrow-spacing;
+  margin-top: $tooltip-spacing;
   transform: translateX(calc(var(--w-direction-factor) * -50%));
 
   &::before {
-    bottom: 100%;
-    inset-inline-start: 50%;
-    transform: translateX(calc(var(--w-direction-factor) * -50%));
-    border-bottom-color: $tooltip-chrome;
+    content: none;
   }
 }
 

diff --git a/client/src/components/Draftail/decorators/TooltipEntity.js b/client/src/components/Draftail/decorators/TooltipEntity.js
@@ -116,12 +116,15 @@ class TooltipEntity extends Component {
                 </a>
               ) : null}
 
-              <button className="button Tooltip__button" onClick={this.onEdit}>
+              <button
+                className="button button-small Tooltip__button"
+                onClick={this.onEdit}
+              >
                 Edit
               </button>
 
               <button
-                className="button button-secondary no Tooltip__button"
+                className="button button-small button-secondary no Tooltip__button"
                 onClick={this.onRemove}
               >
                 Remove

diff --git a/client/src/components/Draftail/decorators/__snapshots__/TooltipEntity.test.js.snap b/client/src/components/Draftail/decorators/__snapshots__/TooltipEntity.test.js.snap
@@ -68,13 +68,13 @@ exports[`TooltipEntity #openTooltip 1`] = `
         www.example.com
       </a>
       <button
-        className="button Tooltip__button"
+        className="button button-small Tooltip__button"
         onClick={[Function]}
       >
         Edit
       </button>
       <button
-        className="button button-secondary no Tooltip__button"
+        className="button button-small button-secondary no Tooltip__button"
         onClick={[Function]}
       >
         Remove

diff --git a/docs/releases/5.1.md b/docs/releases/5.1.md
@@ -57,6 +57,7 @@ As part of tackling Wagtail’s technical debt and improving [CSP compatibility]
  * Add the ability to export snippets listing via `SnippetViewSet.list_export` (Sage Abdullah)
  * Add support for adding [HTML `attrs`](panels_attrs) on `FieldPanel`, `FieldRowPanel`, `MultiFieldPanel`, and others (Aman Pandey, Antoni Martyniuk, LB (Ben) Johnston)
  * Change to always cache renditions (Jake Howard)
+ * Update link/document rich text tooltips for consistency with the inline toolbar (Albina Starykova)
 
 ### Bug fixes