root
/
grafana
mirror of https://github.com/grafana/grafana.git
1
0
Fork 0
Code Issues Actions 83 Packages Projects Releases Wiki Activity

ButtonGroup: Fixes button group for solid buttons (#103255) 

* ButtonGroup: Fixes button group for solid buttons

* Update

* Fix
This commit is contained in:
Torkel Ödegaard 2025-04-03 14:47:15 +02:00 committed by GitHub
parent 80df736e27
commit 72a76721e1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 22 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/grafana-ui/src/components/Button/Button.story.tsx
View File

@ -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>

5
packages/grafana-ui/src/components/Button/ButtonGroup.tsx
View File

@ -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)`,
},
}),
});

13
public/app/features/dashboard-scene/scene/new-toolbar/actions/ShareExportDashboardButton.tsx
View File

@ -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,
}),
};
}