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

MultiCombobox: Export from grafana/ui (#100368)

Browse Source 
* MultiCombobox: Export from grafana/ui

* Fix typos

* Update options styles
This commit is contained in:
Alex Khomenko 2025-02-10 17:37:17 +02:00 committed by GitHub
parent 7dee4d1808
commit 27ece859e7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 8 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
packages/grafana-ui/src/components/Combobox/MultiCombobox.internal.story.tsx
View File

@ -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

2
packages/grafana-ui/src/components/Combobox/MultiCombobox.tsx
View File

@ -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:

5
packages/grafana-ui/src/components/Combobox/ValuePill.tsx
View File

@ -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),
}),
});

1
packages/grafana-ui/src/components/index.ts
View File

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