IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-26 02:40:26 -06:00
Code Issues Packages Projects Releases Wiki Activity

updated component to use new theme model (#33305)

Browse Source
This commit is contained in:
Uchechukwu Obasi 2021-04-23 10:26:29 +01:00 committed by GitHub
parent 6e2739a43a
commit 3bae330286
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/grafana-ui/src/components/Button/ToolbarButtonRow.tsx
View File

@ -1,14 +1,14 @@
import React, { forwardRef, HTMLAttributes } from 'react'; import React, { forwardRef, HTMLAttributes } from 'react';
import { css, cx } from '@emotion/css'; import { css, cx } from '@emotion/css';
import { GrafanaTheme } from '@grafana/data'; import { useStyles2 } from '../../themes';
import { useStyles } from '../../themes'; import { GrafanaThemeV2 } from '@grafana/data';
export interface Props extends HTMLAttributes<HTMLDivElement> { export interface Props extends HTMLAttributes<HTMLDivElement> {
className?: string; className?: string;
} }
export const ToolbarButtonRow = forwardRef<HTMLDivElement, Props>(({ className, children, ...rest }, ref) => { export const ToolbarButtonRow = forwardRef<HTMLDivElement, Props>(({ className, children, ...rest }, ref) => {
const styles = useStyles(getStyles); const styles = useStyles2(getStyles);
return ( return (
<div ref={ref} className={cx(styles.wrapper, className)} {...rest}> <div ref={ref} className={cx(styles.wrapper, className)} {...rest}>
@ -19,13 +19,13 @@ export const ToolbarButtonRow = forwardRef<HTMLDivElement, Props>(({ className,
ToolbarButtonRow.displayName = 'ToolbarButtonRow'; ToolbarButtonRow.displayName = 'ToolbarButtonRow';
const getStyles = (theme: GrafanaTheme) => ({ const getStyles = (theme: GrafanaThemeV2) => ({
wrapper: css` wrapper: css`
display: flex; display: flex;
.button-group, .button-group,
.toolbar-button { .toolbar-button {
margin-left: ${theme.spacing.sm}; margin-left: ${theme.spacing(1)};
&:first-child { &:first-child {
margin-left: 0; margin-left: 0;