feat(ng-add): add preview URLs for theme choices (#13723)

Adds URLs that people can use to preview a theme, before selecting it, when going through the ng-add prompts. Formatting is aligned with https://github.com/angular/angular-cli/blob/907ce5c94c774147c4b52870b3522aed4e087c76/packages/schematics/angular/ng-new/schema.json#L121 Fixes #13708. **A couple of notes:** * Blocked until angular/material.angular.io#549 is merged and released. * Marking this as `patch`, even though it's a `feat`, since it's basically just message changes.
angular · Oct 26, 2018 · f1d1fc5 · f1d1fc5
1 parent 3e6cc77
commit f1d1fc5
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 10 deletions.
diff --git a/src/lib/schematics/ng-add/schema.json b/src/lib/schematics/ng-add/schema.json
@@ -6,27 +6,37 @@
   "properties": {
     "project": {
       "type": "string",
-      "description": "The name of the project.",
+      "description": "Name of the project.",
       "$default": {
         "$source": "projectName"
       }
     },
     "theme": {
-      "enum": ["indigo-pink", "deeppurple-amber", "pink-bluegrey", "purple-green", "custom"],
-      "default": "indigo-pink",
       "description": "The theme to apply",
-      "x-prompt": "Enter a prebuilt theme name, or \"custom\" for a custom theme:"
+      "type": "string",
+      "default": "indigo-pink",
+      "x-prompt": {
+        "message": "Choose a prebuilt theme name, or \"custom\" for a custom theme:",
+        "type": "list",
+        "items": [
+          { "value": "indigo-pink",       "label": "Indigo/Pink        [ Preview: https://material.angular.io?theme=indigo-pink ]" },
+          { "value": "deeppurple-amber",  "label": "Deep Purple/Amber  [ Preview: https://material.angular.io?theme=deeppurple-amber ]" },
+          { "value": "pink-bluegrey",     "label": "Pink/Blue Grey     [ Preview: https://material.angular.io?theme=pink-bluegrey ]" },
+          { "value": "purple-green",      "label": "Purple/Green       [ Preview: https://material.angular.io?theme=purple-green ]" },
+          { "value": "custom",            "label": "Custom" }
+        ]
+      }
     },
     "gestures": {
       "type": "boolean",
       "default": true,
-      "description": "Whether gesture support should be set up or not.",
+      "description": "Whether gesture support should be set up.",
       "x-prompt": "Set up HammerJS for gesture recognition?"
     },
     "animations": {
       "type": "boolean",
       "default": true,
-      "description": "Whether Angular browser animations should be set up or not.",
+      "description": "Whether Angular browser animations should be set up.",
       "x-prompt": "Set up browser animations for Angular Material?"
     }
   },

diff --git a/src/lib/schematics/ng-add/schema.ts b/src/lib/schematics/ng-add/schema.ts
@@ -7,14 +7,13 @@
  */
 
 export interface Schema {
-
-  /** Name of the project to target. */
+  /** Name of the project. */
   project: string;
 
-  /** Whether gesture support should be set up or not. */
+  /** Whether gesture support should be set up. */
   gestures: boolean;
 
-  /** Whether Angular browser animations should be set up or not. */
+  /** Whether Angular browser animations should be set up. */
   animations: boolean;
 
   /** Name of pre-built theme to install. */