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

Commit bfac404

Browse files
cristobalchaotraviskaufman
cristobalchao
authored and
traviskaufman
committed
feat(ripple): Implement improved graceful degradation
Resolves #189
1 parent 69389b8 commit bfac404

File tree

15 files changed

+362
-269
lines changed

15 files changed

+362
-269
lines changed

‎demos/button.html

Lines changed: 73 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -74,6 +74,42 @@ <h1>MDC WEB BUTTON</h1>
7474
Div
7575
</div>
7676
</fieldset>
77+
<fieldset>
78+
<legend>Buttons - CSS Only</legend>
79+
<button class="mdc-button" data-demo-no-js>
80+
Default
81+
</button>
82+
<button class="mdc-button mdc-button--raised" data-demo-no-js>
83+
Raised
84+
</button>
85+
<button class="mdc-button mdc-button--dense" data-demo-no-js>
86+
Dense Default
87+
</button>
88+
<button class="mdc-button mdc-button--raised mdc-button--dense" data-demo-no-js>
89+
Dense Raised
90+
</button>
91+
<button class="mdc-button mdc-button--compact" data-demo-no-js>
92+
Compact
93+
</button>
94+
<button class="mdc-button mdc-button--raised mdc-button--compact" data-demo-no-js>
95+
Compact Raised
96+
</button>
97+
<button class="mdc-button mdc-button--primary" data-demo-no-js>
98+
Default with Primary
99+
</button>
100+
<button class="mdc-button mdc-button--raised mdc-button--primary" data-demo-no-js>
101+
Raised with Primary
102+
</button>
103+
<button class="mdc-button mdc-button--accent" data-demo-no-js>
104+
Default with Accent
105+
</button>
106+
<button class="mdc-button mdc-button--raised mdc-button--accent" data-demo-no-js>
107+
Raised with Accent
108+
</button>
109+
<div class="mdc-button mdc-button--raised" tabindex="0" role="button" data-demo-no-js>
110+
Div
111+
</div>
112+
</fieldset>
77113
<fieldset>
78114
<legend>Links with Button Style</legend>
79115
<a href="/button.html" class="mdc-button">
@@ -183,6 +219,42 @@ <h2>Dark theme</h2>
183219
Div
184220
</div>
185221
</fieldset>
222+
<fieldset>
223+
<legend>Buttons - CSS Only</legend>
224+
<button class="mdc-button" data-demo-no-js>
225+
Default
226+
</button>
227+
<button class="mdc-button mdc-button--raised" data-demo-no-js>
228+
Raised
229+
</button>
230+
<button class="mdc-button mdc-button--dense" data-demo-no-js>
231+
Dense Default
232+
</button>
233+
<button class="mdc-button mdc-button--raised mdc-button--dense" data-demo-no-js>
234+
Dense Raised
235+
</button>
236+
<button class="mdc-button mdc-button--compact" data-demo-no-js>
237+
Compact
238+
</button>
239+
<button class="mdc-button mdc-button--raised mdc-button--compact" data-demo-no-js>
240+
Compact Raised
241+
</button>
242+
<button class="mdc-button mdc-button--primary" data-demo-no-js>
243+
Default with Primary
244+
</button>
245+
<button class="mdc-button mdc-button--raised mdc-button--primary" data-demo-no-js>
246+
Raised with Primary
247+
</button>
248+
<button class="mdc-button mdc-button--accent" data-demo-no-js>
249+
Default with Accent
250+
</button>
251+
<button class="mdc-button mdc-button--raised mdc-button--accent" data-demo-no-js>
252+
Raised with Accent
253+
</button>
254+
<div class="mdc-button mdc-button--raised" tabindex="0" role="button" data-demo-no-js>
255+
Div
256+
</div>
257+
</fieldset>
186258
<fieldset disabled>
187259
<legend>Disabled Buttons</legend>
188260
<button class="mdc-button">
@@ -236,7 +308,7 @@ <h2>Dark theme</h2>
236308
}
237309
}, 250);
238310
function init() {
239-
var btns = document.querySelectorAll('.mdc-button');
311+
var btns = document.querySelectorAll('.mdc-button:not([data-demo-no-js]');
240312
for (var i = 0, btn; btn = btns[i]; i++) {
241313
mdc.ripple.MDCRipple.attachTo(btn);
242314
}

‎demos/checkbox.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@
5757
<main>
5858
<h1>MDC Checkbox</h1>
5959
<section>
60-
<h2>Basic Example, no Javascript</h2>
60+
<h2>CSS Only</h2>
6161
<div class="mdc-form-field">
6262
<div class="mdc-checkbox">
6363
<input type="checkbox"

‎demos/fab.html

Lines changed: 24 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,29 @@ <h1>MDC FAB</h1>
7878
</span>
7979
</button>
8080
</fieldset>
81+
<fieldset>
82+
<legend>CSS Only FABs</legend>
83+
<button class="mdc-fab material-icons" aria-label="Favorite" data-demo-no-js>
84+
<span class="mdc-fab__icon">
85+
favorite_border
86+
</span>
87+
</button>
88+
<button class="mdc-fab mdc-fab--mini material-icons" aria-label="Favorite" data-demo-no-js>
89+
<span class="mdc-fab__icon">
90+
favorite_border
91+
</span>
92+
</button>
93+
<button class="mdc-fab mdc-fab--plain material-icons" aria-label="Favorite" data-demo-no-js>
94+
<span class="mdc-fab__icon">
95+
favorite_border
96+
</span>
97+
</button>
98+
<button class="mdc-fab mdc-fab--mini mdc-fab--plain material-icons" aria-label="Favorite" data-demo-no-js>
99+
<span class="mdc-fab__icon">
100+
favorite_border
101+
</span>
102+
</button>
103+
</fieldset>
81104
<fieldset disabled>
82105
<legend>Disabled FABs</legend>
83106
<button class="mdc-fab material-icons" aria-label="Favorite">
@@ -118,7 +141,7 @@ <h1>MDC FAB</h1>
118141
}
119142
}, 250);
120143
function init() {
121-
var fabs = document.querySelectorAll('.mdc-fab');
144+
var fabs = document.querySelectorAll('.mdc-fab:not([data-demo-no-js])');
122145
for (var i = 0, fab; fab = fabs[i]; i++) {
123146
mdc.ripple.MDCRipple.attachTo(fab);
124147
}

‎demos/radio.html

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,7 @@
4646
<main>
4747
<h1>MDC Radio</h1>
4848
<section>
49-
<h2>Basic Example, No Javascript</h2>
50-
49+
<h2>CSS Only</h2>
5150
<div class="mdc-form-field">
5251
<div class="mdc-radio" data-demo-no-js>
5352
<input class="mdc-radio__native-control" type="radio" id="ex1-radio1" checked name="ex1">

‎demos/ripple.html

Lines changed: 81 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -47,6 +47,14 @@
4747
border-radius: 50%;
4848
}
4949

