Skip to content

Commit ce40c02

Browse files
andrewseguinandrewseguin
authored
fix(material/schematics): always add a custom theme with ng add (#31522)
* fix(material/schematics): always add a custom theme with ng add * fix(material/schematics): add link to system vars
1 parent 74ba5c7 commit ce40c02

File tree

5 files changed

+44
-300
lines changed

5 files changed

+44
-300
lines changed

‎src/material/schematics/ng-add/index.spec.ts

Lines changed: 7 additions & 240 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,7 @@ describe('ng-add schematic', () => {
8787
const workspace = await readWorkspace(tree);
8888
const project = getProjectFromWorkspace(workspace, baseOptions.project);
8989

90-
expectProjectStyleFile(project, '@angular/material/prebuilt-themes/azure-blue.css');
90+
expectProjectStyleFile(project, 'projects/material/src/custom-theme.scss');
9191
});
9292

9393
it('should support adding a custom theme', async () => {
@@ -96,7 +96,7 @@ describe('ng-add schematic', () => {
9696

9797
const tree = await runner.runSchematic(
9898
'ng-add-setup-project',
99-
{...baseOptions, theme: 'custom'},
99+
{...baseOptions, theme: 'azure-blue'},
100100
appTree,
101101
);
102102
const workspace = await readWorkspace(tree);
@@ -116,7 +116,7 @@ describe('ng-add schematic', () => {
116116

117117
const tree = await runner.runSchematic(
118118
'ng-add-setup-project',
119-
{...baseOptions, theme: 'custom'},
119+
{...baseOptions, theme: 'azure-blue'},
120120
appTree,
121121
);
122122
const workspace = await readWorkspace(tree);
@@ -213,108 +213,14 @@ describe('ng-add schematic', () => {
213213
runner.runSchematic('ng-add-setup-project', baseOptions, appTree),
214214
).toBeRejected();
215215
});
216-
217-
it('should warn if the "test" target has been changed', async () => {
218-
overwriteTargetBuilder(appTree, 'test', 'thirdparty-test-builder');
219-
await runner.runSchematic('ng-add-setup-project', baseOptions, appTree);
220-
221-
expect(errorOutput.length).toBe(0);
222-
expect(warnOutput.length).toBe(1);
223-
expect(warnOutput[0]).toMatch(
224-
/not using the default builders.*cannot add the configured theme/,
225-
);
226-
});
227216
});
228217

229218
describe('theme files', () => {
230-
/** Path to the default prebuilt theme file that will be added when running ng-add. */
231-
const defaultPrebuiltThemePath = '@angular/material/prebuilt-themes/azure-blue.css';
232-
233-
/** Writes a specific style file to the workspace in the given tree */
234-
function writeStyleFileToWorkspace(tree: Tree, stylePath: string) {
235-
tree.overwrite(
236-
'/angular.json',
237-
JSON.stringify(
238-
{
239-
version: 1,
240-
projects: {
241-
material: {
242-
projectType: 'application',
243-
root: 'projects/material',
244-
sourceRoot: 'projects/material/src',
245-
prefix: 'app',
246-
architect: {
247-
build: {
248-
builder: '@angular-devkit/build-angular:application',
249-
options: {
250-
outputPath: 'dist/material',
251-
index: 'projects/material/src/index.html',
252-
browser: 'projects/material/src/main.ts',
253-
styles: ['projects/material/src/styles.css', stylePath],
254-
},
255-
},
256-
},
257-
},
258-
},
259-
},
260-
null,
261-
2,
262-
),
263-
);
264-
}
265-
266-
it('should replace existing prebuilt theme files', async () => {
267-
const existingThemePath = '@angular/material/prebuilt-themes/purple-green.css';
268-
writeStyleFileToWorkspace(appTree, existingThemePath);
269-
270-
const tree = await runner.runSchematic('ng-add-setup-project', baseOptions, appTree);
271-
const workspace = await readWorkspace(tree);
272-
const project = getProjectFromWorkspace(workspace, baseOptions.project);
273-
const styles = getProjectTargetOptions(project, 'build')['styles'];
274-
275-
expect(styles)
276-
.not.withContext('Expected the existing prebuilt theme file to be removed.')
277-
.toContain(existingThemePath);
278-
expect(styles)
279-
.withContext('Expected the default prebuilt theme to be added.')
280-
.toContain(defaultPrebuiltThemePath);
281-
});
282-
283-
it('should not replace existing custom theme files', async () => {
284-
writeStyleFileToWorkspace(appTree, './projects/material/custom-theme.scss');
285-
286-
const tree = await runner.runSchematic('ng-add-setup-project', baseOptions, appTree);
287-
const workspace = await readWorkspace(tree);
288-
const project = getProjectFromWorkspace(workspace, baseOptions.project);
289-
const styles = getProjectTargetOptions(project, 'build')['styles'];
290-
291-
expect(styles)
292-
.not.withContext('Expected the default prebuilt theme to be not configured.')
293-
.toContain(defaultPrebuiltThemePath);
294-
expect(errorOutput.length).toBe(1);
295-
expect(errorOutput[0]).toMatch(/Could not add the selected theme/);
296-
});
297-
298-
it('should not add a theme file multiple times', async () => {
299-
writeStyleFileToWorkspace(appTree, defaultPrebuiltThemePath);
300-
301-
const tree = await runner.runSchematic('ng-add-setup-project', baseOptions, appTree);
302-
const workspace = await readWorkspace(tree);
303-
const project = getProjectFromWorkspace(workspace, baseOptions.project);
304-
const styles = getProjectTargetOptions(project, 'build')['styles'];
305-
306-
expect(styles)
307-
.withContext(
308-
'Expected the "styles.css" file and default prebuilt theme to be ' + 'the only styles',
309-
)
310-
.toEqual(['projects/material/src/styles.css', defaultPrebuiltThemePath]);
311-
});
312-
313219
it('should not overwrite existing custom theme files', async () => {
314220
appTree.create('/projects/material/custom-theme.scss', 'custom-theme');
315221
const tree = await runner.runSchematic(
316222
'ng-add-setup-project',
317-
{...baseOptions, theme: 'custom'},
223+
{...baseOptions, theme: 'azure-blue'},
318224
appTree,
319225
);
320226
expect(tree.readContent('/projects/material/custom-theme.scss'))
@@ -323,117 +229,6 @@ describe('ng-add schematic', () => {
323229
});
324230
});
325231

326-
it('should add the global typography class if the body has no classes', async () => {
327-
const tree = await runner.runSchematic(
328-
'ng-add-setup-project',
329-
{
330-
...baseOptions,
331-
typography: true,
332-
},
333-
appTree,
334-
);
335-
const workspace = await readWorkspace(tree);
336-
const project = getProjectFromWorkspace(workspace, baseOptions.project);
337-
338-
const indexFiles = getProjectIndexFiles(project);
339-
expect(indexFiles.length).toBe(1);
340-
341-
indexFiles.forEach(indexPath => {
342-
const buffer = tree.read(indexPath)!;
343-
expect(buffer.toString()).toContain('<body class="mat-typography">');
344-
});
345-
});
346-
347-
it('should add the global typography class if the body has existing classes', async () => {
348-
appTree.overwrite(
349-
'projects/material/src/index.html',
350-
`
351-
<html>
352-
<head></head>
353-
<body class="one two"></body>
354-
</html>
355-
`,
356-
);
357-
358-
const tree = await runner.runSchematic(
359-
'ng-add-setup-project',
360-
{
361-
...baseOptions,
362-
typography: true,
363-
},
364-
appTree,
365-
);
366-
const workspace = await readWorkspace(tree);
367-
const project = getProjectFromWorkspace(workspace, baseOptions.project);
368-
const indexFiles = getProjectIndexFiles(project);
369-
expect(indexFiles.length).toBe(1);
370-
371-
indexFiles.forEach(indexPath => {
372-
const buffer = tree.read(indexPath)!;
373-
expect(buffer.toString()).toContain('<body class="one two mat-typography">');
374-
});
375-
});
376-
377-
it('should not add the global typography class if it exists already', async () => {
378-
appTree.overwrite(
379-
'projects/material/src/index.html',
380-
`
381-
<html>
382-
<head></head>
383-
<body class="one mat-typography two"></body>
384-
</html>
385-
`,
386-
);
387-
388-
const tree = await runner.runSchematic(
389-
'ng-add-setup-project',
390-
{
391-
...baseOptions,
392-
typography: true,
393-
},
394-
appTree,
395-
);
396-
const workspace = await readWorkspace(tree);
397-
const project = getProjectFromWorkspace(workspace, baseOptions.project);
398-
const indexFiles = getProjectIndexFiles(project);
399-
expect(indexFiles.length).toBe(1);
400-
401-
indexFiles.forEach(indexPath => {
402-
const buffer = tree.read(indexPath)!;
403-
expect(buffer.toString()).toContain('<body class="one mat-typography two">');
404-
});
405-
});
406-
407-
it('should not add the global typography class if the user did not opt into it', async () => {
408-
appTree.overwrite(
409-
'projects/material/src/index.html',
410-
`
411-
<html>
412-
<head></head>
413-
<body class="one two"></body>
414-
</html>
415-
`,
416-
);
417-
418-
const tree = await runner.runSchematic(
419-
'ng-add-setup-project',
420-
{
421-
...baseOptions,
422-
typography: false,
423-
},
424-
appTree,
425-
);
426-
const workspace = await readWorkspace(tree);
427-
const project = getProjectFromWorkspace(workspace, baseOptions.project);
428-
const indexFiles = getProjectIndexFiles(project);
429-
expect(indexFiles.length).toBe(1);
430-
431-
indexFiles.forEach(indexPath => {
432-
const buffer = tree.read(indexPath)!;
433-
expect(buffer.toString()).toContain('<body class="one two">');
434-
});
435-
});
436-
437232
describe('using browser builder', () => {
438233
beforeEach(() => {
439234
const config = {
@@ -476,21 +271,7 @@ describe('ng-add schematic', () => {
476271
const workspace = await readWorkspace(tree);
477272
const project = getProjectFromWorkspace(workspace, baseOptions.project);
478273

479-
expectProjectStyleFile(project, '@angular/material/prebuilt-themes/azure-blue.css');
480-
});
481-
482-
it('should add material app styles', async () => {
483-
const tree = await runner.runSchematic('ng-add-setup-project', baseOptions, appTree);
484-
const workspace = await readWorkspace(tree);
485-
const project = getProjectFromWorkspace(workspace, baseOptions.project);
486-
487-
const defaultStylesPath = getProjectStyleFile(project)!;
488-
const htmlContent = tree.read(defaultStylesPath)!.toString();
489-
490-
expect(htmlContent).toContain('html, body { height: 100%; }');
491-
expect(htmlContent).toContain(
492-
'body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }',
493-
);
274+
expectProjectStyleFile(project, 'projects/material/src/custom-theme.scss');
494275
});
495276
});
496277

@@ -536,21 +317,7 @@ describe('ng-add schematic', () => {
536317
const workspace = await readWorkspace(tree);
537318
const project = getProjectFromWorkspace(workspace, baseOptions.project);
538319

539-
expectProjectStyleFile(project, '@angular/material/prebuilt-themes/azure-blue.css');
540-
});
541-
542-
it('should add material app styles', async () => {
543-
const tree = await runner.runSchematic('ng-add-setup-project', baseOptions, appTree);
544-
const workspace = await readWorkspace(tree);
545-
const project = getProjectFromWorkspace(workspace, baseOptions.project);
546-
547-
const defaultStylesPath = getProjectStyleFile(project)!;
548-
const htmlContent = tree.read(defaultStylesPath)!.toString();
549-
550-
expect(htmlContent).toContain('html, body { height: 100%; }');
551-
expect(htmlContent).toContain(
552-
'body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }',
553-
);
320+
expectProjectStyleFile(project, 'projects/material/src/custom-theme.scss');
554321
});
555322
});
556323

@@ -587,7 +354,7 @@ describe('ng-add schematic', () => {
587354
const workspace = await readWorkspace(tree);
588355
const project = getProjectFromWorkspace(workspace, baseOptions.project);
589356

590-
expectProjectStyleFile(project, '@angular/material/prebuilt-themes/azure-blue.css');
357+
expectProjectStyleFile(project, 'projects/material/src/custom-theme.scss');
591358
});
592359
});
593360
});

‎src/material/schematics/ng-add/schema.json

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
"type": "string",
1717
"default": "azure-blue",
1818
"x-prompt": {
19-
"message": "Choose a prebuilt theme name, or \"custom\" for a custom theme:",
19+
"message": "Select a pair of starter prebuilt color palettes for your Angular Material theme",
2020
"type": "list",
2121
"items": [
2222
{
@@ -34,16 +34,9 @@
3434
{
3535
"value": "cyan-orange",
3636
"label": "Cyan/Orange [Preview: https://material.angular.dev?theme=cyan-orange]"
37-
},
38-
{"value": "custom", "label": "Custom"}
37+
}
3938
]
4039
}
41-
},
42-
"typography": {
43-
"type": "boolean",
44-
"default": false,
45-
"description": "Whether to set up global typography styles.",
46-
"x-prompt": "Set up global Angular Material typography styles?"
4740
}
4841
},
4942
"required": []

‎src/material/schematics/ng-add/setup-project.ts

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,13 +6,13 @@
66
* found in the LICENSE file at https://angular.dev/license
77
*/
88

9-
import {chain, noop, Rule, SchematicContext, Tree} from '@angular-devkit/schematics';
9+
import {chain, Rule, SchematicContext, Tree} from '@angular-devkit/schematics';
1010
import {getProjectFromWorkspace, getProjectStyleFile} from '@angular/cdk/schematics';
1111
import {readWorkspace} from '@schematics/angular/utility';
1212
import {ProjectType} from '@schematics/angular/utility/workspace-models';
1313
import {addFontsToIndex} from './fonts/material-fonts';
1414
import {Schema} from './schema';
15-
import {addThemeToAppStyles, addTypographyClass} from './theming/theming';
15+
import {addThemeToAppStyles} from './theming/theming';
1616

1717
/**
1818
* Scaffolds the basics of a Angular Material application, this includes:
@@ -29,7 +29,6 @@ export default function (options: Schema): Rule {
2929
addThemeToAppStyles(options),
3030
addFontsToIndex(options),
3131
addMaterialAppStyles(options),
32-
options.typography ? addTypographyClass(options) : noop(),
3332
]);
3433
}
3534
context.logger.warn(

0 commit comments

Comments
 (0)