Skip to content

Commit db0350c

Browse files
isoosisoos
authored
Migrate button component to plain HTML (dart-lang#9448)
1 parent 5bfc9ee commit db0350c

11 files changed

Lines changed: 106 additions & 64 deletions

File tree

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

Lines changed: 14 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -4,50 +4,35 @@
44

55
import 'dom.dart' as d;
66

7-
/// Renders a material button element.
7+
/// Renders a plain HTML button element.
88
d.Node button({
99
String? id,
10-
String? customTypeClass,
1110
Iterable<String>? classes,
1211
bool raised = false,
1312
bool unelevated = false,
1413
Map<String, String>? attributes,
1514
d.Image? icon,
1615
required String label,
1716
}) {
18-
final isSimpleLabel = icon == null && customTypeClass == null;
1917
return d.element(
2018
'button',
2119
id: id,
2220
classes: [
23-
'mdc-button',
24-
if (raised) 'mdc-button--raised',
25-
if (unelevated) 'mdc-button--unelevated',
26-
if (customTypeClass != null) customTypeClass,
21+
'pub-button',
22+
if (raised) 'pub-button--raised',
23+
if (unelevated) 'pub-button--unelevated',
2724
...?classes,
2825
],
29-
attributes: {'data-mdc-auto-init': 'MDCRipple', ...?attributes},
30-
children: isSimpleLabel
31-
? [d.text(label)]
32-
: [
33-
d.div(classes: ['mdc-button__ripple']),
34-
if (icon != null)
35-
d.img(
36-
classes: [
37-
'mdc-button__icon',
38-
if (customTypeClass != null) '$customTypeClass-img',
39-
],
40-
image: icon,
41-
attributes: {'aria-hidden': 'true'},
42-
),
43-
d.span(
44-
classes: [
45-
'mdc-button__label',
46-
if (customTypeClass != null) '$customTypeClass-label',
47-
],
48-
text: label,
49-
),
50-
],
26+
attributes: attributes,
27+
children: [
28+
if (icon != null)
29+
d.img(
30+
classes: ['pub-button-icon'],
31+
image: icon,
32+
attributes: {'aria-hidden': 'true'},
33+
),
34+
d.text(label),
35+
],
5136
);
5237
}
5338

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -116,8 +116,8 @@ <h1 id="-admin-consent-title">Invite for something</h1>
116116
And text...
117117
</div>
118118
<p id="-admin-consent-buttons">
119-
<button id="-admin-consent-reject-button" class="mdc-button mdc-button--raised pub-button-cancel" data-mdc-auto-init="MDCRipple">Reject</button>
120-
<button id="-admin-consent-accept-button" class="mdc-button mdc-button--raised" data-mdc-auto-init="MDCRipple">Accept</button>
119+
<button id="-admin-consent-reject-button" class="pub-button pub-button--raised pub-button-cancel">Reject</button>
120+
<button id="-admin-consent-accept-button" class="pub-button pub-button--raised">Accept</button>
121121
</p>
122122
</main>
123123
<footer class="site-footer">

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@ <h2>Create a verified publisher</h2>
176176
<label class="pub-text-field-label" for="-publisher-id">Domain Name</label>
177177
<input id="-publisher-id" class="pub-text-field-input" type="text"/>
178178
</div>
179-
<button id="-admin-create-publisher" class="mdc-button mdc-button--raised" data-mdc-auto-init="MDCRipple">Start verification</button>
179+
<button id="-admin-create-publisher" class="pub-button pub-button--raised">Start verification</button>
180180
</div>
181181
<p>
182182
For more information on publishing and administering packages, see the

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -297,7 +297,7 @@ <h2>Package ownership</h2>
297297
</select>
298298
</div>
299299
<p>
300-
<button id="-admin-set-publisher-button" class="mdc-button mdc-button--raised pub-button-danger" data-mdc-auto-init="MDCRipple">Transfer to publisher</button>
300+
<button id="-admin-set-publisher-button" class="pub-button pub-button--raised pub-button-danger">Transfer to publisher</button>
301301
</p>
302302
<h3>Uploaders</h3>
303303
<p class="warning">There is only a single uploader. Consider adding more uploaders to protect against losing control of the package.</p>
@@ -320,7 +320,7 @@ <h3>Uploaders</h3>
320320
</table>
321321
</div>
322322
<p>
323-
<button id="-pkg-admin-invite-uploader-button" class="mdc-button mdc-button--raised" data-mdc-auto-init="MDCRipple">Invite uploader</button>
323+
<button id="-pkg-admin-invite-uploader-button" class="pub-button pub-button--raised">Invite uploader</button>
324324
</p>
325325
<div id="-pkg-admin-invite-uploader-content" class="modal-content-hidden">
326326
<p>You can invite new uploader to this package. Once new uploaders accept the invitation, they have full administrative rights, with the following abilities:</p>
@@ -484,7 +484,7 @@ <h3>Publishing with Google Cloud Service account</h3>
484484
</div>
485485
</div>
486486
<p>
487-
<button id="-pkg-admin-automated-button" class="mdc-button mdc-button--raised" data-mdc-auto-init="MDCRipple">Update</button>
487+
<button id="-pkg-admin-automated-button" class="pub-button pub-button--raised">Update</button>
488488
</p>
489489
<a name="version-retraction"></a>
490490
<h2>Version retraction</h2>
@@ -505,7 +505,7 @@ <h3>Retract package version</h3>
505505
</select>
506506
</div>
507507
<p>
508-
<button id="-admin-retract-package-version-button" class="mdc-button mdc-button--raised pub-button-danger" data-mdc-auto-init="MDCRipple">Retract Package Version</button>
508+
<button id="-admin-retract-package-version-button" class="pub-button pub-button--raised pub-button-danger">Retract Package Version</button>
509509
</p>
510510
</div>
511511
<h3>Restore retracted package version</h3>
@@ -518,7 +518,7 @@ <h3>Restore retracted package version</h3>
518518
</select>
519519
</div>
520520
<p>
521-
<button id="-admin-restore-retract-package-version-button" class="mdc-button mdc-button--raised pub-button-danger" data-mdc-auto-init="MDCRipple">Restore Retraced Package Version</button>
521+
<button id="-admin-restore-retract-package-version-button" class="pub-button pub-button--raised pub-button-danger">Restore Retraced Package Version</button>
522522
</p>
523523
</div>
524524
</section>

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -182,7 +182,7 @@ <h2>Publisher information</h2>
182182
</div>
183183
</div>
184184
<div class="-pub-form-right-aligned">
185-
<button id="-publisher-update-button" class="mdc-button mdc-button--raised" data-mdc-auto-init="MDCRipple">Update</button>
185+
<button id="-publisher-update-button" class="pub-button pub-button--raised">Update</button>
186186
</div>
187187
<h2>Members</h2>
188188
<p class="warning">This publisher only has a single member. Consider adding more members to protect against losing control of the publisher.</p>
@@ -207,7 +207,7 @@ <h2>Members</h2>
207207
</table>
208208
</div>
209209
<div class="-pub-form-right-aligned">
210-
<button id="-admin-add-member-button" class="mdc-button mdc-button--raised" data-mdc-auto-init="MDCRipple">Add member</button>
210+
<button id="-admin-add-member-button" class="pub-button pub-button--raised">Add member</button>
211211
</div>
212212
<div id="-admin-add-member-content" class="modal-content-hidden">
213213
<p>You can invite new members to this verified publisher. Once new members accept the invitation, they have full administrative rights, with the following abilities:</p>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,7 @@ <h1>Report a problem</h1>
171171
<textarea id="report-message" class="pub-text-field-input" name="message" rows="10" cols="60" maxlength="8192"></textarea>
172172
<div class="pub-text-field-character-counter">0 / 8192</div>
173173
</div>
174-
<button id="report-submit" class="mdc-button mdc-button--raised" data-mdc-auto-init="MDCRipple" data-form-api-button="submit">Submit</button>
174+
<button id="report-submit" class="pub-button pub-button--raised" data-form-api-button="submit">Submit</button>
175175
</div>
176176
</div>
177177
<div class="foldable-section foldable">

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -135,7 +135,7 @@ <h1>Appeal a resolution</h1>
135135
<textarea id="report-message" class="pub-text-field-input" name="message" rows="10" cols="60" maxlength="8192"></textarea>
136136
<div class="pub-text-field-character-counter">0 / 8192</div>
137137
</div>
138-
<button id="report-submit" class="mdc-button mdc-button--raised" data-mdc-auto-init="MDCRipple" data-form-api-button="submit">Submit</button>
138+
<button id="report-submit" class="pub-button pub-button--raised" data-form-api-button="submit">Submit</button>
139139
</div>
140140
</div>
141141
</main>

‎pkg/web_app/lib/src/_dom_helper.dart‎

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -107,39 +107,31 @@ Element _buildDialog({
107107
if (isQuestion) {
108108
final cancelBtn = HTMLButtonElement()
109109
..classList.addAll([
110-
'mdc-button',
110+
'pub-button',
111111
'mdc-dialog__button',
112112
'-pub-dom-dialog-cancel-button',
113113
])
114-
..tabIndex = 2;
114+
..tabIndex = 2
115+
..innerText = cancelButtonText ?? 'Cancel';
115116
cancelBtn.onClick.listen((e) {
116117
e.preventDefault();
117118
closing(false);
118119
});
119-
cancelBtn.append(
120-
HTMLSpanElement()
121-
..classList.add('mdc-button__label')
122-
..innerText = cancelButtonText ?? 'Cancel',
123-
);
124120
footer.append(cancelBtn);
125121
}
126122

127123
final okBtn = HTMLButtonElement()
128124
..classList.addAll([
129-
'mdc-button',
125+
'pub-button',
130126
'mdc-dialog__button',
131127
'-pub-dom-dialog-ok-button',
132128
])
133-
..tabIndex = 1;
129+
..tabIndex = 1
130+
..innerText = okButtonText ?? 'Ok';
134131
okBtn.onClick.listen((e) {
135132
e.preventDefault();
136133
closing(true);
137134
});
138-
okBtn.append(
139-
HTMLSpanElement()
140-
..classList.add('mdc-button__label')
141-
..innerText = okButtonText ?? 'Ok',
142-
);
143135
footer.append(okBtn);
144136

145137
final surface = HTMLDivElement()

‎pkg/web_css/lib/src/_base.scss‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -82,15 +82,6 @@ summary {
8282
button {
8383
cursor: pointer;
8484
border: none;
85-
86-
&.pub-button-danger {
87-
--mdc-theme-primary: var(--pub-button-danger-background);
88-
}
89-
90-
&.pub-button-cancel {
91-
--mdc-theme-primary: #f0f0f0;
92-
--mdc-theme-on-primary: #000000;
93-
}
9485
}
9586

9687
// The class annotates an image icon with either black or white pixels on

‎pkg/web_css/lib/src/_form.scss‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,76 @@
140140
}
141141
}
142142

143+
.pub-button {
144+
display: inline-flex;
145+
align-items: center;
146+
justify-content: center;
147+
box-sizing: border-box;
148+
min-width: 64px;
149+
height: 36px;
150+
padding: 0 8px;
151+
border: none;
152+
border-radius: 4px;
153+
background: transparent;
154+
color: var(--pub-link-text-color);
155+
font-family: inherit;
156+
font-size: 14px;
157+
font-weight: 500;
158+
letter-spacing: 0.089em;
159+
text-transform: uppercase;
160+
cursor: pointer;
161+
user-select: none;
162+
transition: background-color 0.3s, box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
163+
164+
// TODO: figure out a simpler rule composition for hovering
165+
&:not(.pub-button--raised):not(.pub-button--unelevated):hover {
166+
background-color: color-mix(in srgb, var(--pub-link-text-color) 8%, transparent);
167+
}
168+
169+
&:focus {
170+
outline: none;
171+
}
172+
173+
.pub-button-icon {
174+
width: 18px;
175+
height: 18px;
176+
margin-right: 8px;
177+
}
178+
179+
&.pub-button--raised,
180+
&.pub-button--unelevated {
181+
padding: 0 16px;
182+
background-color: var(--pub-button-primary-background);
183+
color: var(--pub-color-white);
184+
}
185+
186+
&.pub-button--raised {
187+
box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
188+
0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
189+
190+
&:hover {
191+
box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
192+
0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
193+
}
194+
195+
&:active {
196+
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
197+
0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
198+
}
199+
}
200+
201+
// Note: these must follow the --raised / --unelevated rules.
202+
&.pub-button-danger {
203+
background-color: var(--pub-button-danger-background);
204+
color: var(--pub-color-white);
205+
}
206+
207+
&.pub-button-cancel {
208+
background-color: var(--pub-button-cancel-background);
209+
color: var(--pub-button-cancel-text-color);
210+
}
211+
}
212+
143213
.pub-fab {
144214
display: inline-flex;
145215
align-items: center;

0 commit comments

Comments
 (0)