diff --git a/packages/grafana-ui/src/components/Forms/Select/ButtonSelect.tsx b/packages/grafana-ui/src/components/Forms/Select/ButtonSelect.tsx index 43ccb5968de..4d9f7c530e0 100644 --- a/packages/grafana-ui/src/components/Forms/Select/ButtonSelect.tsx +++ b/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 extends Omit, 'renderControl' | 'size' | 'prefix'> { icon?: IconType; @@ -17,42 +18,43 @@ interface ButtonSelectProps extends Omit, 'renderControl interface SelectButtonProps extends Omit { icon?: IconType; isOpen?: boolean; - innerRef: any; } -const SelectButton: React.FC = ({ icon, children, isOpen, innerRef, ...buttonProps }) => { - const theme = useTheme(); - const styles = { - wrapper: css` - display: flex; - align-items: center; - justify-content: space-between; - max-width: 200px; - text-overflow: ellipsis; - `, - iconWrap: css` - padding: 0 15px 0 0; - `, - caretWrap: css` - padding-left: ${theme.spacing.sm}; - margin-left: ${theme.spacing.sm}; - margin-right: -${theme.spacing.sm}; - height: 100%; - `, - }; - const buttonIcon = `fa fa-${icon}`; - const caretIcon = isOpen ? 'caret-up' : 'caret-down'; - return ( - - ); -}; + + ); + } +); export function ButtonSelect({ placeholder, @@ -76,7 +78,7 @@ export function ButtonSelect({ {...selectProps} renderControl={React.forwardRef>(({ onBlur, onClick, value, isOpen }, ref) => { return ( - + {value ? value.label : placeholder} );