From c706166a248ac909e722bcbec4262adbe817322c Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Wed, 22 May 2024 18:25:27 +0100 Subject: [PATCH] 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 | 10 ++++---- .../components/Forms/Legacy/Select/Select.tsx | 2 +- .../Legacy}/Select/SelectOptionGroup.tsx | 6 ++--- .../src/components/Select/Select.story.tsx | 23 +++++++++++++++++-- .../src/components/Select/SelectBase.tsx | 4 ++-- .../Select/SelectOptionGroupHeader.tsx | 19 +++++++++++++++ .../src/components/Select/getSelectStyles.ts | 5 ++++ 7 files changed, 56 insertions(+), 13 deletions(-) rename packages/grafana-ui/src/components/{ => Forms/Legacy}/Select/SelectOptionGroup.tsx (93%) create mode 100644 packages/grafana-ui/src/components/Select/SelectOptionGroupHeader.tsx diff --git a/.betterer.results b/.betterer.results index 27389d1d9cb..56d803a81ef 100644 --- a/.betterer.results +++ b/.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"] ], diff --git a/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.tsx index 76f65a3b726..19fe15a32d3 100644 --- a/packages/grafana-ui/src/components/Forms/Legacy/Select/Select.tsx +++ b/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: diff --git a/packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx b/packages/grafana-ui/src/components/Forms/Legacy/Select/SelectOptionGroup.tsx similarity index 93% rename from packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx rename to packages/grafana-ui/src/components/Forms/Legacy/Select/SelectOptionGroup.tsx index 08314d41474..1948a4d486b 100644 --- a/packages/grafana-ui/src/components/Select/SelectOptionGroup.tsx +++ b/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, 'theme'>, Themeable2 { data: { diff --git a/packages/grafana-ui/src/components/Select/Select.story.tsx b/packages/grafana-ui/src/components/Select/Select.story.tsx index 7acc339bffc..6a69cc4b657 100644 --- a/packages/grafana-ui/src/components/Select/Select.story.tsx +++ b/packages/grafana-ui/src/components/Select/Select.story.tsx @@ -208,8 +208,27 @@ export const MultiSelectWithOptionGroups: StoryFn = (args) => { <> { diff --git a/packages/grafana-ui/src/components/Select/SelectBase.tsx b/packages/grafana-ui/src/components/Select/SelectBase.tsx index eef3936cfaa..b1a878cec93 100644 --- a/packages/grafana-ui/src/components/Select/SelectBase.tsx +++ b/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({ ref={reactSelectRef} components={{ MenuList: SelectMenuComponent, - Group: SelectOptionGroup, + GroupHeading: SelectOptionGroupHeader, ValueContainer, IndicatorsContainer: CustomIndicatorsContainer, IndicatorSeparator: IndicatorSeparator, diff --git a/packages/grafana-ui/src/components/Select/SelectOptionGroupHeader.tsx b/packages/grafana-ui/src/components/Select/SelectOptionGroupHeader.tsx new file mode 100644 index 00000000000..bdcc4ec0139 --- /dev/null +++ b/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 ( +
+ + {props.children ?? ''} + +
+ ); +}; diff --git a/packages/grafana-ui/src/components/Select/getSelectStyles.ts b/packages/grafana-ui/src/components/Select/getSelectStyles.ts index 7ce6d12c462..3dddfaeeb8c 100644 --- a/packages/grafana-ui/src/components/Select/getSelectStyles.ts +++ b/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}`, + }), }; });