Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix(fab): Restore horizontal alignment in IE11 #2715

Merged
merged 9 commits into from
May 22, 2018
Merged

fix(fab): Restore horizontal alignment in IE11 #2715

Show file tree
Hide file tree
Changes from 7 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
d6f311e
fix(fab): Restore horizontal alignment in IE11
May 8, 2018
a9295a5
WIP update FAB markup in theme demo page
May 15, 2018
105b0e5
WIP fix style specificity WRT material-icons
May 15, 2018
e3922a2
WIP Fix material-icons usage in FAB screenshot test pages
May 17, 2018
a420fc0
WIP Fix material-icons usage on FAB in theming.md
May 17, 2018
9222fbf
WIP Update goldens
May 18, 2018
1aa6140
WIP fix lint
May 18, 2018
33e8329
Merge branch 'master' into fix/fab-ie11-horiz-align
kfranqueiro May 18, 2018
b9ffeb8
Merge branch 'master' into fix/fab-ie11-horiz-align
kfranqueiro May 22, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 27 additions & 27 deletions demos/fab.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,8 +103,8 @@
<main>
<div class="mdc-toolbar-fixed-adjust"></div>
<section class="hero">
<button class="mdc-fab material-icons" aria-label="Favorite">
<span class="mdc-fab__icon">
<button class="mdc-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">
favorite_border
</span>
</button>
Expand All @@ -122,8 +122,8 @@
<legend>FABs with Ripple</legend>
<div class="demo-fabs">
<figure>
<button class="mdc-fab material-icons" aria-label="Favorite">
<span class="mdc-fab__icon">
<button class="mdc-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">
favorite_border
</span>
</button>
Expand All @@ -132,8 +132,8 @@
</figcaption>
</figure>
<figure>
<button class="mdc-fab mdc-fab--mini material-icons" aria-label="Favorite">
<span class="mdc-fab__icon">
<button class="mdc-fab mdc-fab--mini" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">
favorite_border
</span>
</button>
Expand All @@ -143,7 +143,7 @@
</figcaption>
</figure>
<figure>
<button class="mdc-fab material-icons" aria-label="Favorite">
<button class="mdc-fab" aria-label="Favorite">
<svg xmlns="http://www.w3.org/2000/svg" class="mdc-fab__icon" viewBox="0 0 24 24" fill="#000000">
<path fill="none" d="M0 0h24v24H0z"/>
<path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
Expand All @@ -154,7 +154,7 @@
</figcaption>
</figure>
<figure>
<button class="mdc-fab mdc-fab--mini material-icons" aria-label="Favorite">
<button class="mdc-fab mdc-fab--mini" aria-label="Favorite">
<svg xmlns="http://www.w3.org/2000/svg" class="mdc-fab__icon" viewBox="0 0 24 24" fill="#000000">
<path fill="none" d="M0 0h24v24H0z"/>
<path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
Expand All @@ -166,8 +166,8 @@
</figcaption>
</figure>
<figure>
<button class="mdc-fab lightGreen800Fab material-icons" aria-label="Favorite">
<span class="mdc-fab__icon">
<button class="mdc-fab lightGreen800Fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">
favorite_border
</span>
</button>
Expand All @@ -177,8 +177,8 @@
</figcaption>
</figure>
<figure>
<button class="mdc-fab lightGreen800Fab mdc-fab--mini material-icons" aria-label="Favorite">
<span class="mdc-fab__icon">
<button class="mdc-fab lightGreen800Fab mdc-fab--mini" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">
favorite_border
</span>
</button>
Expand All @@ -193,8 +193,8 @@
<legend>FABs with Larger Icons</legend>
<div class="demo-fabs">
<figure>
<button class="mdc-fab material-icons demo-fab-icon-size" aria-label="Favorite">
<span class="mdc-fab__icon">
<button class="mdc-fab demo-fab-icon-size" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">
favorite_border
</span>
</button>
Expand All @@ -203,8 +203,8 @@
</figcaption>
</figure>
<figure>
<button class="mdc-fab mdc-fab--mini material-icons demo-fab-icon-size" aria-label="Favorite">
<span class="mdc-fab__icon">
<button class="mdc-fab mdc-fab--mini demo-fab-icon-size" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">
favorite_border
</span>
</button>
Expand All @@ -214,7 +214,7 @@
</figcaption>
</figure>
<figure>
<button class="mdc-fab material-icons demo-fab-icon-size" aria-label="Favorite">
<button class="mdc-fab demo-fab-icon-size" aria-label="Favorite">
<svg xmlns="http://www.w3.org/2000/svg" class="mdc-fab__icon" viewBox="0 0 24 24" fill="#000000">
<path fill="none" d="M0 0h24v24H0z"/>
<path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
Expand All @@ -231,29 +231,29 @@
<legend>CSS Only FABs</legend>
<div class="demo-fabs">
<figure>
<button class="mdc-fab material-icons" aria-label="Favorite" data-demo-no-js>
<span class="mdc-fab__icon">
<button class="mdc-fab" aria-label="Favorite" data-demo-no-js>
<span class="mdc-fab__icon material-icons">
favorite_border
</span>
</button>
</figure>
<figure>
<button class="mdc-fab mdc-fab--mini material-icons" aria-label="Favorite" data-demo-no-js>
<span class="mdc-fab__icon">
<button class="mdc-fab mdc-fab--mini" aria-label="Favorite" data-demo-no-js>
<span class="mdc-fab__icon material-icons">
favorite_border
</span>
</button>
</figure>
<figure>
<button class="mdc-fab lightGreen800Fab material-icons" aria-label="Favorite" data-demo-no-js>
<span class="mdc-fab__icon">
<button class="mdc-fab lightGreen800Fab" aria-label="Favorite" data-demo-no-js>
<span class="mdc-fab__icon material-icons">
favorite_border
</span>
</button>
</figure>
<figure>
<button class="mdc-fab lightGreen800Fab mdc-fab--mini material-icons" aria-label="Favorite" data-demo-no-js>
<span class="mdc-fab__icon">
<button class="mdc-fab lightGreen800Fab mdc-fab--mini" aria-label="Favorite" data-demo-no-js>
<span class="mdc-fab__icon material-icons">
favorite_border
</span>
</button>
Expand All @@ -270,8 +270,8 @@
<p>View two (without FAB)</p>
<p><button type="button" disabled id="enter-exit-back">Go back</button></p>
</div>
<button id="enter-exit-add" class="mdc-fab demo-absolute-fab material-icons" aria-label="Add">
<span class="mdc-fab__icon">
<button id="enter-exit-add" class="mdc-fab demo-absolute-fab" aria-label="Add">
<span class="mdc-fab__icon material-icons">
add
</span>
</button>
Expand Down
8 changes: 4 additions & 4 deletions demos/theme/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -477,8 +477,8 @@ <h3 class="mdc-typography--headline5 demo-component-section__heading">
<div class="demo-fab-tile__title">Default</div>
<div class="demo-fab-tile__snippet mdc-typography--body1">Secondary theme color</div>
</figcaption>
<button class="mdc-fab material-icons demo-fab" aria-label="Favorite">
<span class="mdc-fab__icon">
<button class="mdc-fab demo-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">
favorite_border
</span>
</button>
Expand All @@ -488,8 +488,8 @@ <h3 class="mdc-typography--headline5 demo-component-section__heading">
<div class="demo-fab-tile__title">Mini</div>
<div class="demo-fab-tile__snippet mdc-typography--body1"><code>mdc-fab--mini</code></div>
</figcaption>
<button class="mdc-fab mdc-fab--mini material-icons demo-fab" aria-label="Favorite">
<span class="mdc-fab__icon">
<button class="mdc-fab mdc-fab--mini demo-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">
favorite_border
</span>
</button>
Expand Down
10 changes: 5 additions & 5 deletions docs/theming.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ Let's start with a simple application, which displays several cards for differen
card to have a color scheme that matches its category, but we'll start with the default theming provided by MDC Web.

