Skip to content

Commit 5bfc9ee

Browse files
isoosisoos
authored
Migrate the material floating action button to plain HTML. (dart-lang#9447)
1 parent 2c9a557 commit 5bfc9ee

41 files changed

Lines changed: 302 additions & 351 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎app/lib/frontend/dom/material.dart‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,8 @@ d.Node button({
5151
);
5252
}
5353

54-
/// Renders a material floating action button (FAB) element.
55-
/// The FAB is 48x48px by default. If [fabMini] is `true` the FAB will be
54+
/// Renders a plain HTML floating action button (FAB) element.
55+
/// The FAB is 56x56px by default. If [fabMini] is `true` the FAB will be
5656
/// 40x40px.
5757
d.Node floatingActionButton({
5858
String? id,
@@ -62,15 +62,14 @@ d.Node floatingActionButton({
6262
d.Image? icon,
6363
}) {
6464
return d.element(
65-
'fab',
65+
'button',
6666
id: id,
67-
classes: ['mdc-fab', if (fabMini) 'mdc-fab--mini', ...?classes],
68-
attributes: {'data-mdc-auto-init': 'MDCRipple', ...?attributes},
67+
classes: ['pub-fab', if (fabMini) 'pub-fab--mini', ...?classes],
68+
attributes: attributes,
6969
children: [
70-
d.div(classes: ['mdc-fab__ripple']),
7170
if (icon != null)
7271
d.img(
73-
classes: ['mdc-fab__icon'],
72+
classes: ['pub-fab-icon'],
7473
image: icon,
7574
attributes: {'aria-hidden': 'true'},
7675
),

‎app/test/frontend/golden/my_activity_log_page.html‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -384,15 +384,13 @@ <h1 class="title pub-monochrome-icon-hoverable">admin</h1>
384384
</div>
385385
</div>
386386
<div id="-screenshot-carousel" class="carousel">
387-
<fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
388-
<div class="mdc-fab__ripple"></div>
389-
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
390-
</fab>
387+
<button id="-carousel-prev" class="pub-fab carousel-prev carousel-nav" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
388+
<img class="pub-fab-icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
389+
</button>
391390
<div id="-image-container" class="image-container"></div>
392-
<fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
393-
<div class="mdc-fab__ripple"></div>
394-
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
395-
</fab>
391+
<button id="-carousel-next" class="pub-fab carousel-next carousel-nav" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
392+
<img class="pub-fab-icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
393+
</button>
396394
<p id="-screenshot-description" class="screenshot-description"></p>
397395
</div>
398396
</main>

‎app/test/frontend/golden/my_liked_packages.html‎

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -346,15 +346,13 @@ <h3 class="packages-title pub-monochrome-icon-hoverable">
346346
</div>
347347
</div>
348348
<div id="-screenshot-carousel" class="carousel">
349-
<fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
350-
<div class="mdc-fab__ripple"></div>
351-
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
352-
</fab>
349+
<button id="-carousel-prev" class="pub-fab carousel-prev carousel-nav" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
350+
<img class="pub-fab-icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
351+
</button>
353352
<div id="-image-container" class="image-container"></div>
354-
<fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
355-
<div class="mdc-fab__ripple"></div>
356-
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
357-
</fab>
353+
<button id="-carousel-next" class="pub-fab carousel-next carousel-nav" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
354+
<img class="pub-fab-icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
355+
</button>
358356
<p id="-screenshot-description" class="screenshot-description"></p>
359357
</div>
360358
</div>
@@ -382,15 +380,13 @@ <h3 class="packages-title pub-monochrome-icon-hoverable">
382380
</div>
383381
</div>
384382
<div id="-screenshot-carousel" class="carousel">
385-
<fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
386-
<div class="mdc-fab__ripple"></div>
387-
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
388-
</fab>
383+
<button id="-carousel-prev" class="pub-fab carousel-prev carousel-nav" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
384+
<img class="pub-fab-icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
385+
</button>
389386
<div id="-image-container" class="image-container"></div>
390-
<fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
391-
<div class="mdc-fab__ripple"></div>
392-
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
393-
</fab>
387+
<button id="-carousel-next" class="pub-fab carousel-next carousel-nav" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
388+
<img class="pub-fab-icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
389+
</button>
394390
<p id="-screenshot-description" class="screenshot-description"></p>
395391
</div>
396392
</main>

‎app/test/frontend/golden/my_packages.html‎

Lines changed: 12 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -348,15 +348,13 @@ <h3 class="packages-title pub-monochrome-icon-hoverable">
348348
</div>
349349
</div>
350350
<div id="-screenshot-carousel" class="carousel">
351-
<fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
352-
<div class="mdc-fab__ripple"></div>
353-
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
354-
</fab>
351+
<button id="-carousel-prev" class="pub-fab carousel-prev carousel-nav" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
352+
<img class="pub-fab-icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
353+
</button>
355354
<div id="-image-container" class="image-container"></div>
356-
<fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
357-
<div class="mdc-fab__ripple"></div>
358-
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
359-
</fab>
355+
<button id="-carousel-next" class="pub-fab carousel-next carousel-nav" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
356+
<img class="pub-fab-icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
357+
</button>
360358
<p id="-screenshot-description" class="screenshot-description"></p>
361359
</div>
362360
</div>
@@ -370,15 +368,13 @@ <h3 class="packages-title pub-monochrome-icon-hoverable">
370368
</div>
371369
</div>
372370
<div id="-screenshot-carousel" class="carousel">
373-
<fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
374-
<div class="mdc-fab__ripple"></div>
375-
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
376-
</fab>
371+
<button id="-carousel-prev" class="pub-fab carousel-prev carousel-nav" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
372+
<img class="pub-fab-icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
373+
</button>
377374
<div id="-image-container" class="image-container"></div>
378-
<fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
379-
<div class="mdc-fab__ripple"></div>
380-
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
381-
</fab>
375+
<button id="-carousel-next" class="pub-fab carousel-next carousel-nav" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
376+
<img class="pub-fab-icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
377+
</button>
382378
<p id="-screenshot-description" class="screenshot-description"></p>
383379
</div>
384380
</main>

‎app/test/frontend/golden/my_publishers.html‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -202,15 +202,13 @@ <h3>Want to create a new publisher?</h3>
202202
</div>
203203
</div>
204204
<div id="-screenshot-carousel" class="carousel">
205-
<fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
206-
<div class="mdc-fab__ripple"></div>
207-
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
208-
</fab>
205+
<button id="-carousel-prev" class="pub-fab carousel-prev carousel-nav" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
206+
<img class="pub-fab-icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
207+
</button>
209208
<div id="-image-container" class="image-container"></div>
210-
<fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
211-
<div class="mdc-fab__ripple"></div>
212-
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
213-
</fab>
209+
<button id="-carousel-next" class="pub-fab carousel-next carousel-nav" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
210+
<img class="pub-fab-icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
211+
</button>
214212
<p id="-screenshot-description" class="screenshot-description"></p>
215213
</div>
216214
</main>

‎app/test/frontend/golden/pkg_activity_log_page.html‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -507,15 +507,13 @@ <h3 class="title">More</h3>
507507
</p>
508508
</div>
509509
<div id="-screenshot-carousel" class="carousel">
510-
<fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
511-
<div class="mdc-fab__ripple"></div>
512-
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
513-
</fab>
510+
<button id="-carousel-prev" class="pub-fab carousel-prev carousel-nav" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
511+
<img class="pub-fab-icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
512+
</button>
514513
<div id="-image-container" class="image-container"></div>
515-
<fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
516-
<div class="mdc-fab__ripple"></div>
517-
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
518-
</fab>
514+
<button id="-carousel-next" class="pub-fab carousel-next carousel-nav" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
515+
<img class="pub-fab-icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
516+
</button>
519517
<p id="-screenshot-description" class="screenshot-description"></p>
520518
</div>
521519
</main>

‎app/test/frontend/golden/pkg_admin_page.html‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -675,15 +675,13 @@ <h3 class="title">More</h3>
675675
</p>
676676
</div>
677677
<div id="-screenshot-carousel" class="carousel">
678-
<fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
679-
<div class="mdc-fab__ripple"></div>
680-
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
681-
</fab>
678+
<button id="-carousel-prev" class="pub-fab carousel-prev carousel-nav" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
679+
<img class="pub-fab-icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
680+
</button>
682681
<div id="-image-container" class="image-container"></div>
683-
<fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
684-
<div class="mdc-fab__ripple"></div>
685-
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
686-
</fab>
682+
<button id="-carousel-next" class="pub-fab carousel-next carousel-nav" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
683+
<img class="pub-fab-icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
684+
</button>
687685
<p id="-screenshot-description" class="screenshot-description"></p>
688686
</div>
689687
</main>

‎app/test/frontend/golden/pkg_changelog_page.html‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -379,15 +379,13 @@ <h3 class="title">More</h3>
379379
</p>
380380
</div>
381381
<div id="-screenshot-carousel" class="carousel">
382-
<fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
383-
<div class="mdc-fab__ripple"></div>
384-
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
385-
</fab>
382+
<button id="-carousel-prev" class="pub-fab carousel-prev carousel-nav" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
383+
<img class="pub-fab-icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
384+
</button>
386385
<div id="-image-container" class="image-container"></div>
387-
<fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
388-
<div class="mdc-fab__ripple"></div>
389-
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
390-
</fab>
386+
<button id="-carousel-next" class="pub-fab carousel-next carousel-nav" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
387+
<img class="pub-fab-icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
388+
</button>
391389
<p id="-screenshot-description" class="screenshot-description"></p>
392390
</div>
393391
</main>

‎app/test/frontend/golden/pkg_example_page.html‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -376,15 +376,13 @@ <h3 class="title">More</h3>
376376
</p>
377377
</div>
378378
<div id="-screenshot-carousel" class="carousel">
379-
<fab id="-carousel-prev" class="mdc-fab carousel-prev carousel-nav" data-mdc-auto-init="MDCRipple" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
380-
<div class="mdc-fab__ripple"></div>
381-
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
382-
</fab>
379+
<button id="-carousel-prev" class="pub-fab carousel-prev carousel-nav" title="Previous" data-ga-click-event="screenshot-carousel-prev-click" tabindex="0">
380+
<img class="pub-fab-icon" src="/static/hash-%%etag%%/img/keyboard_arrow_left.svg" alt="previous" width="24" height="24" aria-hidden="true"/>
381+
</button>
383382
<div id="-image-container" class="image-container"></div>
384-
<fab id="-carousel-next" class="mdc-fab carousel-next carousel-nav" data-mdc-auto-init="MDCRipple" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
385-
<div class="mdc-fab__ripple"></div>
386-
<img class="mdc-fab__icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
387-
</fab>
383+
<button id="-carousel-next" class="pub-fab carousel-next carousel-nav" title="Next" data-ga-click-event="screenshot-carousel-next-click" tabindex="0">
384+
<img class="pub-fab-icon" src="/static/hash-%%etag%%/img/keyboard_arrow_right.svg" alt="next" width="24" height="24" aria-hidden="true"/>
385+
</button>
388386
<p id="-screenshot-description" class="screenshot-description"></p>
389387
</div>
390388
</main>

0 commit comments

Comments
 (0)