fix(Alert): Avoid conflict with other header classnames

src/components/alert/alert-styles.jsx

@@ -14,7 +14,7 @@ export default createStyleSheet('Alert', theme => {
       marginBottom: '16px',
       color: palette.text.default,
 
-      '& .header': {
+      '& .alert-header': {
         display: 'inline-block',
         fontWeight: 'bold',
         padding: '4px',
@@ -49,23 +49,23 @@ export default createStyleSheet('Alert', theme => {
     success: {
       borderLeft: `2px solid ${palette.variant.success}`,
 
-      '& .header': {
+      '& .alert-header': {
         color: palette.variant.success,
       },
     },
 
     warning: {
       borderLeft: `2px solid ${palette.variant.warning}`,
 
-      '& .header': {
+      '& .alert-header': {
         color: palette.variant.warning,
       },
     },
 
     danger: {
       borderLeft: `2px solid ${palette.variant.danger}`,
 
-      '& .header': {
+      '& .alert-header': {
         color: palette.variant.danger,
       },
     },

src/components/alert/alert.jsx

@@ -47,7 +47,7 @@ class Alert extends React.PureComponent {
       },
       this.props.className,
     );
-    const headerClassName = classNames('header', {
+    const headerClassName = classNames('alert-header', {
       vertical: this.props.vertical,
     });
 

test/components/alert/alert.test.js

@@ -30,7 +30,7 @@ describe('<Alert />', () => {
   });
 
   it('should render the header if provided', () => {
-    expect(wrapper.find('div.header').childAt(0).text()).to.equal('header');
+    expect(wrapper.find('div.alert-header').childAt(0).text()).to.equal('header');
   });
 
   it('should render the children if provided', () => {