Select: Change Select group headers to always be visible (#88178)

* change select group headers to always be visible

* remove unnecessary SelectOptionGroup

* add top border

.betterer.results

@@ -640,6 +640,11 @@ exports[`better eslint`] = {
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "1"]
     ],
+    "packages/grafana-ui/src/components/Forms/Legacy/Select/SelectOptionGroup.tsx:5381": [
+      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
+      [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
+    ],
     "packages/grafana-ui/src/components/InfoBox/InfoBox.story.tsx:5381": [
       [0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
     ],
@@ -684,11 +689,6 @@ exports[`better eslint`] = {
       [0, 0, 0, "Do not use any type assertions.", "4"],
       [0, 0, 0, "Unexpected any. Specify a different type.", "5"]
     ],
-    "packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx:5381": [
-      [0, 0, 0, "Unexpected any. Specify a different type.", "0"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "1"],
-      [0, 0, 0, "Unexpected any. Specify a different type.", "2"]
-    ],
     "packages/grafana-ui/src/components/Select/ValueContainer.tsx:5381": [
       [0, 0, 0, "Unexpected any. Specify a different type.", "0"]
     ],

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

@@ -9,7 +9,6 @@ import Creatable from 'react-select/creatable';
 import { SelectableValue, ThemeContext } from '@grafana/data';
 
 import { CustomScrollbar } from '../../../CustomScrollbar/CustomScrollbar';
-import { SelectOptionGroup } from '../../../Select/SelectOptionGroup';
 import { SingleValue } from '../../../Select/SingleValue';
 import resetSelectStyles from '../../../Select/resetSelectStyles';
 import { SelectCommonProps, SelectAsyncProps } from '../../../Select/types';
@@ -18,6 +17,7 @@ import { Tooltip, PopoverContent } from '../../../Tooltip';
 import IndicatorsContainer from './IndicatorsContainer';
 import NoOptionsMessage from './NoOptionsMessage';
 import { SelectOption } from './SelectOption';
+import { SelectOptionGroup } from './SelectOptionGroup';
 
 /**
  * Changes in new selects:

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

@@ -4,9 +4,9 @@ import { GroupProps } from 'react-select';
 
 import { GrafanaTheme2 } from '@grafana/data';
 
-import { stylesFactory, withTheme2 } from '../../themes';
-import { Themeable2 } from '../../types';
-import { Icon } from '../Icon/Icon';
+import { stylesFactory, withTheme2 } from '../../../../themes';
+import { Themeable2 } from '../../../../types';
+import { Icon } from '../../../Icon/Icon';
 
 interface ExtendedGroupProps extends Omit<GroupProps<any, any>, 'theme'>, Themeable2 {
   data: {

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

@@ -208,8 +208,27 @@ export const MultiSelectWithOptionGroups: StoryFn = (args) => {
     <>
       <MultiSelect
         options={[
-          { label: '1', value: '1' },
-          { label: '2', value: '2', options: [{ label: '5', value: '5' }] },
+          { label: 'Foo', value: '1' },
+          {
+            label: 'Colours',
+            value: '2',
+            options: [
+              { label: 'Blue', value: '5' },
+              { label: 'Red', value: '6' },
+              { label: 'Black', value: '7' },
+              { label: 'Yellow', value: '8' },
+            ],
+          },
+          {
+            label: 'Animals',
+            value: '9',
+            options: [
+              { label: 'Cat', value: '10' },
+              { label: 'Cow', value: '11' },
+              { label: 'Dog', value: '12' },
+              { label: 'Eagle', value: '13' },
+            ],
+          },
         ]}
         value={value}
         onChange={(v) => {

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

@@ -23,7 +23,7 @@ import { InputControl } from './InputControl';
 import { MultiValueContainer, MultiValueRemove } from './MultiValue';
 import { SelectContainer } from './SelectContainer';
 import { SelectMenu, SelectMenuOptions, VirtualizedSelectMenu } from './SelectMenu';
-import { SelectOptionGroup } from './SelectOptionGroup';
+import { SelectOptionGroupHeader } from './SelectOptionGroupHeader';
 import { Props, SingleValue } from './SingleValue';
 import { ValueContainer } from './ValueContainer';
 import { getSelectStyles } from './getSelectStyles';
@@ -330,7 +330,7 @@ export function SelectBase<T, Rest = {}>({
         ref={reactSelectRef}
         components={{
           MenuList: SelectMenuComponent,
-          Group: SelectOptionGroup,
+          GroupHeading: SelectOptionGroupHeader,
           ValueContainer,
           IndicatorsContainer: CustomIndicatorsContainer,
           IndicatorSeparator: IndicatorSeparator,

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { GroupHeadingProps } from 'react-select';
+
+import { useStyles2 } from '../../themes/ThemeContext';
+import { Text } from '../Text/Text';
+
+import { getSelectStyles } from './getSelectStyles';
+
+export const SelectOptionGroupHeader = (props: GroupHeadingProps) => {
+  const styles = useStyles2(getSelectStyles);
+
+  return (
+    <div className={styles.groupHeader}>
+      <Text weight="bold" variant="bodySmall" color="secondary">
+        {props.children ?? ''}
+      </Text>
+    </div>
+  );
+};

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

@@ -138,5 +138,10 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme2) => {
         color: theme.colors.text.primary,
       },
     }),
+    groupHeader: css({
+      padding: theme.spacing(1, 1, 1, 0.75),
+      borderLeft: '2px solid transparent',
+      borderTop: `1px solid ${theme.colors.border.weak}`,
+    }),
   };
 });