Skip to content

Commit dea603b

Browse files
andrewseguinandrewseguin
authored
feat(material/core): add experimental utility classes (#31702)
1 parent 835d9a8 commit dea603b

File tree

13 files changed

+572
-0
lines changed

13 files changed

+572
-0
lines changed

‎src/dev-app/BUILD.bazel‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@ ng_project(
9494
"//src/dev-app/tooltip",
9595
"//src/dev-app/tree",
9696
"//src/dev-app/typography",
97+
"//src/dev-app/utility-classes-demo",
9798
"//src/dev-app/virtual-scroll",
9899
"//src/dev-app/youtube-player",
99100
"//src/material/core",

‎src/dev-app/dev-app/dev-app-layout.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,7 @@ export class DevAppLayout {
122122
{name: 'Tooltip', route: '/tooltip'},
123123
{name: 'Tree', route: '/tree'},
124124
{name: 'Typography', route: '/typography'},
125+
{name: 'Utility', route: '/utility'},
125126
{name: 'Virtual Scrolling', route: '/virtual-scroll'},
126127
{name: 'YouTube Player', route: '/youtube-player'},
127128
];

‎src/dev-app/routes.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -302,6 +302,11 @@ export const DEV_APP_ROUTES: Routes = [
302302
loadComponent: () =>
303303
import('./youtube-player/youtube-player-demo').then(m => m.YouTubePlayerDemo),
304304
},
305+
{
306+
path: 'utility',
307+
loadComponent: () =>
308+
import('./utility-classes-demo/utility-classes-demo').then(m => m.UtilityClassesDemo),
309+
},
305310
{
306311
path: 'selection',
307312
loadComponent: () => import('./selection/selection-demo').then(m => m.SelectionDemo),

‎src/dev-app/theme-m3.scss‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,8 @@ html {
5252
density: 0,
5353
));
5454
}
55+
56+
@include mat.utility-classes();
5557
}
5658

5759
@include mat.typography-hierarchy($light-theme);

