github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-23 09:19:04 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Discover] adds middle truncation and auto-expansion to breakdown field selector (#171075)

Browse source 
Adds middle truncation and auto-expansion for breakdown field selector.

Before:
<img width="709" alt="Screenshot 2023-11-13 at 11 59 06"
src="c284e6d3-0222-4017-9eb7-364858116c52">


After:
<img width="704" alt="Screenshot 2023-11-13 at 11 59 55"
src="a788fe12-3f41-412e-a077-8b2546960895">


35f0e0f3-5ca9-4da3-a420-d782198c50ad
This commit is contained in:
Marta Bondyra 2023-11-14 12:45:49 +01:00 • committed by GitHub
parent bb6e8aac0f
commit e569a79db4
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 8 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/plugins/unified_histogram/public/chart/breakdown_field_selector.tsx
View file

@ -20,6 +20,9 @@ export interface BreakdownFieldSelectorProps {
onBreakdownFieldChange?: (breakdownField: DataViewField | undefined) => void;
}
const TRUNCATION_PROPS = { truncation: 'middle' as const };
const SINGLE_SELECTION = { asPlainText: true };
export const BreakdownFieldSelector = ({
dataView,
breakdown,
@ -56,6 +59,9 @@ export const BreakdownFieldSelector = ({
const breakdownCss = css`
width: 100%;
max-width: ${euiTheme.base * 22}px;
&:focus-within {
max-width: ${euiTheme.base * 30}px;
}
`;
return (
@ -75,10 +81,11 @@ export const BreakdownFieldSelector = ({
aria-label={i18n.translate('unifiedHistogram.breakdownFieldSelectorAriaLabel', {
defaultMessage: 'Break down by',
})}
singleSelection={{ asPlainText: true }}
singleSelection={SINGLE_SELECTION}
options={fieldOptions}
selectedOptions={selectedFields}
onChange={onFieldChange}
truncationProps={TRUNCATION_PROPS}
compressed
fullWidth={true}
onFocus={disableFieldPopover}