IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

GrafanaUI: Deprecate Select in favor of Combobox (#100294)

Browse Source 
* GrafanaUI: Deprecate Select

* add deprecated decorator to stories

* tweak message
This commit is contained in:
Josh Hunt 2025-02-14 16:07:26 +00:00 committed by GitHub
parent dc5602bad9
commit 589340e03c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 22 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
packages/grafana-ui/src/components/Select/Select.story.tsx
View File

@ -7,6 +7,7 @@ import { useState } from 'react';
import { SelectableValue, toIconName } from '@grafana/data';
import { getAvailableIcons } from '../../types';
import { Alert } from '../Alert/Alert';
import { Icon } from '../Icon/Icon';
import { AsyncMultiSelect, AsyncSelect, MultiSelect, Select } from './Select';
@ -92,6 +93,7 @@ const meta: Meta = {
},
},
},
decorators: [DeprecatedDecorator],
};
const loadAsyncOptions = () => {
@ -383,7 +385,7 @@ export const AutoMenuPlacement: StoryFn = (args) => {
return (
<>
<div style={{ width: '100%', height: '95vh', display: 'flex', alignItems: 'flex-end' }}>
<div style={{ width: '100%', height: 'calc(95vh - 118px)', display: 'flex', alignItems: 'flex-end' }}>
<Select
options={generateOptions()}
value={value}
@ -455,3 +457,18 @@ CustomValueCreation.args = {
};
export default meta;
function DeprecatedDecorator(Story: React.ElementType) {
return (
<div>
<Alert title="Deprecated!" severity="warning">
The Select component is deprecated.
<br />
Use Combobox instead - it supports most use cases, is performant by default, and can handle hundreds of
thousands of options, and has a simpler API.
</Alert>
<Story />
</div>
);
}

4
packages/grafana-ui/src/components/Select/Select.tsx
View File

@ -10,6 +10,7 @@ import {
VirtualizedSelectAsyncProps,
} from './types';
/** @deprecated Use Combobox component instead */
export function Select<T, Rest = {}>(props: SelectCommonProps<T> & Rest) {
return <SelectBase {...props} />;
}
@ -24,14 +25,17 @@ export interface AsyncSelectProps<T> extends Omit<SelectCommonProps<T>, 'options
value?: T | SelectableValue<T> | null;
}
/** @deprecated Use Combobox component instead */
export function AsyncSelect<T, Rest = {}>(props: AsyncSelectProps<T> & Rest) {
return <SelectBase {...props} />;
}
/** @deprecated Use Combobox component instead - it's virtualised by default! */
export function VirtualizedSelect<T, Rest = {}>(props: VirtualizedSelectProps<T> & Rest) {
return <SelectBase virtualized {...props} />;
}
/** @deprecated Use Combobox component instead - it's virtualised by default! */
export function AsyncVirtualizedSelect<T, Rest = {}>(props: VirtualizedSelectAsyncProps<T> & Rest) {
return <SelectBase virtualized {...props} />;
}