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

Commit 419e035

Browse files
Brandon Diamondcopybara-github
Brandon Diamond
authored and
copybara-github
committed
fix(list): add support for density scaling.
PiperOrigin-RevId: 340556011
1 parent 6fc7c30 commit 419e035

File tree

2 files changed

+259
-19
lines changed

2 files changed

+259
-19
lines changed

‎packages/mdc-list/_evolution-mixins.scss

Lines changed: 212 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
@use '@material/ripple/ripple';
55
@use '@material/ripple/ripple-theme';
66
@use '@material/rtl/mixins' as rtl-mixins;
7+
@use '@material/density/functions' as density-functions;
78
@use '@material/dom/mixins' as dom-mixins;
89
@use '@material/typography/typography';
910
@use '@material/feature-targeting/feature-targeting';
@@ -55,9 +56,18 @@
5556
@include evolution-item-base_($query: $query);
5657
@include evolution-item-spacing(16px, $query: $query);
5758

58-
@include evolution-one-line-item-height(48px, $query: $query);
59-
@include evolution-two-line-item-height(64px, $query: $query);
60-
@include evolution-three-line-item-height(88px, $query: $query);
59+
@include evolution-one-line-item-density_(
60+
variables.$one-line-item-density-scale,
61+
$query: $query
62+
);
63+
@include evolution-two-line-item-density_(
64+
variables.$two-line-item-density-scale,
65+
$query: $query
66+
);
67+
@include evolution-three-line-item-density_(
68+
variables.$three-line-item-density-scale,
69+
$query: $query
70+
);
6171

6272
@include evolution-one-line-item-start-alignment(center, $query: $query);
6373
@include evolution-two-line-item-start-alignment(
@@ -187,15 +197,21 @@
187197
}
188198

