feat(fab): Add Extended FAB

Changes: * Introduced new modifier `mdc-fab--extended` for Extended FAB. * Added screenshot test for Extended FAB. * New block element `mdc-fab__label` for Extended FAB text label. * New mixin `mdc-fab-extended-fluid` to make Extended FAB fluid (Full Width). * Updated README docs accordingly. * Moved styles from HTML file to SASS for Extended FAB demo page.
material-components · Jun 8, 2018 · 14cb0bf · 14cb0bf
1 parent 5568e96
commit 14cb0bf
Show file tree

Hide file tree

Showing 9 changed files with 190 additions and 66 deletions.
diff --git a/demos/fab.html b/demos/fab.html
@@ -25,71 +25,6 @@
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
     <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
     <script src="/ready.js"></script>
-    <style>
-      .demo-fabs {
-        display: flex;
-        flex-wrap: wrap;
-      }
-
-      legend {
-        display: block;
-        padding: 16px;
-        padding-top: 64px;
-        padding-bottom: 24px;
-      }
-
-      figcaption > div {
-        margin: 8px;
-      }
-
-      .mdc-fab {
-        margin: 16px;
-      }
-
-      .demo-absolute-fab,
-      .demo-fixed-fab {
-        position: absolute;
-        bottom: 1rem;
-        right: 1rem;
-        z-index: 1;
-      }
-
-      .demo-fixed-fab {
-        position: fixed;
-      }
-
-      @media(min-width: 1024px) {
-        .demo-fixed-fab {
-          bottom: 1.5rem;
-          right: 1.5rem;
-        }
-      }
-
-      .fab-motion-container {
-        border: 1px solid #ccc;
-        margin: 1rem;
-        padding: 0 1rem;
-        overflow: hidden;
-        position: relative;
-        height: 10rem;
-        width: 20rem;
-      }
-
-      .fab-motion-container__view {
-        background-color: #fff;
-        box-sizing: border-box;
-        position: absolute;
-        transition: transform 375ms cubic-bezier(0.0, 0.0, 0.2, 1);
-        height: 100%;
-        width: 100%;
-        will-change: transform;
-      }
-
-      .fab-motion-container__view--exited {
-        transition-timing-function: cubic-bezier(.4, 0, 1, 1);
-        transform: translateY(100%);
-      }
-    </style>
   </head>
   <body class="mdc-typography">
     <header class="mdc-toolbar mdc-toolbar--fixed">
@@ -213,6 +148,21 @@
         </div>
       </section>
 
+      <section>
+        <legend>Extended FAB</legend>
+        <div class="demo-fabs">
+          <figure class="demo-figure-fab-extended">
+            <button class="mdc-fab mdc-fab--extended demo-fab-extended-fluid" aria-label="Favorite">
+              <span class="material-icons mdc-fab__icon">shopping_cart</span>
+              <span class="mdc-fab__label">Add to cart</span>
+            </button>
+            <figcaption>
+              <div>Auto width extended FAB (Responsive)</div>
+            </figcaption>
+          </figure>
+        </div>
+      </section>
+
       <section>
         <legend>CSS Only FABs</legend>
         <div class="demo-fabs">

diff --git a/demos/fab.scss b/demos/fab.scss
@@ -19,10 +19,94 @@
 @import "../packages/mdc-fab/mdc-fab";
 @import "../packages/mdc-fab/mixins";
 
+.demo-fabs {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+legend {
+  display: block;
+  padding: 16px;
+  padding-top: 64px;
+  padding-bottom: 24px;
+}
+
+figcaption > div {
+  margin: 8px;
+}
+
+.mdc-fab {
+  margin: 16px;
+}
+
+.demo-absolute-fab,
+.demo-fixed-fab {
+  position: absolute;
+  bottom: 1rem;
+  right: 1rem;
+  z-index: 1;
+}
+
+.demo-fixed-fab {
+  position: fixed;
+}
+
+@media(min-width: 1024px) {
+  .demo-fixed-fab {
+    bottom: 1.5rem;
+    right: 1.5rem;
+  }
+}
+
+.fab-motion-container {
+  border: 1px solid #ccc;
+  margin: 1rem;
+  padding: 0 1rem;
+  overflow: hidden;
+  position: relative;
+  height: 10rem;
+  width: 20rem;
+}
+
+.fab-motion-container__view {
+  background-color: #fff;
+  box-sizing: border-box;
+  position: absolute;
+  transition: transform 375ms cubic-bezier(0.0, 0.0, 0.2, 1);
+  height: 100%;
+  width: 100%;
+  will-change: transform;
+}
+
+.fab-motion-container__view--exited {
+  transition-timing-function: cubic-bezier(.4, 0, 1, 1);
+  transform: translateY(100%);
+}
+
 .mdc-fab.lightGreen800Fab {
   @include mdc-fab-accessible($material-color-light-green-800);
 }
 
 .demo-fab-icon-size {
   @include mdc-fab-icon-size(36px);
 }
+
+.demo-figure-fab-extended {
+  width: 100%;
+  padding: 0;
+  margin: 1em 40px;
+  box-sizing: border-box;
+}
+
+@media (max-width: 700px) {
+  .demo-figure-fab-extended {
+    padding: 0 16px;
+    margin: 0;
+  }
+
+  .demo-fab-extended-fluid {
+    @include mdc-fab-extended-fluid;
+
+    margin: 16px 0;
+  }
+}
diff --git a/packages/mdc-fab/README.md b/packages/mdc-fab/README.md
@@ -85,7 +85,9 @@ CSS Class | Description
 --- | ---
 `mdc-fab` | Mandatory, for the button element
 `mdc-fab__icon` | Mandatory, for the icon element
+`mdc-fab__label` | Optional, for the text label. Applicable only for Extended FAB.
 `mdc-fab--mini` | Optional, modifies the FAB to a smaller size
+`mdc-fab--extended` | Optional, modifies the FAB to wider size which includes a text label.
 `mdc-fab--exited` | Optional, animates the FAB out of view.<br>When this class is removed, the FAB will return to view.
 
 > **A note about `:disabled`**, No disabled styles are defined for FABs. The FAB promotes action, and should not be displayed in a disabled state. If you want to present a FAB that does *not* perform an action, you should also present an explanation to the user.
@@ -99,6 +101,7 @@ MDC FAB uses [MDC Theme](../mdc-theme)'s `secondary` color by default. Use the f
 Mixin | Description
 --- | ---
 `mdc-fab-accessible($container-color)` | Changes the FAB's container color to the given color, and updates the FAB's ink and ripple color to meet accessibility standards.
+`mdc-fab-extended-fluid` | Makes the Extended FAB fluid to container, such as screen width or the layout grid. Exposed as a mixin to support use within `@media` queries.
 
 #### Advanced Sass Mixins
 

diff --git a/packages/mdc-fab/_mixins.scss b/packages/mdc-fab/_mixins.scss
@@ -50,8 +50,13 @@
   @include mdc-theme-prop(color, $color);
 }
 
