mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
updated component to use new theme model (#33302)
This commit is contained in:
parent
99a04ed612
commit
37f7b91a6b
@ -1,14 +1,14 @@
|
||||
import React, { forwardRef, HTMLAttributes } from 'react';
|
||||
import { css, cx } from '@emotion/css';
|
||||
import { GrafanaTheme } from '@grafana/data';
|
||||
import { useStyles } from '../../themes';
|
||||
import { useStyles2 } from '../../themes';
|
||||
import { GrafanaThemeV2 } from '@grafana/data';
|
||||
|
||||
export interface Props extends HTMLAttributes<HTMLDivElement> {
|
||||
className?: string;
|
||||
}
|
||||
|
||||
export const ButtonGroup = forwardRef<HTMLDivElement, Props>(({ className, children, ...rest }, ref) => {
|
||||
const styles = useStyles(getStyles);
|
||||
const styles = useStyles2(getStyles);
|
||||
|
||||
return (
|
||||
<div ref={ref} className={cx('button-group', styles.wrapper, className)} {...rest}>
|
||||
@ -19,7 +19,7 @@ export const ButtonGroup = forwardRef<HTMLDivElement, Props>(({ className, child
|
||||
|
||||
ButtonGroup.displayName = 'ButtonGroup';
|
||||
|
||||
const getStyles = (theme: GrafanaTheme) => ({
|
||||
const getStyles = (theme: GrafanaThemeV2) => ({
|
||||
wrapper: css`
|
||||
display: flex;
|
||||
|
||||
@ -32,12 +32,12 @@ const getStyles = (theme: GrafanaTheme) => ({
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-radius: 0 ${theme.border.radius.sm} ${theme.border.radius.sm} 0;
|
||||
border-radius: 0 ${theme.shape.borderRadius()} ${theme.shape.borderRadius()} 0;
|
||||
border-right-width: 1px;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-radius: ${theme.border.radius.sm} 0 0 ${theme.border.radius.sm};
|
||||
border-radius: ${theme.shape.borderRadius()} 0 0 ${theme.shape.borderRadius()};
|
||||
}
|
||||
}
|
||||
`,
|
||||
|
Loading…
Reference in New Issue
Block a user