fix(combobox/text-input): add svg top positioning for IE11 (#5362)

* fix(text-input): add top attribute to invalid svg for ie11 * fix(combobox): add css reset * fix(combobox): add top positioning for ie11 fix * fix(listbox): add non-magic number positioning solution for ei11 * fix(listbox/text-input): add correct comment style Co-authored-by: TJ Egan <[email protected]> Co-authored-by: Josh Black <[email protected]> Co-authored-by: Akira Sudoh <[email protected]>
carbon-design-system · Feb 18, 2020 · 347185b · 347185b
1 parent 8987ee7
commit 347185b
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 0 deletions.
diff --git a/packages/components/src/components/combo-box/_combo-box.scss b/packages/components/src/components/combo-box/_combo-box.scss
@@ -12,6 +12,7 @@
 @import '../../globals/scss/vars';
 @import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
 @import '../list-box/list-box';
+@import '../../globals/scss/css--reset';
 
 /// Combo box styles
 /// @access private

diff --git a/packages/components/src/components/list-box/_list-box.scss b/packages/components/src/components/list-box/_list-box.scss
@@ -343,6 +343,9 @@ $list-box-menu-width: rem(300px);
   .#{$prefix}--list-box__selection {
     position: absolute;
     right: rem(33px); // to preserve .5rem space between icons according to spec
+    // top/transform used to center invalid icon in IE11
+    top: 50%;
+    transform: translateY(-50%);
     display: flex;
     justify-content: center;
     align-items: center;

diff --git a/packages/components/src/components/text-input/_text-input.scss b/packages/components/src/components/text-input/_text-input.scss
@@ -76,6 +76,9 @@
     .#{$prefix}--text-input__invalid-icon {
       position: absolute;
       right: $carbon--spacing-05;
+      // top/transform used to center invalid icon in IE11
+      top: 50%;
+      transform: translateY(-50%);
       fill: $support-01;
     }