+@mixin mdc-fab-extended-fluid {
+  width: 100%;
+}
+
 $mdc-fab-icon-enter-delay_: 90ms;
 $mdc-fab-icon-enter-duration_: 180ms;
+$mdc-fab-extended-height_: 48px;
 
 @mixin mdc-fab-base_ {
   @include mdc-ripple-surface;
@@ -122,12 +127,30 @@ $mdc-fab-icon-enter-duration_: 180ms;
   height: 40px;
 }
 
+@mixin mdc-fab--extended_ {
+  @include mdc-typography(button);
+
+  width: auto;
+  max-width: 100%;
+  height: $mdc-fab-extended-height_;
+  padding: 0 20px 0 16px;
+  border-radius: $mdc-fab-extended-height_ / 2;
+}
+
 @mixin mdc-fab__icon_ {
   transition: mdc-animation-enter(transform, $mdc-fab-icon-enter-duration_, $mdc-fab-icon-enter-delay_);
   fill: currentColor;
   will-change: transform;
 }
 
+@mixin mdc-fab__label_ {
+  justify-content: flex-start;
+  padding-left: 8px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
 @mixin mdc-fab__icon-overrides_ {
   display: inline-flex;
   align-items: center;

diff --git a/packages/mdc-fab/mdc-fab.scss b/packages/mdc-fab/mdc-fab.scss
@@ -15,6 +15,7 @@
 @import "@material/ripple/common";
 @import "@material/ripple/mixins";
 @import "@material/ripple/variables";
+@import "@material/typography/mixins";
 @import "./mixins";
 
 // postcss-bem-linter: define fab
@@ -31,6 +32,14 @@
   @include mdc-fab--mini_;
 }
 
+.mdc-fab--extended {
+  @include mdc-fab--extended_;
+}
+
+.mdc-fab__label {
+  @include mdc-fab--label_;
+}
+
 .mdc-fab__icon {
   @include mdc-fab__icon_;
 }

diff --git a/packages/mdc-fab/package.json b/packages/mdc-fab/package.json
@@ -17,6 +17,7 @@
     "@material/animation": "^0.34.0",
     "@material/elevation": "^0.35.0",
     "@material/ripple": "^0.36.0",
-    "@material/theme": "^0.35.0"
+    "@material/theme": "^0.35.0",
+    "@material/typography": "^0.35.0"
   }
 }
diff --git a/test/screenshot/golden.json b/test/screenshot/golden.json
@@ -129,6 +129,16 @@
       "mobile_android_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/05/24/19_19_57_797/3ac00277f/mdc-fab/classes/mini.html.galaxys7and70_mblchrome64.png"
     }
   },
+  "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",
+    "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",
+      "mobile_android_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/abhiomkar/2018/06/08/15_24_10_920/e995ab9c/mdc-fab/classes/extended.html.galaxys7and70_mblchrome64.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
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<!--
+  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
+
+      https://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
+-->
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Extended FAB (Floating Action Button) - MDC Web Screenshot Test</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="../../out/fixture.css">
+    <link rel="stylesheet" href="../../out/mdc.fab.css">
+    <link rel="stylesheet" href="../../out/mdc-fab/fixture.css">
+  </head>
+
+  <body class="test-body">
+    <main class="test-main test-main--fab">
+      <div class="test-grid">
+        <div class="test-cell test-cell--extended">
+          <button class="mdc-fab mdc-fab--extended" aria-label="Add to cart">
+            <span class="material-icons mdc-fab__icon">shopping_cart</span>
+            <span class="mdc-fab__label">Add to cart</span>
+          </button>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>
diff --git a/test/screenshot/mdc-fab/fixture.scss b/test/screenshot/mdc-fab/fixture.scss
@@ -22,3 +22,8 @@
   width: 81px;
   height: 81px;
 }
+
+.test-cell--extended {
+  width: 191px;
+  height: 71px;
+}