fix(fab): Mdc web/fix misaligned icons mobile safari (#132)

* fix(mdc-fab): center icons on mobile safari * fix(mdc-fab): center icons in Edge/IE11 as well * fix(fab): update order of style rules to pass linter BREAKING CHANGE: Button implementations in certain browsers such as Mobile Safari and IE11 do not adhere to flexbox rules. To center icons in all supported browsers, add a span element as a child of the button and give it a class of `mdc-fab__icon` example: ```html``` <button class="mdc-fab material-icons"> <span class="mdc-fab__icon"> favorite_border </span> </button> ```
material-components · Dec 19, 2016 · 69397a6 · 69397a6
1 parent adffe26
commit 69397a6
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 20 deletions.
diff --git a/demos/fab.html b/demos/fab.html
@@ -47,40 +47,58 @@
       <h1>MDC FAB</h1>
 
       <button id="demo-absolute-fab" class="mdc-fab">
-        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-          <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
-        </svg>
+        <span class="mdc-fab__icon">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+            <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
+          </svg>
+        </span>
       </button>
 
       <section>
         <fieldset>
           <legend>Normal FABs</legend>
           <button class="mdc-fab material-icons" aria-label="Favorite">
-            favorite_border
+            <span class="mdc-fab__icon">
+              favorite_border
+            </span>
           </button>
           <button class="mdc-fab mdc-fab--mini material-icons" aria-label="Favorite">
-            favorite_border
+            <span class="mdc-fab__icon">
+              favorite_border
+            </span>
           </button>
           <button class="mdc-fab mdc-fab--plain material-icons" aria-label="Favorite">
-            favorite_border
+            <span class="mdc-fab__icon">
+              favorite_border
+            </span>
           </button>
           <button class="mdc-fab mdc-fab--mini mdc-fab--plain material-icons" aria-label="Favorite">
-            favorite_border
+            <span class="mdc-fab__icon">
+              favorite_border
+            </span>
           </button>
         </fieldset>
         <fieldset disabled>
           <legend>Disabled FABs</legend>
           <button class="mdc-fab material-icons" aria-label="Favorite">
-            favorite_border
+            <span class="mdc-fab__icon">
+              favorite_border
+            </span>
           </button>
           <button class="mdc-fab mdc-fab--mini material-icons" aria-label="Favorite">
-            favorite_border
+            <span class="mdc-fab__icon">
+              favorite_border
+            </span>
           </button>
           <button class="mdc-fab mdc-fab--plain material-icons" aria-label="Favorite">
-            favorite_border
+            <span class="mdc-fab__icon">
+              favorite_border
+            </span>
           </button>
           <button class="mdc-fab mdc-fab--mini mdc-fab--plain material-icons" aria-label="Favorite">
-            favorite_border
+            <span class="mdc-fab__icon">
+              favorite_border
+            </span>
           </button>
         </fieldset>
       </section>

diff --git a/packages/mdc-fab/README.md b/packages/mdc-fab/README.md
@@ -14,29 +14,35 @@ npm install --save @material/fab
 ## Usage
 
 The demonstrations use the [Material Design Icon Font](https://design.google.com/icons/).
-You may include this to use them as shown or use any other icon method you wish.
+You may include this to use them as shown or use any other icon method you wish. 
 
 ### Default
 
 ```html
 <button class="mdc-fab material-icons" aria-label="Favorite">
-  favorite
+  <span class="mdc-fab__icon">
+    favorite
+  </span>
 </button>
 ```
 
 ### Mini
 
 ```html
 <button class="mdc-fab mdc-fab--mini material-icons" aria-label="Favorite">
-  favorite
+  <span class="mdc-fab__icon">
+    favorite
+  </span>
 </button>
 ```
 
 ### Plain
 
 ```html
 <button class="mdc-fab mdc-fab--plain material-icons" aria-label="favorite">
-  favorite
+  <span class="mdc-fab__icon">
+    favorite
+  </span>
 </button>
 ```
 
@@ -65,9 +71,11 @@ Developers must position it as-needed within their applications designs.
 }
 </style>
 <button class="mdc-fab app-fab--absolute" aria-label="Edit">
-  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
-  </svg>
+  <span class="mdc-fab__icon">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+      <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
+    </svg>
+  </span>
 </button>
 ```
 
@@ -80,8 +88,8 @@ Developers must position it as-needed within their applications designs.
 The block class is `mdc-fab`. This defines the top-level button element.
 
 ### Element
-
-The button component has no inner elements.
+The button component has a single `span` element added as a child of the button due to buttons not adhering to flexbox rules 
+in all browsers. See [this Stackoverflow post](http://stackoverflow.com/posts/35466231/revisions) for details.
 
 ### Modifier
 

diff --git a/packages/mdc-fab/mdc-fab.scss b/packages/mdc-fab/mdc-fab.scss
@@ -119,4 +119,11 @@
   }
 }
 
+.mdc-fab__icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+}
+
 /* postcss-bem-linter: end */