From ca8c1e6951b59beadb32bc2e19530d6d39875925 Mon Sep 17 00:00:00 2001
From: Stephen Morrissey <v-mostep@microsoft.com>
Date: Mon, 8 Aug 2016 12:54:03 -0700
Subject: [PATCH 1/4] #225406: cleaned up messageBar overrides.

---
 src/components/MessageBar/MessageBar.scss | 30 ++++++++---------------
 1 file changed, 10 insertions(+), 20 deletions(-)

diff --git a/src/components/MessageBar/MessageBar.scss b/src/components/MessageBar/MessageBar.scss
index 7ae6b85b55de50..d1942b61dcea10 100644
--- a/src/components/MessageBar/MessageBar.scss
+++ b/src/components/MessageBar/MessageBar.scss
@@ -12,8 +12,11 @@ $MessageBar-padding: 8px;
 .ms-MessageBar {
   @include ms-baseFont;
   padding: $MessageBar-padding;
-  display: table;
   @include ms-bgColor-info;
+  width: 100%;
+  box-sizing: border-box;
+  display: flex;
+  position: relative;
 
   .ms-Link {
     font-size: $ms-font-size-s;
@@ -27,13 +30,18 @@ $MessageBar-padding: 8px;
 }
 
 .ms-MessageBar-icon {
-  padding-right: $MessageBar-padding;
+  @include padding-right(MessageBar-padding);
   font-size: $ms-icon-size-m;
   @include ms-fontColor-neutralSecondaryAlt;
+  min-width: 16px;
+  min-height: 16px;
+  display:flex;
 }
 
 .ms-MessageBar-text {
   @include ms-font-s;
+  width: 100%;
+  display: flex;
 }
 
 
@@ -90,19 +98,6 @@ $MessageBar-padding: 8px;
 // TODO: Remove overrides below.
 
 // Shared
-.ms-MessageBar-icon {
-  @include padding-right(8px);
-  min-width: 16px;
-  min-height: 16px;
-  display:flex;
-}
-
-.ms-MessageBar {
-  width: 100%;
-  box-sizing: border-box;
-  display: flex;
-  position: relative;
-}
 
 .ms-MessageBar-content {
   display: flex;
@@ -110,11 +105,6 @@ $MessageBar-padding: 8px;
   box-sizing: border-box;
 }
 
-.ms-MessageBar-text {
-  width: 100%;
-  display: flex;
-}
-
 .ms-MessageBar-link {
   white-space: nowrap;
   padding: 0 8px 0;

From dce13d4ca29c5812c77a4a6d7441e8ad8cd5236a Mon Sep 17 00:00:00 2001
From: Stephen Morrissey <v-mostep@microsoft.com>
Date: Mon, 8 Aug 2016 15:47:42 -0700
Subject: [PATCH 2/4] #225406: updated messageBar styles per redlines.

---
 src/components/MessageBar/MessageBar.scss | 21 ++++++---------------
 src/components/MessageBar/MessageBar.tsx  | 16 ++++++++++------
 2 files changed, 16 insertions(+), 21 deletions(-)

diff --git a/src/components/MessageBar/MessageBar.scss b/src/components/MessageBar/MessageBar.scss
index d1942b61dcea10..e4226e57ee9034 100644
--- a/src/components/MessageBar/MessageBar.scss
+++ b/src/components/MessageBar/MessageBar.scss
@@ -30,7 +30,7 @@ $MessageBar-padding: 8px;
 }
 
 .ms-MessageBar-icon {
-  @include padding-right(MessageBar-padding);
+  @include padding-right($MessageBar-padding);
   font-size: $ms-icon-size-m;
   @include ms-fontColor-neutralSecondaryAlt;
   min-width: 16px;
@@ -95,8 +95,6 @@ $MessageBar-padding: 8px;
   }
 }
 
-// TODO: Remove overrides below.
-
 // Shared
 
 .ms-MessageBar-content {
@@ -105,11 +103,6 @@ $MessageBar-padding: 8px;
   box-sizing: border-box;
 }
 
-.ms-MessageBar-link {
-  white-space: nowrap;
-  padding: 0 8px 0;
-}
-
 .ms-MessageBar-actionables {
   display: flex;
   flex-direction: column;
@@ -139,12 +132,10 @@ $MessageBar-padding: 8px;
 }
 
 .ms-MessageBar-dismissal {
-  padding: 8px;
   @include focus-border();
 }
