IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
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/Dropdown/ButtonSelect.tsx
View File

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