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

Fix truncation of long filter bar items (#43874)

Browse source
This commit is contained in:
Caroline Horn 2019-08-27 18:00:51 -04:00 • committed by GitHub
parent cb17672a95
commit 670f1ae814
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 20 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/legacy/core_plugins/data/public/filter/filter_bar/_global_filter_group.scss
View file

@ -25,6 +25,15 @@
transition: height $euiAnimSpeedNormal $euiAnimSlightResistance;
}
.globalFilterGroup__filterFlexItem {
overflow: hidden;
padding-bottom: 2px; // Allow the shadows of the pills to show
}
.globalFilterBar__flexItem {
max-width: calc(100% - #{$euiSizeXS}); // Width minus margin around each flex itm
}
@include euiBreakpoint('xs', 's') {
.globalFilterGroup__wrapper-isVisible {
// EUI Flexbox adds too much margin between responded items, this just moves it up

7
src/legacy/core_plugins/data/public/filter/filter_bar/_global_filter_item.scss
View file

@ -40,9 +40,16 @@
left: 0;
width: $euiSizeXS;
background-color: $euiColorVis0;
border-top-left-radius: $euiBorderRadius / 2;
border-bottom-left-radius: $euiBorderRadius / 2;
}
}
.globalFilterItem__editorForm {
padding: $euiSizeM;
}
.globalFilterItem__popover,
.globalFilterItem__popoverAnchor {
display: block;
}

4
src/legacy/core_plugins/data/public/filter/filter_bar/filter_bar.tsx
View file

@ -77,7 +77,7 @@ class FilterBarUI extends Component<Props, State> {
/>
</EuiFlexItem>
<EuiFlexItem>
<EuiFlexItem className="globalFilterGroup__filterFlexItem">
<EuiFlexGroup
className={classes}
wrap={true}
@ -95,7 +95,7 @@ class FilterBarUI extends Component<Props, State> {
private renderItems() {
return this.props.filters.map((filter, i) => (
<EuiFlexItem key={i} grow={false}>
<EuiFlexItem key={i} grow={false} className="globalFilterBar__flexItem">
<FilterItem
id={`${i}`}
filter={filter}

2
src/legacy/core_plugins/data/public/filter/filter_bar/filter_item.tsx
View file

@ -181,6 +181,8 @@ class FilterItemUI extends Component<Props, State> {
return (
<EuiPopover
id={`popoverFor_filter${id}`}
className={`globalFilterItem__popover`}
anchorClassName={`globalFilterItem__popoverAnchor`}
isOpen={this.state.isPopoverOpen}
closePopover={this.closePopover}
button={badge}