ButtonSelect: updates component with the new theme model (#33565)

This commit is contained in:
Uchechukwu Obasi 2021-04-30 15:45:43 +01:00 committed by GitHub
parent 231a8ef0cf
commit aad772a7fc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,10 +1,10 @@
import React, { useState, HTMLAttributes } from 'react';
import { PopoverContent } from '../Tooltip/Tooltip';
import { GrafanaTheme, SelectableValue } from '@grafana/data';
import { GrafanaThemeV2, SelectableValue } from '@grafana/data';
import { ToolbarButtonVariant, ToolbarButton } from '../Button';
import { ClickOutsideWrapper } from '../ClickOutsideWrapper/ClickOutsideWrapper';
import { css } from '@emotion/css';
import { useStyles } from '../../themes/ThemeContext';
import { useStyles2 } from '../../themes/ThemeContext';
import { Menu } from '../Menu/Menu';
import { MenuItem } from '../Menu/MenuItem';
@ -25,7 +25,7 @@ export interface Props<T> extends HTMLAttributes<HTMLButtonElement> {
export const ButtonSelect = React.memo(<T,>(props: Props<T>) => {
const { className, options, value, onChange, narrow, variant, ...restProps } = props;
const [isOpen, setIsOpen] = useState<boolean>(false);
const styles = useStyles(getStyles);
const styles = useStyles2(getStyles);
const onCloseMenu = () => {
setIsOpen(false);
@ -77,7 +77,7 @@ export const ButtonSelect = React.memo(<T,>(props: Props<T>) => {
ButtonSelect.displayName = 'ButtonSelect';
const getStyles = (theme: GrafanaTheme) => {
const getStyles = (theme: GrafanaThemeV2) => {
return {
wrapper: css`
position: relative;
@ -86,7 +86,7 @@ const getStyles = (theme: GrafanaTheme) => {
menuWrapper: css`
position: absolute;
z-index: ${theme.zIndex.dropdown};
top: ${theme.spacing.formButtonHeight + 1}px;
top: ${theme.spacing(4)};
right: 0;
`,
};