Message Bar uses flex instead of grid (IE fix) (#1551)

* MessageBar story and preliminary snapshots
* Replace MessageBar grid w/ flex
* Incorporate PR suggestions and snapshot update

Author: Luke Bowerman

CHANGELOG.md

@@ -47,6 +47,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - `ComboboxMulti` issue with chips not updating reflecting updated option labels
 - `DialogFooter` & `DialogHeader` will no longer shrink in Safari when vertical space is limited
 - `InputTimeSelect` disabled state
+- `MessageBar` now displays properly in IE11 (switched from grid to flex layout)
 
 ### Removed
 

packages/components/snapshots/MessageBar/Basic-snap.png

@@ -19,6 +19,9 @@ exports[`DialogFooter with Button 1`] = `
   -webkit-flex-direction: row-reverse;
   -ms-flex-direction: row-reverse;
   flex-direction: row-reverse;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
@@ -39,6 +42,9 @@ exports[`DialogFooter with Button 1`] = `
   -webkit-flex-direction: row-reverse;
   -ms-flex-direction: row-reverse;
   flex-direction: row-reverse;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
 .c1 {
@@ -107,6 +113,9 @@ exports[`DialogFooter with DialogContext 1`] = `
   -webkit-flex-direction: row-reverse;
   -ms-flex-direction: row-reverse;
   flex-direction: row-reverse;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
   -ms-flex-pack: justify;
@@ -127,6 +136,9 @@ exports[`DialogFooter with DialogContext 1`] = `
   -webkit-flex-direction: row-reverse;
   -ms-flex-direction: row-reverse;
   flex-direction: row-reverse;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
 }
 
 .c1 {