From 15a52e54fc8e16f482c207a08b4328ecbf7f8c98 Mon Sep 17 00:00:00 2001 From: "Kenneth G. Franqueiro" Date: Fri, 7 Dec 2018 17:38:43 -0500 Subject: [PATCH 1/6] feat(button): Add trailing icon support via optional label element --- packages/mdc-button/_mixins.scss | 8 + packages/mdc-button/mdc-button.scss | 16 +- .../baseline-button-with-trailing-icons.html | 183 ++++++++++++++++++ 3 files changed, 203 insertions(+), 4 deletions(-) create mode 100644 test/screenshot/spec/mdc-button/classes/baseline-button-with-trailing-icons.html diff --git a/packages/mdc-button/_mixins.scss b/packages/mdc-button/_mixins.scss index 3d9eeadecf7..dcca2fc187c 100644 --- a/packages/mdc-button/_mixins.scss +++ b/packages/mdc-button/_mixins.scss @@ -147,6 +147,10 @@ vertical-align: top; } +@mixin mdc-button__icon-trailing_ { + @include mdc-rtl-reflexive-box(margin, left, 8px); +} + @mixin mdc-button__icon-svg_ { fill: currentColor; } @@ -155,6 +159,10 @@ @include mdc-rtl-reflexive-property(margin, -4px, 8px); } +@mixin mdc-button__icon-contained-trailing_ { + @include mdc-rtl-reflexive-property(margin, 8px, -4px); +} + @mixin mdc-button--outlined_() { border-style: solid; diff --git a/packages/mdc-button/mdc-button.scss b/packages/mdc-button/mdc-button.scss index c6a16ce0eb8..4500f85e489 100644 --- a/packages/mdc-button/mdc-button.scss +++ b/packages/mdc-button/mdc-button.scss @@ -40,11 +40,15 @@ .mdc-button__icon { @include mdc-button__icon_; } +} - // stylelint-disable-next-line selector-no-qualifying-type - svg.mdc-button__icon { - @include mdc-button__icon-svg_; - } +.mdc-button__label + .mdc-button__icon { + @include mdc-button__icon-trailing_; +} + +// stylelint-disable-next-line selector-no-qualifying-type +svg.mdc-button__icon { + @include mdc-button__icon-svg_; } .mdc-button--raised, @@ -54,6 +58,10 @@ // Icons inside contained buttons have different styles due to increased button padding @include mdc-button__icon-contained_; } + + .mdc-button__label + .mdc-button__icon { + @include mdc-button__icon-contained-trailing_; + } } .mdc-button--raised, diff --git a/test/screenshot/spec/mdc-button/classes/baseline-button-with-trailing-icons.html b/test/screenshot/spec/mdc-button/classes/baseline-button-with-trailing-icons.html new file mode 100644 index 00000000000..74b97934f8e --- /dev/null +++ b/test/screenshot/spec/mdc-button/classes/baseline-button-with-trailing-icons.html @@ -0,0 +1,183 @@ + + + + + + Baseline Button Element With Trailing Icons - MDC Web Screenshot Test + + + + + + + + + + + +
+
+
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+
+
+ + + + + + + + + + From 9d4102d2e56bb0f6afc8f920e52f3cce5e1be336 Mon Sep 17 00:00:00 2001 From: "Kenneth G. Franqueiro" Date: Mon, 10 Dec 2018 12:33:59 -0500 Subject: [PATCH 2/6] WIP More screenshot test updates --- .../classes/baseline-button-with-icons.html | 17 +- .../baseline-button-without-icons.html | 18 +- .../classes/baseline-link-with-icons.html | 81 ++++++- .../classes/baseline-link-without-icons.html | 33 ++- .../classes/dense-button-with-icons.html | 17 +- .../dense-button-with-trailing-icons.html | 199 ++++++++++++++++++ .../classes/dense-button-without-icons.html | 34 ++- .../classes/dense-link-with-icons.html | 89 +++++++- .../classes/dense-link-without-icons.html | 33 ++- .../mixins/container-fill-color.html | 12 +- .../mdc-button/mixins/filled-accessible.html | 16 +- .../mixins/horizontal-padding-baseline.html | 57 +++-- .../mixins/horizontal-padding-dense.html | 57 +++-- .../spec/mdc-button/mixins/icon-color.html | 78 ++++++- .../spec/mdc-button/mixins/ink-color.html | 32 +-- .../spec/mdc-button/mixins/shape-radius.html | 32 ++- .../spec/mdc-button/mixins/stroke-color.html | 12 +- .../spec/mdc-button/mixins/stroke-width.html | 62 ++++-- 18 files changed, 731 insertions(+), 148 deletions(-) create mode 100644 test/screenshot/spec/mdc-button/classes/dense-button-with-trailing-icons.html diff --git a/test/screenshot/spec/mdc-button/classes/baseline-button-with-icons.html b/test/screenshot/spec/mdc-button/classes/baseline-button-with-icons.html index 91cb12cddc1..d01b6008aa7 100644 --- a/test/screenshot/spec/mdc-button/classes/baseline-button-with-icons.html +++ b/test/screenshot/spec/mdc-button/classes/baseline-button-with-icons.html @@ -45,7 +45,7 @@
@@ -54,14 +54,14 @@ - SVG Icon + SVG Icon
@@ -70,14 +70,14 @@ - SVG Icon + SVG Icon
@@ -86,14 +86,14 @@ - SVG Icon + SVG Icon
@@ -102,10 +102,11 @@ - SVG Icon + SVG Icon
+
+
- +
- +
- +
+
- +
- +
- +
- +
+
diff --git a/test/screenshot/spec/mdc-button/classes/baseline-link-with-icons.html b/test/screenshot/spec/mdc-button/classes/baseline-link-with-icons.html index 037b59b5334..8806bed80b8 100644 --- a/test/screenshot/spec/mdc-button/classes/baseline-link-with-icons.html +++ b/test/screenshot/spec/mdc-button/classes/baseline-link-with-icons.html @@ -45,7 +45,7 @@
- Font Icon + Font Icon
@@ -54,14 +54,14 @@ - SVG Icon + SVG Icon
- Font Icon + Font Icon
@@ -70,14 +70,14 @@ - SVG Icon + SVG Icon
- Font Icon + Font Icon
@@ -86,14 +86,14 @@ - SVG Icon + SVG Icon
- Font Icon + Font Icon
@@ -102,7 +102,72 @@ - SVG Icon + SVG Icon + +
+ + +
+ + Font Icon + + +
+
+ + SVG Icon + + +
+ +
+ + Font Icon + + +
+
+ + SVG Icon + + +
+ +
+ + Font Icon + + +
+
+ + SVG Icon + + +
+ +
+ + Font Icon + + +
+
+ + SVG Icon +
diff --git a/test/screenshot/spec/mdc-button/classes/baseline-link-without-icons.html b/test/screenshot/spec/mdc-button/classes/baseline-link-without-icons.html index c72bee44bff..2cad4a24f5a 100644 --- a/test/screenshot/spec/mdc-button/classes/baseline-link-without-icons.html +++ b/test/screenshot/spec/mdc-button/classes/baseline-link-without-icons.html @@ -43,29 +43,46 @@
- Link + + Link +
- Link + + Link +
- Link + + Link +
- Link + + Link +
+
- + + + + +
- + + + + +
- + + + + +
- + + + + +
diff --git a/test/screenshot/spec/mdc-button/classes/dense-button-with-icons.html b/test/screenshot/spec/mdc-button/classes/dense-button-with-icons.html index f17076e8487..7e54173d9a0 100644 --- a/test/screenshot/spec/mdc-button/classes/dense-button-with-icons.html +++ b/test/screenshot/spec/mdc-button/classes/dense-button-with-icons.html @@ -45,7 +45,7 @@
@@ -56,14 +56,14 @@ - SVG Icon + SVG Icon
@@ -74,14 +74,14 @@ - SVG Icon + SVG Icon
@@ -92,14 +92,14 @@ - SVG Icon + SVG Icon
@@ -110,10 +110,11 @@ - SVG Icon + SVG Icon
+
+
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ +
+ +
+
+ +
+ + + + + + + + + + + + diff --git a/test/screenshot/spec/mdc-button/classes/dense-button-without-icons.html b/test/screenshot/spec/mdc-button/classes/dense-button-without-icons.html index 999c4d6b444..626ffa3cd7b 100644 --- a/test/screenshot/spec/mdc-button/classes/dense-button-without-icons.html +++ b/test/screenshot/spec/mdc-button/classes/dense-button-without-icons.html @@ -43,31 +43,49 @@
- +
- +
- +
- +
+
- +
- +
- +
- +
+
diff --git a/test/screenshot/spec/mdc-button/classes/dense-link-with-icons.html b/test/screenshot/spec/mdc-button/classes/dense-link-with-icons.html index 1bce66ee10d..9b1bd789a39 100644 --- a/test/screenshot/spec/mdc-button/classes/dense-link-with-icons.html +++ b/test/screenshot/spec/mdc-button/classes/dense-link-with-icons.html @@ -45,7 +45,7 @@
- Font Icon + Font Icon
@@ -56,14 +56,14 @@ - SVG Icon + SVG Icon
- Font Icon + Font Icon
@@ -74,14 +74,14 @@ - SVG Icon + SVG Icon
- Font Icon + Font Icon
@@ -92,14 +92,14 @@ - SVG Icon + SVG Icon
- Font Icon + Font Icon
@@ -110,7 +110,80 @@ - SVG Icon + SVG Icon + +
+ + +
+ + Font Icon + + +
+
+ + SVG Icon + + +
+ +
+ + Font Icon + + +
+
+ + SVG Icon + + +
+ +
+ + Font Icon + + +
+
+ + SVG Icon + + +
+ +
+ + Font Icon + + +
+
+ + SVG Icon +
diff --git a/test/screenshot/spec/mdc-button/classes/dense-link-without-icons.html b/test/screenshot/spec/mdc-button/classes/dense-link-without-icons.html index b05eb40b54e..8e383c8b473 100644 --- a/test/screenshot/spec/mdc-button/classes/dense-link-without-icons.html +++ b/test/screenshot/spec/mdc-button/classes/dense-link-without-icons.html @@ -43,29 +43,46 @@
- Button + + Button +
- Button + + Button +
- Button + + Button +
- Button + + Button +
+
- + + + + +
- + + + + +
- + + + + +
- + + + + +
diff --git a/test/screenshot/spec/mdc-button/mixins/container-fill-color.html b/test/screenshot/spec/mdc-button/mixins/container-fill-color.html index 925aab104c1..ea7ab9ba83f 100644 --- a/test/screenshot/spec/mdc-button/mixins/container-fill-color.html +++ b/test/screenshot/spec/mdc-button/mixins/container-fill-color.html @@ -43,13 +43,19 @@
- +
- Link + + Link +
- +
diff --git a/test/screenshot/spec/mdc-button/mixins/filled-accessible.html b/test/screenshot/spec/mdc-button/mixins/filled-accessible.html index 139b0ea4a5d..a833917c3d7 100644 --- a/test/screenshot/spec/mdc-button/mixins/filled-accessible.html +++ b/test/screenshot/spec/mdc-button/mixins/filled-accessible.html @@ -43,15 +43,19 @@
- +
- Link + + Link +
@@ -60,7 +64,7 @@ - SVG Icon + SVG Icon
@@ -69,13 +73,13 @@ - SVG Icon + SVG Icon
diff --git a/test/screenshot/spec/mdc-button/mixins/horizontal-padding-baseline.html b/test/screenshot/spec/mdc-button/mixins/horizontal-padding-baseline.html index 9c3408b591b..a5a325a4119 100644 --- a/test/screenshot/spec/mdc-button/mixins/horizontal-padding-baseline.html +++ b/test/screenshot/spec/mdc-button/mixins/horizontal-padding-baseline.html @@ -43,70 +43,95 @@
- +
- +
- +
- +
+
- +
- +
- +
- +
diff --git a/test/screenshot/spec/mdc-button/mixins/horizontal-padding-dense.html b/test/screenshot/spec/mdc-button/mixins/horizontal-padding-dense.html index 39e77bd3cf7..74ca14a9c35 100644 --- a/test/screenshot/spec/mdc-button/mixins/horizontal-padding-dense.html +++ b/test/screenshot/spec/mdc-button/mixins/horizontal-padding-dense.html @@ -43,70 +43,95 @@
- +
- +
- +
- +
+
- +
- +
- +
- +
diff --git a/test/screenshot/spec/mdc-button/mixins/icon-color.html b/test/screenshot/spec/mdc-button/mixins/icon-color.html index 2c0eb79d2be..16e8ad84981 100644 --- a/test/screenshot/spec/mdc-button/mixins/icon-color.html +++ b/test/screenshot/spec/mdc-button/mixins/icon-color.html @@ -45,7 +45,7 @@
@@ -54,7 +54,7 @@ - SVG Icon + SVG Icon
@@ -63,19 +63,19 @@ - SVG Icon + SVG Icon
@@ -84,7 +84,7 @@ - SVG Icon + SVG Icon
@@ -93,13 +93,75 @@ - SVG Icon + SVG Icon
+
+ + +
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+ +
+
+
diff --git a/test/screenshot/spec/mdc-button/mixins/ink-color.html b/test/screenshot/spec/mdc-button/mixins/ink-color.html index e26baa732e1..8cefde9d9eb 100644 --- a/test/screenshot/spec/mdc-button/mixins/ink-color.html +++ b/test/screenshot/spec/mdc-button/mixins/ink-color.html @@ -43,15 +43,19 @@
- +
- Link + + Link +
@@ -60,13 +64,13 @@ - SVG Icon + SVG Icon
@@ -75,19 +79,23 @@ - SVG Icon + SVG Icon
- +
- Link + + Link +
@@ -96,13 +104,13 @@ - SVG Icon + SVG Icon
@@ -111,7 +119,7 @@ - SVG Icon + SVG Icon
diff --git a/test/screenshot/spec/mdc-button/mixins/shape-radius.html b/test/screenshot/spec/mdc-button/mixins/shape-radius.html index a61ce438a3c..e813630c6ee 100644 --- a/test/screenshot/spec/mdc-button/mixins/shape-radius.html +++ b/test/screenshot/spec/mdc-button/mixins/shape-radius.html @@ -43,28 +43,44 @@
- +
- +
- +
- +
- +
- +
- +
- +
diff --git a/test/screenshot/spec/mdc-button/mixins/stroke-color.html b/test/screenshot/spec/mdc-button/mixins/stroke-color.html index 6ce2849a7ef..3a615ca7efc 100644 --- a/test/screenshot/spec/mdc-button/mixins/stroke-color.html +++ b/test/screenshot/spec/mdc-button/mixins/stroke-color.html @@ -43,13 +43,19 @@
- +
- Link + + Link +
- +
diff --git a/test/screenshot/spec/mdc-button/mixins/stroke-width.html b/test/screenshot/spec/mdc-button/mixins/stroke-width.html index 54e244784ec..99f9a83d3be 100644 --- a/test/screenshot/spec/mdc-button/mixins/stroke-width.html +++ b/test/screenshot/spec/mdc-button/mixins/stroke-width.html @@ -43,24 +43,43 @@
- + +
+
+ + Link +
- Link + +
+
+
@@ -69,34 +88,53 @@ - SVG Icon + SVG Icon
- + +
+
+ + Link +
- Link + +
+
+
@@ -105,13 +143,13 @@ - SVG Icon + SVG Icon
From 2da59e09c195acde5066072e4623e8871bdcf28d Mon Sep 17 00:00:00 2001 From: "Kenneth G. Franqueiro" Date: Mon, 10 Dec 2018 16:31:28 -0500 Subject: [PATCH 3/6] WIP Update goldens --- test/screenshot/golden.json | 78 +++++++++++++++++++++++-------------- 1 file changed, 48 insertions(+), 30 deletions(-) diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json index 5de39555716..d32ec017835 100644 --- a/test/screenshot/golden.json +++ b/test/screenshot/golden.json @@ -8,6 +8,15 @@ "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/classes/baseline-button-with-icons.html.windows_ie_11.png" } }, + "spec/mdc-button/classes/baseline-button-with-trailing-icons.html": { + "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/classes/baseline-button-with-trailing-icons.html?utm_source=golden_json", + "screenshots": { + "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/classes/baseline-button-with-trailing-icons.html.windows_chrome_71.png", + "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/classes/baseline-button-with-trailing-icons.html.windows_edge_17.png", + "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/classes/baseline-button-with-trailing-icons.html.windows_firefox_63.png", + "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/classes/baseline-button-with-trailing-icons.html.windows_ie_11.png" + } + }, "spec/mdc-button/classes/baseline-button-without-icons.html": { "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/classes/baseline-button-without-icons.html?utm_source=golden_json", "screenshots": { @@ -18,12 +27,12 @@ } }, "spec/mdc-button/classes/baseline-link-with-icons.html": { - "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/classes/baseline-link-with-icons.html?utm_source=golden_json", + "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/classes/baseline-link-with-icons.html?utm_source=golden_json", "screenshots": { - "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/classes/baseline-link-with-icons.html.windows_chrome_69.png", - "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/classes/baseline-link-with-icons.html.windows_edge_17.png", - "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/classes/baseline-link-with-icons.html.windows_firefox_62.png", - "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/classes/baseline-link-with-icons.html.windows_ie_11.png" + "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/classes/baseline-link-with-icons.html.windows_chrome_71.png", + "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/classes/baseline-link-with-icons.html.windows_edge_17.png", + "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/classes/baseline-link-with-icons.html.windows_firefox_63.png", + "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/classes/baseline-link-with-icons.html.windows_ie_11.png" } }, "spec/mdc-button/classes/baseline-link-without-icons.html": { @@ -44,6 +53,15 @@ "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/classes/dense-button-with-icons.html.windows_ie_11.png" } }, + "spec/mdc-button/classes/dense-button-with-trailing-icons.html": { + "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/classes/dense-button-with-trailing-icons.html?utm_source=golden_json", + "screenshots": { + "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/classes/dense-button-with-trailing-icons.html.windows_chrome_71.png", + "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/classes/dense-button-with-trailing-icons.html.windows_edge_17.png", + "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/classes/dense-button-with-trailing-icons.html.windows_firefox_63.png", + "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/classes/dense-button-with-trailing-icons.html.windows_ie_11.png" + } + }, "spec/mdc-button/classes/dense-button-without-icons.html": { "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/classes/dense-button-without-icons.html?utm_source=golden_json", "screenshots": { @@ -54,12 +72,12 @@ } }, "spec/mdc-button/classes/dense-link-with-icons.html": { - "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/classes/dense-link-with-icons.html?utm_source=golden_json", + "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/classes/dense-link-with-icons.html?utm_source=golden_json", "screenshots": { - "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/classes/dense-link-with-icons.html.windows_chrome_69.png", - "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/classes/dense-link-with-icons.html.windows_edge_17.png", - "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/classes/dense-link-with-icons.html.windows_firefox_62.png", - "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/classes/dense-link-with-icons.html.windows_ie_11.png" + "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/classes/dense-link-with-icons.html.windows_chrome_71.png", + "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/classes/dense-link-with-icons.html.windows_edge_17.png", + "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/classes/dense-link-with-icons.html.windows_firefox_63.png", + "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/classes/dense-link-with-icons.html.windows_ie_11.png" } }, "spec/mdc-button/classes/dense-link-without-icons.html": { @@ -90,30 +108,30 @@ } }, "spec/mdc-button/mixins/horizontal-padding-baseline.html": { - "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/horizontal-padding-baseline.html?utm_source=golden_json", + "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/horizontal-padding-baseline.html?utm_source=golden_json", "screenshots": { - "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/horizontal-padding-baseline.html.windows_chrome_69.png", - "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/horizontal-padding-baseline.html.windows_edge_17.png", - "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/horizontal-padding-baseline.html.windows_firefox_62.png", - "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/horizontal-padding-baseline.html.windows_ie_11.png" + "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/horizontal-padding-baseline.html.windows_chrome_71.png", + "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/horizontal-padding-baseline.html.windows_edge_17.png", + "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/horizontal-padding-baseline.html.windows_firefox_63.png", + "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/horizontal-padding-baseline.html.windows_ie_11.png" } }, "spec/mdc-button/mixins/horizontal-padding-dense.html": { - "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/horizontal-padding-dense.html?utm_source=golden_json", + "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/horizontal-padding-dense.html?utm_source=golden_json", "screenshots": { - "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/horizontal-padding-dense.html.windows_chrome_69.png", - "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/horizontal-padding-dense.html.windows_edge_17.png", - "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/horizontal-padding-dense.html.windows_firefox_62.png", - "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/horizontal-padding-dense.html.windows_ie_11.png" + "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/horizontal-padding-dense.html.windows_chrome_71.png", + "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/horizontal-padding-dense.html.windows_edge_17.png", + "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/horizontal-padding-dense.html.windows_firefox_63.png", + "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/horizontal-padding-dense.html.windows_ie_11.png" } }, "spec/mdc-button/mixins/icon-color.html": { - "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/icon-color.html?utm_source=golden_json", + "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/icon-color.html?utm_source=golden_json", "screenshots": { - "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/icon-color.html.windows_chrome_69.png", - "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/icon-color.html.windows_edge_17.png", - "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/icon-color.html.windows_firefox_62.png", - "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/icon-color.html.windows_ie_11.png" + "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/icon-color.html.windows_chrome_71.png", + "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/icon-color.html.windows_edge_17.png", + "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/icon-color.html.windows_firefox_63.png", + "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/icon-color.html.windows_ie_11.png" } }, "spec/mdc-button/mixins/ink-color.html": { @@ -144,12 +162,12 @@ } }, "spec/mdc-button/mixins/stroke-width.html": { - "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/stroke-width.html?utm_source=golden_json", + "public_url": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/stroke-width.html?utm_source=golden_json", "screenshots": { - "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/stroke-width.html.windows_chrome_69.png", - "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/stroke-width.html.windows_edge_17.png", - "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/stroke-width.html.windows_firefox_62.png", - "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/09/13/21_47_32_548/spec/mdc-button/mixins/stroke-width.html.windows_ie_11.png" + "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/stroke-width.html.windows_chrome_71.png", + "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/stroke-width.html.windows_edge_17.png", + "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/stroke-width.html.windows_firefox_63.png", + "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/travis/2018/12/10/17_38_00_089/spec/mdc-button/mixins/stroke-width.html.windows_ie_11.png" } }, "spec/mdc-card/classes/baseline.html": { From 9c21b595223103343b54813b149f285df48104fe Mon Sep 17 00:00:00 2001 From: "Kenneth G. Franqueiro" Date: Mon, 10 Dec 2018 17:15:00 -0500 Subject: [PATCH 4/6] WIP Update READMEs --- packages/mdc-button/README.md | 31 ++++++++++++++++++++++++++----- packages/mdc-card/README.md | 26 +++++++++++++++++++------- packages/mdc-dialog/README.md | 24 ++++++++++++++++++------ 3 files changed, 63 insertions(+), 18 deletions(-) diff --git a/packages/mdc-button/README.md b/packages/mdc-button/README.md index 58f6b12d3d4..1c7443e87af 100644 --- a/packages/mdc-button/README.md +++ b/packages/mdc-button/README.md @@ -41,7 +41,7 @@ npm install @material/button ```html ``` @@ -92,7 +92,7 @@ To add an icon, add an element with the `mdc-button__icon` class inside the butt ```html ``` @@ -103,10 +103,24 @@ It's also possible to use an SVG icon: - Button + Button ``` +#### Trailing Icon + +Certain icons make more sense to appear after the button's text label rather than before. This can be accomplished by +putting the icon markup _after_ the `mdc-button__label` element. + +```html + +``` + +> _NOTE_: The `mdc-button__label` element is _required_ in order for the trailing icon to be styled appropriately. + ### Disabled To disable a button, add the `disabled` attribute directly to the ` ``` @@ -129,7 +143,14 @@ CSS Class | Description `mdc-button--unelevated` | Optional. Styles a contained button that is flush with the surface. `mdc-button--outlined` | Optional. Styles an outlined button that is flush with the surface. `mdc-button--dense` | Optional. Makes the button text and container slightly smaller. -`mdc-button__icon` | Optional. Indicates an icon element. +`mdc-button__label` | Recommended.\* Indicates the element containing the button's text label. +`mdc-button__icon` | Optional. Indicates the element containing the button's icon. + +> \*_NOTE_: The `mdc-button__label` element is required for buttons with a trailing icon, but it is currently optional for +> buttons with no icon or a leading icon. In the latter cases, it is acceptable for the text label to simply exist +> directly within the `mdc-button` element. +> However, the `mdc-button__label` class may become mandatory for all cases in the future, so it is recommended to +> always include it to be future-proof. ### Sass Mixins diff --git a/packages/mdc-card/README.md b/packages/mdc-card/README.md index 0963b8a0f5c..df9e98ec292 100644 --- a/packages/mdc-card/README.md +++ b/packages/mdc-card/README.md @@ -57,8 +57,12 @@ Fully-featured:
- - + +
@@ -123,8 +127,12 @@ and the [optional modifier classes](#css-classes). ```html
- - + +
``` @@ -153,7 +161,7 @@ To have a single action button take up the entire width of the action row, use t ```html
- All Business Headlines + All Business Headlines
@@ -165,8 +173,12 @@ elements: ```html
- - + +
diff --git a/packages/mdc-dialog/README.md b/packages/mdc-dialog/README.md index 0253e8aab35..915df3258c9 100644 --- a/packages/mdc-dialog/README.md +++ b/packages/mdc-dialog/README.md @@ -55,8 +55,12 @@ npm install @material/dialog Dialog body text goes here.
- - + +
@@ -177,8 +181,12 @@ radio buttons (indicating single selection) or checkboxes (indicating multiple s
- - + +
@@ -245,8 +253,12 @@ For example: ```html ...
- - + +
... ``` From bcb6723ae57d83b2927b354cfcb066c139f86d5b Mon Sep 17 00:00:00 2001 From: "Kenneth G. Franqueiro" Date: Mon, 10 Dec 2018 17:26:35 -0500 Subject: [PATCH 5/6] WIP Update button DOM in more tests --- .../classes/baseline-alert-above-drawer.html | 4 ++-- .../classes/baseline-alert-with-title.html | 4 ++-- .../spec/mdc-dialog/classes/baseline-alert.html | 4 ++-- .../mdc-dialog/classes/baseline-confirmation.html | 4 ++-- .../mdc-dialog/classes/manual-window-resize.html | 6 +++--- .../classes/overflow-accessible-font-size.html | 6 +++--- .../spec/mdc-dialog/classes/overflow-bottom.html | 6 +++--- .../spec/mdc-dialog/classes/overflow-top.html | 6 +++--- test/screenshot/spec/mdc-dialog/issues/3717.html | 4 ++-- .../mdc-dialog/mixins/container-fill-color.html | 6 +++--- .../spec/mdc-dialog/mixins/content-ink-color.html | 6 +++--- .../spec/mdc-dialog/mixins/max-height.html | 6 +++--- .../spec/mdc-dialog/mixins/max-width.html | 6 +++--- .../spec/mdc-dialog/mixins/min-width.html | 2 +- .../spec/mdc-dialog/mixins/scrim-color.html | 6 +++--- .../mdc-dialog/mixins/scroll-divider-color.html | 6 +++--- .../spec/mdc-dialog/mixins/shape-radius.html | 6 +++--- .../spec/mdc-dialog/mixins/title-ink-color.html | 6 +++--- test/unit/mdc-dialog/mdc-dialog.test.js | 15 +++++++++------ 19 files changed, 56 insertions(+), 53 deletions(-) diff --git a/test/screenshot/spec/mdc-dialog/classes/baseline-alert-above-drawer.html b/test/screenshot/spec/mdc-dialog/classes/baseline-alert-above-drawer.html index 6687e066ff2..5ba8b58e71a 100644 --- a/test/screenshot/spec/mdc-dialog/classes/baseline-alert-above-drawer.html +++ b/test/screenshot/spec/mdc-dialog/classes/baseline-alert-above-drawer.html @@ -107,10 +107,10 @@
Labels
diff --git a/test/screenshot/spec/mdc-dialog/classes/baseline-alert-with-title.html b/test/screenshot/spec/mdc-dialog/classes/baseline-alert-with-title.html index 50e95787869..352f27471ce 100644 --- a/test/screenshot/spec/mdc-dialog/classes/baseline-alert-with-title.html +++ b/test/screenshot/spec/mdc-dialog/classes/baseline-alert-with-title.html @@ -56,10 +56,10 @@