189199
.mdc-evolution-list-item--with-leading-avatar {
190-
@include evolution-one-line-item-height(56px, $query: $query);
191-
@include evolution-two-line-item-height(72px, $query: $query);
192200
@include evolution-item-start-spacing(16px, $query: $query);
193201
@include evolution-item-start-size(40px, $query: $query);
194202
@include _evolution-two-line-item-primary-baseline(
195203
32px,
196204
20px,
197205
$query: $query
198206
);
207+
@include evolution-one-line-item-tall-density_(
208+
variables.$one-line-item-density-scale,
209+
$query: $query
210+
);
211+
@include evolution-two-line-item-tall-density_(
212+
variables.$two-line-item-density-scale,
213+
$query: $query
214+
);
199215

200216
.mdc-evolution-list-item__start {
201217
@include feature-targeting.targets($feat-structure) {
@@ -205,8 +221,6 @@
205221
}
206222

207223
.mdc-evolution-list-item--with-leading-icon {
208-
@include evolution-one-line-item-height(56px, $query: $query);
209-
@include evolution-two-line-item-height(72px, $query: $query);
210224
@include evolution-item-start-size(24px, $query: $query);
211225
@include evolution-item-start-spacing(
212226
$leading: 16px,
@@ -218,35 +232,53 @@
218232
20px,
219233
$query: $query
220234
);
235+
@include evolution-one-line-item-tall-density_(
236+
variables.$one-line-item-density-scale,
237+
$query: $query
238+
);
239+
@include evolution-two-line-item-tall-density_(
240+
variables.$two-line-item-density-scale,
241+
$query: $query
242+
);
221243
}
222244

223245
.mdc-evolution-list-item--with-leading-thumbnail {
224-
@include evolution-one-line-item-height(56px, $query: $query);
225-
@include evolution-two-line-item-height(72px, $query: $query);
226246
@include evolution-item-start-spacing(16px, $query: $query);
227247
@include evolution-item-start-size(40px, $query: $query);
228248
@include _evolution-two-line-item-primary-baseline(
229249
32px,
230250
20px,
231251
$query: $query
232252
);
253+
@include evolution-one-line-item-tall-density_(
254+
variables.$one-line-item-density-scale,
255+
$query: $query
256+
);
257+
@include evolution-two-line-item-tall-density_(
258+
variables.$two-line-item-density-scale,
259+
$query: $query
260+
);
233261
}
234262

235263
.mdc-evolution-list-item--with-leading-image {
236-
@include evolution-one-line-item-height(72px, $query: $query);
237-
@include evolution-two-line-item-height(72px, $query: $query);
238264
@include evolution-item-start-spacing(16px, $query: $query);
239265
@include evolution-item-start-size(56px, $query: $query);
240266
@include _evolution-two-line-item-primary-baseline(
241267
32px,
242268
20px,
243269
$query: $query
244270
);
271+
@include evolution-one-line-item-taller-density_(
272+
variables.$one-line-item-density-scale,
273+
$query: $query
274+
);
275+
@include evolution-two-line-item-tall-density_(
276+
variables.$two-line-item-density-scale,
277+
$query: $query
278+
);
245279
}
246280

247281
.mdc-evolution-list-item--with-leading-video {
248-
@include evolution-one-line-item-height(72px, $query: $query);
249-
@include evolution-two-line-item-height(72px, $query: $query);
250282
@include evolution-two-line-item-start-alignment(
251283
$alignment: flex-start,
252284
$offset: 8px,
@@ -267,41 +299,59 @@
267299
20px,
268300
$query: $query
269301
);
302+
@include evolution-one-line-item-taller-density_(
303+
variables.$one-line-item-density-scale,
304+
$query: $query
305+
);
306+
@include evolution-two-line-item-tall-density_(
307+
variables.$two-line-item-density-scale,
308+
$query: $query
309+
);
270310
}
271311

272312
.mdc-evolution-list-item--with-leading-checkbox {
273313
$leading: absorb-overflow(16px, $actual: 40px, $available: 24px);
274314
$trailing: absorb-overflow(32px, $actual: 40px, $available: 24px);
275315

276-
@include evolution-one-line-item-height(56px, $query: $query);
277-
@include evolution-two-line-item-height(72px, $query: $query);
278316
@include evolution-item-start-spacing($leading, $trailing, $query: $query);
279317
@include evolution-item-start-size(40px, $query: $query);
280318
@include _evolution-two-line-item-primary-baseline(
281319
32px,
282320
20px,
283321
$query: $query
284322
);
323+
@include evolution-one-line-item-tall-density_(
324+
variables.$one-line-item-density-scale,
325+
$query: $query
326+
);
327+
@include evolution-two-line-item-tall-density_(
328+
variables.$two-line-item-density-scale,
329+
$query: $query
330+
);
285331
}
286332

287333
.mdc-evolution-list-item--with-leading-radio {
288334
$leading: absorb-overflow(16px, $actual: 40px, $available: 24px);
289335
$trailing: absorb-overflow(32px, $actual: 40px, $available: 24px);
290336

291-
@include evolution-one-line-item-height(56px, $query: $query);
292-
@include evolution-two-line-item-height(72px, $query: $query);
293337
@include evolution-item-start-spacing($leading, $trailing, $query: $query);
294338
@include evolution-item-start-size(40px, $query: $query);
295339
@include _evolution-two-line-item-primary-baseline(
296340
32px,
297341
20px,
298342
$query: $query
299343
);
344+
@include evolution-one-line-item-tall-density_(
345+
variables.$one-line-item-density-scale,
346+
$query: $query
347+
);
348+
@include evolution-two-line-item-tall-density_(
349+
variables.$two-line-item-density-scale,
350+
$query: $query
351+
);
300352
}
301353

302354
.mdc-evolution-list-item--with-leading-switch {
303-
@include evolution-one-line-item-height(56px, $query: $query);
304-
@include evolution-two-line-item-height(72px, $query: $query);
305355
@include evolution-item-start-spacing(16px, $query: $query);
306356
@include evolution-item-start-size(
307357
$width: 36px,
@@ -313,6 +363,14 @@
313363
20px,
314364
$query: $query
315365
);
366+
@include evolution-one-line-item-tall-density_(
367+
variables.$one-line-item-density-scale,
368+
$query: $query
369+
);
370+
@include evolution-two-line-item-tall-density_(
371+
variables.$two-line-item-density-scale,
372+
$query: $query
373+
);
316374
}
317375

318376
.mdc-evolution-list-item--with-trailing-icon {
@@ -905,10 +963,145 @@
905963
}
906964
}
907965

966+
// The public density mixins apply the appropriate density styles regardless of
967+
// the item's start contents.
968+
@mixin evolution-one-line-item-density(
969+
$density-scale,
970+
$query: feature-targeting.all()
971+
) {
972+
@include evolution-one-line-item-density_($density-scale, $query: $query);
973+
974+
&.mdc-evolution-list-item--with-leading-icon,
975+
&.mdc-evolution-list-item--with-leading-thumbnail,
976+
&.mdc-evolution-list-item--with-leading-checkbox,
977+
&.mdc-evolution-list-item--with-leading-radio,
978+
&.mdc-evolution-list-item--with-leading-switch {
979+
@include evolution-one-line-item-tall-density_(
980+
$density-scale,
981+
$query: $query
982+
);
983+
}
984+
985+
&.mdc-evolution-list-item--with-leading-image,
986+
&.mdc-evolution-list-item--with-leading-video {
987+
@include evolution-one-line-item-taller-density_(
988+
$density-scale,
989+
$query: $query
990+
);
991+
}
992+
}
993+
994+
@mixin evolution-two-line-item-density(
995+
$density-scale,
996+
$query: feature-targeting.all()
997+
) {
998+
@include evolution-two-line-item-density_($density-scale, $query: $query);
999+
1000+
&.mdc-evolution-list-item--with-leading-icon,
1001+
&.mdc-evolution-list-item--with-leading-thumbnail,
1002+
&.mdc-evolution-list-item--with-leading-checkbox,
1003+
&.mdc-evolution-list-item--with-leading-radio,
1004+
&.mdc-evolution-list-item--with-leading-switch,
1005+
&.mdc-evolution-list-item--with-leading-image,
1006+
&.mdc-evolution-list-item--with-leading-video {
1007+
@include evolution-two-line-item-tall-density_(
1008+
$density-scale,
1009+
$query: $query
1010+
);
1011+
}
1012+
}
1013+
1014+
@mixin evolution-three-line-item-density(
1015+
$density-scale,
1016+
$query: feature-targeting.all()
1017+
) {
1018+
@include evolution-three-line-item-density_($density-scale, $query: $query);
1019+
}
1020+
9081021
//
9091022
// Private
9101023
//
9111024

1025+
// The private density mixins allow density properties to be overridden
1026+
// individually to avoid increasing specificity.
1027+
@mixin evolution-one-line-item-density_(
1028+
$density-scale,
1029+
$query: feature-targeting.all()
1030+
) {
1031+
$height: density-functions.prop-value(
1032+
$density-config: variables.$one-line-item-density-config,
1033+
$density-scale: $density-scale,
1034+
$property-name: height,
1035+
);
1036+
1037+
@include evolution-one-line-item-height($height, $query: $query);
1038+
}
1039+
1040+
@mixin evolution-one-line-item-tall-density_(
1041+
$density-scale,
1042+
$query: feature-targeting.all()
1043+
) {
1044+
$height: density-functions.prop-value(
1045+
$density-config: variables.$one-line-item-tall-density-config,
1046+
$density-scale: $density-scale,
1047+
$property-name: height,
1048+
);
1049+
1050+
@include evolution-one-line-item-height($height, $query: $query);
1051+
}
1052+
1053+
@mixin evolution-one-line-item-taller-density_(
1054+
$density-scale,
1055+
$query: feature-targeting.all()
1056+
) {
1057+
$height: density-functions.prop-value(
1058+
$density-config: variables.$one-line-item-taller-density-config,
1059+
$density-scale: $density-scale,
1060+
$property-name: height,
1061+
);
1062+
1063+
@include evolution-one-line-item-height($height, $query: $query);
1064+
}
1065+
1066+
@mixin evolution-two-line-item-density_(
1067+
$density-scale,
1068+
$query: feature-targeting.all()
1069+
) {
1070+
$height: density-functions.prop-value(
1071+
$density-config: variables.$two-line-item-density-config,
1072+
$density-scale: $density-scale,
1073+
$property-name: height,
1074+
);
1075+
1076+
@include evolution-two-line-item-height($height, $query: $query);
1077+
}
1078+
1079+
@mixin evolution-two-line-item-tall-density_(
1080+
$density-scale,
1081+
$query: feature-targeting.all()
1082+
) {
1083+
$height: density-functions.prop-value(
1084+
$density-config: variables.$two-line-item-tall-density-config,
1085+
$density-scale: $density-scale,
1086+
$property-name: height,
1087+
);
1088+
1089+
@include evolution-two-line-item-height($height, $query: $query);
1090+
}
1091+
1092+
@mixin evolution-three-line-item-density_(
1093+
$density-scale,
1094+
$query: feature-targeting.all()
1095+
) {
1096+
$height: density-functions.prop-value(
1097+
$density-config: variables.$three-line-item-density-config,
1098+
$density-scale: $density-scale,
1099+
$property-name: height,
1100+
);
1101+
1102+
@include evolution-three-line-item-height($height, $query: $query);
1103+
}
1104+
9121105
@mixin evolution-list-base_($query: feature-targeting.all()) {
9131106
$feat-color: feature-targeting.create-target($query, color);
9141107
$feat-structure: feature-targeting.create-target($query, structure);

0 commit comments

Comments
 (0)