mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Combobox: Add no options message and aria live region (#95938)
* Add no options message and aria live region * Add i18n * Extract message layout and use Trans component * Fix unused imports
This commit is contained in:
parent
aaa4f4a23e
commit
0629a34ae4
@ -2,16 +2,16 @@ import { cx } from '@emotion/css';
|
|||||||
import { useVirtualizer } from '@tanstack/react-virtual';
|
import { useVirtualizer } from '@tanstack/react-virtual';
|
||||||
import { useCombobox } from 'downshift';
|
import { useCombobox } from 'downshift';
|
||||||
import { debounce } from 'lodash';
|
import { debounce } from 'lodash';
|
||||||
import { useCallback, useId, useMemo, useState } from 'react';
|
import { ReactNode, useCallback, useId, useMemo, useState } from 'react';
|
||||||
|
|
||||||
import { useStyles2 } from '../../themes';
|
import { useStyles2 } from '../../themes';
|
||||||
import { t } from '../../utils/i18n';
|
import { t, Trans } from '../../utils/i18n';
|
||||||
import { Icon } from '../Icon/Icon';
|
import { Icon } from '../Icon/Icon';
|
||||||
import { AutoSizeInput } from '../Input/AutoSizeInput';
|
import { AutoSizeInput } from '../Input/AutoSizeInput';
|
||||||
import { Input, Props as InputProps } from '../Input/Input';
|
import { Input, Props as InputProps } from '../Input/Input';
|
||||||
|
import { Box } from '../Layout/Box/Box';
|
||||||
import { Stack } from '../Layout/Stack/Stack';
|
import { Stack } from '../Layout/Stack/Stack';
|
||||||
import { ScrollContainer } from '../ScrollContainer/ScrollContainer';
|
import { ScrollContainer } from '../ScrollContainer/ScrollContainer';
|
||||||
import { Text } from '../Text/Text';
|
|
||||||
|
|
||||||
import { getComboboxStyles } from './getComboboxStyles';
|
import { getComboboxStyles } from './getComboboxStyles';
|
||||||
import { useComboboxFloat, OPTION_HEIGHT } from './useComboboxFloat';
|
import { useComboboxFloat, OPTION_HEIGHT } from './useComboboxFloat';
|
||||||
@ -347,14 +347,31 @@ export const Combobox = <T extends string | number>({
|
|||||||
})}
|
})}
|
||||||
</ul>
|
</ul>
|
||||||
)}
|
)}
|
||||||
{asyncError && (
|
<div aria-live="polite">
|
||||||
<Stack justifyContent="center" alignItems="center" height={8}>
|
{asyncError && (
|
||||||
<Icon name="exclamation-triangle" size="md" className={styles.warningIcon} />
|
<MessageRow>
|
||||||
<Text color="secondary">{t('combobox.async.error', 'An error occurred while loading options.')}</Text>
|
<Icon name="exclamation-triangle" size="md" className={styles.warningIcon} />
|
||||||
</Stack>
|
<Trans i18nKey="combobox.async.error">An error occurred while loading options.</Trans>
|
||||||
)}
|
</MessageRow>
|
||||||
|
)}
|
||||||
|
{items.length === 0 && !asyncError && (
|
||||||
|
<MessageRow>
|
||||||
|
<Trans i18nKey="combobox.options.no-found">No options found.</Trans>
|
||||||
|
</MessageRow>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
</ScrollContainer>
|
</ScrollContainer>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const MessageRow = ({ children }: { children: ReactNode }) => {
|
||||||
|
return (
|
||||||
|
<Box padding={2} color="secondary">
|
||||||
|
<Stack justifyContent="center" alignItems="center">
|
||||||
|
{children}
|
||||||
|
</Stack>
|
||||||
|
</Box>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
@ -456,6 +456,9 @@
|
|||||||
},
|
},
|
||||||
"custom-value": {
|
"custom-value": {
|
||||||
"create": "Create custom value"
|
"create": "Create custom value"
|
||||||
|
},
|
||||||
|
"options": {
|
||||||
|
"no-found": "No options found."
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"command-palette": {
|
"command-palette": {
|
||||||
|
@ -456,6 +456,9 @@
|
|||||||
},
|
},
|
||||||
"custom-value": {
|
"custom-value": {
|
||||||
"create": "Cřęäŧę čūşŧőm väľūę"
|
"create": "Cřęäŧę čūşŧőm väľūę"
|
||||||
|
},
|
||||||
|
"options": {
|
||||||
|
"no-found": "Ńő őpŧįőʼnş ƒőūʼnđ."
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"command-palette": {
|
"command-palette": {
|
||||||
|
Loading…
Reference in New Issue
Block a user