You can [take a look at the end result here](https://plnkr.co/edit/jeBSvWC8mAIhUmUQvHSA?p=preview), but let's start from
scratch.
scratch.

> Note: We won't cover the basics of starting an MDC Web project in this guide, so please take a look at the
[getting started guide](./getting-started.md) if you need more information.
Expand Down Expand Up @@ -128,16 +128,16 @@ Here's the markup:
</p>
</div>
</div>
<button class="mdc-fab material-icons" id="demo-absolute-fab" aria-label="Favorite">
<span class="mdc-fab__icon">
<button class="mdc-fab" id="demo-absolute-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">
favorite
</span>
</button>
</body>
</html>
```

You'll see that we have a number of pretty empty looking cards, with black text on a white background. The only hint of
You'll see that we have a number of pretty empty looking cards, with black text on a white background. The only hint of
color comes from the FAB, which adopts the secondary color by default.

### Step 2: Use the MDC Web colors in your own markup
Expand Down Expand Up @@ -378,7 +378,7 @@ Since our cards only contain text and no components, let's keep it simple for no
```

Let's see how it looks with another component inside it. Add the following code to each card just after the `p`
tag:
tag:

```html
<button class="mdc-button mdc-card__actions">
Expand Down
8 changes: 4 additions & 4 deletions packages/mdc-fab/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,8 @@ We recommend you load [Material Icons](https://material.io/icons/) from Google F
### HTML Structure

```html
<button class="mdc-fab material-icons" aria-label="Favorite">
<span class="mdc-fab__icon">
<button class="mdc-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">
favorite
</span>
</button>
Expand Down Expand Up @@ -141,8 +141,8 @@ Developers must position MDC FAB as needed within their application's design.
}
}
</style>
<button class="mdc-fab material-icons app-fab--absolute" aria-label="Favorite">
<span class="mdc-fab__icon">
<button class="mdc-fab app-fab--absolute" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">
favorite
</span>
</button>
Expand Down
8 changes: 7 additions & 1 deletion packages/mdc-fab/_mixins.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,7 @@ $mdc-fab-icon-enter-duration_: 180ms;

