[Log Explorer] Show Filter controls in compressed style (#167402)

closes https://github.com/elastic/kibana/issues/166440

This PR applies compressed style to the control group container.

<img width="699" alt="Screenshot 2023-09-27 at 14 44 51"
src="7318c0aa-c00e-44e9-9d29-f2f0deb5b791">
This commit is contained in:
mohamedhamed-ahmed 2023-09-27 22:18:13 +02:00 committed by GitHub
parent f9c26208b7
commit bb5439f4e1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -7,8 +7,8 @@
import React from 'react';
import { ControlGroupRenderer } from '@kbn/controls-plugin/public';
import { Query } from '@kbn/es-query';
import { euiStyled } from '@kbn/kibana-react-plugin/common';
import { DataPublicPluginStart } from '@kbn/data-plugin/public';
import { euiStyled } from '@kbn/kibana-react-plugin/common';
import { useControlPanels } from '../hooks/use_control_panels';
import { LogExplorerProfileStateService } from '../state_machines/log_explorer_profile';
@ -42,8 +42,41 @@ const CustomDatasetFilters = ({
};
const ControlGroupContainer = euiStyled.div`
.controlGroup {
min-height: unset;
[class*='options_list_popover_footer--OptionsListPopoverFooter'] {
display: none;
}
[data-test-subj='optionsListControl__sortingOptionsButton'] {
display: none;
}
[id^='control-popover'] .euiPopoverTitle {
display: none;
}
.euiFlexGroup.controlGroup {
min-height: 32px;
}
.euiFormControlLayout.euiFormControlLayout--group.controlFrame__formControlLayout {
height: 32px;
& .euiFormLabel.controlFrame__formControlLayoutLabel {
padding: 8px !important;
}
.euiButtonEmpty.euiFilterButton {
height: 32px;
}
}
.euiText.errorEmbeddableCompact__button {
padding: 8px;
.euiLink {
display: flex;
gap: 8px;
}
}
`;