‎src/dev-app/theme.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ $candy-app-theme: mat.m2-define-light-theme((
2424
@include mat.app-background();
2525
@include mat.elevation-classes();
2626
@include mat.m2-theme($candy-app-theme);
27+
@include mat.utility-classes();
2728

2829
// Include the default theme styles.
2930
@include mat.all-component-themes($candy-app-theme);

‎src/dev-app/utility-classes-demo/BUILD.bazel‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
load("//tools:defaults.bzl", "ng_project", "sass_binary")
2+
3+
package(default_visibility = ["//visibility:public"])
4+
5+
ng_project(
6+
name = "utility-classes-demo",
7+
srcs = glob(["**/*.ts"]),
8+
assets = [
9+
"utility-classes-demo.html",
10+
":utility_classes_demo_scss",
11+
],
12+
deps = [
13+
"//:node_modules/@angular/core",
14+
],
15+
)
16+
17+
sass_binary(
18+
name = "utility_classes_demo_scss",
19+
src = "utility-classes-demo.scss",
20+
)

‎src/dev-app/utility-classes-demo/utility-classes-demo.html‎

Lines changed: 93 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,93 @@
1+
<h1>Utility Classes</h1>
2+
3+
<section>
4+
<h2>Color</h2>
5+
<div class="demo-grid">
6+
<div class="mat-bg-primary demo-box">mat-bg-primary</div>
7+
<div class="mat-bg-primary-container demo-box">mat-bg-primary-container</div>
8+
<div class="mat-bg-secondary demo-box">mat-bg-secondary</div>
9+
<div class="mat-bg-secondary-container demo-box">mat-bg-secondary-container</div>
10+
<div class="mat-bg-error demo-box">mat-bg-error</div>
11+
<div class="mat-bg-error-container demo-box">mat-bg-error-container</div>
12+
<div class="mat-bg-surface demo-box">mat-bg-surface</div>
13+
<div class="mat-bg-surface-variant demo-box">mat-bg-surface-variant</div>
14+
<div class="mat-bg-surface-container-highest demo-box">mat-bg-surface-container-highest</div>
15+
<div class="mat-bg-surface-container-high demo-box">mat-bg-surface-container-high</div>
16+
<div class="mat-bg-surface-container demo-box">mat-bg-surface-container</div>
17+
<div class="mat-bg-surface-container-low demo-box">mat-bg-surface-container-low</div>
18+
<div class="mat-bg-surface-container-lowest demo-box">mat-bg-surface-container-lowest</div>
19+
<div class="mat-bg-inverse-surface demo-box">mat-bg-inverse-surface</div>
20+
<div class="mat-bg-disabled demo-box">mat-bg-disabled</div>
21+
</div>
22+
</section>
23+
24+
<section>
25+
<h2>Text Color</h2>
26+
<div class="demo-grid">
27+
<div class="mat-text-primary">mat-text-primary</div>
28+
<div class="mat-text-secondary">mat-text-secondary</div>
29+
<div class="mat-text-error">mat-text-error</div>
30+
<div class="mat-text-disabled">mat-text-disabled</div>
31+
</div>
32+
</section>
33+
34+
<section>
35+
<h2>Typography</h2>
36+
<div class="demo-typography">
37+
<div class="mat-font-display-large">Display Large</div>
38+
<div class="mat-font-display-medium">Display Medium</div>
39+
<div class="mat-font-display-small">Display Small</div>
40+
<div class="mat-font-headline-large">Headline Large</div>
41+
<div class="mat-font-headline-medium">Headline Medium</div>
42+
<div class="mat-font-headline-small">Headline Small</div>
43+
<div class="mat-font-title-large">Title Large</div>
44+
<div class="mat-font-title-medium">Title Medium</div>
45+
<div class="mat-font-title-small">Title Small</div>
46+
<div class="mat-font-body-large">Body Large</div>
47+
<div class="mat-font-body-medium">Body Medium</div>
48+
<div class="mat-font-body-small">Body Small</div>
49+
</div>
50+
</section>
51+
52+
<section>
53+
<h2>Shape</h2>
54+
<div class="demo-grid">
55+
<div class="mat-corner-extra-small demo-box mat-bg-primary-container">
56+
mat-corner-extra-small
57+
</div>
58+
<div class="mat-corner-small demo-box mat-bg-primary-container">mat-corner-small</div>
59+
<div class="mat-corner-medium demo-box mat-bg-primary-container">mat-corner-medium</div>
60+
<div class="mat-corner-large demo-box mat-bg-primary-container">mat-corner-large</div>
61+
<div class="mat-corner-extra-large demo-box mat-bg-primary-container">
62+
mat-corner-extra-large
63+
</div>
64+
<div class="mat-corner-full demo-box mat-bg-primary-container">mat-corner-full</div>
65+
</div>
66+
</section>
67+
68+
<section>
69+
<h2>Elevation</h2>
70+
<div class="demo-grid">
71+
<div class="mat-shadow-level-1 demo-box mat-bg-surface">mat-shadow-level-1</div>
72+
<div class="mat-shadow-level-2 demo-box mat-bg-surface">mat-shadow-level-2</div>
73+
<div class="mat-shadow-level-3 demo-box mat-bg-surface">mat-shadow-level-3</div>
74+
<div class="mat-shadow-level-4 demo-box mat-bg-surface">mat-shadow-level-4</div>
75+
<div class="mat-shadow-level-5 demo-box mat-bg-surface">mat-shadow-level-5</div>
76+
</div>
77+
</section>
78+
79+
<section>
80+
<h2>Outline</h2>
81+
<div class="demo-grid">
82+
<div class="mat-outline demo-box">mat-outline</div>
83+
<div class="mat-outline-variant demo-box">mat-outline-variant</div>
84+
</div>
85+
</section>
86+
87+
<section>
88+
<h2>Stateful</h2>
89+
<div class="demo-grid">
90+
<div class="mat-stateful demo-box">mat-stateful</div>
91+
<div class="mat-stateful-primary demo-box">mat-stateful-primary</div>
92+
</div>
93+
</section>

‎src/dev-app/utility-classes-demo/utility-classes-demo.scss‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
.demo-grid {
2+
display: grid;
3+
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
4+
gap: 16px;
5+
}
6+
7+
.demo-box {
8+
padding: 16px;
9+
display: flex;
10+
align-items: center;
11+
justify-content: center;
12+
min-height: 100px;
13+
text-align: center;
14+
}
15+
16+
.demo-typography > div {
17+
margin-bottom: 16px;
18+
}

‎src/dev-app/utility-classes-demo/utility-classes-demo.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import {ChangeDetectionStrategy, Component} from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-utility-classes-demo',
5+
templateUrl: './utility-classes-demo.html',
6+
styleUrls: ['./utility-classes-demo.scss'],
7+
changeDetection: ChangeDetectionStrategy.OnPush,
8+
})
9+
export class UtilityClassesDemo {}

‎src/material/BUILD.bazel‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ sass_library(
6565
"//src/material/core/theming:_inspection",
6666
"//src/material/core/theming:_palettes",
6767
"//src/material/core/theming:core_all_theme",
68+
"//src/material/core/tokens:classes",
6869
"//src/material/core/tokens:system",
6970
"//src/material/core/typography",
7071
"//src/material/core/typography:all_typography",

0 commit comments

Comments
 (0)