diff --git a/src/dev-app/button/button-demo.html b/src/dev-app/button/button-demo.html index e88d06475acf..d1561624fe5a 100644 --- a/src/dev-app/button/button-demo.html +++ b/src/dev-app/button/button-demo.html @@ -11,9 +11,9 @@

Buttons

Anchors

- SEARCH + SEARCH SEARCH - SEARCH + SEARCH SEARCH check check @@ -21,6 +21,7 @@

Anchors

Text Buttons [mat-button]

+ @@ -29,6 +30,7 @@

Text Buttons [mat-button]

Raised Buttons [mat-raised-button]

+ @@ -37,6 +39,7 @@

Raised Buttons [mat-raised-button]

Stroked Buttons [mat-stroked-button]

+ @@ -45,6 +48,7 @@

Stroked Buttons [mat-stroked-button]

Flat Buttons [mat-flat-button]

+ @@ -53,6 +57,7 @@

Flat Buttons [mat-flat-button]

Icon Buttons [mat-icon-button]

+ @@ -61,6 +66,7 @@

Icon Buttons [mat-icon-button]

Fab Buttons [mat-fab]

+ @@ -69,6 +75,7 @@

Fab Buttons [mat-fab]

Mini Fab Buttons [mat-mini-fab]

+ diff --git a/src/dev-app/mdc-button/mdc-button-demo.html b/src/dev-app/mdc-button/mdc-button-demo.html index 22c91117b0f8..e34b52836b8b 100644 --- a/src/dev-app/mdc-button/mdc-button-demo.html +++ b/src/dev-app/mdc-button/mdc-button-demo.html @@ -27,9 +27,9 @@

Buttons

Anchors

- SEARCH + SEARCH SEARCH - SEARCH + SEARCH SEARCH check @@ -53,6 +53,7 @@

Anchors

Text Buttons [mat-button]

+ @@ -61,6 +62,7 @@

Text Buttons [mat-button]

Raised Buttons [mat-raised-button]

+ @@ -69,6 +71,7 @@

Raised Buttons [mat-raised-button]

Stroked Buttons [mat-stroked-button]

+ @@ -77,6 +80,7 @@

Stroked Buttons [mat-stroked-button]

Flat Buttons [mat-flat-button]

+ @@ -85,6 +89,9 @@

Flat Buttons [mat-flat-button]

Icon Buttons [mat-icon-button]

+ @@ -101,6 +108,9 @@

Icon Buttons [mat-icon-button]

Fab Buttons [mat-fab]

+ @@ -117,6 +127,9 @@

Fab Buttons [mat-fab]

Mini Fab Buttons [mat-mini-fab]

