Select: Fix issue with placeholder and auto width (grafana#42851)

* Select: Fix issue with placeholder and auto width

* Fixed lint issue

Author: torkelo

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

@@ -15,7 +15,8 @@ import NoOptionsMessage from './NoOptionsMessage';
 import resetSelectStyles from '../../../Select/resetSelectStyles';
 import { CustomScrollbar } from '../../../CustomScrollbar/CustomScrollbar';
 import { PopoverContent, Tooltip } from '../../../Tooltip/Tooltip';
-import { SelectableValue } from '@grafana/data';
+import { GrafanaTheme2, SelectableValue } from '@grafana/data';
+import { ThemeContext } from '../../../../themes';
 
 /**
  * Changes in new selects:
@@ -49,6 +50,8 @@ export const MenuList = (props: any) => {
   );
 };
 export class Select<T> extends PureComponent<LegacySelectProps<T>> {
+  static contextType = ThemeContext;
+
   static defaultProps: Partial<LegacySelectProps<any>> = {
     className: '',
     isDisabled: false,
@@ -137,7 +140,7 @@ export class Select<T> extends PureComponent<LegacySelectProps<T>> {
               onChange={onChange}
               options={options}
               placeholder={placeholder || 'Choose'}
-              styles={resetSelectStyles()}
+              styles={resetSelectStyles(this.context as GrafanaTheme2)}
               isDisabled={isDisabled}
               isLoading={isLoading}
               isClearable={isClearable}

packages/grafana-ui/src/components/Select/SelectBase.tsx

@@ -6,7 +6,6 @@ import { default as AsyncCreatable } from 'react-select/async-creatable';
 
 import { Icon } from '../Icon/Icon';
 import { Spinner } from '../Spinner/Spinner';
-import { css, cx } from '@emotion/css';
 import resetSelectStyles from './resetSelectStyles';
 import { SelectMenu, SelectMenuOptions } from './SelectMenu';
 import { IndicatorsContainer } from './IndicatorsContainer';
@@ -251,33 +250,6 @@ export function SelectBase<T>({
           MenuList: SelectMenu,
           Group: SelectOptionGroup,
           ValueContainer,
-          Placeholder(props: any) {
-            return (
-              <div
-                {...props.innerProps}
-                className={cx(
-                  css(props.getStyles('placeholder', props)),
-                  css`
-                    display: inline-block;
-                    color: ${theme.colors.text.disabled};
-                    grid-area: 1 / 1 / 2 / 3;
-                    box-sizing: border-box;
-                    line-height: 1;
-                    white-space: nowrap;
-                  `,
-                  // When width: auto, the placeholder must take up space in the Select otherwise the width collapses down
-                  width !== 'auto' &&
-                    css`
-                      position: absolute;
-                      top: 50%;
-                      transform: translateY(-50%);
-                    `
-                )}
-              >
-                {props.children}
-              </div>
-            );
-          },
           IndicatorsContainer(props: any) {
             const { selectProps } = props;
             const { value, showAllSelectedWhenOpen, maxVisibleValues, menuIsOpen } = selectProps;
@@ -346,7 +318,7 @@ export function SelectBase<T>({
           ...components,
         }}
         styles={{
-          ...resetSelectStyles(),
+          ...resetSelectStyles(theme),
           menuPortal: (base: any) => ({
             ...base,
             zIndex: theme.zIndex.portal,

packages/grafana-ui/src/components/Select/resetSelectStyles.ts

@@ -1,6 +1,7 @@
+import { GrafanaTheme2 } from '@grafana/data';
 import { CSSObjectWithLabel } from 'react-select';
 
-export default function resetSelectStyles() {
+export default function resetSelectStyles(theme: GrafanaTheme2) {
   return {
     clearIndicator: () => ({}),
     container: () => ({}),
@@ -31,7 +32,10 @@ export default function resetSelectStyles() {
     multiValueRemove: () => ({}),
     noOptionsMessage: () => ({}),
     option: () => ({}),
-    placeholder: () => ({}),
+    placeholder: (originalStyles: CSSObjectWithLabel) => ({
+      ...originalStyles,
+      color: theme.colors.text.disabled,
+    }),
     singleValue: () => ({}),
     valueContainer: () => ({}),
   };

public/app/core/components/FolderFilter/FolderFilter.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { css } from '@emotion/css';
 import debounce from 'debounce-promise';
-import { AsyncMultiSelect, Icon, resetSelectStyles, useStyles2 } from '@grafana/ui';
+import { AsyncMultiSelect, Icon, useStyles2 } from '@grafana/ui';
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
 
 import { FolderInfo, PermissionLevelString } from 'app/types';
@@ -36,7 +36,6 @@ export function FolderFilter({ onChange: propsOnChange, maxMenuHeight }: FolderF
     isMulti: true,
     noOptionsMessage: 'No folders found',
     placeholder: 'Filter by folder',
-    styles: resetSelectStyles(),
     maxMenuHeight,
     value,
     onChange,

public/app/core/components/PanelTypeFilter/PanelTypeFilter.tsx

@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import { GrafanaTheme2, PanelPluginMeta, SelectableValue } from '@grafana/data';
 import { getAllPanelPluginMeta } from 'app/features/panel/state/util';
-import { Icon, resetSelectStyles, MultiSelect, useStyles2 } from '@grafana/ui';
+import { Icon, MultiSelect, useStyles2 } from '@grafana/ui';
 import { css } from '@emotion/css';
 
 export interface Props {
@@ -42,7 +42,6 @@ export const PanelTypeFilter = ({ onChange: propsOnChange, maxMenuHeight }: Prop
     getOptionValue: (i: any) => i.value,
     noOptionsMessage: 'No Panel types found',
     placeholder: 'Filter by type',
-    styles: resetSelectStyles(),
     maxMenuHeight,
     options,
     value,

public/app/core/components/TagFilter/TagFilter.tsx

@@ -3,7 +3,7 @@ import React, { FC } from 'react';
 import { css } from '@emotion/css';
 import { components } from 'react-select';
 import debounce from 'debounce-promise';
-import { stylesFactory, useTheme, resetSelectStyles, Icon, AsyncMultiSelect } from '@grafana/ui';
+import { stylesFactory, useTheme, Icon, AsyncMultiSelect } from '@grafana/ui';
 import { escapeStringForRegex, GrafanaTheme } from '@grafana/data';
 // Components
 import { TagOption } from './TagOption';
@@ -82,7 +82,6 @@ export const TagFilter: FC<Props> = ({
     noOptionsMessage: 'No tags found',
     onChange: onTagChange,
     placeholder,
-    styles: resetSelectStyles(),
     value,
     width,
     components: {