Skip to content

Dubunin/beta mdl2/messagebar updates #92

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dubunin merged 4 commits into from
Aug 9, 2016
Merged

Dubunin/beta mdl2/messagebar updates #92

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
ca8c1e6
#225406: cleaned up messageBar overrides.
Aug 8, 2016
dce13d4
#225406: updated messageBar styles per redlines.
Aug 8, 2016
264826d
#225406: nit code formatting
Aug 9, 2016
6c70576
#225406: nit - updated selector name
Aug 9, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
49 changes: 15 additions & 34 deletions src/components/MessageBar/MessageBar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;

@Jahnp Jahnp Aug 9, 2016

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: space before value

@Jahnp Jahnp Aug 9, 2016 •
edited
Loading

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also, I'm seeing a lot of display: flex but not a lot of additional flex properties prescribing flexbox behavior. Are those props really needed?

@dubunin dubunin Aug 9, 2016

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yep - more so for the inner/child elements. Just for fun I removed them to see what happens and layouts went crazy.

}

.ms-MessageBar-text {
@include ms-font-s;
width: 100%;
display: flex;
}


Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -149,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 {

@Jahnp Jahnp Aug 9, 2016

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I know this is being ported over, but we would typically use camelCase for classes like this instead of dashes. So this should be ms-MessageBar-actionsOneline.

padding: 8px;
}

// Add space between adjacent MessageBars.
Expand All @@ -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.
Expand Down Expand Up @@ -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;
}
16 changes: 10 additions & 6 deletions src/components/MessageBar/MessageBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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;
}
Expand Down