Fix compressed error (#40997)

This commit is contained in:
Daniil Suleiman 2019-07-15 17:22:59 +03:00 committed by GitHub
parent c985c69f0c
commit d550145fba
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 56 additions and 44 deletions

View file

@ -81,40 +81,46 @@ function ExtendedBoundsParamEditor({
error={error}
compressed
>
<EuiFlexGroup gutterSize="s">
<EuiFlexItem>
<EuiFieldNumber
value={isUndefined(value.min) ? '' : value.min}
onChange={ev => handleChange(ev, 'min')}
onBlur={setTouched}
fullWidth={true}
isInvalid={showValidation ? !isValid : false}
aria-label={minLabel}
prepend={
<EuiText size="xs">
<strong>{minLabel}</strong>
</EuiText>
}
compressed
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiFieldNumber
value={isUndefined(value.max) ? '' : value.max}
onChange={ev => handleChange(ev, 'max')}
onBlur={setTouched}
fullWidth={true}
isInvalid={showValidation ? !isValid : false}
aria-label={maxLabel}
prepend={
<EuiText size="xs">
<strong>{maxLabel}</strong>
</EuiText>
}
compressed
/>
</EuiFlexItem>
</EuiFlexGroup>
<>
{/*
We have to put it into React.Fragment to avoid errors:
EuiFormRow will try to put "compressed" as attribute into a EuiFlexGroup div
*/}
<EuiFlexGroup gutterSize="s">
<EuiFlexItem>
<EuiFieldNumber
value={isUndefined(value.min) ? '' : value.min}
onChange={ev => handleChange(ev, 'min')}
onBlur={setTouched}
fullWidth={true}
isInvalid={showValidation ? !isValid : false}
aria-label={minLabel}
prepend={
<EuiText size="xs">
<strong>{minLabel}</strong>
</EuiText>
}
compressed
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiFieldNumber
value={isUndefined(value.max) ? '' : value.max}
onChange={ev => handleChange(ev, 'max')}
onBlur={setTouched}
fullWidth={true}
isInvalid={showValidation ? !isValid : false}
aria-label={maxLabel}
prepend={
<EuiText size="xs">
<strong>{maxLabel}</strong>
</EuiText>
}
compressed
/>
</EuiFlexItem>
</EuiFlexGroup>
</>
</EuiFormRow>
);
}

View file

@ -47,16 +47,22 @@ function RowsOrColumnsControl({ aggParams, setValue }: AggControlProps<boolean>)
return (
<EuiFormRow compressed fullWidth={true} className="visEditorSidebar__aggParamFormRow">
<EuiButtonGroup
data-test-subj="visEditorSplitBy"
legend={i18n.translate('common.ui.vis.defaultEditor.controls.splitByLegend', {
defaultMessage: 'Split chart by rows or columns.',
})}
options={options}
isFullWidth={true}
idSelected={idSelected}
onChange={optionId => setValue(aggParams, PARAMS.NAME, optionId === PARAMS.ROWS)}
/>
<>
{/*
We have to put it into React.Fragment to avoid errors:
EuiFormRow will try to put "compressed" as attribute into a EuiButtonGroup div
*/}
<EuiButtonGroup
data-test-subj="visEditorSplitBy"
legend={i18n.translate('common.ui.vis.defaultEditor.controls.splitByLegend', {
defaultMessage: 'Split chart by rows or columns.',
})}
options={options}
isFullWidth={true}
idSelected={idSelected}
onChange={optionId => setValue(aggParams, PARAMS.NAME, optionId === PARAMS.ROWS)}
/>
</>
</EuiFormRow>
);
}