Skip to content

Commit afb4c29

Browse files
crisbetocrisbeto
committed
fix: account for new token data format
Updates the styling page to account for a change in the token docs format. Also outputs the example as HTML since it is now syntax-highlighted.
1 parent 9f3a25f commit afb4c29

File tree

4 files changed

+33
-55
lines changed

4 files changed

+33
-55
lines changed

‎material.angular.io/material.angular.io/material.angular.io/material.angular.io/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
"@angular/cdk-experimental": "^19.0.0-rc.0",
3838
"@angular/common": "^19.0.0-rc.0",
3939
"@angular/compiler": "^19.0.0-rc.0",
40-
"@angular/components-examples": "https://github.com/angular/material2-docs-content.git#3743b2eee49ff4637ad5233f93049e1472ac1c36",
40+
"@angular/components-examples": "https://github.com/angular/material2-docs-content.git#63dd3f7fdbbf85440aa18742c24646b9f9676750",
4141
"@angular/core": "^19.0.0-rc.0",
4242
"@angular/forms": "^19.0.0-rc.0",
4343
"@angular/google-maps": "^19.0.0-rc.0",

‎material.angular.io/material.angular.io/material.angular.io/material.angular.io/src/app/pages/component-viewer/component-styling.html‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,23 +10,23 @@
1010
} @else {
1111
<h2 class="cdk-visually-hidden" tabindex="-1">How to style {{item.id}}</h2>
1212
Styles from the <code>{{item.packageName}}/{{item.id}}</code> package can be customized using
13-
@if (data.length === 1) {
14-
the <code>{{data[0].overridesMixin}}</code> mixin.
13+
@if (data.themes.length === 1) {
14+
the <code>{{data.themes[0].overridesMixin}}</code> mixin.
1515
} @else {
16-
the @for (current of data; track current.name) {{{$last ? ' and ' : ($first ? '' : ', ')}}<code>{{current.overridesMixin}}</code>} mixins.
16+
the @for (current of data.themes; track current.name) {{{$last ? ' and ' : ($first ? '' : ', ')}}<code>{{current.overridesMixin}}</code>} mixins.
1717
}
18-
{{data.length === 1 ? 'This mixin accepts' : 'These mixins accept'}} a set of tokens that control how the components will look, either for the entire app or under a specific selector. {{example ? 'For example:' : ''}}
18+
{{data.themes.length === 1 ? 'This mixin accepts' : 'These mixins accept'}} a set of tokens that control how the components will look, either for the entire app or under a specific selector. {{example ? 'For example:' : ''}}
1919

2020
@if (example) {
2121
<div class="docs-markdown">
22-
<pre>{{example}}</pre>
22+
<pre [innerHTML]="example"></pre>
2323
</div>
2424
}
2525

2626
You can find the full list of supported mixins and tokens below.
2727

2828
<div class="docs-markdown">
29-
@for (current of data; track current.name) {
29+
@for (current of data.themes; track current.name) {
3030
<h3>Tokens supported by <code>{{current.overridesMixin}}</code></h3>
3131
<token-table [tokens]="current.tokens"/>
3232
}

‎material.angular.io/material.angular.io/material.angular.io/material.angular.io/src/app/pages/component-viewer/component-styling.ts‎

Lines changed: 14 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {Component, inject, Injectable} from '@angular/core';
2+
import {DomSanitizer} from '@angular/platform-browser';
23
import {HttpClient} from '@angular/common/http';
34
import {AsyncPipe} from '@angular/common';
45
import {Observable} from 'rxjs';
@@ -8,25 +9,28 @@ import {DocItem} from '../../shared/documentation-items/documentation-items';
89
import {Token, TokenTable} from './token-table';
910

1011
interface StyleOverridesData {
11-
name: string;
12-
overridesMixin: string;
13-
tokens: Token[];
12+
example: string | null;
13+
themes: {
14+
name: string;
15+
overridesMixin: string;
16+
tokens: Token[];
17+
}[];
1418
}
1519

1620
@Injectable({providedIn: 'root'})
1721
class TokenService {
18-
private _cache: Record<string, Observable<StyleOverridesData[]>> = {};
22+
private _cache: Record<string, Observable<StyleOverridesData>> = {};
1923

2024
constructor(private _http: HttpClient) {}
2125

22-
getTokenData(item: DocItem): Observable<StyleOverridesData[]> {
26+
getTokenData(item: DocItem): Observable<StyleOverridesData> {
2327
const url = `/docs-content/tokens/${item.packageName}/${item.id}/${item.id}.json`;
2428

2529
if (this._cache[url]) {
2630
return this._cache[url];
2731
}
2832

29-
const stream = this._http.get<StyleOverridesData[]>(url).pipe(shareReplay(1));
33+
const stream = this._http.get<StyleOverridesData>(url).pipe(shareReplay(1));
3034
this._cache[url] = stream;
3135
return stream;
3236
}
@@ -41,39 +45,13 @@ class TokenService {
4145
export class ComponentStyling {
4246
private componentViewer = inject(ComponentViewer);
4347
private tokenService = inject(TokenService);
48+
private domSanitizer = inject(DomSanitizer);
4449
protected docItem = this.componentViewer.componentDocItem;
4550
protected dataStream =
4651
this.docItem.pipe(switchMap(item => this.tokenService.getTokenData(item)));
4752
protected hasDataStream = this.dataStream.pipe(
48-
map(data => data.length > 0 && data.some(d => d.tokens.length > 0)));
53+
map(data => data.themes.length > 0 && data.themes.some(d => d.tokens.length > 0)));
4954

50-
protected exampleStream = this.dataStream.pipe(map(data => {
51-
const mixin = data.find(d => d.tokens.length > 0);
52-
53-
if (!mixin) {
54-
return null;
55-
}
56-
57-
// Pick out a couple of color tokens to show as examples.
58-
const firstToken = mixin.tokens.find(token => token.type === 'color');
59-
const secondToken = mixin.tokens.find(token => token.type === 'color' && token !== firstToken);
60-
61-
if (!firstToken) {
62-
return null;
63-
}
64-
65-
const lines = [
66-
`@use '@angular/material' as mat;`,
67-
``,
68-
`// Customize the entire app. Change :root to your selector if you want to scope the styles.`,
69-
`:root {`,
70-
` @include mat.${mixin.overridesMixin}((`,
71-
` ${firstToken.overridesName}: orange,`,
72-
...(secondToken ? [` ${secondToken.overridesName}: red,`] : []),
73-
` ));`,
74-
`}`,
75-
];
76-
77-
return lines.join('\n');
78-
}));
55+
protected exampleStream = this.dataStream.pipe(map(data => data.example ?
56+
this.domSanitizer.bypassSecurityTrustHtml(data.example) : null));
7957
}

‎material.angular.io/material.angular.io/material.angular.io/material.angular.io/yarn.lock‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -482,22 +482,22 @@ __metadata:
482482
languageName: node
483483
linkType: hard
484484

485-
"@angular/components-examples@https://github.com/angular/material2-docs-content.git#3743b2eee49ff4637ad5233f93049e1472ac1c36":
486-
version: 19.1.0-next.0+sha-ade32c6
487-
resolution: "@angular/components-examples@https://github.com/angular/material2-docs-content.git#commit=3743b2eee49ff4637ad5233f93049e1472ac1c36"
485+
"@angular/components-examples@https://github.com/angular/material2-docs-content.git#63dd3f7fdbbf85440aa18742c24646b9f9676750":
486+
version: 19.1.0-next.0+sha-bd75077
487+
resolution: "@angular/components-examples@https://github.com/angular/material2-docs-content.git#commit=63dd3f7fdbbf85440aa18742c24646b9f9676750"
488488
dependencies:
489489
tslib: "npm:^2.3.0"
490490
peerDependencies:
491-
"@angular/cdk": 19.1.0-next.0+sha-ade32c6
492-
"@angular/cdk-experimental": 19.1.0-next.0+sha-ade32c6
491+
"@angular/cdk": 19.1.0-next.0+sha-bd75077
492+
"@angular/cdk-experimental": 19.1.0-next.0+sha-bd75077
493493
"@angular/common": ^19.0.0-0 || ^19.1.0-0 || ^19.2.0-0 || ^19.3.0-0 || ^20.0.0-0
494494
"@angular/core": ^19.0.0-0 || ^19.1.0-0 || ^19.2.0-0 || ^19.3.0-0 || ^20.0.0-0
495-
"@angular/material": 19.1.0-next.0+sha-ade32c6
496-
"@angular/material-date-fns-adapter": 19.1.0-next.0+sha-ade32c6
497-
"@angular/material-experimental": 19.1.0-next.0+sha-ade32c6
498-
"@angular/material-luxon-adapter": 19.1.0-next.0+sha-ade32c6
499-
"@angular/material-moment-adapter": 19.1.0-next.0+sha-ade32c6
500-
checksum: 10c0/b74c8fd617232c7b2f1e2f185682068fb0e1ea29adafa310c304cf4459c0da7d285d1295eeb89b59385b25e9cd04b331ae2340c9f2ab4f3526c39f1c0dde2a1d
495+
"@angular/material": 19.1.0-next.0+sha-bd75077
496+
"@angular/material-date-fns-adapter": 19.1.0-next.0+sha-bd75077
497+
"@angular/material-experimental": 19.1.0-next.0+sha-bd75077
498+
"@angular/material-luxon-adapter": 19.1.0-next.0+sha-bd75077
499+
"@angular/material-moment-adapter": 19.1.0-next.0+sha-bd75077
500+
checksum: 10c0/66097a5a29dcd141882898d80611c299868d8d6e0818de6a1b9d822680ec8a6556c5427b7d0eee1be505602580d5597501cd6d2949a778080d6a8adfb91ce9dd
501501
languageName: node
502502
linkType: hard
503503

@@ -12776,7 +12776,7 @@ __metadata:
1277612776
"@angular/common": "npm:^19.0.0-rc.0"
1277712777
"@angular/compiler": "npm:^19.0.0-rc.0"
1277812778
"@angular/compiler-cli": "npm:^19.0.0-rc.0"
12779-
"@angular/components-examples": "https://github.com/angular/material2-docs-content.git#3743b2eee49ff4637ad5233f93049e1472ac1c36"
12779+
"@angular/components-examples": "https://github.com/angular/material2-docs-content.git#63dd3f7fdbbf85440aa18742c24646b9f9676750"
1278012780
"@angular/core": "npm:^19.0.0-rc.0"
1278112781
"@angular/forms": "npm:^19.0.0-rc.0"
1278212782
"@angular/google-maps": "npm:^19.0.0-rc.0"

0 commit comments

Comments
 (0)