display: inline-flex;
position: relative;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: 56px;
Expand Down Expand Up @@ -122,12 +123,17 @@ $mdc-fab-icon-enter-duration_: 180ms;
}

@mixin mdc-fab__icon_ {
margin: auto;
transition: mdc-animation-enter(transform, $mdc-fab-icon-enter-duration_, $mdc-fab-icon-enter-delay_);
fill: currentColor;
will-change: transform;
}

@mixin mdc-fab__icon-overrides_ {
display: inline-flex;
align-items: center;
justify-content: center;
}

@mixin mdc-fab--exited_ {
transform: scale(0);
transition:
Expand Down
6 changes: 6 additions & 0 deletions packages/mdc-fab/mdc-fab.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,12 @@
@include mdc-fab__icon_;
}

// Increase specificity for FAB icon styles that need to override styles defined for .material-icons
// (which is loaded separately so the order of CSS definitions is not guaranteed)
.mdc-fab .mdc-fab__icon {
@include mdc-fab__icon-overrides_;
}

.mdc-fab--exited {
@include mdc-fab--exited_;
}
Expand Down
24 changes: 12 additions & 12 deletions test/screenshot/golden.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,23 +111,23 @@
}
},
"mdc-fab/classes/baseline.html": {
"publicUrl": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/05/10/09_48_12_584/3ead4f4c7/mdc-fab/classes/baseline.html",
"publicUrl": "https://storage.googleapis.com/mdc-web-screenshot-tests/kfranqueiro/2018/05/18/14_55_24_813/a420fc01/mdc-fab/classes/baseline.html",
"screenshots": {
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/05/10/09_48_12_584/3ead4f4c7/mdc-fab/classes/baseline.html.win10e15_chrome66x64.png",
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/05/10/09_48_12_584/3ead4f4c7/mdc-fab/classes/baseline.html.win10e17_edge17.png",
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/05/10/09_48_12_584/3ead4f4c7/mdc-fab/classes/baseline.html.win10e14_ff59x64.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/05/10/09_48_12_584/3ead4f4c7/mdc-fab/classes/baseline.html.win10e14_ie11.png",
"mobile_android_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/05/10/09_48_12_584/3ead4f4c7/mdc-fab/classes/baseline.html.galaxys7and70_mblchrome64.png"
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/kfranqueiro/2018/05/18/14_55_24_813/a420fc01/mdc-fab/classes/baseline.html.win10e15_chrome66x64.png",
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/kfranqueiro/2018/05/18/14_55_24_813/a420fc01/mdc-fab/classes/baseline.html.win10e17_edge17.png",
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/kfranqueiro/2018/05/18/14_55_24_813/a420fc01/mdc-fab/classes/baseline.html.win10e14_ff59x64.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/kfranqueiro/2018/05/18/14_55_24_813/a420fc01/mdc-fab/classes/baseline.html.win10e14_ie11.png",
"mobile_android_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/kfranqueiro/2018/05/18/14_55_24_813/a420fc01/mdc-fab/classes/baseline.html.galaxys7and70_mblchrome64.png"
}
},
"mdc-fab/classes/mini.html": {
"publicUrl": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/05/10/09_48_12_584/3ead4f4c7/mdc-fab/classes/mini.html",
"publicUrl": "https://storage.googleapis.com/mdc-web-screenshot-tests/kfranqueiro/2018/05/18/14_55_24_813/a420fc01/mdc-fab/classes/mini.html",
"screenshots": {
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/05/10/09_48_12_584/3ead4f4c7/mdc-fab/classes/mini.html.win10e15_chrome66x64.png",
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/05/10/09_48_12_584/3ead4f4c7/mdc-fab/classes/mini.html.win10e17_edge17.png",
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/05/10/09_48_12_584/3ead4f4c7/mdc-fab/classes/mini.html.win10e14_ff59x64.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/05/10/09_48_12_584/3ead4f4c7/mdc-fab/classes/mini.html.win10e14_ie11.png",
"mobile_android_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/advorak/2018/05/10/09_48_12_584/3ead4f4c7/mdc-fab/classes/mini.html.galaxys7and70_mblchrome64.png"
"desktop_windows_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/kfranqueiro/2018/05/18/14_55_24_813/a420fc01/mdc-fab/classes/mini.html.win10e15_chrome66x64.png",
"desktop_windows_edge@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/kfranqueiro/2018/05/18/14_55_24_813/a420fc01/mdc-fab/classes/mini.html.win10e17_edge17.png",
"desktop_windows_firefox@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/kfranqueiro/2018/05/18/14_55_24_813/a420fc01/mdc-fab/classes/mini.html.win10e14_ff59x64.png",
"desktop_windows_ie@11": "https://storage.googleapis.com/mdc-web-screenshot-tests/kfranqueiro/2018/05/18/14_55_24_813/a420fc01/mdc-fab/classes/mini.html.win10e14_ie11.png",
"mobile_android_chrome@latest": "https://storage.googleapis.com/mdc-web-screenshot-tests/kfranqueiro/2018/05/18/14_55_24_813/a420fc01/mdc-fab/classes/mini.html.galaxys7and70_mblchrome64.png"
}
}
}
6 changes: 3 additions & 3 deletions test/screenshot/mdc-fab/classes/baseline.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,14 +27,14 @@
<main class="test-main">
<div class="test-grid">
<span class="test-cell">
<button class="mdc-fab material-icons" aria-label="Favorite">
<span class="mdc-fab__icon">
<button class="mdc-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">
favorite_border
</span>
</button>
</span>
<span class="test-cell">
<button class="mdc-fab material-icons" aria-label="Favorite">
<button class="mdc-fab" aria-label="Favorite">
<svg xmlns="http://www.w3.org/2000/svg" class="mdc-fab__icon" viewBox="0 0 24 24" fill="#000000">
<path fill="none" d="M0 0h24v24H0z"/>
<path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
Expand Down
6 changes: 3 additions & 3 deletions test/screenshot/mdc-fab/classes/mini.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,14 +27,14 @@
<main class="test-main">
<div class="test-grid">
<span class="test-cell">
<button class="mdc-fab mdc-fab--mini material-icons" aria-label="Favorite">
<span class="mdc-fab__icon">
<button class="mdc-fab mdc-fab--mini" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">
favorite_border
</span>
</button>
</span>
<span class="test-cell">
<button class="mdc-fab mdc-fab--mini material-icons" aria-label="Favorite">
<button class="mdc-fab mdc-fab--mini" aria-label="Favorite">
<svg xmlns="http://www.w3.org/2000/svg" class="mdc-fab__icon" viewBox="0 0 24 24" fill="#000000">
<path fill="none" d="M0 0h24v24H0z"/>
<path d="M23 12c0-6.07-4.93-11-11-11S1 5.93 1 12s4.93 11 11 11 11-4.93 11-11zM5 17.64C3.75 16.1 3 14.14 3 12c0-2.13.76-4.08 2-5.63v11.27zM17.64 5H6.36C7.9 3.75 9.86 3 12 3s4.1.75 5.64 2zM12 14.53L8.24 7h7.53L12 14.53zM17 9v8h-4l4-8zm-6 8H7V9l4 8zm6.64 2c-1.55 1.25-3.51 2-5.64 2s-4.1-.75-5.64-2h11.28zM21 12c0 2.14-.75 4.1-2 5.64V6.37c1.24 1.55 2 3.5 2 5.63z"/>
Expand Down