From 1f5fd1f76117ae884113c6e5f8b7a094f5f50c45 Mon Sep 17 00:00:00 2001 From: Abhinay Omkar Date: Fri, 22 Jun 2018 17:51:03 -0400 Subject: [PATCH] feat(fab): Enable padding customization (#2959) - This change enables users to customize Extended FAB icon & label padding using new mixins. - Updated the paddings as per updated design spec. - Updated styles to support text label followed by icon Extended FAB. - Added screenshot tests for mixins. --- demos/fab.html | 27 ++++++++-- packages/mdc-fab/README.md | 2 + packages/mdc-fab/_mixins.scss | 31 ++++++++++- packages/mdc-fab/_variables.scss | 18 +++++++ packages/mdc-fab/package.json | 1 + test/screenshot/golden.json | 19 +++++-- test/screenshot/mdc-fab/classes/extended.html | 17 +++++-- test/screenshot/mdc-fab/custom.scss | 30 +++++++++++ .../mdc-fab-extended-label-padding.html | 51 +++++++++++++++++++ 9 files changed, 183 insertions(+), 13 deletions(-) create mode 100644 packages/mdc-fab/_variables.scss create mode 100644 test/screenshot/mdc-fab/custom.scss create mode 100644 test/screenshot/mdc-fab/mixins/mdc-fab-extended-label-padding.html diff --git a/demos/fab.html b/demos/fab.html index c981d18def1..1cf6937c809 100644 --- a/demos/fab.html +++ b/demos/fab.html @@ -152,15 +152,36 @@ Extended FAB
-
Auto width extended FAB (Responsive)
+
+
+ +
+
Auto width extended FAB (Text label followed by Icon)
+
+
+
+
+
+ +
+
Extended FAB (without Icon)
+
+
+
diff --git a/packages/mdc-fab/README.md b/packages/mdc-fab/README.md index 4ba3d9ef851..74e2f7493e3 100644 --- a/packages/mdc-fab/README.md +++ b/packages/mdc-fab/README.md @@ -112,6 +112,8 @@ Mixin | Description `mdc-fab-container-color($color)` | Sets the container color to the given color `mdc-fab-icon-size($width, $height)` | Sets the icon `width`, `height`, and `font-size` properties to the specified `width` and `height`. `$height` is optional and will default to `$width` if omitted. The `font-size` will be set to the provided `$width` value. `mdc-fab-ink-color($color)` | Sets the ink color to the given color +`mdc-fab-extended-padding($icon-padding, $label-padding)` | Sets the padding on both sides of the icon, and between the label and the edge of the FAB. In cases where there is no icon, `$label-padding` will apply to both sides. +`mdc-fab-extended-label-padding($label-padding)` | Sets the label side padding for Extended FAB. Useful when styling an Extended FAB with no icon. The ripple effect for the FAB component is styled using [MDC Ripple](../mdc-ripple) mixins. diff --git a/packages/mdc-fab/_mixins.scss b/packages/mdc-fab/_mixins.scss index ef7f7de5236..d09c8efce28 100644 --- a/packages/mdc-fab/_mixins.scss +++ b/packages/mdc-fab/_mixins.scss @@ -19,6 +19,8 @@ @import "@material/ripple/variables"; @import "@material/theme/functions"; @import "@material/theme/mixins"; +@import "@material/rtl/mixins"; +@import "./variables"; @mixin mdc-fab-accessible($container-color) { $fill-tone: mdc-theme-tone($container-color); @@ -54,6 +56,30 @@ width: 100%; } +@mixin mdc-fab-extended-padding($icon-padding, $label-padding) { + @include mdc-fab-extended-label-padding($label-padding); + + // Offsets the outer label padding by deducting it from icon padding. + .mdc-fab__icon { + @include mdc-rtl-reflexive-property( + margin, + $icon-padding - $label-padding, + $icon-padding); + } + + // For Extended FAB with text label followed by icon. + .mdc-fab__label + .mdc-fab__icon { + @include mdc-rtl-reflexive-property( + margin, + $icon-padding, + $icon-padding - $label-padding); + } +} + +@mixin mdc-fab-extended-label-padding($label-padding) { + padding: 0 $label-padding; +} + $mdc-fab-icon-enter-delay_: 90ms; $mdc-fab-icon-enter-duration_: 180ms; $mdc-fab-extended-height_: 48px; @@ -129,11 +155,13 @@ $mdc-fab-extended-height_: 48px; @mixin mdc-fab--extended_ { @include mdc-typography(button); + @include mdc-fab-extended-padding( + $mdc-fab-extended-icon-padding, + $mdc-fab-extended-label-padding); width: auto; max-width: 100%; height: $mdc-fab-extended-height_; - padding: 0 20px 0 16px; border-radius: $mdc-fab-extended-height_ / 2; } @@ -145,7 +173,6 @@ $mdc-fab-extended-height_: 48px; @mixin mdc-fab__label_ { justify-content: flex-start; - padding-left: 8px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; diff --git a/packages/mdc-fab/_variables.scss b/packages/mdc-fab/_variables.scss new file mode 100644 index 00000000000..89dc3207cdc --- /dev/null +++ b/packages/mdc-fab/_variables.scss @@ -0,0 +1,18 @@ +// +// Copyright 2018 Google Inc. All Rights Reserved. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// + +$mdc-fab-extended-icon-padding: 12px; +$mdc-fab-extended-label-padding: 20px; diff --git a/packages/mdc-fab/package.json b/packages/mdc-fab/package.json index 0814d5e3404..8ea359dfe50 100644 --- a/packages/mdc-fab/package.json +++ b/packages/mdc-fab/package.json @@ -17,6 +17,7 @@ "@material/animation": "^0.34.0", "@material/elevation": "^0.36.1", "@material/ripple": "^0.36.0", + "@material/rtl": "^0.36.0", "@material/theme": "^0.35.0", "@material/typography": "^0.35.0" } diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json index 5b997c9874d..23e55a25096 100644 --- a/test/screenshot/golden.json +++ b/test/screenshot/golden.json @@ -108,12 +108,12 @@ } }, "mdc-fab/classes/extended.html": { - "publicUrl": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/06/08/15_24_10_920/e995ab9c/mdc-fab/classes/extended.html", + "publicUrl": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/06/19/19_52_01_078/mdc-fab/classes/extended.html", "screenshots": { - "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/06/08/15_24_10_920/e995ab9c/mdc-fab/classes/extended.html.win10_chrome66x64.png", - "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/06/08/15_24_10_920/e995ab9c/mdc-fab/classes/extended.html.win10_edge17.png", - "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/06/08/15_24_10_920/e995ab9c/mdc-fab/classes/extended.html.win10_ff59x64.png", - "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/06/08/15_24_10_920/e995ab9c/mdc-fab/classes/extended.html.win10_ie11.png" + "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/06/19/19_52_01_078/mdc-fab/classes/extended.html.win10_chrome66x64.png", + "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/06/19/19_52_01_078/mdc-fab/classes/extended.html.win10_edge17.png", + "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/06/19/19_52_01_078/mdc-fab/classes/extended.html.win10_ff59x64.png", + "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/06/19/19_52_01_078/mdc-fab/classes/extended.html.win10_ie11.png" } }, "mdc-fab/classes/mini.html": { @@ -125,6 +125,15 @@ "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/kfranqueiro/2018/05/25/21_14_58_299/6b0f3e00/mdc-fab/classes/mini.html.win10_ie11.png" } }, + "mdc-fab/mixins/mdc-fab-extended-label-padding.html": { + "publicUrl": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/06/22/19_14_56_425/mdc-fab/mixins/mdc-fab-extended-label-padding.html", + "screenshots": { + "desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/06/22/19_14_56_425/mdc-fab/mixins/mdc-fab-extended-label-padding.html.win10_chrome66x64.png", + "desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/06/22/19_14_56_425/mdc-fab/mixins/mdc-fab-extended-label-padding.html.win10_edge17.png", + "desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/06/22/19_14_56_425/mdc-fab/mixins/mdc-fab-extended-label-padding.html.win10_ff59x64.png", + "desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/06/22/19_14_56_425/mdc-fab/mixins/mdc-fab-extended-label-padding.html.win10_ie11.png" + } + }, "mdc-icon-button/classes/baseline.html": { "publicUrl": "https://storage.googleapis.com/mdc-web-screenshot-tests/williamernest/2018/05/30/14_38_21_131/4dc98079/mdc-icon-button/classes/baseline.html", "screenshots": { diff --git a/test/screenshot/mdc-fab/classes/extended.html b/test/screenshot/mdc-fab/classes/extended.html index f6da2ce54fd..da166cff1b7 100644 --- a/test/screenshot/mdc-fab/classes/extended.html +++ b/test/screenshot/mdc-fab/classes/extended.html @@ -28,9 +28,20 @@
- +
+
+ +
+
+
diff --git a/test/screenshot/mdc-fab/custom.scss b/test/screenshot/mdc-fab/custom.scss new file mode 100644 index 00000000000..92ced025955 --- /dev/null +++ b/test/screenshot/mdc-fab/custom.scss @@ -0,0 +1,30 @@ +// +// Copyright 2018 Google Inc. All Rights Reserved. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. +// + +@import "../../../packages/mdc-fab/mixins"; + +.custom-fab-extended-padding-and-icon-size { + @include mdc-fab-extended-padding(12px, 24px); + @include mdc-fab-icon-size(32px); +} + +.custom-fab-extended-padding { + @include mdc-fab-extended-padding(16px, 24px); +} + +.custom-fab-extended-label-padding { + @include mdc-fab-extended-label-padding(24px); +} \ No newline at end of file diff --git a/test/screenshot/mdc-fab/mixins/mdc-fab-extended-label-padding.html b/test/screenshot/mdc-fab/mixins/mdc-fab-extended-label-padding.html new file mode 100644 index 00000000000..8f87a61c121 --- /dev/null +++ b/test/screenshot/mdc-fab/mixins/mdc-fab-extended-label-padding.html @@ -0,0 +1,51 @@ + + + + + + Extended FAB (Floating Action Button) - MDC Web Screenshot Test + + + + + + + + +
+
+
+ +
+
+ +
+
+ +
+
+
+ +