Some quick CSS fixes (elastic#864)

chandlerprall · May 24, 2018 · 14dd37c · 14dd37c
1 parent 7d9c1f8
commit 14dd37c
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 3 deletions.
diff --git 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
@@ -10,13 +10,17 @@ $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
 .euiCard {
   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
@@ -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
@@ -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
  *