From 72a76721e1a0b7a583fc573fdc28ce68e8ee8478 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Thu, 3 Apr 2025 14:47:15 +0200
Subject: [PATCH] ButtonGroup: Fixes button group for solid buttons (#103255)

* ButtonGroup: Fixes button group for solid buttons

* Update

* Fix
---
 .../src/components/Button/Button.story.tsx     | 18 ++++++++++++++++++
 .../src/components/Button/ButtonGroup.tsx      |  5 +++--
 .../actions/ShareExportDashboardButton.tsx     | 13 +------------
 3 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/packages/grafana-ui/src/components/Button/Button.story.tsx b/packages/grafana-ui/src/components/Button/Button.story.tsx
index 706215637af..708facda0a3 100644
--- a/packages/grafana-ui/src/components/Button/Button.story.tsx
+++ b/packages/grafana-ui/src/components/Button/Button.story.tsx
@@ -81,6 +81,24 @@ export const Examples: StoryFn<typeof Button> = () => {
           <Button icon="sync">Run query</Button>
           <Button icon="angle-down" />
         </ButtonGroup>
+        <ButtonGroup>
+          <Button variant="destructive" icon="sync">
+            Run query
+          </Button>
+          <Button variant="destructive" icon="angle-down" />
+        </ButtonGroup>
+        <ButtonGroup>
+          <Button variant="success" icon="sync">
+            Run query
+          </Button>
+          <Button variant="success" icon="angle-down" />
+        </ButtonGroup>
+        <ButtonGroup>
+          <Button variant="secondary" icon="sync">
+            Run query
+          </Button>
+          <Button variant="secondary" icon="angle-down" />
+        </ButtonGroup>
       </Stack>
       <Card>
         <Card.Heading>Button inside card</Card.Heading>
diff --git a/packages/grafana-ui/src/components/Button/ButtonGroup.tsx b/packages/grafana-ui/src/components/Button/ButtonGroup.tsx
index 7a23ed7353c..977fa45b896 100644
--- a/packages/grafana-ui/src/components/Button/ButtonGroup.tsx
+++ b/packages/grafana-ui/src/components/Button/ButtonGroup.tsx
@@ -24,17 +24,18 @@ ButtonGroup.displayName = 'ButtonGroup';
 const getStyles = (theme: GrafanaTheme2) => ({
   wrapper: css({
     display: 'flex',
-    gap: 1,
+    borderRadius: theme.shape.radius.default,
 
     '> .button-group:not(:first-child) > button, > button:not(:first-child)': {
       borderTopLeftRadius: 0,
       borderBottomLeftRadius: 0,
+      borderLeft: `1px solid rgba(255, 255, 255, 0.12)`,
     },
 
     '> .button-group:not(:last-child) > button, > button:not(:last-child)': {
       borderTopRightRadius: 0,
       borderBottomRightRadius: 0,
-      borderRightWidth: 0,
+      borderRight: `1px solid rgba(0, 0, 0, 0.12)`,
     },
   }),
 });
diff --git a/public/app/features/dashboard-scene/scene/new-toolbar/actions/ShareExportDashboardButton.tsx b/public/app/features/dashboard-scene/scene/new-toolbar/actions/ShareExportDashboardButton.tsx
index bebed306fbe..8354d3611b2 100644
--- a/public/app/features/dashboard-scene/scene/new-toolbar/actions/ShareExportDashboardButton.tsx
+++ b/public/app/features/dashboard-scene/scene/new-toolbar/actions/ShareExportDashboardButton.tsx
@@ -1,7 +1,6 @@
-import { css } from '@emotion/css';
 import { ReactElement, useState } from 'react';
 
-import { Button, ButtonGroup, Dropdown, useStyles2 } from '@grafana/ui';
+import { Button, ButtonGroup, Dropdown } from '@grafana/ui';
 import appEvents from 'app/core/app_events';
 import { t } from 'app/core/internationalization';
 import { ShowConfirmModalEvent } from 'app/types/events';
@@ -34,13 +33,11 @@ export const ShareExportDashboardButton = ({
   arrowTestId,
   variant = 'secondary',
 }: Props) => {
-  const styles = useStyles2(getStyles);
   const [isOpen, setIsOpen] = useState(false);
 
   return (
     <ButtonGroup
       data-testid={groupTestId}
-      className={styles.container}
       onPointerDown={(evt) => {
         if (dashboard.state.isEditing && dashboard.state.isDirty) {
           evt.preventDefault();
@@ -90,11 +87,3 @@ export const ShareExportDashboardButton = ({
     </ButtonGroup>
   );
 };
-
-function getStyles() {
-  return {
-    container: css({
-      gap: 1,
-    }),
-  };
-}