Skip to content
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

Jump to bottom

feat(button): add md-icon-button styling. #206

Closed
wants to merge 1 commit into from
Closed

feat(button): add md-icon-button styling. #206

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
5 changes: 5 additions & 0 deletions src/components/button/_button-base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,11 @@ $md-button-margin: 0 !default;
$md-button-line-height: 36px !default;
$md-button-border-radius: 3px !default;

// Icon Button standards
$md-icon-button-size: 40px !default;
$md-icon-button-border-radius: 50px !default;
$md-icon-button-line-height: 24px !default;

// Fab standards
$md-fab-border-radius: 50% !default;
$md-fab-size: 56px !default;
Expand Down
22 changes: 22 additions & 0 deletions src/components/button/button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,28 @@
@include md-fab($md-mini-fab-size, $md-mini-fab-padding)
}

[md-icon-button] {
@extend %md-button-base;
Copy link
Contributor

Choose a reason for hiding this comment

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

Given that this extends the base button rather than a fab, it will likely need styling for its disabled state. Is this covered somewhere?

Copy link
Member Author

Choose a reason for hiding this comment

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

Yes, it is already covered by the default button base.

image


min-width: 0;
padding: 0;

width: $md-icon-button-size;
height: $md-icon-button-size;

line-height: $md-icon-button-line-height;
border-radius: $md-icon-button-border-radius;

&.md-button-focus {
background-color: md-color($md-foreground, base, 0.12);
@include md-button-theme('background-color', 0.12);
}

.md-button-wrapper > * {
Copy link
Member

Choose a reason for hiding this comment

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

Why does this need a * selector?

Copy link
Member Author

Choose a reason for hiding this comment

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

This is needed to align the first level child items of the wrapper in the middle (correctly to the line-height)

vertical-align: middle;
}
}

// Applies a clearer border for high-contrast mode (a11y)
@media screen and (-ms-high-contrast: active) {
.md-raised-button, .md-fab, .md-mini-fab {
Expand Down
5 changes: 3 additions & 2 deletions src/components/button/button.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@ import {TimerWrapper} from 'angular2/src/facade/async';


@Component({
selector: '[md-button]:not(a), [md-raised-button]:not(a), [md-fab]:not(a), [md-mini-fab]:not(a)',
selector: '[md-button]:not(a), [md-raised-button]:not(a), [md-icon-button]:not(a), ' +
'[md-fab]:not(a), [md-mini-fab]:not(a)',
inputs: ['color'],
host: {
'[class.md-button-focus]': 'isKeyboardFocused',
Expand Down Expand Up @@ -79,7 +80,7 @@ export class MdButton {
}

@Component({
selector: 'a[md-button], a[md-raised-button], a[md-fab], a[md-mini-fab]',
selector: 'a[md-button], a[md-raised-button], a[md-icon-button], a[md-fab], a[md-mini-fab]',
inputs: ['color'],
host: {
'[class.md-button-focus]': 'isKeyboardFocused',
Expand Down
18 changes: 18 additions & 0 deletions src/demo-app/button/button-demo.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,20 @@
</button>
</section>

<section>
<button md-icon-button color="primary">
<i class="material-icons md-24">menu</i>
</button>

<button md-icon-button color="accent">
<i class="material-icons md-24">favorite</i>
</button>

<button md-icon-button>
<i class="material-icons md-24">more_vert</i>
</button>
Copy link
Contributor

Choose a reason for hiding this comment

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

Can you add an icon-button to the disabled section at the bottom as well? It will ensure disabled styles are applied properly to this type of button over time.

Copy link
Member Author

Choose a reason for hiding this comment

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

Yes, great idea. - Done

</section>

<section>
<div>
<span>isDisabled: {{isDisabled}}</span>
Expand All @@ -57,5 +71,9 @@
<button md-mini-fab [disabled]="isDisabled">
<i class="material-icons md-24">check</i>
</button>

<button md-icon-button color="accent" [disabled]="isDisabled">
<i class="material-icons md-24">favorite</i>
</button>
</section>
</div>