Update all components gallery extension (#55)

Description of changes Updates the all component gallery extension in the following ways: - Use the keyword `gallery` in various extension titles - Use verb/action-based language in the extension command - Add an inline `vscode-link` demo/test
microsoft · Feb 8, 2022 · 00964c0 · 00964c0
1 parent 9eaf6c7
commit 00964c0
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 7 deletions.
diff --git a/default/all-components/README.md b/default/all-components/README.md
@@ -1,4 +1,4 @@
-# All Components Sample Extension
+# All Components Gallery Sample Extension
 
 This sample extension demonstrates every component in the Webview UI Toolkit for Visual Studio Code.
 
@@ -23,4 +23,4 @@ code .
 Once the sample is open inside VS Code you can run the extension by doing the following:
 
 1. Press `F5` to open a new Extension Development Host window
-2. Inside the host window, open the command palette (`Ctrl+Shift+P` or `Cmd+Shift+P` on Mac) and type `Webview UI Toolkit: All Components`
+2. Inside the host window, open the command palette (`Ctrl+Shift+P` or `Cmd+Shift+P` on Mac) and type `Webview UI Toolkit: Open all components gallery`
diff --git a/default/all-components/package.json b/default/all-components/package.json
@@ -22,7 +22,7 @@
     "commands": [
       {
         "command": "all-components.showAllComponents",
-        "title": "Webview UI Toolkit: All Components"
+        "title": "Webview UI Toolkit: Open all components gallery"
       }
     ]
   },

diff --git a/default/all-components/src/panels/AllComponentsPanel.ts b/default/all-components/src/panels/AllComponentsPanel.ts
@@ -61,7 +61,7 @@ export class AllComponentsPanel {
         // Panel view type
         "showAllComponents",
         // Panel title
-        "Webview UI Toolkit: All Components",
+        "Webview UI Toolkit: All Components Gallery",
         // The editor column the panel should be displayed in
         ViewColumn.One,
         // Extra panel configurations
@@ -122,10 +122,10 @@ export class AllComponentsPanel {
     const mainUri = getUri(webview, extensionUri, ["media", "main.js"]);
     const styleUri = getUri(webview, extensionUri, ["media", "style.css"]);
 
-    // Note: Since the below HTML is defined within a JavaScript template literal, all of 
+    // Note: Since the below HTML is defined within a JavaScript template literal, all of
     // the HTML for each component demo can be defined elsewhere and then imported/inserted
     // into the below code. This can help with code readability and organization.
-    // 
+    //
     // Tip: Install the es6-string-html VS Code extension to enable code highlighting below
     return /*html*/ `
       <!DOCTYPE html>
@@ -137,7 +137,7 @@ export class AllComponentsPanel {
             <script type="module" src="${mainUri}"></script>
             <link rel="stylesheet" href="${styleUri}">
             <link rel="stylesheet" href="${codiconsUri}">
-            <title>Webview UI Toolkit: All Components</title>
+            <title>Webview UI Toolkit: All Components Gallery</title>
         </head>
         <body>
           <h1>Webview UI Toolkit Gallery</h1>

diff --git a/default/all-components/src/panels/demos/link.ts b/default/all-components/src/panels/demos/link.ts
@@ -5,5 +5,9 @@ export const linkDemo = /*html*/ `
       <p>Default Link</p>
       <vscode-link href="#">Default</vscode-link>
     </section>
+    <section class="component-example">
+      <p>Inline Link</p>
+      <p>This is a sentence with an <vscode-link href="#">inline link</vscode-link>. How does it look?</p>
+    </section>
   </section>
 `;