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

packages/grafana-ui/src/components/Dropdown/ButtonSelect.tsx

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