-
-.ms-MessageBar-link {
-  @include padding-left(4px);
+.ms-MessageBar-actions-oneline .ms-MessageBar-dismissal {
+  padding: 8px;
 }
 
 // Add space between adjacent MessageBars.
@@ -153,7 +144,7 @@ $MessageBar-padding: 8px;
 }
 
 .ms-MessageBar-innerTextPadding {
-  @include padding-right(16px); // Add padding if we have a dismiss to prevent button overlapping text.
+  @include padding-right(24px); // Add padding if we have a dismiss to prevent button overlapping text.
 
   span, .ms-MessageBar-innerText > span {
     @include padding-right(4px); // Add padding between text and hyperlink.
@@ -195,6 +186,6 @@ $MessageBar-padding: 8px;
 }
 
 // Because of an odd behaviour in other CSS, ms-MessageBar--remove causes children's icons to use 8px, and not inherit.
-.ms-MessageBar.ms-MessageBar--remove .ms-Icon--Cancel {
-  font-size: 13.333px;
+.ms-MessageBar .ms-Icon--Cancel {
+  font-size: 14px;
 }
\ No newline at end of file
diff --git a/src/components/MessageBar/MessageBar.tsx b/src/components/MessageBar/MessageBar.tsx
index ced559b5c2aee3..bbc4d700c52ecf 100644
--- a/src/components/MessageBar/MessageBar.tsx
+++ b/src/components/MessageBar/MessageBar.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { Button, ButtonType } from '../../Button';
 import './MessageBar.scss';
 import { css } from '../../utilities/css';
 import { IMessageBarProps, MessageBarType } from './MessageBar.Props';
@@ -63,12 +64,15 @@ export class MessageBar extends React.Component<IMessageBarProps, IMessageBarSta
 
   private _getDismissDiv(): JSX.Element {
     if (this.props.onDismiss != null) {
-      return <button
-          aria-label= { this.props.dismissButtonAriaLabel }
-          className='ms-MessageBar-dismissal ms-Button--icon'
-          onClick= { this.props.onDismiss }>
-          <i className='ms-Icon ms-Icon--Cancel'></i>
-        </button>;
+      return <Button
+        disabled={ false }
+        className='ms-MessageBar-dismissal'
+        buttonType={ ButtonType.icon }
+        onClick={ this.props.onDismiss }
+        icon='Cancel'
+        title='Close'
+        ariaLabel={ this.props.dismissButtonAriaLabel }
+      />;
     }
     return null;
   }

From 264826d4c0f2d4deefad2766e2d93ebc02f3cbc4 Mon Sep 17 00:00:00 2001
From: Stephen Morrissey <v-mostep@microsoft.com>
Date: Tue, 9 Aug 2016 11:26:48 -0700
Subject: [PATCH 3/4] #225406: nit code formatting

---
 src/components/MessageBar/MessageBar.scss | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/MessageBar/MessageBar.scss b/src/components/MessageBar/MessageBar.scss
index e4226e57ee9034..b7d6f886c2c013 100644
--- a/src/components/MessageBar/MessageBar.scss
+++ b/src/components/MessageBar/MessageBar.scss
@@ -35,7 +35,7 @@ $MessageBar-padding: 8px;
   @include ms-fontColor-neutralSecondaryAlt;
   min-width: 16px;
   min-height: 16px;
-  display:flex;
+  display: flex;
 }
 
 .ms-MessageBar-text {
@@ -111,9 +111,9 @@ $MessageBar-padding: 8px;
 }
 
 .ms-MessageBar-actionables > .ms-MessageBar-dismissal {
-    right: 0;
-    top: 0;
-    position: absolute !important; // Needed because we're using focus-border mixin
+  right: 0;
+  top: 0;
+  position: absolute !important; // Needed because we're using focus-border mixin
 }
 
 .ms-MessageBar-actions, .ms-MessageBar-actions-oneline {

From 6c70576ddfb76ff29424b26871ebc910ae1a7aae Mon Sep 17 00:00:00 2001
From: Stephen Morrissey <v-mostep@microsoft.com>
Date: Tue, 9 Aug 2016 11:31:39 -0700
Subject: [PATCH 4/4] #225406: nit - updated selector name

---
 src/components/MessageBar/MessageBar.scss | 6 +++---
 src/components/MessageBar/MessageBar.tsx  | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/MessageBar/MessageBar.scss b/src/components/MessageBar/MessageBar.scss
index b7d6f886c2c013..ccf0c8ba06f4ea 100644
--- a/src/components/MessageBar/MessageBar.scss
+++ b/src/components/MessageBar/MessageBar.scss
@@ -116,14 +116,14 @@ $MessageBar-padding: 8px;
   position: absolute !important; // Needed because we're using focus-border mixin
 }
 
-.ms-MessageBar-actions, .ms-MessageBar-actions-oneline {
+.ms-MessageBar-actions, .ms-MessageBar-actionsOneline {
   display: flex;
   flex: 0 0 auto;
   flex-direction: row-reverse;
   align-items: center;
 }
 
-.ms-MessageBar-actions-oneline {
+.ms-MessageBar-actionsOneline {
   position: relative;
 }
 
@@ -134,7 +134,7 @@ $MessageBar-padding: 8px;
 .ms-MessageBar-dismissal {
   @include focus-border();
 }
-.ms-MessageBar-actions-oneline .ms-MessageBar-dismissal {
+.ms-MessageBar-actionsOneline .ms-MessageBar-dismissal {
   padding: 8px;
 }
 
diff --git a/src/components/MessageBar/MessageBar.tsx b/src/components/MessageBar/MessageBar.tsx
index bbc4d700c52ecf..e4caada6b659b3 100644
--- a/src/components/MessageBar/MessageBar.tsx
+++ b/src/components/MessageBar/MessageBar.tsx
@@ -46,7 +46,7 @@ export class MessageBar extends React.Component<IMessageBarProps, IMessageBarSta
     if (this.props.actions) {
       return this.props.isMultiline ?
         <div className='ms-MessageBar-actions'> { this.props.actions } </div> :
-        <div className='ms-MessageBar-actions-oneline'> { [this._getDismissDiv(), this.props.actions] } </div>;
+        <div className='ms-MessageBar-actionsOneline'> { [this._getDismissDiv(), this.props.actions] } </div>;
     }
     return null;
   }