Docs: Add storybook links to components (#113102)

* for every storybook component, a storybook link * typo fix * text improvements
2025-10-29 09:11:23 -04:00
parent 86bf99aaaa
commit 8bff09b88b
125 changed files with 548 additions and 26 deletions
@@ -26,6 +26,11 @@ export interface Props extends HTMLAttributes<HTMLDivElement> {
  topSpacing?: number;
 }

+/**
+ * An alert displays an important message in a way that attracts the user's attention without interrupting the user's task.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/information-alert--docs
+ */
 export const Alert = React.forwardRef<HTMLDivElement, Props>(
  (
    {
@@ -21,6 +21,12 @@ export interface Props<T = string> extends Omit<FieldProps, 'children'> {
  /** Input that will save its value on change  */
  children: (onChange: (newValue: T) => void) => React.ReactElement;
 }
+
+/**
+ * Used for form inputs that should save its content automatically.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-autosavefield--docs
+ */
 export function AutoSaveField<T = string>(props: Props<T>) {
  const {
    invalid,
@@ -47,6 +47,11 @@ const BadgeSkeleton: SkeletonComponent = ({ rootProps }) => {
  return <Skeleton width={60} height={22} containerClassName={styles.container} {...rootProps} />;
 };

+/**
+ * The badge component adds meta information to other content, for example about release status or new elements. You can add any `Icon` component or use the badge without an icon.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/information-badge--docs
+ */
 export const Badge = attachSkeleton(BadgeComponent, BadgeSkeleton);

 const getSkeletonStyles = () => ({
@@ -56,6 +56,9 @@ export interface Props extends Themeable2 {
  isOverflow: boolean;
 }

+/**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/plugins-bargauge--docs
+ */
 export class BarGauge extends PureComponent<Props> {
  static defaultProps: Partial<Props> = {
    lcdCellWidth: 12,
@@ -82,6 +82,11 @@ export interface Props extends Themeable2 {
  disableWideLayout?: boolean;
 }

+/**
+ * Component for showing a value based on a [DisplayValue](https://github.com/grafana/grafana/blob/main/packages/grafana-data/src/types/displayValue.ts#L5).
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/plugins-bigvalue--docs
+ */
 export const BigValue = memo<Props>((props) => {
  const { onClick, className, hasLinks, theme, justifyMode = BigValueJustifyMode.Auto } = props;

@@ -51,6 +51,9 @@ type CommonProps = BasePropsWithChildren | NoChildrenTooltip | NoChildrenAriaLab

 export type ButtonProps = CommonProps & ButtonHTMLAttributes<HTMLButtonElement>;

+/**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-button--docs
+ */
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  (
    {
@@ -28,6 +28,9 @@ export interface ButtonCascaderProps {
  hideDownIcon?: boolean;
 }

+/**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-buttoncascader--docs
+ */
 export const ButtonCascader = (props: ButtonCascaderProps) => {
  const { onChange, className, loadData, icon, buttonProps, hideDownIcon, variant, disabled, ...rest } = props;
  const styles = useStyles2(getStyles);
@@ -11,7 +11,11 @@ export interface CallToActionCardProps {
  className?: string;
 }

-/** @deprecated Use <EmptyState variant="call-to-action" /> instead */
+/**
+ * @deprecated Use `<EmptyState variant="call-to-action" />` instead.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/information-deprecated-calltoactioncard--docs
+ */
 export const CallToActionCard = ({ message, callToActionElement, footer, className }: CallToActionCardProps) => {
  const css = useStyles2(getStyles);

@@ -51,6 +51,7 @@ const CardContext = React.createContext<{
 /**
 * Generic card component
 *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/layout-card--docs
 * @public
 */
 export const Card: CardInterface = ({
@@ -22,6 +22,11 @@ export interface CarouselProps {
  images: CarouselImage[];
 }

+/**
+ * The Carousel component displays a grid of image thumbnails that can be clicked to view full-sized images in a modal with navigation controls. It provides an elegant way to present collections of images or screenshots with fullscreen preview capabilities.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/overlays-carousel--docs
+ */
 export const Carousel: React.FC<CarouselProps> = ({ images }) => {
  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
  const [imageErrors, setImageErrors] = useState<Record<string, boolean>>({});
@@ -321,4 +321,9 @@ class UnthemedCascader extends PureComponent<CascaderProps, CascaderState> {
  }
 }

+/**
+ * The cascader component is a Select with a cascading flyout menu. When you have lots of options in your select, they can be hard to navigate from a regular dropdown list. In that case you can use the cascader to organize your options into groups hierarchically. Just like in the Select component, the cascader input doubles as a search field to quickly jump to a selection without navigating the list.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-cascader--docs
+ */
 export const Cascader = withTheme2(UnthemedCascader);
@@ -13,6 +13,11 @@ export interface Props {
  children: React.ReactNode;
 }

+/**
+ * A wrapper component that detects clicks outside of the elements by attaching event listener to `window` or `document` objects. Useful for components that require an action being triggered when a click outside has occurred, for example closing an overlay or popup.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/utilities-clickoutsidewrapper--docs
+ */
 export function ClickOutsideWrapper({
  includeButtonPress = true,
  parent = window,
@@ -21,6 +21,11 @@ export type Props = ButtonProps & {

 const SHOW_SUCCESS_DURATION = 2 * 1000;

+/**
+ * A control for allowing the user to copy text to their clipboard. Uses native APIs on modern browsers, falling back to the old `document.execCommand('copy')` API on other browsers. The text to be copied should be provided via `getText` prop.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-clipboardbutton--docs
+ */
 export function ClipboardButton({
  onClipboardCopy,
  onClipboardError,
@@ -25,6 +25,11 @@ export interface Props {
  unmountContentWhenClosed?: boolean;
 }

+/**
+ * A simple container for enabling collapsing/expanding of content.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/layout-collapsablesection--docs
+ */
 export const CollapsableSection = ({
  label,
  isOpen,
@@ -128,6 +128,11 @@ export const ControlledCollapse = ({ isOpen, onToggle, ...otherProps }: React.Pr
  );
 };

+/**
+ * A content area, which can be horizontally collapsed and expanded. Can be used to hide extra information on the page.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/layout-collapse--docs
+ */
 export const Collapse = ({
  isOpen,
  label,
@@ -84,6 +84,9 @@ export const colorPickerFactory = <T extends ColorPickerProps>(
  };
 };

+/**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/pickers-colorpicker--docs
+ */
 export const ColorPicker = withTheme2(colorPickerFactory(ColorPickerPopover, 'ColorPicker'));
 export const SeriesColorPicker = withTheme2(colorPickerFactory(SeriesColorPickerPopover, 'SeriesColorPicker'));

@@ -19,6 +19,9 @@ export interface ColorPickerInputProps extends Omit<InputProps, 'value' | 'onCha
  returnColorAs?: 'rgb' | 'hex';
 }

+/**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/pickers-colorpickerinput--docs
+ */
 export const ColorPickerInput = forwardRef<HTMLInputElement, ColorPickerInputProps>(
  ({ value = '', onChange, returnColorAs = 'rgb', ...inputProps }, ref) => {
    const [currentColor, setColor] = useState(value);
@@ -12,6 +12,9 @@ export interface SeriesColorPickerPopoverProps extends ColorPickerProps, Popover
  onToggleAxis?: () => void;
 }

+/**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/pickers-seriescolorpicker--docs
+ */
 export const SeriesColorPickerPopover = (props: SeriesColorPickerPopoverProps) => {
  const { yaxis, onToggleAxis, color, ...colorPickerProps } = props;
  const yAxisLabel = t('grafana-ui.series-color-picker-popover.y-axis-usage', 'Use right y-axis');
@@ -119,8 +119,10 @@ const noop = () => {};
 export const VIRTUAL_OVERSCAN_ITEMS = 4;

 /**
- * A performant Select replacement.
+ * A performant and accessible combobox component that supports both synchronous and asynchronous options loading. It provides type-ahead filtering, keyboard navigation, and virtual scrolling for handling large datasets efficiently.
+ * Replaces the Select component, and has better performance.
 *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-combobox--docs
 * @alpha
 */
 export const Combobox = <T extends string | number>(props: ComboboxProps<T>) => {
@@ -35,6 +35,11 @@ interface MultiComboboxBaseProps<T extends string | number>

 export type MultiComboboxProps<T extends string | number> = MultiComboboxBaseProps<T> & AutoSizeConditionals;

+/**
+ * The behavior of the MultiCombobox is similar to that of the Combobox, but it allows you to select multiple options. For all non-multi behaviors, see the Combobox documentation.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-multicombobox--docs
+ */
 export const MultiCombobox = <T extends string | number>(props: MultiComboboxProps<T>) => {
  const {
    placeholder,
@@ -31,6 +31,11 @@ export interface Props {
  onCancel?(): void;
 }

+/**
+ * The ConfirmButton is an interactive component that adds a double-confirm option to a clickable action. When clicked, the action is replaced by an inline confirmation with the option to cancel. In Grafana, this is used, for example, for editing values in settings tables.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-confirmbutton--docs
+ */
 export const ConfirmButton = ({
  children,
  className,
@@ -48,6 +48,11 @@ export interface ConfirmModalProps {
  disabled?: boolean;
 }

+/**
+ * Used to request user for action confirmation, e.g. deleting items. Triggers provided `onConfirm` callback.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/overlays-confirmmodal--docs
+ */
 export const ConfirmModal = ({
  isOpen,
  title,
@@ -22,6 +22,11 @@ export interface ContextMenuProps {
  renderHeader?: () => React.ReactNode;
 }

+/**
+ * A menu displaying additional options when it's not possible to show them at all times due to a space constraint.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/overlays-contextmenu--docs
+ */
 export const ContextMenu = React.memo(
  ({ x, y, onClose, focusOnOpen = true, renderMenuItems, renderHeader }: ContextMenuProps) => {
    const menuRef = useRef<HTMLDivElement>(null);
@@ -5,6 +5,8 @@ import { DataSourceHttpSettings } from './DataSourceHttpSettings';

 # DataSourceHttpSettings

+> **Deprecated!** Use components from `@grafana/plugin-ui` instead, according to the [migration guide](https://github.com/grafana/plugin-ui/blob/main/src/components/ConfigEditor/migrating-from-datasource-http-settings.md)
+
 Component for displaying the configuration options for a data source plugin.

 ### When to use
@@ -72,6 +72,8 @@ const LABEL_WIDTH = 26;

 /**
 * @deprecated Use components from `@grafana/plugin-ui` instead, according to the [migration guide](https://github.com/grafana/plugin-ui/blob/main/src/components/ConfigEditor/migrating-from-datasource-http-settings.md).
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/plugins-datasourcehttpsettings--docs
 */
 export const DataSourceHttpSettings = (props: HttpSettingsProps) => {
  const {
@@ -19,7 +19,12 @@ export interface DatePickerProps {
  maxDate?: Date;
 }

-/** @public */
+/**
+ * A component with a calendar view for selecting a date.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/date-time-pickers-datepicker--docs
+ * @public
+ * */
 export const DatePicker = memo<DatePickerProps>((props) => {
  const styles = useStyles2(getStyles);
  const { isOpen, onClose } = props;
@@ -27,7 +27,12 @@ export interface DatePickerWithInputProps extends Omit<InputProps, 'value' | 'on
  placeholder?: string;
 }

-/** @public */
+/**
+ * An input with a calendar view, used to select a date.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/date-time-pickers-datepickerwithinput--docs
+ * @public
+ */
 export const DatePickerWithInput = forwardRef<HTMLInputElement, DatePickerWithInputProps>(
  ({ value, minDate, maxDate, onChange, closeOnSelect, placeholder = 'Date', ...rest }, ref) => {
    const [open, setOpen] = useState(false);
@@ -60,6 +60,11 @@ export interface Props {
  timeZone?: TimeZone;
 }

+/**
+ * A component for selecting a date *and* time.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/date-time-pickers-datetimepicker--docs
+ */
 export const DateTimePicker = ({
  date,
  maxDate,
@@ -41,6 +41,7 @@ type InputState = {
 };

 /**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/date-time-pickers-relativetimerangepicker--docs
 * @internal
 */
 export function RelativeTimeRangePicker(props: RelativeTimeRangePickerProps) {
@@ -36,6 +36,11 @@ export interface TimeRangeInputProps {

 const noop = () => {};

+/**
+ * A variant of TimeRangePicker for use in forms.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/date-time-pickers-timerangeinput--docs
+ */
 export const TimeRangeInput = ({
  value,
  onChange,
@@ -73,6 +73,9 @@ export interface State {
  isOpen: boolean;
 }

+/**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/date-time-pickers-timerangepicker--docs
+ */
 export function TimeRangePicker(props: TimeRangePickerProps) {
  const [isOpen, setOpen] = useState(false);

@@ -31,6 +31,9 @@ export interface Props {
  openMenuOnFocus?: boolean;
 }

+/**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/date-time-pickers-timezonepicker--docs
+ */
 export const TimeZonePicker = (props: Props) => {
  const {
    onChange,
@@ -39,6 +39,9 @@ export function getWeekStart(override?: string): WeekStart {
  return 'monday';
 }

+/**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/date-time-pickers-weekstartpicker--docs
+ */
 export const WeekStartPicker = (props: Props) => {
  const { onChange, width, autoFocus = false, onBlur, value, disabled = false, inputId } = props;
  const weekStarts: ComboboxOption[] = useMemo(
@@ -9,6 +9,9 @@ interface DividerProps {
  spacing?: ThemeSpacingTokens;
 }

+/**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/layout-divider--docs
+ */
 export const Divider = ({ direction = 'horizontal', spacing = 2 }: DividerProps) => {
  const styles = useStyles2(getStyles, spacing);

@@ -62,6 +62,11 @@ const drawerSizes = {
  lg: { width: '75vw', minWidth: 744 },
 };

+/**
+ * Drawer is a slide in overlay that can be used to display additional information without hiding the main page content. It can be anchored to the left or right edge of the screen.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/overlays-drawer--docs
+ */
 export function Drawer({
  children,
  onClose,
@@ -25,6 +25,8 @@ export interface Props<T> extends HTMLAttributes<HTMLButtonElement> {

 /**
 * @deprecated Use Combobox or Dropdown instead
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-deprecated-buttonselect--docs
 */
 const ButtonSelectComponent = <T,>(props: Props<T>) => {
  const { className, options, value, onChange, narrow, variant, root, ...restProps } = props;
@@ -31,6 +31,11 @@ export interface Props {
  onVisibleChange?: (state: boolean) => void;
 }

+/**
+ * Hook up a menu or other overlay to any trigger.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/overlays-dropdown--docs
+ */
 export const Dropdown = React.memo(({ children, overlay, placement, offset, root, onVisibleChange }: Props) => {
  const [show, setShow] = useState(false);
  const transitionRef = useRef(null);
@@ -8,7 +8,11 @@ export interface Props {
  children: JSX.Element | string;
 }

-/** @deprecated Use <EmptyState variant="not-found" /> instead */
+/**
+ * @deprecated Use `<EmptyState variant="not-found" />` instead.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/information-deprecated-emptysearchresult--docs
+ */
 const EmptySearchResult = ({ children }: Props) => {
  const styles = useStyles2(getStyles);
  return <div className={styles.container}>{children}</div>;
@@ -38,6 +38,11 @@ interface Props {
  role?: AriaRole;
 }

+/**
+ * The EmptyState component consists of a message and optionally an image, button, and additional information.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/information-emptystate--docs
+ */
 export const EmptyState = ({
  button,
  children,
@@ -33,6 +33,11 @@ interface State {
  errorInfo: ErrorInfo | null;
 }

+/**
+ * A React component that catches errors in child components. Useful for logging or displaying a fallback UI in case of errors. More information about error boundaries is available at [React documentation website](https://reactjs.org/docs/error-boundaries.html).
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/utilities-errorboundary--docs
+ */
 export class ErrorBoundary extends PureComponent<Props, State> {
  readonly state: State = {
    error: null,
@@ -8,6 +8,11 @@ export interface FeatureBadgeProps {
  tooltip?: string;
 }

+/**
+ * A component for displaying information about different release stages of features, in accordance with the guidelines provided at [Grafana's Release Life Cycle](https://grafana.com/docs/release-life-cycle).
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/information-featurebadge--docs
+ */
 export const FeatureBadge = ({ featureState, tooltip }: FeatureBadgeProps) => {
  const display = getPanelStateBadgeDisplayModel(featureState);
  return <Badge text={display.text} color={display.color} icon={display.icon} tooltip={tooltip} />;
@@ -63,6 +63,11 @@ export interface DropzoneFile {
  retryUpload?: () => void;
 }

+/**
+ * A dropzone component to use for file uploads.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-filedropzone--docs
+ */
 export function FileDropzone({
  options,
  children,
@@ -17,6 +17,11 @@ export interface FileListItemProps {
  removeFile?: (file: DropzoneFile) => void;
 }

+/**
+ * A FileListItem component used for the FileDropzone component to show uploaded files.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-filelistitem--docs
+ */
 export function FileListItem({ file: customFile, removeFile }: FileListItemProps) {
  const styles = useStyles2(getStyles);
  const { file, progress, error, abortUpload, retryUpload } = customFile;
@@ -27,6 +27,11 @@ export interface Props {
  showFileName?: boolean;
 }

+/**
+ * A button-styled input that triggers file upload popup. Button text and accepted file extensions can be customized via `label` and `accepted` props respectively.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-fileupload--docs
+ */
 export const FileUpload = ({
  onFileUpload,
  className,
@@ -15,6 +15,11 @@ export interface FilterPillProps {
  icon?: IconName;
 }

+/**
+ * A component used for quick toggling on/off filters. Mostly used in inline form components and transformation/query editors.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-filterpill--docs
+ */
 export const FilterPill = ({ label, selected, onClick, icon = 'check' }: FilterPillProps) => {
  const styles = useStyles2(getStyles);
  const clearButton = useStyles2(clearButtonStyles);
@@ -24,6 +24,8 @@ export interface Props extends InputHTMLAttributes<HTMLInputElement> {
 *
 * For inline fields, use {@link InlineField}, {@link https://developers.grafana.com/ui/latest/index.html?path=/story/forms-inlinefield--basic See Storybook}.
 * @deprecated Please use the {@link Field} component, {@link https://developers.grafana.com/ui/latest/index.html?path=/story/forms-field--simple See Storybook}.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/forms-deprecated-formfield--docs
 */
 export const FormField = ({
  label,
@@ -18,6 +18,11 @@ function fontSizeReductionFactor(fontSize: number) {
  return 0.6;
 }

+/**
+ * Used to display a value, which also supports prefix and suffix.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/plugins-formattedvaluedisplay--docs
+ */
 export const FormattedValueDisplay = ({ value, className, style, ...htmlProps }: Props) => {
  const hasPrefix = (value.prefix ?? '').length > 0;
  const hasSuffix = (value.suffix ?? '').length > 0;
@@ -24,6 +24,9 @@ export interface CheckboxProps extends Omit<HTMLProps<HTMLInputElement>, 'value'
  invalid?: boolean;
 }

+/**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-checkbox--docs
+ */
 export const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>(
  (
    { label, description, value, htmlValue, onChange, disabled, className, indeterminate, invalid, ...inputProps },
@@ -43,6 +43,11 @@ export interface FieldProps extends HTMLAttributes<HTMLDivElement> {
  noMargin?: boolean;
 }

+/**
+ * Field is the basic component for rendering form elements together with labels and description.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/forms-field--docs
+ */
 export const Field = React.forwardRef<HTMLDivElement, FieldProps>(
  (
    {
@@ -9,6 +9,8 @@ export interface FieldArrayProps extends UseFieldArrayProps {

 /**
 * @deprecated use the `useFieldArray` hook from react-hook-form instead
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/forms-fieldarray--docs
 */
 export const FieldArray: FC<FieldArrayProps> = ({ name, control, children, ...rest }) => {
  const { fields, append, prepend, remove, swap, move, insert } = useFieldArray({
@@ -14,6 +14,11 @@ export interface Props extends Omit<HTMLProps<HTMLFieldSetElement>, 'label'> {
  label?: React.ReactNode;
 }

+/**
+ * Component used to group form elements inside a form, equivalent to HTML's [fieldset](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset) tag. Accepts optional label, which, if provided, is used as a text for the set's legend.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/forms-fieldset--docs
+ */
 export const FieldSet = ({ label, children, className, ...rest }: Props) => {
  const styles = useStyles2(getStyles);

@@ -12,6 +12,11 @@ export interface FieldValidationMessageProps {
  horizontal?: boolean;
 }

+/**
+ * Component for displaying a validation error message under an element.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/forms-fieldvalidationmessage--docs
+ */
 export const FieldValidationMessage = ({
  children,
  horizontal,
@@ -18,6 +18,8 @@ interface FormProps<T extends FieldValues> extends Omit<HTMLProps<HTMLFormElemen

 /**
 * @deprecated use the `useForm` hook from react-hook-form instead
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/forms-form--docs
 */
 export function Form<T extends FieldValues>({
  defaultValues,
@@ -3,7 +3,7 @@ import { InlineField } from './InlineField';

 # InlineField

-A basic component for rendering form elements, like `Input`, `Select`, `Checkbox`, etc, inline together with `InlineLabel`. If the child element has `id` specified, the label's `htmlFor` attribute, pointing to the id, will be added.
+A basic component for rendering form elements, like `Input`, `Checkbox`, `Combobox`, etc, inline together with `InlineLabel`. If the child element has `id` specified, the label's `htmlFor` attribute, pointing to the id, will be added.

 The width of the `InlineLabel` can be modified via `labelWidth` prop, which is a multiple of 8px. For example, an `InlineField` with `labelWidth={20}` will have a label 160px wide.

@@ -29,6 +29,11 @@ export interface Props extends Omit<FieldProps, 'css' | 'horizontal' | 'descript
  interactive?: boolean;
 }

+/**
+ * A basic component for rendering form elements, like `Input`, `Checkbox`, `Combobox`, etc, inline together with `InlineLabel`. If the child element has `id` specified, the label's `htmlFor` attribute, pointing to the id, will be added.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/forms-inlinefield--docs
+ */
 export const InlineField = ({
  children,
  label,
@@ -9,6 +9,11 @@ export interface Props extends Omit<HTMLProps<HTMLDivElement>, 'css'> {
  children: ReactNode | ReactNode[];
 }

+/**
+ * Used to align multiple InlineField components in one row. The row will wrap if the width of the children exceeds its own. Equivalent to the div with gf-form-inline class name. Multiple InlineFieldRows vertically stack on each other.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/forms-inlinefieldrow--docs
+ */
 export const InlineFieldRow = ({ children, className, ...htmlProps }: Props) => {
  const styles = useStyles2(getStyles);
  return (
@@ -3,7 +3,7 @@ import { InlineLabel } from './InlineLabel';

 # InlineLabel

-A horizontal variant of `Label`, primarily used in query editors. Can be combined with form components that expect a label, eg. `Input`, `Select`, `Checkbox`.
+A horizontal variant of `Label`, primarily used in query editors. Can be combined with form components that expect a label, eg. `Input`, `Checkbox`, `Combobox`.
 If you need to add additional explanation, use the tooltip prop, which will render an info icon with tooltip inside the label.
 For query editor readability, the label text should be as short as possible (4 words or fewer).

@@ -25,6 +25,11 @@ export interface Props extends Omit<LabelProps, 'css' | 'description' | 'categor
  as?: React.ElementType;
 }

+/**
+ * A horizontal variant of Label, primarily used in query editors. Can be combined with form components that expect a label, eg. `Input`, `Checkbox`, `Combobox`.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/forms-inlinelabel--docs
+ */
 export const InlineLabel = ({
  children,
  className,
@@ -12,6 +12,11 @@ export interface LabelProps extends React.LabelHTMLAttributes<HTMLLabelElement>
  category?: React.ReactNode[];
 }

+/**
+ * The label component can be used to label form inputs with a heading/"Option name" and a description. To automatically have the right arrangement of this component with a form input, use the `Field` component.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/forms-label--docs
+ */
 export const Label = ({ children, description, className, category, ...labelProps }: LabelProps) => {
  const styles = useStyles2(getLabelStyles);
  const categories = category?.map((c, i) => {
@@ -21,6 +21,11 @@ export const getLegendStyles = (theme: GrafanaTheme2) => {
  };
 };

+/**
+ * Legend should be used to add a caption to a group of related form elements that have been grouped toegheter into a `FieldSet`.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/forms-legend--docs
+ */
 export const Legend = ({ children, className, ...legendProps }: LabelProps) => {
  const styles = useStyles2(getLegendStyles);

@@ -24,6 +24,11 @@ export interface RadioButtonGroupProps<T> {
  invalid?: boolean;
 }

+/**
+ * RadioButtonGroup is used to select a single value from multiple mutually exclusive options.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-radiobuttongroup--docs
+ */
 export function RadioButtonGroup<T>({
  options,
  value,
@@ -22,6 +22,11 @@ export interface RadioButtonListProps<T> {
  className?: string;
 }

+/**
+ * RadioButtonList is used to select a single value from multiple mutually exclusive options usually in a vertical manner.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-radiobuttonlist--docs
+ */
 export function RadioButtonList<T extends string | number | readonly string[]>({
  name,
  id,
@@ -42,6 +42,11 @@ const getIconStyles = (theme: GrafanaTheme2) => {
  };
 };

+/**
+ * Grafana's icon wrapper component.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/iconography-icon--docs
+ */
 export const Icon = React.memo(
  React.forwardRef<SVGElement, IconProps>(
    ({ size = 'md', type = 'default', name, className, style, title = '', ...rest }, ref) => {
@@ -43,6 +43,11 @@ interface BasePropsWithAriaLabel extends BaseProps {

 export type Props = BasePropsWithTooltip | BasePropsWithAriaLabel;

+/**
+ * This component looks just like an icon but behaves like a button.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-iconbutton--docs
+ */
 export const IconButton = React.forwardRef<HTMLButtonElement, Props>((props, ref) => {
  const { size = 'md', variant = 'secondary' } = props;
  let limitedIconSize: LimitedIconSize;
@@ -23,7 +23,11 @@ export interface InfoBoxProps extends Omit<React.HTMLAttributes<HTMLDivElement>,
  onDismiss?: () => void;
 }

-/** @deprecated use Alert with severity info */
+/**
+ * @deprecated use Alert with severity info.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/information-deprecated-infobox--docs
+ * */
 export const InfoBox = React.memo(
  React.forwardRef<HTMLDivElement, InfoBoxProps>(
    ({ title, className, children, branded, url, urlTitle, onDismiss, severity = 'info', ...otherProps }, ref) => {
@@ -6,7 +6,11 @@ interface InfoTooltipProps extends Omit<TooltipProps, 'children' | 'content'> {
  children: PopoverContent;
 }

-/** @deprecated Use <IconButton name="info-circle" tooltip={children} /> instead */
+/**
+ * @deprecated Use <IconButton name="info-circle" tooltip={children} /> instead.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/overlays-deprecated-infotooltip--docs
+ */
 export const InfoTooltip = ({ children, ...restProps }: InfoTooltipProps) => {
  return <IconButton name="info-circle" tooltip={children} {...restProps} />;
 };
@@ -24,6 +24,11 @@ export interface InlineToastProps {
  alternativePlacement?: Side;
 }

+/**
+ * Used to indicate temporal status near fields/components, such as a *Saved* indicator next to a field, or a little *Copied!* indicator above a button.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/information-inlinetoast--docs
+ */
 export function InlineToast({ referenceElement, children, suffixIcon, placement }: InlineToastProps) {
  const styles = useStyles2(getStyles);
  const theme = useTheme2();
@@ -20,6 +20,11 @@ export interface Props extends InputProps {
  defaultValue?: string | number | readonly string[];
 }

+/**
+ * You can use it or regular text input. When used, AutoSizeInput resizes itself to the current content. For an array of data or tree-structured data, consider using `Combobox` or `Cascader` respectively.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-autosizeinput--docs
+ */
 export const AutoSizeInput = React.forwardRef<HTMLInputElement, Props>((props, ref) => {
  const {
    defaultValue = '',
@@ -34,6 +34,11 @@ interface StyleDeps {
  width?: number;
 }

+/**
+ * Used for regular text input. For an array of data or tree-structured data, consider using `Combobox` or `Cascader` respectively.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-input--docs
+ */
 export const Input = forwardRef<HTMLInputElement, Props>((props, ref) => {
  const {
    className,
@@ -172,7 +172,13 @@ interface WithoutExpandableRow<TableData extends object> extends BaseProps<Table

 type Props<TableData extends object> = WithExpandableRow<TableData> | WithoutExpandableRow<TableData>;

-/** @alpha */
+/**
+ * The InteractiveTable is used to display and select data efficiently. It allows for the display and modification of detailed information.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/layout-interactivetable--docs
+ *
+ * @alpha
+ */
 export function InteractiveTable<TableData extends object>({
  className,
  columns,
@@ -70,6 +70,11 @@ export interface BoxProps extends FlexProps, SizeProps, Omit<React.HTMLAttribute
  position?: ResponsiveProp<Property.Position>;
 }

+/**
+ * The Box Component is the most basic layout component. It can be used to build more complex components and layouts with properties that use our design tokens instead of using CSS.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/layout-box--docs
+ */
 export const Box = forwardRef<HTMLElement, PropsWithChildren<BoxProps>>((props, ref) => {
  const {
    children,
@@ -34,6 +34,11 @@ interface PropsWithMinColumnWidth extends GridPropsBase {
 /** 'columns' and 'minColumnWidth' are mutually exclusive */
 type GridProps = PropsWithColumns | PropsWithMinColumnWidth;

+/**
+ * The Grid component is a layout component that allows you to create a grid of columns and rows to organize content and elements. It is a wrapper around the [CSS Grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout) specification.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/layout-grid--docs
+ */
 export const Grid = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
  const { alignItems, children, gap, rowGap, columnGap, columns, minColumnWidth, ...rest } = props;
  const styles = useStyles2(getGridStyles, gap, rowGap, columnGap, columns, minColumnWidth, alignItems);
@@ -33,6 +33,8 @@ export interface ContainerProps {

 /**
 * @deprecated use Stack component instead
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/layout-deprecated-groups--docs
 */
 export const Layout = ({
  children,
@@ -5,7 +5,7 @@ import { Space } from './Space';

 # Space

-The `Space` component is a component used to add space between elements. Horizontal space is added using the `h` prop, while vertical space is added using the `v` prop. When adding horizontal space between inline or inline-block elements, the `layout` props should be set to `inline`, otherwise the `block` value of the prop can be used.
+The `Space` component is a component used to add space between elements. Horizontal space is added using the `h` prop, while vertical space is added using the `v` prop. When adding horizontal space between inline or inline-block elements, the `layout` prop should be set to `inline`, otherwise the `block` value of the prop can be used.

 ### Usage

@@ -19,6 +19,11 @@ export interface SpaceProps {
  layout?: 'block' | 'inline';
 }

+/**
+ * The Space component is a component used to add space between elements. Horizontal space is added using the `h` prop, while vertical space is added using the `v` prop. When adding horizontal space between inline or inline-block elements, the `layout` prop should be set to `"inline"`, otherwise the `"block"` value of the prop can be used.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/layout-space--docs
+ */
 export const Space = ({ v = 0, h = 0, layout }: SpaceProps) => {
  return <Box paddingRight={h} paddingBottom={v} display={layout === 'inline' ? 'inline-block' : 'block'} />;
 };
@@ -21,7 +21,8 @@ interface StackProps extends FlexProps, SizeProps, Omit<React.HTMLAttributes<HTM

 /**
 * The Stack component is a simple wrapper around the flexbox layout model that allows to easily create responsive and flexible layouts. It provides a simple and intuitive way to align and distribute items within a container either horizontally or vertically.
- * Storybook: https://developers.grafana.com/ui/latest/index.html?path=/docs/layout-stack--docs
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/layout-stack--docs
 */
 export const Stack = React.forwardRef<HTMLDivElement, StackProps>((props, ref) => {
  const {
@@ -43,6 +43,11 @@ const svgSizes: {
  bodySmall: 'xs',
 };

+/**
+ * The TextLink component renders an anchor tag `<a>` that takes users to another page, external or internal to Grafana.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/foundations-textlink--docs
+ */
 export const TextLink = forwardRef<HTMLAnchorElement, TextLinkProps>(
  (
    { href, color = 'link', external = false, inline = true, variant = 'body', weight, icon, children, ...rest },
@@ -2,7 +2,11 @@ import { PureComponent } from 'react';

 import { ListProps, AbstractList } from './AbstractList';

-/** @deprecated Use ul/li/arr.map directly instead */
+/**
+ * @deprecated Use ul/li/arr.map directly instead
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/layout-deprecated-list--docs
+ */
 // no point converting, this is deprecated
 // eslint-disable-next-line react-prefer-function-component/react-prefer-function-component
 export class List<T> extends PureComponent<ListProps<T>> {
@@ -18,6 +18,11 @@ const MAX_DURATION_MS = 4000;
 const DEFAULT_ANIMATION_DELAY = 300;
 const MAX_TRANSLATE_X = (100 / BAR_WIDTH) * 100;

+/**
+ * The LoadingBar is used as a simple loading slider animation in the top of its container.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/information-loadingbar--docs
+ */
 export function LoadingBar({ width, delay = DEFAULT_ANIMATION_DELAY, ariaLabel = 'Loading bar' }: LoadingBarProps) {
  const durationMs = Math.min(Math.max(Math.round(width * MILLISECONDS_PER_PIXEL), MIN_DURATION_MS), MAX_DURATION_MS);
  const styles = useStyles2(getStyles, delay, durationMs);
@@ -15,6 +15,9 @@ export interface LoadingPlaceholderProps extends HTMLAttributes<HTMLDivElement>
 }

 /**
+ * Loading indicator with a text. Used to alert a user to wait for an activity to complete.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/information-loadingplaceholder--docs
 * @public
 */
 export const LoadingPlaceholder = ({ text, className, ...rest }: LoadingPlaceholderProps) => {
@@ -22,6 +22,9 @@ export interface MenuProps extends React.HTMLAttributes<HTMLDivElement> {
  onKeyDown?: React.KeyboardEventHandler;
 }

+/**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/overlays-menu--docs
+ */
 const MenuComp = React.forwardRef<HTMLDivElement, MenuProps>(
  ({ header, children, ariaLabel, onOpen, onClose, onKeyDown, ...otherProps }, forwardedRef) => {
    const styles = useStyles2(getStyles);
@@ -48,6 +48,9 @@ interface WithCustomTitleProps extends BaseProps {

 export type Props = WithStringTitleProps | WithCustomTitleProps;

+/**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/overlays-modal--docs
+ */
 export function Modal(props: PropsWithChildren<Props>) {
  const {
    title,
@@ -196,6 +196,11 @@ class UnthemedCodeEditor extends PureComponent<Props> {
  }
 }

+/**
+ * Monaco Code editor.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-codeeditor--docs
+ */
 export const CodeEditor = withTheme2(UnthemedCodeEditor);

 const getStyles = (theme: GrafanaTheme2) => {
@@ -34,7 +34,11 @@ export interface Props {
  forceShowLeftItems?: boolean;
 }

-/** @deprecated Use Page instead */
+/**
+ * @deprecated Use Page instead
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/navigation-deprecated-pagetoolbar--docs
+ */
 export const PageToolbar = memo(
  ({
    title,
@@ -21,6 +21,11 @@ export interface Props {
  className?: string;
 }

+/**
+ * Component used for rendering a page selector below paginated content.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/navigation-pagination--docs
+ */
 export const Pagination = ({
  currentPage,
  numberOfPages,
@@ -116,6 +116,10 @@ interface HoverHeader {
 export type PanelPadding = 'none' | 'md';

 /**
+ * Component used for rendering content wrapped in the same style as grafana panels.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/plugins-panelchrome--docs
+ *
 * @internal
 */
 export function PanelChrome({
@@ -8,7 +8,11 @@ import { useStyles2 } from '../../themes/ThemeContext';
 type Props = DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>;

 // TODO: Reimplement this with Box
-/** @deprecated Use Box instead */
+/**
+ * @deprecated Use Box instead
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/layout-deprecated-panelcontainer--docs
+ */
 export const PanelContainer = ({ children, className, ...props }: Props) => {
  const styles = useStyles2(getStyles);
  return (
@@ -22,6 +22,8 @@ export interface PluginSignatureBadgeProps extends HTMLAttributes<HTMLDivElement
 }

 /**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/information-pluginsignaturebadge--docs
+ *
 * @public
 */
 export const PluginSignatureBadge = ({
@@ -53,12 +53,6 @@ export interface QueryFieldState {
  value: Value;
 }

-/**
- * Renders an editor field.
- * Pass initial value as initialQuery and listen to changes in props.onValueChanged.
- * This component can only process strings. Internally it uses Slate Value.
- * Implement props.onTypeahead to use suggestions, see PromQueryField.tsx as an example.
- */
 export class UnThemedQueryField extends PureComponent<QueryFieldProps, QueryFieldState> {
  plugins: Array<Plugin<Editor>>;
  runOnChangeDebounced: Function;
@@ -238,6 +232,16 @@ export class UnThemedQueryField extends PureComponent<QueryFieldProps, QueryFiel
  }
 }

+/**
+ * Renders an editor field.
+ * Pass initial value as initialQuery and listen to changes in props.onValueChanged.
+ * This component can only process strings. Internally it uses Slate Value.
+ * Implement props.onTypeahead to use suggestions.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-deprecated-queryfield--docs
+ *
+ * @deprecated
+ */
 export const QueryField = withTheme2(UnThemedQueryField);

 const getStyles = (theme: GrafanaTheme2) => {
@@ -72,6 +72,9 @@ export type RadialGradientMode = 'none' | 'auto';
 export type RadialTextMode = 'auto' | 'value_and_name' | 'value' | 'name' | 'none';
 export type RadialShape = 'circle' | 'gauge';

+/**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/plugins-radialgauge--docs
+ */
 export function RadialGauge(props: RadialGaugeProps) {
  const {
    width = 256,
@@ -29,6 +29,11 @@ export interface Props {
  isOnCanvas?: boolean;
 }

+/**
+ * This component is used on dashboards to refresh visualizations.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/pickers-refreshpicker--docs
+ */
 export class RefreshPicker extends PureComponent<Props> {
  static offOption = {
    label: 'Off',
@@ -9,6 +9,11 @@ export interface RenderUserContentAsHTMLProps<T = HTMLSpanElement>
  content: string;
 }

+/**
+ * Abstraction layer component for sanitizing and rendering an html content.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/utilities-renderusercontentashtml--docs
+ */
 export function RenderUserContentAsHTML<T>({
  component,
  content,
@@ -17,6 +17,11 @@ interface Props extends Omit<BoxProps, 'display' | 'direction' | 'element' | 'fl
  scrollbarWidth?: Property.ScrollbarWidth;
 }

+/**
+ * This component is used to create a scrollable container. It uses native scrollbars, has an option to show scroll indicators, and supports most `Box` properties.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/layout-scrollcontainer--docs
+ */
 export const ScrollContainer = forwardRef<HTMLDivElement, PropsWithChildren<Props>>(
  (
    {
@@ -32,6 +32,8 @@ export interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onRe
 * to the user (like datasource passwords).
 *
 * @deprecated Please use the {@link SecretInput} component with a {@link Field} instead, {@link https://developers.grafana.com/ui/latest/index.html?path=/story/forms-secretinput--basic as seen in Storybook}
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/forms-deprecated-secretformfield--docs
 */
 export const SecretFormField = ({
  label = 'Password',
@@ -14,6 +14,11 @@ export type Props = React.ComponentProps<typeof Input> & {
 export const CONFIGURED_TEXT = 'configured';
 export const RESET_BUTTON_TEXT = 'Reset';

+/**
+ * Used for secret/password input.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-secretinput--docs
+ */
 export const SecretInput = ({ isConfigured, onReset, ...props }: Props) => (
  <Stack>
    {!isConfigured && <Input {...props} type="password" />}
@@ -32,6 +32,8 @@ const getStyles = (theme: GrafanaTheme2) => {
 /**
 * Text area that does not disclose an already configured value but lets the user reset the current value and enter a new one.
 * Typically useful for asymmetric cryptography keys.
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-secrettextarea--docs
 */
 export const SecretTextArea = ({ isConfigured, onReset, ...props }: Props) => {
  const styles = useStyles2(getStyles);
@@ -20,6 +20,9 @@ export interface SegmentSyncProps<T> extends SegmentProps, Omit<HTMLProps<HTMLDi
  inputMinWidth?: number;
 }

+/**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-segment--docs
+ */
 export function Segment<T>({
  options,
  value,
@@ -29,6 +29,9 @@ export interface SegmentAsyncProps<T> extends SegmentProps, Omit<HTMLProps<HTMLD
  inputMinWidth?: number;
 }

+/**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-segmentasync--docs
+ */
 export function SegmentAsync<T>({
  value,
  onChange,
@@ -20,6 +20,9 @@ export interface SegmentInputProps

 const FONT_SIZE = 14;

+/**
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-segmentinput--docs
+ */
 export function SegmentInput({
  value: initialValue,
  onChange,
@@ -10,11 +10,20 @@ import {
  VirtualizedSelectAsyncProps,
 } from './types';

-/** @deprecated Use Combobox component instead */
+/**
+ * @deprecated Use Combobox component instead
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-deprecated-select--docs
+ */
 export function Select<T, Rest = {}>(props: SelectCommonProps<T> & Rest) {
  return <SelectBase {...props} />;
 }

+/**
+ * @deprecated Use Combobox component instead
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-deprecated-select--docs
+ */
 export function MultiSelect<T, Rest = {}>(props: MultiSelectCommonProps<T> & Rest) {
  // @ts-ignore
  return <SelectBase {...props} isMulti />;
@@ -25,17 +34,29 @@ export interface AsyncSelectProps<T> extends Omit<SelectCommonProps<T>, 'options
  value?: T | SelectableValue<T> | null;
 }

-/** @deprecated Use Combobox component instead */
+/**
+ * @deprecated Use Combobox component instead
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-deprecated-select--docs
+ */
 export function AsyncSelect<T, Rest = {}>(props: AsyncSelectProps<T> & Rest) {
  return <SelectBase {...props} />;
 }

-/** @deprecated Use Combobox component instead - it's virtualised by default! */
+/**
+ * @deprecated Use Combobox component instead - it's virtualised by default!
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-deprecated-select--docs
+ */
 export function VirtualizedSelect<T, Rest = {}>(props: VirtualizedSelectProps<T> & Rest) {
  return <SelectBase virtualized {...props} />;
 }

-/** @deprecated Use Combobox component instead - it's virtualised by default! */
+/**
+ * @deprecated Use Combobox component instead - it's virtualised by default!
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-deprecated-select--docs
+ */
 export function AsyncVirtualizedSelect<T, Rest = {}>(props: VirtualizedSelectAsyncProps<T> & Rest) {
  return <SelectBase virtualized {...props} />;
 }
@@ -45,6 +66,11 @@ interface AsyncMultiSelectProps<T> extends Omit<MultiSelectCommonProps<T>, 'opti
  value?: Array<SelectableValue<T>>;
 }

+/**
+ * @deprecated Use Combobox component instead
+ *
+ * https://developers.grafana.com/ui/latest/index.html?path=/docs/inputs-deprecated-select--docs
+ */
 export function AsyncMultiSelect<T, Rest = {}>(props: AsyncMultiSelectProps<T> & Rest) {
  // @ts-ignore
  return <SelectBase {...props} isMulti />;
--- a/Show More
+++ b/Show More