diff --git a/demos/button.html b/demos/button.html index 11f37e49230..64300a2a7d7 100644 --- a/demos/button.html +++ b/demos/button.html @@ -194,29 +194,29 @@

Ripple Enabled

- Stroked Button (Experimental) + Outlined Button (Experimental)
- - - - - - + Link
@@ -228,8 +228,8 @@

Ripple Enabled

-
@@ -241,7 +241,7 @@

Ripple Enabled

Ink Color - @@ -338,29 +338,29 @@

CSS Only

- Stroked Button (Experimental) + Outlined Button (Experimental)
- - - - - - + Link
@@ -372,8 +372,8 @@

CSS Only

-
@@ -385,7 +385,7 @@

CSS Only

Ink Color - diff --git a/demos/button.scss b/demos/button.scss index 291c1d322dc..80acd5a131f 100644 --- a/demos/button.scss +++ b/demos/button.scss @@ -31,9 +31,9 @@ @include mdc-button-filled-accessible($mdc-theme-secondary); } -.mdc-button.secondary-stroked-button { +.mdc-button.secondary-outlined-button { @include mdc-button-ink-color($mdc-theme-secondary); - @include mdc-button-stroke-color($mdc-theme-secondary); + @include mdc-button-outline-color($mdc-theme-secondary); } @@ -41,8 +41,8 @@ @include mdc-button-corner-radius(8px); } -.mdc-button.thick-stroke-button { - @include mdc-button-stroke-width(4px); +.mdc-button.thick-outline-button { + @include mdc-button-outline-width(4px); } .demo-ink-color { diff --git a/demos/checkbox.html b/demos/checkbox.html index bc6cbaed469..e15af33d12e 100644 --- a/demos/checkbox.html +++ b/demos/checkbox.html @@ -98,10 +98,10 @@

CSS Only

- -
@@ -214,8 +214,8 @@

With JavaScript

- - + +
@@ -239,8 +239,8 @@

With JavaScript

- - + +
diff --git a/demos/drawer/temporary-drawer.html b/demos/drawer/temporary-drawer.html index 94fab704f16..5846c651007 100644 --- a/demos/drawer/temporary-drawer.html +++ b/demos/drawer/temporary-drawer.html @@ -126,7 +126,7 @@

Temporary Drawer

- +
diff --git a/demos/shape.html b/demos/shape.html index be02237b745..4ea00301ec8 100644 --- a/demos/shape.html +++ b/demos/shape.html @@ -46,7 +46,7 @@
- +
@@ -73,12 +73,12 @@

Filled

Stroked

- +
- +
diff --git a/demos/theme/index.html b/demos/theme/index.html index a007e1c49b5..de379788c18 100644 --- a/demos/theme/index.html +++ b/demos/theme/index.html @@ -285,8 +285,8 @@

-

@@ -304,8 +304,8 @@

-

@@ -419,10 +419,10 @@

- - diff --git a/demos/toolbar/index.html b/demos/toolbar/index.html index 38725c16db0..ae05e0f2360 100644 --- a/demos/toolbar/index.html +++ b/demos/toolbar/index.html @@ -118,7 +118,7 @@

Normal Toolbar -

+

View in separate window

@@ -126,7 +126,7 @@

Fixed Toolbar -

+

View in separate window

@@ -134,7 +134,7 @@

Fixed Toolbar with Menu -

+

View in separate window

@@ -142,7 +142,7 @@

Waterfall Toolbar -

+

View in separate window

@@ -150,7 +150,7 @@

Default Flexible Toolbar -

+

View in separate window

@@ -158,7 +158,7 @@

Waterfall Flexible Toolbar -

+

View in separate window

@@ -166,7 +166,7 @@

Waterfall Toolbar Fix Last Row -

+

View in separate window

@@ -174,7 +174,7 @@

Waterfall Flexible Toolbar with Custom Style -

+

View in separate window

@@ -182,7 +182,7 @@

Custom Colored Toolbar and Icons -

+

View in separate window

diff --git a/packages/mdc-button/README.md b/packages/mdc-button/README.md index 3b40585edd2..25ffa4a2717 100644 --- a/packages/mdc-button/README.md +++ b/packages/mdc-button/README.md @@ -90,7 +90,7 @@ CSS Class | Description `mdc-button__icon` | Optional, for the icon element `mdc-button--raised` | Optional, a contained button that is elevated upon the surface `mdc-button--unelevated` | Optional, a contained button that is flush with the surface -`mdc-button--stroked` | Optional, a contained button that is flush with the surface and has a visible border +`mdc-button--outlined` | Optional, a contained button that is flush with the surface and has a visible border `mdc-button--dense` | Optional, compresses the button text to make it slightly smaller ### Disabled Button @@ -135,7 +135,7 @@ container color to the given color, and updates the Button's ink and ripple colo ### Advanced Sass Mixins -> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, stroke or ripple. You can use all of them if you want to completely customize a Button. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, stroke and ripple colors that work together, and meet accessibility standards.** +> **A note about advanced mixins**, The following mixins are intended for advanced users. These mixins will override the color of the container, ink, outline or ripple. You can use all of them if you want to completely customize a Button. Or you can use only one of them, e.g. if you only need to override the ripple color. **It is up to you to pick container, ink, outline and ripple colors that work together, and meet accessibility standards.** Mixin | Description --- | --- @@ -144,12 +144,12 @@ Mixin | Description `mdc-button-ink-color($color)` | Sets the ink color to the given color. This affects both text and icon, unless `mdc-button-icon-color` is also used. `mdc-button-corner-radius($corner-radius)` | Sets the corner radius to the given number (defaults to 2px). `mdc-button-horizontal-padding($padding)` | Sets horizontal padding to the given number. -`mdc-button-stroke-color($color)` | Sets the stroke color to the given color. -`mdc-button-stroke-width($width, $padding)` | Sets the stroke width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value. +`mdc-button-outline-color($color)` | Sets the outline color to the given color. +`mdc-button-outline-width($width, $padding)` | Sets the outline width to the given number (defaults to 2px) and adjusts padding accordingly. `$padding` is only required in cases where `mdc-button-horizontal-padding` is also included with a custom value. The ripple effect for the Button component is styled using [MDC Ripple](../mdc-ripple) mixins. -> **Note:** If you want to customize both horizontal padding and stroke width, simply include the `mdc-button-stroke-width` mixin with both arguments. It will include `mdc-button-horizontal-padding` for you. +> **Note:** If you want to customize both horizontal padding and the outline width, simply include the `mdc-button-outline-width` mixin with both arguments. It will include `mdc-button-horizontal-padding` for you. #### Caveat: Edge and CSS Variables diff --git a/packages/mdc-button/_mixins.scss b/packages/mdc-button/_mixins.scss index 8af9efb1b6c..60c5ac0e4b0 100644 --- a/packages/mdc-button/_mixins.scss +++ b/packages/mdc-button/_mixins.scss @@ -44,7 +44,7 @@ } } -@mixin mdc-button-stroke-color($color) { +@mixin mdc-button-outline-color($color) { &:not(:disabled) { @include mdc-theme-prop(border-color, $color); } @@ -71,21 +71,21 @@ padding: 0 $padding 0 $padding; } -@mixin mdc-button-stroke-width($stroke-width, $padding: $mdc-button-contained-horizontal-padding) { - // Note: Adjust padding to maintain consistent width with non-stroked buttons - $padding-value: max($padding - $stroke-width, 0); +@mixin mdc-button-outline-width($outline-width, $padding: $mdc-button-contained-horizontal-padding) { + // Note: Adjust padding to maintain consistent width with non-outlined buttons + $padding-value: max($padding - $outline-width, 0); @include mdc-button-horizontal-padding($padding-value); - border-width: $stroke-width; - // Note: line height is adjusted for stroke button because borders are not + border-width: $outline-width; + // Note: line height is adjusted for outline button because borders are not // considered as space available to text on the Web - line-height: $mdc-button-height - $stroke-width * 2; + line-height: $mdc-button-height - $outline-width * 2; // postcss-bem-linter: ignore &.mdc-button--dense { // Minus extra 1 to accommodate odd font size of dense button - line-height: $mdc-dense-button-height - $stroke-width * 2 - 1; + line-height: $mdc-dense-button-height - $outline-width * 2 - 1; } } @@ -153,7 +153,7 @@ @include mdc-rtl-reflexive-property(margin, -4px, 8px); } -@mixin mdc-button--stroked_() { +@mixin mdc-button--outlined_() { border-style: solid; &:disabled { diff --git a/packages/mdc-button/mdc-button.scss b/packages/mdc-button/mdc-button.scss index ab2780b09ad..3702a97bf3b 100644 --- a/packages/mdc-button/mdc-button.scss +++ b/packages/mdc-button/mdc-button.scss @@ -43,7 +43,7 @@ .mdc-button--raised, .mdc-button--unelevated, -.mdc-button--stroked { +.mdc-button--outlined { .mdc-button__icon { // Icons inside contained buttons have different styles due to increased button padding @include mdc-button__icon-contained_; @@ -62,10 +62,10 @@ @include mdc-button--raised_; } -.mdc-button--stroked { - @include mdc-button--stroked_; - @include mdc-button-stroke-width(2px); - @include mdc-button-stroke-color(primary); +.mdc-button--outlined { + @include mdc-button--outlined_; + @include mdc-button-outline-width(2px); + @include mdc-button-outline-color(primary); } .mdc-button--dense { diff --git a/test/screenshot/README.md b/test/screenshot/README.md index 3e43cf1490a..357f83dc050 100644 --- a/test/screenshot/README.md +++ b/test/screenshot/README.md @@ -42,7 +42,7 @@ Guidelines: 4. Do not test _combinations_ of mixins and modifier classes unless: 1. It's necessary to prevent a regression; or - 2. We explicitly support the combination, and the implementation is likely to have bugs (e.g., `mdc-button--dense` and `mdc-button-stroke-width` both set `line-height`) + 2. We explicitly support the combination, and the implementation is likely to have bugs (e.g., `mdc-button--dense` and `mdc-button-outline-width` both set `line-height`) ## Example test page diff --git a/test/screenshot/mdc-button/classes/baseline.html b/test/screenshot/mdc-button/classes/baseline.html index 2faa55819bc..229666f4277 100644 --- a/test/screenshot/mdc-button/classes/baseline.html +++ b/test/screenshot/mdc-button/classes/baseline.html @@ -150,22 +150,22 @@

- + - Link + Link - + - - - - + - Link + Link - + - - - - + - +

diff --git a/test/screenshot/mdc-button/mixins/custom.scss b/test/screenshot/mdc-button/mixins/custom.scss index fd9dc592ff4..177d7e15678 100644 --- a/test/screenshot/mdc-button/mixins/custom.scss +++ b/test/screenshot/mdc-button/mixins/custom.scss @@ -19,7 +19,7 @@ $custom-button-color: $material-color-red-300; $custom-button-custom-corner-radius: 8px; -$custom-button-custom-stroke-width: 4px; +$custom-button-custom-outline-width: 4px; $custom-button-custom-horizontal-padding: 36px; .custom-button--ink-color { @@ -34,12 +34,12 @@ $custom-button-custom-horizontal-padding: 36px; @include mdc-button-filled-accessible($custom-button-color); } -.custom-button--stroke-color { - @include mdc-button-stroke-color($custom-button-color); +.custom-button--outline-color { + @include mdc-button-outline-color($custom-button-color); } -.custom-button--stroke-width { - @include mdc-button-stroke-width($custom-button-custom-stroke-width); +.custom-button--outline-width { + @include mdc-button-outline-width($custom-button-custom-outline-width); } .custom-button--corner-radius { diff --git a/test/screenshot/mdc-button/mixins/horizontal-padding-baseline.html b/test/screenshot/mdc-button/mixins/horizontal-padding-baseline.html index 148cfe33f89..73d7168753d 100644 --- a/test/screenshot/mdc-button/mixins/horizontal-padding-baseline.html +++ b/test/screenshot/mdc-button/mixins/horizontal-padding-baseline.html @@ -79,19 +79,19 @@

- + - Link + Link - + - + - +

diff --git a/test/screenshot/mdc-button/mixins/horizontal-padding-dense.html b/test/screenshot/mdc-button/mixins/horizontal-padding-dense.html index 979fddd1ff9..fbf981dd3a3 100644 --- a/test/screenshot/mdc-button/mixins/horizontal-padding-dense.html +++ b/test/screenshot/mdc-button/mixins/horizontal-padding-dense.html @@ -79,19 +79,19 @@

- + - Link + Link - + - + - +

diff --git a/test/screenshot/mdc-button/mixins/stroke-color.html b/test/screenshot/mdc-button/mixins/stroke-color.html index 8c71c2e5ead..5e43dec70a5 100644 --- a/test/screenshot/mdc-button/mixins/stroke-color.html +++ b/test/screenshot/mdc-button/mixins/stroke-color.html @@ -17,7 +17,7 @@ - stroke-color Button Mixin - MDC Web Screenshot Test + outline-color Button Mixin - MDC Web Screenshot Test @@ -28,13 +28,13 @@

- + - Link + Link - +

diff --git a/test/screenshot/mdc-button/mixins/stroke-width.html b/test/screenshot/mdc-button/mixins/stroke-width.html index 236187e96c8..6d36f9efcac 100644 --- a/test/screenshot/mdc-button/mixins/stroke-width.html +++ b/test/screenshot/mdc-button/mixins/stroke-width.html @@ -17,7 +17,7 @@ - stroke-width Button Mixin - MDC Web Screenshot Test + outline-width Button Mixin - MDC Web Screenshot Test @@ -28,19 +28,19 @@

- + - Link + Link - - - - + - Link + Link - - - -