diff --git a/public/app/features/variables/pickers/PickerRenderer.tsx b/public/app/features/variables/pickers/PickerRenderer.tsx index 4a5cf32b..89523fbb 100644 --- a/public/app/features/variables/pickers/PickerRenderer.tsx +++ b/public/app/features/variables/pickers/PickerRenderer.tsx @@ -1,12 +1,13 @@ -import { css } from '@emotion/css'; -import React, { PropsWithChildren, ReactElement, useMemo } from 'react'; +// import { css } from '@emotion/css'; +// import React, { PropsWithChildren, ReactElement, useMemo } from 'react'; +import React, { useMemo } from 'react'; -import { TypedVariableModel, VariableHide, GrafanaTheme2 } from '@grafana/data'; -import { selectors } from '@grafana/e2e-selectors'; -import { Tooltip, useStyles2 } from '@grafana/ui'; +import { TypedVariableModel, VariableHide } from '@grafana/data'; +// import { selectors } from '@grafana/e2e-selectors'; +// import { Tooltip, useStyles2 } from '@grafana/ui'; import { variableAdapters } from '../adapters'; -import { VARIABLE_PREFIX } from '../constants'; +// import { VARIABLE_PREFIX } from '../constants'; interface Props { variable: TypedVariableModel; @@ -31,59 +32,59 @@ export const PickerRenderer = (props: Props) => { ); }; -function PickerLabel({ variable }: PropsWithChildren): ReactElement | null { - const labelOrName = useMemo(() => variable.label || variable.name, [variable]); - const styles = useStyles2(getStyles); +// function PickerLabel({ variable }: PropsWithChildren): ReactElement | null { +// const labelOrName = useMemo(() => variable.label || variable.name, [variable]); +// const styles = useStyles2(getStyles); - if (variable.hide !== VariableHide.dontHide) { - return null; - } +// if (variable.hide !== VariableHide.dontHide) { +// return null; +// } - const elementId = VARIABLE_PREFIX + variable.id; - if (variable.description) { - return ( - - - - ); - } +// const elementId = VARIABLE_PREFIX + variable.id; +// if (variable.description) { +// return ( +// +// +// +// ); +// } - return ( - - ); -} +// return ( +// +// ); +// } -const getStyles = (theme: GrafanaTheme2) => { - return { - label: css({ - fontFamily: 'inherit', - fontWeight: '500', - fontSize: '14px', - cursor: 'pointer', - appearance: 'none', - userSelect: 'none', - textAlign: 'center', - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', - height: '32px', - textDecoration: 'none', - padding: '0px 12px', - gap: '8px', - transition: 'color 80ms cubic-bezier(0.65, 0, 0.35, 1) 0s, fill, background-color, border-color', - color: 'grey', - }), - }; -}; +// const getStyles = (theme: GrafanaTheme2) => { +// return { +// label: css({ +// fontFamily: 'inherit', +// fontWeight: '500', +// fontSize: '14px', +// cursor: 'pointer', +// appearance: 'none', +// userSelect: 'none', +// textAlign: 'center', +// display: 'flex', +// alignItems: 'center', +// justifyContent: 'space-between', +// height: '32px', +// textDecoration: 'none', +// padding: '0px 12px', +// gap: '8px', +// transition: 'color 80ms cubic-bezier(0.65, 0, 0.35, 1) 0s, fill, background-color, border-color', +// color: 'grey', +// }), +// }; +// };