MultiCombobox: Export from grafana/ui (#100368)

* MultiCombobox: Export from grafana/ui

* Fix typos

* Update options styles

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<typeof MultiCombobox>;
+type storyArgs = ComponentProps<typeof MultiCombobox>;
 type ManyOptionsArgs = storyArgs & { numberOfOptions?: number };
 
 type Story = StoryObj<typeof MultiCombobox>;
@@ -123,7 +124,7 @@ export const AsyncOptionsWithLabels: Story = {
 
     return (
       <Field
-        label='Asynbc options fn returns objects like { label: "Option 69", value: "69" }'
+        label='Async options fn returns objects like { label: "Option 69", value: "69" }'
         description="Search for 'break' to see an error"
       >
         <MultiCombobox

packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx

@@ -95,7 +95,7 @@ export const MultiCombobox = <T extends string | number>(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:

packages/grafana-ui/src/components/Combobox/ValuePill.tsx

@@ -40,7 +40,6 @@ export const ValuePill = forwardRef<HTMLSpanElement, ValuePillProps>(
 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),
   }),
 });

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';