50+
.mdc-ripple-surface[data-mdc-ripple-is-unbounded][data-demo-no-js]::before,
51+
.mdc-ripple-surface[data-mdc-ripple-is-unbounded][data-demo-no-js]::after {
52+
height: 100%;
53+
left: 0;
54+
top: 0;
55+
width: 100%;
56+
}
57+
5058
button.demo-surface {
5159
display: inline-block; /* Safari does not center button text otherwise :( */
5260
background: none;
@@ -57,7 +65,14 @@
5765
}
5866

5967
section {
60-
margin: 48px;
68+
align-items: center;
69+
display: flex;
70+
margin-left: 10px;
71+
}
72+
73+
section > div {
74+
margin: 48px 0;
75+
width: 400px;
6176
}
6277

6378
body {
@@ -82,6 +97,13 @@
8297
user-select: none;
8398
-webkit-user-select: none;
8499
}
100+
101+
@media (max-width: 565px) {
102+
section {
103+
flex-direction: column;
104+
width: 100%;
105+
}
106+
}
85107
</style>
86108
</head>
87109
<body>
@@ -92,40 +114,80 @@
92114
<main>
93115
<h1>MDC Ripple</h1>
94116
<section>
95-
<h2>Bounded</h2>
96-
<div class="mdc-ripple-surface demo-surface mdc-elevation--z2" tabindex="0">
97-
Interact with me!
117+
<div>
118+
<h2>Bounded</h2>
119+
<div class="mdc-ripple-surface demo-surface mdc-elevation--z2" tabindex="0">
120+
Interact with me!
121+
</div>
122+
</div>
123+
<div>
124+
<h2>Bounded - CSS Only</h2>
125+
<div class="mdc-ripple-surface demo-surface mdc-elevation--z2" data-demo-no-js tabindex="0">
126+
Interact with me!
127+
</div>
98128
</div>
99129
</section>
100130
<section>
101-
<h2>Unbounded</h2>
102-
<div class="mdc-ripple-surface demo-surface material-icons" data-mdc-ripple-is-unbounded
103-
aria-label="Favorite" tabindex="0">
104-
favorite
131+
<div>
132+
<h2>Unbounded</h2>
133+
<div class="mdc-ripple-surface demo-surface material-icons" data-mdc-ripple-is-unbounded
134+
aria-label="Favorite" tabindex="0">
135+
favorite
136+
</div>
137+
</div>
138+
<div>
139+
<h2>Unbounded - CSS Only</h2>
140+
<div class="mdc-ripple-surface demo-surface material-icons" data-mdc-ripple-is-unbounded
141+
aria-label="Favorite" data-demo-no-js tabindex="0">
142+
favorite
143+
</div>
105144
</div>
106145
</section>
107146
<section>
108-
<h2>Theme Styles</h2>
109-
<div
110-
class="mdc-ripple-surface mdc-ripple-surface--primary
111-
mdc-theme--primary demo-surface mdc-elevation--z2" tabindex="0">
112-
Primary
147+
<div>
148+
<h2>Theme Styles</h2>
149+
<div
150+
class="mdc-ripple-surface mdc-ripple-surface--primary
151+
mdc-theme--primary demo-surface mdc-elevation--z2" tabindex="0">
152+
Primary
153+
</div>
154+
<div
155+
class="mdc-ripple-surface mdc-ripple-surface--accent
156+
mdc-theme--accent demo-surface mdc-elevation--z2" tabindex="0">
157+
Accent
158+
</div>
113159
</div>
114-
<div
115-
class="mdc-ripple-surface mdc-ripple-surface--accent
116-
mdc-theme--accent demo-surface mdc-elevation--z2" tabindex="0">
117-
Accent
160+
<div>
161+
<h2>Theme Styles - CSS Only</h2>
162+
<div
163+
class="mdc-ripple-surface mdc-ripple-surface--primary
164+
mdc-theme--primary demo-surface mdc-elevation--z2" data-demo-no-js tabindex="0">
165+
Primary
166+
</div>
167+
<div
168+
class="mdc-ripple-surface mdc-ripple-surface--accent
169+
mdc-theme--accent demo-surface mdc-elevation--z2" data-demo-no-js tabindex="0">
170+
Accent
171+
</div>
118172
</div>
173+
119174
</section>
120175
<section>
121-
<h2>Applied to <code>&lt;button&gt; element</h2>
176+
<div>
177+
<h2>Applied to <code>&lt;button&gt; element</h2>
122178
<button type="button" class="mdc-ripple-surface mdc-elevation--z2 demo-surface">button</button>
179+
</div>
180+
<div>
181+
<h2>Applied to <code>&lt;button&gt; element - CSS Only</h2>
182+
<button type="button" class="mdc-ripple-surface mdc-elevation--z2 demo-surface" data-demo-no-js>button</button>
183+
</div>
184+
123185
</section>
124186
</main>
125187
<script src="assets/material-components-web.js" charset="utf-8"></script>
126188
<script>
127189
(function(global) {
128-
[].forEach.call(document.querySelectorAll('.mdc-ripple-surface'), function(surface) {
190+
[].forEach.call(document.querySelectorAll('.mdc-ripple-surface:not([data-demo-no-js]'), function(surface) {
129191
mdc.ripple.MDCRipple.attachTo(surface);
130192
});
131193
})(this);

0 commit comments

Comments
 (0)