Skip to content

Commit 62fe75a

Browse files
isoosisoos
authored
Migrate material checkbox to plain HTML. (dart-lang#9438)
1 parent 210cee5 commit 62fe75a

11 files changed

Lines changed: 221 additions & 502 deletions

File tree

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

Lines changed: 16 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -219,7 +219,7 @@ d.Node dataTable<T>({
219219
);
220220
}
221221

222-
/// Renders a material checkbox component.
222+
/// Renders a plain HTML checkbox component.
223223
d.Node checkbox({
224224
required String id,
225225
required String label,
@@ -229,44 +229,23 @@ d.Node checkbox({
229229
}) {
230230
labelNodeContent ??= d.text;
231231
return d.div(
232-
classes: ['mdc-form-field'],
232+
classes: ['pub-checkbox'],
233233
children: [
234-
d.div(
235-
classes: ['mdc-checkbox'],
236-
children: [
237-
d.input(
238-
type: 'checkbox',
239-
classes: ['mdc-checkbox__native-control'],
240-
id: id,
241-
attributes: {
242-
if (checked) 'checked': 'checked',
243-
if (indeterminate) 'data-indeterminate': 'true',
244-
if (indeterminate) 'aria-checked': 'mixed',
245-
},
246-
),
247-
d.div(
248-
classes: ['mdc-checkbox__background'],
249-
children: [
250-
d.element(
251-
'svg',
252-
classes: ['mdc-checkbox__checkmark'],
253-
attributes: {'viewBox': '0 0 24 24'},
254-
child: d.element(
255-
'path',
256-
classes: ['mdc-checkbox__checkmark-path'],
257-
attributes: {
258-
'fill': 'none',
259-
'd': 'M1.73,12.91 8.1,19.28 22.79,4.59',
260-
},
261-
),
262-
),
263-
d.div(classes: ['mdc-checkbox__mixedmark']),
264-
],
265-
),
266-
d.div(classes: ['mdc-checkbox__ripple']),
267-
],
234+
d.input(
235+
type: 'checkbox',
236+
id: id,
237+
classes: ['pub-checkbox-input'],
238+
attributes: {
239+
if (checked) 'checked': 'checked',
240+
if (indeterminate) 'data-indeterminate': 'true',
241+
if (indeterminate) 'aria-checked': 'mixed',
242+
},
243+
),
244+
d.label(
245+
classes: ['pub-checkbox-label'],
246+
attributes: {'for': id},
247+
child: labelNodeContent(label),
268248
),
269-
d.label(attributes: {'for': id}, child: labelNodeContent(label)),
270249
],
271250
);
272251
}

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

Lines changed: 24 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -349,18 +349,9 @@ <h3>Discontinued</h3>
349349
remain available to package users, but they don't appear in search results on pub.dev unless the user specifies advanced search options.
350350
</p>
351351
<div class="-pub-form-checkbox-row">
352-
<div class="mdc-form-field">
353-
<div class="mdc-checkbox">
354-
<input id="-admin-is-discontinued-checkbox" class="mdc-checkbox__native-control" type="checkbox"/>
355-
<div class="mdc-checkbox__background">
356-
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
357-
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
358-
</svg>
359-
<div class="mdc-checkbox__mixedmark"></div>
360-
</div>
361-
<div class="mdc-checkbox__ripple"></div>
362-
</div>
363-
<label for="-admin-is-discontinued-checkbox">Mark "discontinued"</label>
352+
<div class="pub-checkbox">
353+
<input id="-admin-is-discontinued-checkbox" class="pub-checkbox-input" type="checkbox"/>
354+
<label class="pub-checkbox-label" for="-admin-is-discontinued-checkbox">Mark "discontinued"</label>
364355
</div>
365356
</div>
366357
<a name="unlisted"></a>
@@ -371,18 +362,9 @@ <h3>Unlisted</h3>
371362
doesn't normally appear in search results on pub.dev. Unlisted packages remain publicly available, and users can search for them using advanced search options.
372363
</p>
373364
<div class="-pub-form-checkbox-row">
374-
<div class="mdc-form-field">
375-
<div class="mdc-checkbox">
376-
<input id="-admin-is-unlisted-checkbox" class="mdc-checkbox__native-control" type="checkbox"/>
377-
<div class="mdc-checkbox__background">
378-
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
379-
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
380-
</svg>
381-
<div class="mdc-checkbox__mixedmark"></div>
382-
</div>
383-
<div class="mdc-checkbox__ripple"></div>
384-
</div>
385-
<label for="-admin-is-unlisted-checkbox">Mark "unlisted"</label>
365+
<div class="pub-checkbox">
366+
<input id="-admin-is-unlisted-checkbox" class="pub-checkbox-input" type="checkbox"/>
367+
<label class="pub-checkbox-label" for="-admin-is-unlisted-checkbox">Mark "unlisted"</label>
386368
</div>
387369
</div>
388370
<a name="publishing"></a>
@@ -399,18 +381,9 @@ <h3>Manual publishing</h3>
399381
<p>Disable to prevent accidental publication from the command line.</p>
400382
<p>It is recommended to disable when automated publishing is enabled.</p>
401383
<div class="-pub-form-checkbox-row">
402-
<div class="mdc-form-field">
403-
<div class="mdc-checkbox">
404-
<input id="-pkg-admin-manual-publishing-enabled" class="mdc-checkbox__native-control" type="checkbox" checked="checked"/>
405-
<div class="mdc-checkbox__background">
406-
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
407-
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
408-
</svg>
409-
<div class="mdc-checkbox__mixedmark"></div>
410-
</div>
411-
<div class="mdc-checkbox__ripple"></div>
412-
</div>
413-
<label for="-pkg-admin-manual-publishing-enabled">Enable manual publishing</label>
384+
<div class="pub-checkbox">
385+
<input id="-pkg-admin-manual-publishing-enabled" class="pub-checkbox-input" type="checkbox" checked="checked"/>
386+
<label class="pub-checkbox-label" for="-pkg-admin-manual-publishing-enabled">Enable manual publishing</label>
414387
</div>
415388
</div>
416389
<a name="automated-publishing"></a>
@@ -423,18 +396,9 @@ <h3>Automated publishing</h3>
423396
<a name="github-actions"></a>
424397
<h3>Publishing from GitHub Actions</h3>
425398
<div class="-pub-form-checkbox-row -pub-form-checkbox-toggle-next-sibling">
426-
<div class="mdc-form-field">
427-
<div class="mdc-checkbox">
428-
<input id="-pkg-admin-automated-github-enabled" class="mdc-checkbox__native-control" type="checkbox"/>
429-
<div class="mdc-checkbox__background">
430-
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
431-
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
432-
</svg>
433-
<div class="mdc-checkbox__mixedmark"></div>
434-
</div>
435-
<div class="mdc-checkbox__ripple"></div>
436-
</div>
437-
<label for="-pkg-admin-automated-github-enabled">Enable publishing from GitHub Actions</label>
399+
<div class="pub-checkbox">
400+
<input id="-pkg-admin-automated-github-enabled" class="pub-checkbox-input" type="checkbox"/>
401+
<label class="pub-checkbox-label" for="-pkg-admin-automated-github-enabled">Enable publishing from GitHub Actions</label>
438402
</div>
439403
</div>
440404
<div class="-pub-form-checkbox-indent -pub-form-block-hidden">
@@ -463,56 +427,29 @@ <h3>Publishing from GitHub Actions</h3>
463427
</p>
464428
</div>
465429
<div class="-pub-form-checkbox-row">
466-
<div class="mdc-form-field">
467-
<div class="mdc-checkbox">
468-
<input id="-pkg-admin-automated-github-push-events" class="mdc-checkbox__native-control" type="checkbox" checked="checked"/>
469-
<div class="mdc-checkbox__background">
470-
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
471-
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
472-
</svg>
473-
<div class="mdc-checkbox__mixedmark"></div>
474-
</div>
475-
<div class="mdc-checkbox__ripple"></div>
476-
</div>
477-
<label for="-pkg-admin-automated-github-push-events">
430+
<div class="pub-checkbox">
431+
<input id="-pkg-admin-automated-github-push-events" class="pub-checkbox-input" type="checkbox" checked="checked"/>
432+
<label class="pub-checkbox-label" for="-pkg-admin-automated-github-push-events">
478433
Enable publishing from
479434
<code>push</code>
480435
events
481436
</label>
482437
</div>
483438
</div>
484439
<div class="-pub-form-checkbox-row">
485-
<div class="mdc-form-field">
486-
<div class="mdc-checkbox">
487-
<input id="-pkg-admin-automated-github-workflowdispatch-events" class="mdc-checkbox__native-control" type="checkbox"/>
488-
<div class="mdc-checkbox__background">
489-
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
490-
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
491-
</svg>
492-
<div class="mdc-checkbox__mixedmark"></div>
493-
</div>
494-
<div class="mdc-checkbox__ripple"></div>
495-
</div>
496-
<label for="-pkg-admin-automated-github-workflowdispatch-events">
440+
<div class="pub-checkbox">
441+
<input id="-pkg-admin-automated-github-workflowdispatch-events" class="pub-checkbox-input" type="checkbox"/>
442+
<label class="pub-checkbox-label" for="-pkg-admin-automated-github-workflowdispatch-events">
497443
Enable publishing from
498444
<code>workflow_dispatch</code>
499445
events
500446
</label>
501447
</div>
502448
</div>
503449
<div class="-pub-form-checkbox-row -pub-form-checkbox-toggle-next-sibling">
504-
<div class="mdc-form-field">
505-
<div class="mdc-checkbox">
506-
<input id="-pkg-admin-automated-github-requireenv" class="mdc-checkbox__native-control" type="checkbox"/>
507-
<div class="mdc-checkbox__background">
508-
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
509-
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
510-
</svg>
511-
<div class="mdc-checkbox__mixedmark"></div>
512-
</div>
513-
<div class="mdc-checkbox__ripple"></div>
514-
</div>
515-
<label for="-pkg-admin-automated-github-requireenv">Require GitHub Actions environment</label>
450+
<div class="pub-checkbox">
451+
<input id="-pkg-admin-automated-github-requireenv" class="pub-checkbox-input" type="checkbox"/>
452+
<label class="pub-checkbox-label" for="-pkg-admin-automated-github-requireenv">Require GitHub Actions environment</label>
516453
</div>
517454
</div>
518455
<div class="-pub-form-checkbox-indent -pub-form-textfield-row -pub-form-block-hidden">
@@ -533,18 +470,9 @@ <h3>Publishing with Google Cloud Service account</h3>
533470
<a href="https://dart.dev/go/automated-publishing">dart.dev/go/automated-publishing</a>
534471
</p>
535472
<div class="-pub-form-checkbox-row -pub-form-checkbox-toggle-next-sibling">
536-
<div class="mdc-form-field">
537-
<div class="mdc-checkbox">
538-
<input id="-pkg-admin-automated-gcp-enabled" class="mdc-checkbox__native-control" type="checkbox"/>
539-
<div class="mdc-checkbox__background">
540-
<svg class="mdc-checkbox__checkmark" viewBox="0 0 24 24">
541-
<path class="mdc-checkbox__checkmark-path" fill="none" d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
542-
</svg>
543-
<div class="mdc-checkbox__mixedmark"></div>
544-
</div>
545-
<div class="mdc-checkbox__ripple"></div>
546-
</div>
547-
<label for="-pkg-admin-automated-gcp-enabled">Enable publishing with Google Cloud Service account</label>
473+
<div class="pub-checkbox">
474+
<input id="-pkg-admin-automated-gcp-enabled" class="pub-checkbox-input" type="checkbox"/>
475+
<label class="pub-checkbox-label" for="-pkg-admin-automated-gcp-enabled">Enable publishing with Google Cloud Service account</label>
548476
</div>
549477
</div>
550478
<div class="-pub-form-checkbox-indent -pub-form-block-hidden">

0 commit comments

Comments
 (0)