From 3ff21fbb63e1b8352106cb002b8e1788167b35ad Mon Sep 17 00:00:00 2001
From: Eva Marco <evamarcod@gmail.com>
Date: Wed, 28 Oct 2026 14:45:32 +0100
Subject: [PATCH] :recycle: Use a DS icon button for Share in the workspace
 header

The Share link of the right header becomes an icon-button* with the DS
share icon, like its neighbours (comments, history, viewer). It gets
keyboard focus, a name and the DS tooltip and hover.

It also makes Share visible again on develop: since the share icon
moved to currentColor, the legacy icon drew with the transparent color
of its svg.

The button is 32px wide instead of 28px, so the zoom, comments and
history controls move 4px to the left.

AI-assisted-by: claude-opus-5-5
---
 .../data/workspace/get-teams-shared.json      | 25 +++++++++++++++++++
 .../ui/visual-specs/workspace.spec.js         | 24 ++++++++++++++++++
 .../app/main/ui/workspace/right_header.cljs   | 10 ++++----
 3 files changed, 54 insertions(+), 5 deletions(-)
 create mode 100644 frontend/playwright/data/workspace/get-teams-shared.json

diff --git a/frontend/playwright/data/workspace/get-teams-shared.json b/frontend/playwright/data/workspace/get-teams-shared.json
new file mode 100644
index 0000000000..2c6119c75f
--- /dev/null
+++ b/frontend/playwright/data/workspace/get-teams-shared.json
@@ -0,0 +1,25 @@
+[
+  {
+    "~:features": {
+      "~#set": [
+        "layout/grid",
+        "styles/v2",
+        "fdata/pointer-map",
+        "fdata/objects-map",
+        "components/v2",
+        "fdata/shape-data-type"
+      ]
+    },
+    "~:permissions": {
+      "~:type": "~:membership",
+      "~:is-owner": true,
+      "~:is-admin": true,
+      "~:can-edit": true
+    },
+    "~:name": "Default",
+    "~:modified-at": "~m1713533116375",
+    "~:id": "~uc7ce0794-0992-8105-8004-38e630f7920a",
+    "~:created-at": "~m1713533116375",
+    "~:is-default": false
+  }
+]
diff --git a/frontend/playwright/ui/visual-specs/workspace.spec.js b/frontend/playwright/ui/visual-specs/workspace.spec.js
index 693d10ecff..ee1680db98 100644
--- a/frontend/playwright/ui/visual-specs/workspace.spec.js
+++ b/frontend/playwright/ui/visual-specs/workspace.spec.js
@@ -780,6 +780,30 @@ test.describe("Right header", () => {
   });
 });
 
+test.describe("Share button", () => {
+  const shot = { maxDiffPixelRatio: 0, threshold: 0 };
+
+  test("Share button in the right header", async ({ page }) => {
+    const workspace = new WorkspacePage(page);
+    await workspace.setupEmptyFile();
+    // A shared team where the user is admin, so the header shows Share.
+    await workspace.mockRPC("get-teams", "workspace/get-teams-shared.json");
+    await workspace.goToWorkspace();
+
+    const header = page.locator('[class*="workspace-header-right"]');
+    const share = header
+      .locator("[class*='share-btn']")
+      .or(header.getByRole("button", { name: "Share" }));
+    await expect(share).toBeVisible();
+    await page.mouse.move(640, 300);
+    await expect(header).toHaveScreenshot(shot);
+
+    await share.hover();
+    await page.waitForTimeout(1000);
+    await expect(header).toHaveScreenshot(shot);
+  });
+});
+
 test.describe("Undo history", () => {
   test("Shows the actions list with an entry expanded", async ({ page }) => {
     const workspace = new WorkspacePage(page);
diff --git a/frontend/src/app/main/ui/workspace/right_header.cljs b/frontend/src/app/main/ui/workspace/right_header.cljs
index 0b2f9a9b0e..b76ac50fa9 100644
--- a/frontend/src/app/main/ui/workspace/right_header.cljs
+++ b/frontend/src/app/main/ui/workspace/right_header.cljs
@@ -25,7 +25,6 @@
    [app.main.ui.ds.foundations.assets.icon :as i]
    [app.main.ui.exports.assets :refer [progress-widget]]
    [app.main.ui.formats :as fmt]
-   [app.main.ui.icons :as deprecated-icon]
    [app.main.ui.workspace.presence :refer [active-sessions*]]
    [app.util.dom :as dom]
    [app.util.i18n :as i18n :refer [tr]]
@@ -239,10 +238,11 @@
                           :on-click toggle-history}]])
 
      (when display-share-button?
-       [:a {:class (stl/css :share-btn)
-            :title (tr "workspace.header.share")
-            :on-click open-share-dialog}
-        deprecated-icon/share])
+       [:> icon-button* {:variant "action"
+                         :tooltip-placement "bottom-left"
+                         :aria-label (tr "workspace.header.share")
+                         :icon i/share
+                         :on-click open-share-dialog}])
 
      [:> icon-button* {:variant "action"
                        :tooltip-placement "bottom-left"