Chore: Use forwardRef in ButtonSelect (#22042)

* forwardRef to ButtonSelect

* Remove innerRef prop

* Use styleFactory

packages/grafana-ui/src/components/Forms/Select/ButtonSelect.tsx

@@ -4,9 +4,10 @@ import { Button, ButtonVariant, ButtonProps } from '../Button';
 import { ButtonSize } from '../../Button/types';
 import { SelectCommonProps, SelectBase, CustomControlProps } from './SelectBase';
 import { css } from 'emotion';
-import { useTheme } from '../../../themes';
+import { stylesFactory, useTheme } from '../../../themes';
 import { Icon } from '../../Icon/Icon';
 import { IconType } from '../../Icon/types';
+import { GrafanaTheme } from '@grafana/data';
 
 interface ButtonSelectProps<T> extends Omit<SelectCommonProps<T>, 'renderControl' | 'size' | 'prefix'> {
   icon?: IconType;
@@ -17,42 +18,43 @@ interface ButtonSelectProps<T> extends Omit<SelectCommonProps<T>, 'renderControl
 interface SelectButtonProps extends Omit<ButtonProps, 'icon'> {
   icon?: IconType;
   isOpen?: boolean;
-  innerRef: any;
 }
 
-const SelectButton: React.FC<SelectButtonProps> = ({ icon, children, isOpen, innerRef, ...buttonProps }) => {
+const SelectButton = React.forwardRef<HTMLButtonElement, SelectButtonProps>(
-  const theme = useTheme();
+  ({ icon, children, isOpen, ...buttonProps }, ref) => {
-  const styles = {
+    const getStyles = stylesFactory((theme: GrafanaTheme) => ({
-    wrapper: css`
+      wrapper: css`
-      display: flex;
+        display: flex;
-      align-items: center;
+        align-items: center;
-      justify-content: space-between;
+        justify-content: space-between;
-      max-width: 200px;
+        max-width: 200px;
-      text-overflow: ellipsis;
+        text-overflow: ellipsis;
-    `,
+      `,
-    iconWrap: css`
+      iconWrap: css`
-      padding: 0 15px 0 0;
+        padding: 0 15px 0 0;
-    `,
+      `,
-    caretWrap: css`
+      caretWrap: css`
-      padding-left: ${theme.spacing.sm};
+        padding-left: ${theme.spacing.sm};
-      margin-left: ${theme.spacing.sm};
+        margin-left: ${theme.spacing.sm};
-      margin-right: -${theme.spacing.sm};
+        margin-right: -${theme.spacing.sm};
-      height: 100%;
+        height: 100%;
-    `,
+      `,
-  };
+    }));
-  const buttonIcon = `fa fa-${icon}`;
+    const styles = getStyles(useTheme());
-  const caretIcon = isOpen ? 'caret-up' : 'caret-down';
+    const buttonIcon = `fa fa-${icon}`;
-  return (
+    const caretIcon = isOpen ? 'caret-up' : 'caret-down';
-    <Button {...buttonProps} ref={innerRef} icon={buttonIcon}>
+    return (
-      <span className={styles.wrapper}>
+      <Button {...buttonProps} ref={ref} icon={buttonIcon}>
-        <span>{children}</span>
+        <span className={styles.wrapper}>
-        <span className={styles.caretWrap}>
+          <span>{children}</span>
-          <Icon name={caretIcon} />
+          <span className={styles.caretWrap}>
+            <Icon name={caretIcon} />
+          </span>
         </span>
-      </span>
+      </Button>
-    </Button>
+    );
-  );
+  }
-};
+);
 
 export function ButtonSelect<T>({
   placeholder,
@@ -76,7 +78,7 @@ export function ButtonSelect<T>({
       {...selectProps}
       renderControl={React.forwardRef<any, CustomControlProps<T>>(({ onBlur, onClick, value, isOpen }, ref) => {
         return (
-          <SelectButton {...buttonProps} innerRef={ref} onBlur={onBlur} onClick={onClick} isOpen={isOpen}>
+          <SelectButton {...buttonProps} ref={ref} onBlur={onBlur} onClick={onClick} isOpen={isOpen}>
             {value ? value.label : placeholder}
           </SelectButton>
         );