Dubunin/beta mdl2/messagebar updates

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;
 }
 
 
@@ -87,39 +95,14 @@ $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;
   width: 100%;
   box-sizing: border-box;
 }
 
-.ms-MessageBar-text {
-  width: 100%;
-  display: flex;
-}
-
-.ms-MessageBar-link {
-  white-space: nowrap;
-  padding: 0 8px 0;
-}
-
 .ms-MessageBar-actionables {
   display: flex;
   flex-direction: column;
@@ -128,19 +111,19 @@ $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 {
+.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;
 }
 
@@ -149,12 +132,10 @@ $MessageBar-padding: 8px;
 }
 
 .ms-MessageBar-dismissal {
-  padding: 8px;
   @include focus-border();
 }
-
-.ms-MessageBar-link {
-  @include padding-left(4px);
+.ms-MessageBar-actionsOneline .ms-MessageBar-dismissal {
+  padding: 8px;
 }
 
 // Add space between adjacent MessageBars.
@@ -163,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.
@@ -205,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;
 }

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';
@@ -45,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;
   }
@@ -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;
   }