Skip to content

Commit 3df308f

Browse files
isoosisoos
authored
Migrate Material datatable to plain HTML (dart-lang#9442)
1 parent a72c582 commit 3df308f

5 files changed

Lines changed: 67 additions & 47 deletions

File tree

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -171,7 +171,7 @@ class DataTableColumn<T> {
171171
});
172172
}
173173

174-
/// Renders a material data table.
174+
/// Renders a plain HTML data table.
175175
d.Node dataTable<T>({
176176
String? id,
177177
String? ariaLabel,
@@ -180,19 +180,19 @@ d.Node dataTable<T>({
180180
}) {
181181
return d.div(
182182
id: id,
183-
classes: ['mdc-data-table'],
183+
classes: ['pub-data-table'],
184184
child: d.element(
185185
'table',
186-
classes: ['mdc-data-table__table'],
186+
classes: ['pub-data-table-table'],
187187
attributes: {if (ariaLabel != null) 'aria-label': ariaLabel},
188188
children: [
189189
d.element(
190190
'thead',
191191
child: d.tr(
192-
classes: ['mdc-data-table__header-row'],
192+
classes: ['pub-data-table-header-row'],
193193
children: columns.map(
194194
(c) => d.th(
195-
classes: ['mdc-data-table__header-cell', ...?c.headerClasses],
195+
classes: ['pub-data-table-header-cell', ...?c.headerClasses],
196196
attributes: {'role': 'columnheader', 'scope': 'col'},
197197
child: c.headerContent,
198198
),
@@ -201,13 +201,13 @@ d.Node dataTable<T>({
201201
),
202202
d.element(
203203
'tbody',
204-
classes: ['mdc-data-table__content'],
204+
classes: ['pub-data-table-content'],
205205
children: entries.map(
206206
(entry) => d.tr(
207-
classes: ['mdc-data-table__row'],
207+
classes: ['pub-data-table-row'],
208208
children: columns.map(
209209
(c) => d.td(
210-
classes: ['mdc-data-table__cell'],
210+
classes: ['pub-data-table-cell'],
211211
child: c.renderCell(entry),
212212
),
213213
),

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -301,18 +301,18 @@ <h2>Package ownership</h2>
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>
304-
<div id="-pkg-admin-uploaders-table" class="mdc-data-table">
305-
<table class="mdc-data-table__table" aria-label="Uploaders of package">
304+
<div id="-pkg-admin-uploaders-table" class="pub-data-table">
305+
<table class="pub-data-table-table" aria-label="Uploaders of package">
306306
<thead>
307-
<tr class="mdc-data-table__header-row">
308-
<th class="mdc-data-table__header-cell email-header" role="columnheader" scope="col">Email</th>
309-
<th class="mdc-data-table__header-cell icons-header" role="columnheader" scope="col"></th>
307+
<tr class="pub-data-table-header-row">
308+
<th class="pub-data-table-header-cell email-header" role="columnheader" scope="col">Email</th>
309+
<th class="pub-data-table-header-cell icons-header" role="columnheader" scope="col"></th>
310310
</tr>
311311
</thead>
312-
<tbody class="mdc-data-table__content">
313-
<tr class="mdc-data-table__row">
314-
<td class="mdc-data-table__cell">admin@pub.dev</td>
315-
<td class="mdc-data-table__cell">
312+
<tbody class="pub-data-table-content">
313+
<tr class="pub-data-table-row">
314+
<td class="pub-data-table-cell">admin@pub.dev</td>
315+
<td class="pub-data-table-cell">
316316
<a class="-pub-remove-uploader-button" title="Remove uploader" data-email="admin@pub.dev">×</a>
317317
</td>
318318
</tr>

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

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -186,20 +186,20 @@ <h2>Publisher information</h2>
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>
189-
<div id="-pub-publisher-admin-members-table" class="mdc-data-table">
190-
<table class="mdc-data-table__table" aria-label="Members of publisher">
189+
<div id="-pub-publisher-admin-members-table" class="pub-data-table">
190+
<table class="pub-data-table-table" aria-label="Members of publisher">
191191
<thead>
192-
<tr class="mdc-data-table__header-row">
193-
<th class="mdc-data-table__header-cell email-header" role="columnheader" scope="col">Email</th>
194-
<th class="mdc-data-table__header-cell role-header" role="columnheader" scope="col">Role</th>
195-
<th class="mdc-data-table__header-cell icons-header" role="columnheader" scope="col"></th>
192+
<tr class="pub-data-table-header-row">
193+
<th class="pub-data-table-header-cell email-header" role="columnheader" scope="col">Email</th>
194+
<th class="pub-data-table-header-cell role-header" role="columnheader" scope="col">Role</th>
195+
<th class="pub-data-table-header-cell icons-header" role="columnheader" scope="col"></th>
196196
</tr>
197197
</thead>
198-
<tbody class="mdc-data-table__content">
199-
<tr class="mdc-data-table__row">
200-
<td class="mdc-data-table__cell">admin@pub.dev</td>
201-
<td class="mdc-data-table__cell">admin</td>
202-
<td class="mdc-data-table__cell">
198+
<tbody class="pub-data-table-content">
199+
<tr class="pub-data-table-row">
200+
<td class="pub-data-table-cell">admin@pub.dev</td>
201+
<td class="pub-data-table-cell">admin</td>
202+
<td class="pub-data-table-cell">
203203
<a class="-pub-remove-user-button" title="Remove member" data-user-id="%%admin@pub.dev%%" data-email="admin@pub.dev">×</a>
204204
</td>
205205
</tr>

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

Lines changed: 39 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@
5555
width: 100%;
5656
border-width: 0px;
5757

58-
.mdc-data-table__row {
58+
.pub-data-table-row {
5959
border-top-color: var(--pub-neutral-borderColor);
6060

6161
&:hover {
@@ -67,12 +67,12 @@
6767
}
6868
}
6969

70-
.mdc-data-table__header-cell,
71-
.mdc-data-table__cell {
70+
.pub-data-table-header-cell,
71+
.pub-data-table-cell {
7272
font-weight: 400;
7373
}
7474

75-
.mdc-data-table__cell {
75+
.pub-data-table-cell {
7676
color: var(--pub-neutral-textColor);
7777
}
7878

@@ -108,18 +108,6 @@
108108
}
109109

110110
.dark-theme {
111-
.mdc-data-table {
112-
border-color: var(--mdc_pub-data_table-border-color);
113-
}
114-
115-
.mdc-data-table__header-cell {
116-
border-color: var(--mdc_pub-data_table-border-color);
117-
color: var(--pub-neutral-textColor);
118-
}
119-
.mdc-data-table__cell {
120-
color: var(--pub-neutral-textColor);
121-
}
122-
123111
.mdc-dialog__surface {
124112
.mdc-dialog__title,
125113
.mdc-dialog__content {
@@ -231,3 +219,38 @@
231219
}
232220
}
233221
}
222+
223+
.pub-data-table {
224+
display: inline-flex;
225+
flex-direction: column;
226+
max-width: 100%;
227+
overflow-x: auto;
228+
border: 1px solid color-mix(in srgb, var(--pub-neutral-textColor) 20%, transparent);
229+
border-radius: 4px;
230+
231+
.pub-data-table-table {
232+
width: 100%;
233+
border-collapse: collapse;
234+
border-spacing: 0;
235+
}
236+
237+
.pub-data-table-row {
238+
border-top: 1px solid color-mix(in srgb, var(--pub-neutral-textColor) 12%, transparent);
239+
240+
&:hover {
241+
background: var(--pub-neutral-hover-bgColor);
242+
}
243+
}
244+
245+
.pub-data-table-header-cell,
246+
.pub-data-table-cell {
247+
padding: 12px 16px;
248+
text-align: left;
249+
color: var(--pub-neutral-textColor);
250+
}
251+
252+
.pub-data-table-header-cell {
253+
font-weight: 500;
254+
border-bottom: 1px solid color-mix(in srgb, var(--pub-neutral-textColor) 20%, transparent);
255+
}
256+
}

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

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -230,9 +230,6 @@
230230
--mdc-protected-button-disabled-container-color: rgba(255, 255, 255, 0.1);
231231
--mdc-protected-button-disabled-label-text-color: var(--pub-neutral-textColor);
232232

233-
// Pub-specific Material Design overrides
234-
--mdc_pub-data_table-border-color: var(--mdc-checkbox-unchecked-color);
235-
236233
// Most of our SVG images are black on transparent background and they
237234
// are almost invisible in dark mode. Ideally we would have different
238235
// images for dark mode, or override their `fill` or `stroke` properties

0 commit comments

Comments
 (0)