From 06fb3fef43d6d49a06710cfba2d8f0ccdd6f3374 Mon Sep 17 00:00:00 2001
From: Oscar Kilhed <oscar.kilhed@grafana.com>
Date: Mon, 3 Nov 2025 18:00:25 +0100
Subject: [PATCH] Dynamic Dashboards: Change look and copy of add variable
 control to make it more obvious what it does (#113361)

Change look+copy of add variable control
---
 .../features/dashboard-scene/scene/DashboardControls.tsx    | 4 ++++
 .../app/features/dashboard-scene/scene/VariableControls.tsx | 6 +++++-
 .../dashboard-scene/scene/VariableControlsAddButton.tsx     | 2 +-
 public/locales/en-US/grafana.json                           | 2 +-
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/public/app/features/dashboard-scene/scene/DashboardControls.tsx b/public/app/features/dashboard-scene/scene/DashboardControls.tsx
index 767b0a934e2..0e23d53e6fa 100644
--- a/public/app/features/dashboard-scene/scene/DashboardControls.tsx
+++ b/public/app/features/dashboard-scene/scene/DashboardControls.tsx
@@ -222,6 +222,10 @@ function getStyles(theme: GrafanaTheme2) {
         flexDirection: 'column-reverse',
         alignItems: 'stretch',
       },
+      '&:hover .dashboard-canvas-add-button': {
+        opacity: 1,
+        filter: 'unset',
+      },
     }),
     controlsPanelEdit: css({
       flexWrap: 'wrap-reverse',
diff --git a/public/app/features/dashboard-scene/scene/VariableControls.tsx b/public/app/features/dashboard-scene/scene/VariableControls.tsx
index f28ad7d174d..470b20fea23 100644
--- a/public/app/features/dashboard-scene/scene/VariableControls.tsx
+++ b/public/app/features/dashboard-scene/scene/VariableControls.tsx
@@ -27,7 +27,11 @@ export function VariableControls({ dashboard }: { dashboard: DashboardScene }) {
         .map((variable) => (
           <VariableValueSelectWrapper key={variable.state.key} variable={variable} />
         ))}
-      {config.featureToggles.dashboardNewLayouts ? <AddVariableButton dashboard={dashboard} /> : null}
+      {config.featureToggles.dashboardNewLayouts ? (
+        <div className="dashboard-canvas-add-button">
+          <AddVariableButton dashboard={dashboard} />
+        </div>
+      ) : null}
     </>
   );
 }
diff --git a/public/app/features/dashboard-scene/scene/VariableControlsAddButton.tsx b/public/app/features/dashboard-scene/scene/VariableControlsAddButton.tsx
index 84e4f456578..9d20b740030 100644
--- a/public/app/features/dashboard-scene/scene/VariableControlsAddButton.tsx
+++ b/public/app/features/dashboard-scene/scene/VariableControlsAddButton.tsx
@@ -26,7 +26,7 @@ export function AddVariableButton({ dashboard }: { dashboard: DashboardScene })
 
   return (
     <Button icon="plus" variant="primary" fill="text" onPointerDown={handlePointerDown}>
-      <Trans i18nKey="dashboard-scene.variable-controls.add-variable">Add</Trans>
+      <Trans i18nKey="dashboard-scene.variable-controls.add-variable">Add variable</Trans>
     </Button>
   );
 }
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index 50ddc6b897b..dc7eeab17c4 100644
--- a/public/locales/en-US/grafana.json
+++ b/public/locales/en-US/grafana.json
@@ -6326,7 +6326,7 @@
       "content-variable-referenced-other-variables-dashboard": "This variable is referenced by other variables or dashboard."
     },
     "variable-controls": {
-      "add-variable": "Add"
+      "add-variable": "Add variable"
     },
     "variable-editor-form": {
       "aria-label-variable-editor-form": "Variable editor form",