diff --git a/packages/grafana-ui/src/components/Combobox/MultiCombobox.internal.story.tsx b/packages/grafana-ui/src/components/Combobox/MultiCombobox.internal.story.tsx index 36c368291ee..7358119d986 100644 --- a/packages/grafana-ui/src/components/Combobox/MultiCombobox.internal.story.tsx +++ b/packages/grafana-ui/src/components/Combobox/MultiCombobox.internal.story.tsx @@ -1,6 +1,7 @@ import { action } from '@storybook/addon-actions'; import { useArgs, useEffect, useState } from '@storybook/preview-api'; import type { Meta, StoryFn, StoryObj } from '@storybook/react'; +import { ComponentProps } from 'react'; import { Field } from '../Forms/Field'; @@ -30,7 +31,7 @@ const commonArgs = { export default meta; -type storyArgs = React.ComponentProps; +type storyArgs = ComponentProps; type ManyOptionsArgs = storyArgs & { numberOfOptions?: number }; type Story = StoryObj; @@ -123,7 +124,7 @@ export const AsyncOptionsWithLabels: Story = { return ( (props: MultiComboboxPro const { getSelectedItemProps, getDropdownProps, setSelectedItems, addSelectedItem, removeSelectedItem, reset } = useMultipleSelection({ - selectedItems, // initally selected items, + selectedItems, // initially selected items, onStateChange: ({ type, selectedItems: newSelectedItems }) => { switch (type) { case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace: diff --git a/packages/grafana-ui/src/components/Combobox/ValuePill.tsx b/packages/grafana-ui/src/components/Combobox/ValuePill.tsx index 96809d281b7..caeb3578df4 100644 --- a/packages/grafana-ui/src/components/Combobox/ValuePill.tsx +++ b/packages/grafana-ui/src/components/Combobox/ValuePill.tsx @@ -40,7 +40,6 @@ export const ValuePill = forwardRef( const getValuePillStyles = (theme: GrafanaTheme2, disabled?: boolean) => ({ wrapper: css({ display: 'inline-flex', - gap: theme.spacing(0.5), borderRadius: theme.shape.radius.default, color: theme.colors.text.primary, background: theme.colors.background.secondary, @@ -49,6 +48,7 @@ const getValuePillStyles = (theme: GrafanaTheme2, disabled?: boolean) => ({ fontSize: theme.typography.bodySmall.fontSize, flexShrink: 0, minWidth: '50px', + alignItems: 'center', '&:first-child:has(+ div)': { flexShrink: 1, @@ -59,12 +59,13 @@ const getValuePillStyles = (theme: GrafanaTheme2, disabled?: boolean) => ({ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis', + padding: theme.spacing(0, 1, 0, 0.75), }), separator: css({ background: theme.colors.border.weak, width: '2px', - marginLeft: theme.spacing(0.25), height: '100%', + marginRight: theme.spacing(0.5), }), }); diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts index 8296a00cb70..b62e96627a0 100644 --- a/packages/grafana-ui/src/components/index.ts +++ b/packages/grafana-ui/src/components/index.ts @@ -244,6 +244,7 @@ export { getSelectStyles } from './Select/getSelectStyles'; export * from './Select/types'; export { Combobox } from './Combobox/Combobox'; +export { MultiCombobox } from './Combobox/MultiCombobox'; export { type ComboboxOption } from './Combobox/types'; export { HorizontalGroup, VerticalGroup, Container } from './Layout/Layout';