Fix global filter truncation (#2194)

* [Pattern] Fix truncation of global filters
* Fix EuiBadge truncation (esp in IE) by removing`box-sizing: content-box` which removes the need for calc’d max-widths and fix the flex on teh child button

CHANGELOG.md

@@ -4,6 +4,7 @@
 
 - Fixed `EuiBadge` truncation and auto-applied `title` attribute with `innerText` ([#2190](https://github.com/elastic/eui/pull/2190))
 - Remove exported TypeScript type and interface exports from built artifacts when they originate from `node_modules` ([#2191](https://github.com/elastic/eui/pull/2191))
+- Fixed `EuiBadge` truncation in IE and for the global filters pattern ([#2194](https://github.com/elastic/eui/pull/2194))
 
 ## [`13.1.1`](https://github.com/elastic/eui/tree/v13.1.1)
 

src-docs/src/views/header/_global_filter_group.scss

@@ -17,3 +17,12 @@
   overflow: hidden;
   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
+}

src-docs/src/views/header/_global_filter_item.scss

@@ -26,5 +26,7 @@
     left: 0;
     width: $euiSizeXS;
     background-color: $euiColorVis0;
+    border-top-left-radius: $euiBorderRadius / 2;
+    border-bottom-left-radius: $euiBorderRadius / 2;
   }
 }

src-docs/src/views/header/global_filter_bar.js

@@ -13,7 +13,10 @@ export const GlobalFilterBar = ({ filters, className, ...rest }) => {
     .filter(filter => filter.isPinned)
     .map(filter => {
       return (
-        <EuiFlexItem key={filter.id} grow={false}>
+        <EuiFlexItem
+          key={filter.id}
+          grow={false}
+          className="globalFilterBar__flexItem">
           <GlobalFilterItem {...filter} />
         </EuiFlexItem>
       );
@@ -23,7 +26,10 @@ export const GlobalFilterBar = ({ filters, className, ...rest }) => {
     .filter(filter => !filter.isPinned)
     .map(filter => {
       return (
-        <EuiFlexItem key={filter.id} grow={false}>
+        <EuiFlexItem
+          key={filter.id}
+          grow={false}
+          className="globalFilterBar__flexItem">
           <GlobalFilterItem {...filter} />
         </EuiFlexItem>
       );

src-docs/src/views/header/global_filter_item.js

@@ -188,7 +188,8 @@ export class GlobalFilterItem extends Component {
         closePopover={this.closePopover}
         button={button}
         anchorPosition="downCenter"
-        panelPaddingSize="none">
+        panelPaddingSize="none"
+        display="block">
         <EuiContextMenu
           initialPanelId={0}
           panels={flattenPanelTree(panelTree)}

src-docs/src/views/header/global_query.js

@@ -22,7 +22,8 @@ export default class extends Component {
           id: 'filter0',
           field: '@tags.keyword',
           operator: 'IS',
-          value: 'value',
+          value:
+            'This documents a visual pattern for the eventual replacement of Kibanas global query and filter bars. The filter bar has been broken down into multiple components. There are still bugs and not all the logic is well-formed.',
           isDisabled: false,
           isPinned: true,
           isExcluded: false,
@@ -151,7 +152,7 @@ export default class extends Component {
                 <GlobalFilterOptions />
               </EuiFlexItem>
 
-              <EuiFlexItem>
+              <EuiFlexItem className="globalFilterGroup__filterFlexItem">
                 <GlobalFilterBar
                   className="globalFilterGroup__filterBar"
                   filters={this.state.filters}

src/components/badge/_badge.scss

@@ -5,17 +5,15 @@
   font-size: $euiFontSizeXS;
   font-weight: $euiFontWeightMedium;
   line-height: $euiSize + 2px; /* 1 */
+  padding: 0 $euiSizeS;
   display: inline-block;
   text-decoration: none;
-  box-sizing: content-box;
   border-radius: $euiBorderRadius / 2;
   border: solid 1px transparent;
-  padding: 0 $euiSizeS;
   background-color: transparent;
   white-space: nowrap;
   vertical-align: middle;
-  overflow: hidden;
-  max-width: calc(100% - #{($euiSizeS * 2) + 2px}); // Padding plus border
+  max-width: 100%;
   // The badge will only ever be as wide as it's content
   // So, make the text left aligned to ensure all badges line up the same
   text-align: left;
@@ -26,7 +24,6 @@
 
   + .euiBadge {
     margin-left: $euiSizeXS;
-    max-width: calc(100% - #{($euiSizeS * 2) + 2px + $euiSizeXS}); // Padding plus border plus margin
   }
 
   .euiBadge__content {
@@ -37,8 +34,8 @@
 
   .euiBadge__childButton {
     @include euiTextTruncate;
-    max-width: calc(100% - #{$euiSizeM + $euiSizeXS}); // Subtract the icon and icon's margin
-    flex: 0 0 auto;
+    flex: 1 1 auto; // Must be 1 and 1 for IE to properly truncate
+    text-align: inherit;
     font-weight: inherit;
     line-height: inherit;