+ diff --git a/src/material-experimental/mdc-button/README.md b/src/material-experimental/mdc-button/README.md index d6db819ba1a5..f248eb3acb99 100644 --- a/src/material-experimental/mdc-button/README.md +++ b/src/material-experimental/mdc-button/README.md @@ -1,11 +1,5 @@ -### Open Issues - -- Anchor button does not support disabled - see MDC issue #1339 - ### TODO -- Determine coloring for non-primary buttons (MDC does not support this) - Write README - looks like lot of overlap with checkbox README. Create common readme for setup -- Move tests over (both unit and e2e) - JSDoc comments on all classes, consts - Consider supporting button[mat-outlined-button] - Add to universal app diff --git a/src/material-experimental/mdc-button/_mdc-button.scss b/src/material-experimental/mdc-button/_mdc-button.scss index 783c613f962f..074634a55189 100644 --- a/src/material-experimental/mdc-button/_mdc-button.scss +++ b/src/material-experimental/mdc-button/_mdc-button.scss @@ -41,20 +41,40 @@ } .mat-mdc-button, .mat-mdc-outlined-button { - @include mdc-states-base-color(primary, $query: $mat-theme-styles-query); + &.mat-unthemed { + @include mdc-button-ink-color($mdc-theme-on-surface, $query: $mat-theme-styles-query); + } + + &.mat-primary { + @include mdc-button-ink-color(primary, $query: $mat-theme-styles-query); + @include mdc-states-base-color(primary, $query: $mat-theme-styles-query); + } &.mat-accent { @include mdc-button-ink-color(secondary, $query: $mat-theme-styles-query); + @include mdc-states-base-color(secondary, $query: $mat-theme-styles-query); } &.mat-warn { @include mdc-button-ink-color(error, $query: $mat-theme-styles-query); + @include mdc-states-base-color(error, $query: $mat-theme-styles-query); } } .mat-mdc-raised-button, .mat-mdc-unelevated-button { - @include mdc-states-base-color(on-primary, $query: $mat-theme-styles-query); + &.mat-unthemed { + @include mdc-button-container-fill-color( + $mdc-theme-surface, $query: $mat-theme-styles-query); + @include mdc-button-ink-color($mdc-theme-on-surface, $query: $mat-theme-styles-query); + @include mdc-states-base-color($mdc-theme-on-surface, $query: $mat-theme-styles-query); + } + + &.mat-primary { + @include mdc-button-container-fill-color(primary, $query: $mat-theme-styles-query); + @include mdc-button-ink-color(on-primary, $query: $mat-theme-styles-query); + @include mdc-states-base-color(on-primary, $query: $mat-theme-styles-query); + } &.mat-accent { @include mdc-button-container-fill-color(secondary, $query: $mat-theme-styles-query); @@ -74,6 +94,14 @@ } .mat-mdc-outlined-button { + &.mat-unthemed { + @include mdc-button-outline-color($mdc-theme-on-surface, $query: $mat-theme-styles-query); + } + + &.mat-primary { + @include mdc-button-outline-color(primary, $query: $mat-theme-styles-query); + } + &.mat-accent { @include mdc-button-outline-color(secondary, $query: $mat-theme-styles-query); } @@ -113,15 +141,26 @@ @mixin mat-fab-theme-mdc($theme) { @include mat-using-mdc-theme($theme) { .mat-mdc-fab, .mat-mdc-mini-fab { - @include mdc-states-base-color(secondary, $query: $mat-theme-styles-query); @include mdc-states($query: $mat-theme-styles-query); + &.mat-unthemed { + @include mdc-states-base-color($mdc-theme-on-surface, $query: $mat-theme-styles-query); + @include mdc-fab-container-color($mdc-theme-surface, $query: $mat-theme-styles-query); + @include mdc-fab-ink-color($mdc-theme-on-surface, $query: $mat-theme-styles-query); + } + &.mat-primary { @include mdc-states-base-color(on-primary, $query: $mat-theme-styles-query); @include mdc-fab-container-color(primary, $query: $mat-theme-styles-query); @include mdc-fab-ink-color(on-primary, $query: $mat-theme-styles-query); } + &.mat-accent { + @include mdc-states-base-color(on-secondary, $query: $mat-theme-styles-query); + @include mdc-fab-container-color(secondary, $query: $mat-theme-styles-query); + @include mdc-fab-ink-color(on-secondary, $query: $mat-theme-styles-query); + } + &.mat-warn { @include mdc-states-base-color(on-error, $query: $mat-theme-styles-query); @include mdc-fab-container-color(error, $query: $mat-theme-styles-query); @@ -149,8 +188,16 @@ @include mat-using-mdc-theme($theme) { .mat-mdc-icon-button { @include mdc-states($query: $mat-theme-styles-query); - @include mdc-states-base-color(primary, $query: $mat-theme-styles-query); - @include mdc-icon-button-ink-color(primary, $query: $mat-theme-styles-query); + + &.mat-unthemed { + @include mdc-states-base-color($mdc-theme-surface, $query: $mat-theme-styles-query); + @include mdc-icon-button-ink-color($mdc-theme-on-surface, $query: $mat-theme-styles-query); + } + + &.mat-primary { + @include mdc-states-base-color(primary, $query: $mat-theme-styles-query); + @include mdc-icon-button-ink-color(primary, $query: $mat-theme-styles-query); + } &.mat-accent { @include mdc-states-base-color(secondary, $query: $mat-theme-styles-query); diff --git a/src/material-experimental/mdc-button/button-base.ts b/src/material-experimental/mdc-button/button-base.ts index cc87d9fe7aa0..ca66261f3544 100644 --- a/src/material-experimental/mdc-button/button-base.ts +++ b/src/material-experimental/mdc-button/button-base.ts @@ -30,6 +30,10 @@ export const MAT_BUTTON_INPUTS = ['disabled', 'disableRipple', 'color']; export const MAT_BUTTON_HOST = { '[attr.disabled]': 'disabled || null', '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"', + // MDC automatically applies the primary theme color to the button, but we want to support + // an unthemed version. If color is undefined, apply a CSS class that makes it easy to + // select and style this "theme". + '[class.mat-unthemed]': '!color', }; /** List of classes to add to buttons instances based on host attribute selector. */ @@ -131,6 +135,10 @@ export const MAT_ANCHOR_HOST = { '[attr.tabindex]': 'disabled ? -1 : (tabIndex || 0)', '[attr.aria-disabled]': 'disabled.toString()', '(click)': '_haltDisabledEvents($event)', + // MDC automatically applies the primary theme color to the button, but we want to support + // an unthemed version. If color is undefined, apply a CSS class that makes it easy to + // select and style this "theme". + '[class.mat-unthemed]': '!color', }; /**