From 14dd37c46e9eb7b4250296e57fbd55916725de71 Mon Sep 17 00:00:00 2001
From: Caroline Horn <549577+cchaos@users.noreply.github.com>
Date: Wed, 23 May 2018 14:26:02 -0400
Subject: [PATCH] Some quick CSS fixes (#864)

---
 CHANGELOG.md                                              | 3 +++
 src/components/card/_card.scss                            | 7 +++++++
 .../form/form_control_layout/_form_control_layout.scss    | 6 +++++-
 src/global_styling/utility/_utility.scss                  | 8 ++++++--
 4 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8b4de4b99efd..1b1a4b321035 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,9 @@
 - `EuiButton`, `EuiButtonEmpty`, and `EuiButtonIcon` now look and behave disabled when `isDisabled={true}` ([#862](https://github.com/elastic/eui/pull/862))
 - `EuiGlobalToastList` no longer triggers `Uncaught TypeError: _this.callback is not a function`  ([#865](https://github.com/elastic/eui/pull/865))
 - `EuiGlobalToastList` checks to see if it has dismissed a toast before re-dismissing it ([#868](https://github.com/elastic/eui/pull/868))
+- Added FF/IE fallback for `.eui-textBreakWord` ([#864](https://github.com/elastic/eui/pull/864))
+- Fixed `EuiCard` description text color when used in/as an anchor tag ([#864](https://github.com/elastic/eui/pull/864))
+- Fixed `EuiCard` IE bugs ([#864](https://github.com/elastic/eui/pull/864))
 
 ## [`0.0.49`](https://github.com/elastic/eui/tree/v0.0.49)
 
diff --git a/src/components/card/_card.scss b/src/components/card/_card.scss
index 9ac04f65ba33..f0151117e704 100644
--- a/src/components/card/_card.scss
+++ b/src/components/card/_card.scss
@@ -10,6 +10,9 @@ $euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity.
 /**
  * 1. Footer is always at the bottom.
  * 2. Extend beta badges to at least 40% of the card's width
+ * 3. Fix for IE to ensure badges are visible outside of a <button> tag
+ * 4. Fix for IE where the image correctly resizes in width but doesn't collapse it's height
+      (https://github.com/philipwalton/flexbugs/issues/75#issuecomment-134702421)
  */
 
 // EuiCard specific
@@ -17,6 +20,7 @@ $euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity.
   display: flex;
   flex-direction: column;
   padding: $euiCardSpacing;
+  overflow: visible; /* 3 */
 
   &.euiCard--hasBetaBadge {
     position: relative;
@@ -82,6 +86,7 @@ $euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity.
 .euiCard__top {
   flex-grow: 0; /* 1 */
   position: relative;
+  min-height: 1px; /* 4 */
 
   .euiCard__icon {
     margin-top: $euiCardSpacing/2;
@@ -103,6 +108,7 @@ $euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity.
       position: absolute;
       top: 50%;
       left: 50%;
+      transform: translate(-50%, -75%); // Fallback for IE as it doesn't accept calcs in translates
       transform: translate(-50%, calc(-50% + #{$euiCardSpacing * -1}));
     }
   }
@@ -123,6 +129,7 @@ $euiCardTitleSize: 18px; // Hardcoded pixel value for theme parity.
   }
 
   .euiCard__description {
+    color: $euiTextColor; // Ensures regular text color if wrapped in an anchor tag
     margin-top: $euiCardSpacing/2;
   }
 }
diff --git a/src/components/form/form_control_layout/_form_control_layout.scss b/src/components/form/form_control_layout/_form_control_layout.scss
index 5d15a76d3680..7e197063ceaf 100644
--- a/src/components/form/form_control_layout/_form_control_layout.scss
+++ b/src/components/form/form_control_layout/_form_control_layout.scss
@@ -27,7 +27,11 @@
 
   .euiFormControlLayout__iconButton {
     pointer-events: all;
-    top: $euiFormControlPadding - 1px;
+    @include size($euiSize);
+
+    .euiIcon {
+      vertical-align: baseline;
+    }
 
     @at-root {
       .euiFormControlLayout--compressed#{&} {
diff --git a/src/global_styling/utility/_utility.scss b/src/global_styling/utility/_utility.scss
index bd51115aaebe..c3bef018aef2 100644
--- a/src/global_styling/utility/_utility.scss
+++ b/src/global_styling/utility/_utility.scss
@@ -13,11 +13,15 @@
 .eui-textCenter {text-align: center !important;}
 .eui-textLeft {text-align: left !important;}
 .eui-textRight {text-align: right !important;}
-.eui-textBreakWord {word-break: break-word !important;}
-.eui-textBreakAll {word-break: break-all !important;}
 .eui-textNoWrap {white-space: nowrap !important;}
 .eui-textInheritColor {color: inherit !important;}
 
+.eui-textBreakAll {word-break: break-all !important;}
+.eui-textBreakWord {
+  word-break: break-all !important; // Fallback for FF and IE
+  word-break: break-word !important;
+}
+
 /**
  * Text truncation
  *