Skip to content
This repository was archived by the owner on Jan 13, 2025. It is now read-only.

Commit f561560

Browse files
lynnmercierlynnmercier
authored
chore(fab): Remove the mdc-fab--plain modifier (#1249)
Resolves #1143, Update demo to use the mdc-fab-accessible mixin, since this is the migration path away from mdc-fab--plain. BREAKING CHANGE: Removes mdc-fab--plain, please update your code to use mdc-fab-accessible mixin instead.
1 parent f2ba613 commit f561560

File tree

4 files changed

+100
-79
lines changed

4 files changed

+100
-79
lines changed

‎demos/demos.scss

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,13 @@
2323
$mdc-theme-primary: #212121 !default; // Grey 900
2424
$mdc-theme-secondary: #64dd17 !default; // Light Green A700
2525

26+
@import "../packages/mdc-theme/color_palette";
27+
@import "../packages/mdc-fab/mixins";
28+
29+
.mdc-fab.lightGreen800Fab {
30+
@include mdc-fab-accessible($material-color-light-green-800);
31+
}
32+
2633
@import "../packages/material-components-web/material-components-web";
2734

2835
$low-luminance-color: #3e2723;

‎demos/fab.html

Lines changed: 93 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -25,15 +25,26 @@
2525
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
2626
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
2727
<style>
28-
/* Make the demo look a little bit better */
29-
fieldset {
30-
margin-bottom: 0.5rem;
28+
.demo-fabs {
29+
display: flex;
30+
flex-wrap: wrap;
3131
}
3232

33-
fieldset .mdc-fab {
33+
legend {
34+
display: block;
35+
padding: 16px;
36+
padding-top: 64px;
37+
padding-bottom: 24px;
38+
}
39+
40+
.mdc-fab {
3441
margin: 16px;
3542
}
3643

44+
figcaption > div {
45+
margin: 8px;
46+
}
47+
3748
#demo-absolute-fab {
3849
position: fixed;
3950
bottom: 1rem;
@@ -47,20 +58,6 @@
4758
right: 1.5rem;
4859
}
4960
}
50-
51-
fieldset legend {
52-
display: block;
53-
padding: 16px;
54-
padding-top: 64px;
55-
padding-bottom: 24px;
56-
}
57-
58-
.hero button {
59-
margin-left: 32px;
60-
margin-right: 32px;
61-
62-
}
63-
6461
</style>
6562
</head>
6663
<body>
@@ -93,52 +90,84 @@
9390
</button>
9491

9592
<section>
96-
<fieldset>
97-
<legend>Normal FABs</legend>
98-
<button class="mdc-fab material-icons" aria-label="Favorite">
99-
<span class="mdc-fab__icon">
100-
favorite_border
101-
</span>
102-
</button>
103-
<button class="mdc-fab mdc-fab--mini material-icons" aria-label="Favorite">
104-
<span class="mdc-fab__icon">
105-
favorite_border
106-
</span>
107-
</button>
108-
<button class="mdc-fab mdc-fab--plain material-icons" aria-label="Favorite">
109-
<span class="mdc-fab__icon">
110-
favorite_border
111-
</span>
112-
</button>
113-
<button class="mdc-fab mdc-fab--mini mdc-fab--plain material-icons" aria-label="Favorite">
114-
<span class="mdc-fab__icon">
115-
favorite_border
116-
</span>
117-
</button>
118-
</fieldset>
119-
<fieldset>
120-
<legend>CSS Only FABs</legend>
121-
<button class="mdc-fab material-icons" aria-label="Favorite" data-demo-no-js>
122-
<span class="mdc-fab__icon">
123-
favorite_border
124-
</span>
125-
</button>
126-
<button class="mdc-fab mdc-fab--mini material-icons" aria-label="Favorite" data-demo-no-js>
127-
<span class="mdc-fab__icon">
128-
favorite_border
129-
</span>
130-
</button>
131-
<button class="mdc-fab mdc-fab--plain material-icons" aria-label="Favorite" data-demo-no-js>
132-
<span class="mdc-fab__icon">
133-
favorite_border
134-
</span>
135-
</button>
136-
<button class="mdc-fab mdc-fab--mini mdc-fab--plain material-icons" aria-label="Favorite" data-demo-no-js>
137-
<span class="mdc-fab__icon">
138-
favorite_border
139-
</span>
140-
</button>
141-
</fieldset>
93+
<legend>FABs with Ripple</legend>
94+
<div class="demo-fabs">
95+
<figure>
96+
<button class="mdc-fab material-icons" aria-label="Favorite">
97+
<span class="mdc-fab__icon">
98+
favorite_border
99+
</span>
100+
</button>
101+
<figcaption>
102+
<div>Themed FAB</div>
103+
</figcaption>
104+
</figure>
105+
<figure>
106+
<button class="mdc-fab mdc-fab--mini material-icons" aria-label="Favorite">
107+
<span class="mdc-fab__icon">
108+
favorite_border
109+
</span>
110+
</button>
111+
<figcaption>
112+
<div>Mini FAB</div>
113+
<div><code>mdc-fab--mini</code></div>
114+
</figcaption>
115+
</figure>
116+
<figure>
117+
<button class="mdc-fab lightGreen800Fab material-icons" aria-label="Favorite">
118+
<span class="mdc-fab__icon">
119+
favorite_border
120+
</span>
121+
</button>
122+
<figcaption>
123+
<div>Customized Accessible FAB</div>
124+
<div><code>@include mdc-fab-accessible</code></div>
125+
</figcaption>
126+
</figure>
127+
<figure>
128+
<button class="mdc-fab lightGreen800Fab mdc-fab--mini material-icons" aria-label="Favorite">
129+
<span class="mdc-fab__icon">
130+
favorite_border
131+
</span>
132+
</button>
133+
<figcaption>
134+
<div>Customized Accessible Mini FAB</div>
135+
</figcaption>
136+
</figure>
137+
</div>
138+
</section>
139+
<section>
140+
<legend>CSS Only FABs</legend>
141+
<div class="demo-fabs">
142+
<figure>
143+
<button class="mdc-fab material-icons" aria-label="Favorite" data-demo-no-js>
144+
<span class="mdc-fab__icon">
145+
favorite_border
146+
</span>
147+
</button>
148+
</figure>
149+
<figure>
150+
<button class="mdc-fab mdc-fab--mini material-icons" aria-label="Favorite" data-demo-no-js>
151+
<span class="mdc-fab__icon">
152+
favorite_border
153+
</span>
154+
</button>
155+
</figure>
156+
<figure>
157+
<button class="mdc-fab lightGreen800Fab material-icons" aria-label="Favorite" data-demo-no-js>
158+
<span class="mdc-fab__icon">
159+
favorite_border
160+
</span>
161+
</button>
162+
</figure>
163+
<figure>
164+
<button class="mdc-fab lightGreen800Fab mdc-fab--mini material-icons" aria-label="Favorite" data-demo-no-js>
165+
<span class="mdc-fab__icon">
166+
favorite_border
167+
</span>
168+
</button>
169+
</figure>
170+
</div>
142171
</section>
143172
</main>
144173
<script src="/assets/material-components-web.js"></script>

‎packages/mdc-fab/README.md

Lines changed: 0 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -62,16 +62,6 @@ You may include this to use them as shown or use any other icon method you wish.
6262
</button>
6363
```
6464

65-
### Plain
66-
67-
```html
68-
<button class="mdc-fab mdc-fab--plain material-icons" aria-label="favorite">
69-
<span class="mdc-fab__icon">
70-
favorite
71-
</span>
72-
</button>
73-
```
74-
7565
### Absolutely positioned
7666

7767
By default the FAB rests in the page where it sits in the content flow.
@@ -142,7 +132,6 @@ in all browsers. See [this Stackoverflow post](http://stackoverflow.com/posts/35
142132
CSS Class | Description
143133
--- | ---
144134
`mdc-fab--mini` | Makes the fab smaller (40 x 40 pixels)
145-
`mdc-fab--plain` | Makes the FAB have a white background
146135

147136
> **NOTE**: No disabled styles are defined for FABs, as they are intended to denote a promoted action, and should not be
148137
> displayed in a disabled state. If there is ever a situation where a FAB should *not* perform an action,

‎packages/mdc-fab/mdc-fab.scss

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,6 @@
2929
}
3030
}
3131

32-
.mdc-fab--plain {
33-
@include mdc-fab-accessible(white);
34-
}
35-
3632
.mdc-fab--mini {
3733
@include mdc-fab--mini_;
3834
}

0 commit comments

Comments
 (0)