diff --git a/examples/design-system-tutorial/CHANGELOG.json b/examples/design-system-tutorial/CHANGELOG.json index fc8f624726c..744648befa7 100644 --- a/examples/design-system-tutorial/CHANGELOG.json +++ b/examples/design-system-tutorial/CHANGELOG.json @@ -1,6 +1,36 @@ { "name": "fast-design-system-demo", "entries": [ + { + "date": "Thu, 02 Dec 2021 07:11:13 GMT", + "tag": "fast-design-system-demo_v1.0.0", + "version": "1.0.0", + "comments": { + "none": [ + { + "comment": "Bump @microsoft/fast-components to v2.16.6", + "author": "roeisenb@microsoft.com", + "commit": "2ec536794820959f771ebbfe25efd5a4489e7a76", + "package": "fast-design-system-demo" + } + ] + } + }, + { + "date": "Tue, 30 Nov 2021 07:13:40 GMT", + "tag": "fast-design-system-demo_v1.0.0", + "version": "1.0.0", + "comments": { + "patch": [ + { + "comment": "Bump @microsoft/fast-components to v2.16.6", + "author": "jes@microsoft.com", + "commit": "17d3b0af07625b075721a440e932442c45a10044", + "package": "fast-design-system-demo" + } + ] + } + }, { "date": "Tue, 23 Nov 2021 07:12:23 GMT", "tag": "fast-design-system-demo_v1.0.0", diff --git a/examples/design-system-tutorial/CHANGELOG.md b/examples/design-system-tutorial/CHANGELOG.md index dc793be510f..b3aad971c68 100644 --- a/examples/design-system-tutorial/CHANGELOG.md +++ b/examples/design-system-tutorial/CHANGELOG.md @@ -1,11 +1,19 @@ # Change Log - fast-design-system-demo -This log was last generated on Tue, 23 Nov 2021 07:12:23 GMT and should not be manually modified. +This log was last generated on Tue, 30 Nov 2021 07:13:40 GMT and should not be manually modified. ## 1.0.0 +Tue, 30 Nov 2021 07:13:40 GMT + +### Patches + +- Bump @microsoft/fast-components to v2.16.6 (jes@microsoft.com) + +## 1.0.0 + Tue, 23 Nov 2021 07:12:23 GMT ### Patches diff --git a/examples/design-system-tutorial/package.json b/examples/design-system-tutorial/package.json index 51352a4e030..545b39398fd 100644 --- a/examples/design-system-tutorial/package.json +++ b/examples/design-system-tutorial/package.json @@ -13,8 +13,8 @@ "dependencies": { "@microsoft/fast-colors": "^5.1.4", "@microsoft/fast-element": "^1.6.2", - "@microsoft/fast-foundation": "^2.27.0", - "@microsoft/fast-components": "^2.16.5", + "@microsoft/fast-foundation": "^2.27.1", + "@microsoft/fast-components": "^2.16.6", "tslib": "^1.11.1" }, "devDependencies": { diff --git a/packages/tooling/fast-figma-plugin-msft/CHANGELOG.json b/packages/tooling/fast-figma-plugin-msft/CHANGELOG.json index a7c3e252816..7fd19376b4a 100644 --- a/packages/tooling/fast-figma-plugin-msft/CHANGELOG.json +++ b/packages/tooling/fast-figma-plugin-msft/CHANGELOG.json @@ -1,6 +1,36 @@ { "name": "@microsoft/fast-figma-plugin-msft", "entries": [ + { + "date": "Thu, 02 Dec 2021 07:11:13 GMT", + "tag": "@microsoft/fast-figma-plugin-msft_v0.8.16", + "version": "0.8.16", + "comments": { + "none": [ + { + "comment": "Bump @microsoft/fast-components to v2.16.6", + "author": "roeisenb@microsoft.com", + "commit": "2ec536794820959f771ebbfe25efd5a4489e7a76", + "package": "@microsoft/fast-figma-plugin-msft" + } + ] + } + }, + { + "date": "Tue, 30 Nov 2021 07:13:40 GMT", + "tag": "@microsoft/fast-figma-plugin-msft_v0.8.16", + "version": "0.8.16", + "comments": { + "patch": [ + { + "comment": "Bump @microsoft/fast-components to v2.16.6", + "author": "jes@microsoft.com", + "commit": "17d3b0af07625b075721a440e932442c45a10044", + "package": "@microsoft/fast-figma-plugin-msft" + } + ] + } + }, { "date": "Tue, 23 Nov 2021 07:12:23 GMT", "tag": "@microsoft/fast-figma-plugin-msft_v0.8.16", diff --git a/packages/tooling/fast-figma-plugin-msft/CHANGELOG.md b/packages/tooling/fast-figma-plugin-msft/CHANGELOG.md index 4d798ae950c..94ac6730708 100644 --- a/packages/tooling/fast-figma-plugin-msft/CHANGELOG.md +++ b/packages/tooling/fast-figma-plugin-msft/CHANGELOG.md @@ -1,11 +1,19 @@ # Change Log - @microsoft/fast-figma-plugin-msft -This log was last generated on Tue, 23 Nov 2021 07:12:23 GMT and should not be manually modified. +This log was last generated on Tue, 30 Nov 2021 07:13:40 GMT and should not be manually modified. ## 0.8.16 +Tue, 30 Nov 2021 07:13:40 GMT + +### Patches + +- Bump @microsoft/fast-components to v2.16.6 (jes@microsoft.com) + +## 0.8.16 + Tue, 23 Nov 2021 07:12:23 GMT ### Patches diff --git a/packages/tooling/fast-figma-plugin-msft/package.json b/packages/tooling/fast-figma-plugin-msft/package.json index 960be96a7b3..8fe6eb36028 100644 --- a/packages/tooling/fast-figma-plugin-msft/package.json +++ b/packages/tooling/fast-figma-plugin-msft/package.json @@ -29,7 +29,7 @@ "@babel/core": "^7.12.13", "@babel/preset-env": "^7.12.13", "@microsoft/fast-colors": "^5.1.4", - "@microsoft/fast-components": "^2.16.5", + "@microsoft/fast-components": "^2.16.6", "@microsoft/fast-components-react-msft": "^4.32.0", "@microsoft/fast-components-styles-msft": "^4.29.0", "@microsoft/fast-element": "^1.6.2", diff --git a/packages/utilities/fast-react-wrapper/CHANGELOG.json b/packages/utilities/fast-react-wrapper/CHANGELOG.json index df36bb65a03..6b3360bab0a 100644 --- a/packages/utilities/fast-react-wrapper/CHANGELOG.json +++ b/packages/utilities/fast-react-wrapper/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@microsoft/fast-react-wrapper", "entries": [ + { + "date": "Thu, 02 Dec 2021 07:11:13 GMT", + "tag": "@microsoft/fast-react-wrapper_v0.1.17", + "version": "0.1.17", + "comments": { + "none": [ + { + "comment": "Bump @microsoft/fast-element to v1.6.2", + "author": "roeisenb@microsoft.com", + "commit": "2ec536794820959f771ebbfe25efd5a4489e7a76", + "package": "@microsoft/fast-react-wrapper" + } + ] + } + }, { "date": "Tue, 23 Nov 2021 07:12:23 GMT", "tag": "@microsoft/fast-react-wrapper_v0.1.17", diff --git a/packages/utilities/fast-react-wrapper/package.json b/packages/utilities/fast-react-wrapper/package.json index b22f2975f98..478cff5d70b 100644 --- a/packages/utilities/fast-react-wrapper/package.json +++ b/packages/utilities/fast-react-wrapper/package.json @@ -86,7 +86,7 @@ }, "dependencies": { "@microsoft/fast-element": "^1.6.2", - "@microsoft/fast-foundation": "^2.27.0" + "@microsoft/fast-foundation": "^2.27.1" }, "peerDependencies": { "react": ">=16.9.0" diff --git a/packages/web-components/fast-components/CHANGELOG.json b/packages/web-components/fast-components/CHANGELOG.json index 5366b8446ff..971e9153bd6 100644 --- a/packages/web-components/fast-components/CHANGELOG.json +++ b/packages/web-components/fast-components/CHANGELOG.json @@ -1,6 +1,36 @@ { "name": "@microsoft/fast-components", "entries": [ + { + "date": "Thu, 02 Dec 2021 07:11:13 GMT", + "tag": "@microsoft/fast-components_v2.16.6", + "version": "2.16.6", + "comments": { + "none": [ + { + "comment": "docs: corrections to Blazor, webpack, and cdn links", + "author": "roeisenb@microsoft.com", + "commit": "2ec536794820959f771ebbfe25efd5a4489e7a76", + "package": "@microsoft/fast-components" + } + ] + } + }, + { + "date": "Tue, 30 Nov 2021 07:13:40 GMT", + "tag": "@microsoft/fast-components_v2.16.6", + "version": "2.16.6", + "comments": { + "patch": [ + { + "comment": "fix: vertical tabs fromm jumping", + "author": "jes@microsoft.com", + "commit": "17d3b0af07625b075721a440e932442c45a10044", + "package": "@microsoft/fast-components" + } + ] + } + }, { "date": "Tue, 23 Nov 2021 07:12:23 GMT", "tag": "@microsoft/fast-components_v2.16.5", diff --git a/packages/web-components/fast-components/CHANGELOG.md b/packages/web-components/fast-components/CHANGELOG.md index 03a7bce016f..9a4d92cc0e9 100644 --- a/packages/web-components/fast-components/CHANGELOG.md +++ b/packages/web-components/fast-components/CHANGELOG.md @@ -1,9 +1,17 @@ # Change Log - @microsoft/fast-components -This log was last generated on Tue, 23 Nov 2021 07:12:23 GMT and should not be manually modified. +This log was last generated on Tue, 30 Nov 2021 07:13:40 GMT and should not be manually modified. +## 2.16.6 + +Tue, 30 Nov 2021 07:13:40 GMT + +### Patches + +- fix: vertical tabs fromm jumping (jes@microsoft.com) + ## 2.16.5 Tue, 23 Nov 2021 07:12:23 GMT diff --git a/packages/web-components/fast-components/README.md b/packages/web-components/fast-components/README.md index ad929984049..348e694a732 100644 --- a/packages/web-components/fast-components/README.md +++ b/packages/web-components/fast-components/README.md @@ -51,15 +51,21 @@ A pre-bundled script that contains all APIs needed to use FAST Foundation is ava - + ``` -The above CDN location points to the latest release of `fast-components`. It is advised that when you deploy your site or app, you import the specific version you have developed and tested with. +The markup above always references the latest release. When deploying to production, you will want to ship with a specific version. Here's an example of the markup for that: +```html + +``` + +:::note For simplicity, examples throughout the documentation will assume the library has been installed from NPM, but you can always replace the import location with the CDN URL. +::: ## Development diff --git a/packages/web-components/fast-components/package.json b/packages/web-components/fast-components/package.json index 91fe8f9c80b..25423d17a7c 100644 --- a/packages/web-components/fast-components/package.json +++ b/packages/web-components/fast-components/package.json @@ -2,7 +2,7 @@ "name": "@microsoft/fast-components", "description": "A library of Web Components", "sideEffects": false, - "version": "2.16.5", + "version": "2.16.6", "author": { "name": "Microsoft", "url": "https://discord.gg/FcSNfg4" @@ -111,7 +111,7 @@ "dependencies": { "@microsoft/fast-colors": "^5.1.4", "@microsoft/fast-element": "^1.6.2", - "@microsoft/fast-foundation": "^2.27.0", + "@microsoft/fast-foundation": "^2.27.1", "@microsoft/fast-web-utilities": "^5.0.2", "tslib": "^1.13.0", "vscode-html-languageservice": "^4.0.3" diff --git a/packages/web-components/fast-components/src/tabs/fixtures/base.html b/packages/web-components/fast-components/src/tabs/fixtures/base.html index 275e911aa18..0fc90e52160 100644 --- a/packages/web-components/fast-components/src/tabs/fixtures/base.html +++ b/packages/web-components/fast-components/src/tabs/fixtures/base.html @@ -45,13 +45,63 @@

Vertical

Tab two Tab three - Tab one content. This is for testing. + Tab ONE content. This is for testing. Tab three content. This is for testing. +
+ Tab three content. This is for testing. +
+ Tab three content. This is for testing. +
+ Tab three content. This is for testing. +
+ Tab three content. This is for testing. +
+ Tab three content. This is for testing. +
+ Tab three content. This is for testing. +
+ Tab three content. This is for testing. +
+ Tab three content. This is for testing. +
+ Tab three content. This is for testing. +
+ Tab three content. This is for testing. +
+ Tab three content. This is for testing. +
+ Tab three content. This is for testing. +
Tab two content. This is for testing. + Tab three content. This is for testing. Tab three content. This is for testing. +
+ Tab three content. This is for testing. +
+ Tab three content. This is for testing. +
+ Tab three content. This is for testing. +
+ Tab three content. This is for testing. +
+ Tab three content. This is for testing. +
+ Tab three content. This is for testing. +
+ Tab three content. This is for testing. +
+ Tab three content. This is for testing. +
+ Tab three content. This is for testing. +
+ Tab three content. This is for testing. +
+ Tab three content. This is for testing. +
Tab three content. This is for testing. +
diff --git a/packages/web-components/fast-components/src/tabs/tabs.styles.ts b/packages/web-components/fast-components/src/tabs/tabs.styles.ts index 796e9a8d47c..5ddd29b9deb 100644 --- a/packages/web-components/fast-components/src/tabs/tabs.styles.ts +++ b/packages/web-components/fast-components/src/tabs/tabs.styles.ts @@ -89,9 +89,10 @@ export const tabsStyles: ( position: relative; width: max-content; justify-self: end; + align-self: flex-start; width: 100%; - padding: calc((${heightNumber} - ${designUnit}) * 1px) - calc(${designUnit} * 4px) calc((${heightNumber} - ${designUnit}) * 1px) 0; + padding: 0 calc(${designUnit} * 4px) + calc((${heightNumber} - ${designUnit}) * 1px) 0; } :host([orientation="vertical"]) .tabpanel { diff --git a/packages/web-components/fast-element/CHANGELOG.json b/packages/web-components/fast-element/CHANGELOG.json index 803c2741f0d..963a9dee28d 100644 --- a/packages/web-components/fast-element/CHANGELOG.json +++ b/packages/web-components/fast-element/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@microsoft/fast-element", "entries": [ + { + "date": "Thu, 02 Dec 2021 07:11:13 GMT", + "tag": "@microsoft/fast-element_v1.6.2", + "version": "1.6.2", + "comments": { + "none": [ + { + "comment": "docs: corrections to cdn links", + "author": "roeisenb@microsoft.com", + "commit": "2ec536794820959f771ebbfe25efd5a4489e7a76", + "package": "@microsoft/fast-element" + } + ] + } + }, { "date": "Sun, 31 Oct 2021 07:17:45 GMT", "tag": "@microsoft/fast-element_v1.6.2", diff --git a/packages/web-components/fast-element/README.md b/packages/web-components/fast-element/README.md index a663fe11cac..cf398094b50 100644 --- a/packages/web-components/fast-element/README.md +++ b/packages/web-components/fast-element/README.md @@ -38,7 +38,7 @@ A pre-bundled script that contains all APIs needed to build web components with @@ -47,9 +47,11 @@ A pre-bundled script that contains all APIs needed to build web components with ``` -:::important -The above CDN location points to the latest release of `fast-element`. It is advised that when you deploy your site or app, you import the specific version you have developed and tested with. -::: +The markup above always references the latest release. When deploying to production, you will want to ship with a specific version. Here's an example of the markup for that: + +```html + +``` :::note For simplicity, examples throughout the documentation will assume the library has been installed from NPM, but you can always replace the import location with the CDN URL. diff --git a/packages/web-components/fast-foundation/CHANGELOG.json b/packages/web-components/fast-foundation/CHANGELOG.json index bed7e850817..51171c98db6 100644 --- a/packages/web-components/fast-foundation/CHANGELOG.json +++ b/packages/web-components/fast-foundation/CHANGELOG.json @@ -1,6 +1,41 @@ { "name": "@microsoft/fast-foundation", "entries": [ + { + "date": "Thu, 02 Dec 2021 07:11:13 GMT", + "tag": "@microsoft/fast-foundation_v2.27.1", + "version": "2.27.1", + "comments": { + "none": [ + { + "comment": "corrections to Blazor, webpack, and cdn links", + "author": "roeisenb@microsoft.com", + "commit": "2ec536794820959f771ebbfe25efd5a4489e7a76", + "package": "@microsoft/fast-foundation" + }, + { + "comment": "update react itegration docs to address Windows specific setup steps", + "author": "nicholasrice@users.noreply.github.com", + "commit": "5600019854840e196060023b1b095bbb544d9d1a", + "package": "@microsoft/fast-foundation" + }, + { + "comment": "Bump @microsoft/fast-element to v1.6.2", + "author": "roeisenb@microsoft.com", + "commit": "2ec536794820959f771ebbfe25efd5a4489e7a76", + "package": "@microsoft/fast-foundation" + } + ], + "patch": [ + { + "comment": "fix: disabled tree items fire", + "author": "jes@microsoft.com", + "commit": "a0545ff0a7209c43460fc07913aa18685a4851fd", + "package": "@microsoft/fast-foundation" + } + ] + } + }, { "date": "Tue, 23 Nov 2021 07:12:23 GMT", "tag": "@microsoft/fast-foundation_v2.27.0", diff --git a/packages/web-components/fast-foundation/CHANGELOG.md b/packages/web-components/fast-foundation/CHANGELOG.md index 87c776396f5..2be3394d74e 100644 --- a/packages/web-components/fast-foundation/CHANGELOG.md +++ b/packages/web-components/fast-foundation/CHANGELOG.md @@ -1,9 +1,17 @@ # Change Log - @microsoft/fast-foundation -This log was last generated on Tue, 23 Nov 2021 07:12:23 GMT and should not be manually modified. +This log was last generated on Thu, 02 Dec 2021 07:11:13 GMT and should not be manually modified. +## 2.27.1 + +Thu, 02 Dec 2021 07:11:13 GMT + +### Patches + +- fix: disabled tree items fire (jes@microsoft.com) + ## 2.27.0 Tue, 23 Nov 2021 07:12:23 GMT diff --git a/packages/web-components/fast-foundation/README.md b/packages/web-components/fast-foundation/README.md index a7ace11e86b..daa5f9686b4 100644 --- a/packages/web-components/fast-foundation/README.md +++ b/packages/web-components/fast-foundation/README.md @@ -38,7 +38,7 @@ A pre-bundled script that contains all APIs needed to use FAST Foundation is ava @@ -47,6 +47,12 @@ A pre-bundled script that contains all APIs needed to use FAST Foundation is ava ``` -The above CDN location points to the latest release of `fast-foundation`. It is advised that when you deploy your site or app, you import the specific version you have developed and tested with. +The markup above always references the latest release. When deploying to production, you will want to ship with a specific version. Here's an example of the markup for that: -For simplicity, examples throughout the documentation will assume the library has been installed from NPM, but you can always replace the import location with the CDN URL. \ No newline at end of file +```html + +``` + +:::note +For simplicity, examples throughout the documentation will assume the library has been installed from NPM, but you can always replace the import location with the CDN URL. +::: \ No newline at end of file diff --git a/packages/web-components/fast-foundation/docs/integrations/aspnet.md b/packages/web-components/fast-foundation/docs/integrations/aspnet.md index 30ad414759d..c2a7b36ddee 100644 --- a/packages/web-components/fast-foundation/docs/integrations/aspnet.md +++ b/packages/web-components/fast-foundation/docs/integrations/aspnet.md @@ -26,7 +26,13 @@ Now that we've got our basic project setup, we need to add our web components sc To add a CDN script for `fast-components` use the following markup: ```html - + +``` + +The markup above always references the latest release of the components. When deploying to production, you will want to ship with a specific version. Here's an example of the markup for that: + +```html + ``` The best place to put this is typically in your `_Layout.cshtml` file in the script section at the bottom of the ``. diff --git a/packages/web-components/fast-foundation/docs/integrations/blazor.md b/packages/web-components/fast-foundation/docs/integrations/blazor.md index 42b8a5a28fb..f4d9bb457c4 100644 --- a/packages/web-components/fast-foundation/docs/integrations/blazor.md +++ b/packages/web-components/fast-foundation/docs/integrations/blazor.md @@ -19,22 +19,130 @@ dotnet new blazorwasm -o fast-blazor Create a project using the command above if you don't already have one. When the CLI completes, you should have a basic runnable Blazor application. For more information on setting up and using Blazor, [see the official Blazor Getting Started guide](https://docs.microsoft.com/en-us/aspnet/core/blazor/get-started). -## Configuring scripts +## Getting Started with the FluentUI Web Components -Now that we've got our basic project setup, we need to add our web components script and update Blazor accordingly. You can either add the script from our CDN directly, or you can install it with NPM and then add that. +FAST has special Blazor support for Microsoft's FluentUI Web Components. To get started using the Fluent UI Web Components for Blazor, you will first need to install [the official Nuget package for Fluent UI](https://www.nuget.org/packages/Microsoft.Fast.Components.FluentUI/). You can use the following command: -To add a CDN script for `fast-components` use the following markup: +```shell +dotnet add package Microsoft.Fast.Components.FluentUI +``` + +Next, you need to add the web components script. You can either add the script from CDN directly, or you can install it with NPM, whichever you prefer. + +To add the script from CDN use the following markup: ```html - + ``` -The best place to put this is typically in your `index.html` file in the script section at the bottom of the ``. +The markup above always references the latest release of the components. When deploying to production, you will want to ship with a specific version. Here's an example of the markup for that: + +```html + +``` + +The best place to put the script tag is typically in your index.html file in the script section at the bottom of the ``. + +If you wish to leverage NPM instead, run the following command: + +```html +npm install --save @fluentui/web-components +``` + +You can locate the single file script build in the following location: + +```html +node_modules/@fluentui/web-components/dist/web-components.min.js +``` + +Copy this to your `wwwroot/script` folder and reference it with a script tag as described above. :::note -If you are setting up FAST on a Blazor Server project, you will need to escape the `@` character by repeating it in the source link. For more information check out the [Razor Pages syntax documentation](https://docs.microsoft.com/en-us/aspnet/core/mvc/views/razor#razor-syntax). +If you are setting up Fluent UI Web Components on a Blazor Server project, you will need to escape the `@` character by repeating it in the source link. For more information check out the [Razor Pages syntax documentation](/aspnet/core/mvc/views/razor). ::: +### Using the FluentUI Web Components + +With the package installed and the script configured, you can begin using the Fluent UI Web Components in the same way as any other Blazor component. Just be sure to add the following using statement to your views: + +```html +@using Microsoft.Fast.Components.FluentUI +``` + +Here's a small example of a `FluentCard` with a `FluentButton` that uses the Fluent "Accent" appearance: + +```html +@using Microsoft.Fast.Components.FluentUI + + +

Hello World!

+ Click Me + +``` + +If you are using the .NET CLI, you can run your project with the following command from the project folder: + +```shell +dotnet watch run +``` + +Congratulations! You're now set up to use the Fluent UI Web Components with Blazor! + +### Configuring the Design System + +The Fluent UI Web Components are built on FAST's Adaptive UI technology, which enables design customization and personalization, while automatically maintaining accessibility. This is accomplished through setting various "design tokens". The easiest way to accomplish this in Blazor is to wrap the entire UI in a `FluentDesignSystemProvider`. This special element has a number of properties you can set to configure the tokens to your desired settings. Here's an example of changing the "accent base color" and switching the system into dark mode: + +```html + + + + + + + Not found + +

Sorry, there's nothing at this address.

+ + + + +``` + +:::note +Provider token attributes can be changed on-th-fly like any other Blazor component attribute. +::: + +If you are attempting to configure the components for integration into a specific Microsoft product, the following table provides `AccentBaseColor` values you can use: + +Product | AccentBaseColor +------- | --------------- +| Office | #D83B01 | +| Word | #185ABD | +| Excel | #107C41 | +| PowerPoint | #C43E1C | +| Teams | #6264A7 | +| OneNote | #7719AA | +| SharePoint | #03787C | +| Stream | #BC1948 | + +For a list of all available token attributes, [see here](https://github.com/microsoft/fast-blazor/blob/main/src/Microsoft.Fast.Components.FluentUI/Components/FluentDesignSystemProvider.razor#L69). More examples for other components can be found in the `examples` folder [of this repository](https://github.com/microsoft/fast-blazor). + +## Getting Started with the FAST Components + +The FAST team also produces a second set of components with a more configurable design system, called FAST Frame. At this time, there isn't special Blazor support for these components, but they can still be used as normal HTML. To get started using the FAST Frame, you will first need to add a CDN script for `fast-components` use the following markup: + +```html + +``` + +The markup above always references the latest release of the components. When deploying to production, you will want to ship with a specific version. Here's an example of the markup for that: + +```html + +``` + +The best place to put this is typically in your `index.html` file in the script section at the bottom of the ``. + If you wish to leverage NPM instead, run the following command: ```shell @@ -49,7 +157,11 @@ node_modules/@microsoft/fast-components/dist/fast-components.min.js Copy this to your `wwwroot/script` folder and reference it with a script tag as described above. -## Using the components +:::note +If you are setting up Fluent UI Web Components on a Blazor Server project, you will need to escape the `@` character by repeating it in the source link. For more information check out the [Razor Pages syntax documentation](/aspnet/core/mvc/views/razor). +::: + +### Using the FAST Web Components With your script tag added, you can use any component in any of your views. For example, you could put something like this in your `Index.razor` file: @@ -87,38 +199,4 @@ If you are using the .NET CLI, you can run your project with the following comma dotnet watch run ``` -Congratulations! You're now set up to use FAST with Blazor! - -## Using the FluentUI Web Components - -FAST has special Blazor support for Microsoft's FluentUI Web Components. To leverage the FluentUI Design System, you'll need to make a few modifications to your project. - -First, update the script tag to point to the FluentUI Web Components. - -```html - -``` - -Second, change the `fast-` prefix to `fluent-` in any CSS selectors. - -Third, you will want to install [the official Nuget package for FluentUI](https://www.nuget.org/packages/Microsoft.Fast.Components.FluentUI/). You can use the following command: - -```shell -dotnet add package Microsoft.Fast.Components.FluentUI -``` - -With this package installed, you can switch the HTML over to Blazor components. Here's an example: - -```html -@page "/" -@using Microsoft.Fast.Components.FluentUI - - -

Hello World!

- - Click Me - - -``` - -To report issues or provide feedback on `Microsoft.Fast.Components.FluentUI`, please visit [the microsoft/fast-blazor repository](https://github.com/microsoft/fast-blazor). \ No newline at end of file +Congratulations! You're now set up to use FAST Components with Blazor! \ No newline at end of file diff --git a/packages/web-components/fast-foundation/docs/integrations/react.md b/packages/web-components/fast-foundation/docs/integrations/react.md index 5c525b725fe..dc547ad5e1f 100644 --- a/packages/web-components/fast-foundation/docs/integrations/react.md +++ b/packages/web-components/fast-foundation/docs/integrations/react.md @@ -43,6 +43,10 @@ npm install --save @microsoft/fast-components @microsoft/fast-foundation @micros } ``` +:::note +The above will not work on Windows. You can adjust the scripts to use [cross-env](https://www.npmjs.com/package/cross-env) to add Windows support. +::: + **Override the `eslintConfig` field to turn off the 'no-unused-expressions' rule** ```jsonc diff --git a/packages/web-components/fast-foundation/docs/integrations/webpack.md b/packages/web-components/fast-foundation/docs/integrations/webpack.md index 7a6b782dcac..7cefbe206a0 100644 --- a/packages/web-components/fast-foundation/docs/integrations/webpack.md +++ b/packages/web-components/fast-foundation/docs/integrations/webpack.md @@ -80,10 +80,15 @@ Next, in the root of your project folder, add a `tsconfig.json` file to configur You can learn more about `tsconfig.json` options in [the official TypeScript documentation](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html). +:::note +Do not set `useDefineForClassFields` to `true` in your `tsconfig.json` if you are using decorators. These two features conflict at present. This will be resolved in future versions of TypeScript and FAST. +::: + Next, create a `webpack.config.js` file in the root of your project folder with the following source: ```js const { CleanWebpackPlugin } = require("clean-webpack-plugin"); +const path = require('path'); module.exports = function(env, { mode }) { const production = mode === 'production'; @@ -94,7 +99,8 @@ module.exports = function(env, { mode }) { app: ['./src/main.ts'] }, output: { - filename: 'bundle.js' + filename: 'bundle.js', + publicPath:'/' }, resolve: { extensions: ['.ts', '.js'], @@ -107,6 +113,9 @@ module.exports = function(env, { mode }) { devMiddleware: { writeToDisk: true, }, + static: { + directory: path.join(__dirname, './') + } }, plugins: [ new CleanWebpackPlugin() diff --git a/packages/web-components/fast-foundation/package.json b/packages/web-components/fast-foundation/package.json index 97459344cc1..b90f6174195 100644 --- a/packages/web-components/fast-foundation/package.json +++ b/packages/web-components/fast-foundation/package.json @@ -2,7 +2,7 @@ "name": "@microsoft/fast-foundation", "description": "A library of Web Component building blocks", "sideEffects": false, - "version": "2.27.0", + "version": "2.27.1", "author": { "name": "Microsoft", "url": "https://discord.gg/FcSNfg4" diff --git a/packages/web-components/fast-foundation/src/tree-item/tree-item.ts b/packages/web-components/fast-foundation/src/tree-item/tree-item.ts index 96403976c18..ce0337b17ba 100644 --- a/packages/web-components/fast-foundation/src/tree-item/tree-item.ts +++ b/packages/web-components/fast-foundation/src/tree-item/tree-item.ts @@ -130,7 +130,13 @@ export class TreeItem extends FoundationElement { }; private handleSelected(e?: Event): void { - this.$emit("selected-change", e); + if (e?.defaultPrevented) { + return; + } + e?.preventDefault(); + if (!this.disabled) { + this.$emit("selected-change", e); + } } private setExpanded(expanded: boolean): void { diff --git a/packages/web-components/fast-router/CHANGELOG.json b/packages/web-components/fast-router/CHANGELOG.json index e6c8d989f8b..e87811fe8c4 100644 --- a/packages/web-components/fast-router/CHANGELOG.json +++ b/packages/web-components/fast-router/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@microsoft/fast-router", "entries": [ + { + "date": "Thu, 02 Dec 2021 07:11:13 GMT", + "tag": "@microsoft/fast-router_v0.2.11", + "version": "0.2.11", + "comments": { + "none": [ + { + "comment": "docs: corrections to cdn links", + "author": "roeisenb@microsoft.com", + "commit": "2ec536794820959f771ebbfe25efd5a4489e7a76", + "package": "@microsoft/fast-router" + } + ] + } + }, { "date": "Sun, 31 Oct 2021 07:17:45 GMT", "tag": "@microsoft/fast-router_v0.2.11", diff --git a/packages/web-components/fast-router/README.md b/packages/web-components/fast-router/README.md index 15a4f1d42b7..26d38025918 100644 --- a/packages/web-components/fast-router/README.md +++ b/packages/web-components/fast-router/README.md @@ -36,7 +36,7 @@ A pre-bundled script that contains all APIs needed to use FAST Router and FAST E @@ -45,9 +45,11 @@ A pre-bundled script that contains all APIs needed to use FAST Router and FAST E ``` -:::important -The above CDN location points to the latest release of `fast-router`. It is advised that when you deploy your site or app, you import the specific version you have developed and tested with. -::: +The markup above always references the latest release. When deploying to production, you will want to ship with a specific version. Here's an example of the markup for that: + +```html + +``` :::note For simplicity, examples throughout the documentation will assume the library has been installed from NPM, but you can always replace the import location with the CDN URL. @@ -134,17 +136,13 @@ export class AppRouterConfiguration extends RouterConfiguration { ```ts import { FASTElement, customElement, html, css } from '@microsoft/fast-element'; -import { FASTDesignSystemProvider } from '@microsoft/fast-components'; import { FASTRouter } from '@microsoft/fast-router'; import { AppRouterConfiguration } from './routes'; -FASTDesignSystemProvider; FASTRouter; const template = html` - x.routerConfiguration}> - `; const styles = css` @@ -152,7 +150,7 @@ const styles = css` contain: content; } - :host, fast-design-system-provider, fast-router { + :host, fast-router { display: block; width: 100%; height: 100%; diff --git a/sites/fast-color-explorer/CHANGELOG.json b/sites/fast-color-explorer/CHANGELOG.json index e2b6e758dde..a75cb7a9d98 100644 --- a/sites/fast-color-explorer/CHANGELOG.json +++ b/sites/fast-color-explorer/CHANGELOG.json @@ -1,6 +1,36 @@ { "name": "@microsoft/fast-color-explorer", "entries": [ + { + "date": "Thu, 02 Dec 2021 07:11:13 GMT", + "tag": "@microsoft/fast-color-explorer_v1.6.19", + "version": "1.6.19", + "comments": { + "none": [ + { + "comment": "Bump @microsoft/fast-components to v2.16.6", + "author": "roeisenb@microsoft.com", + "commit": "2ec536794820959f771ebbfe25efd5a4489e7a76", + "package": "@microsoft/fast-color-explorer" + } + ] + } + }, + { + "date": "Tue, 30 Nov 2021 07:13:40 GMT", + "tag": "@microsoft/fast-color-explorer_v1.6.19", + "version": "1.6.19", + "comments": { + "patch": [ + { + "comment": "Bump @microsoft/fast-components to v2.16.6", + "author": "jes@microsoft.com", + "commit": "17d3b0af07625b075721a440e932442c45a10044", + "package": "@microsoft/fast-color-explorer" + } + ] + } + }, { "date": "Tue, 23 Nov 2021 07:12:23 GMT", "tag": "@microsoft/fast-color-explorer_v1.6.19", diff --git a/sites/fast-color-explorer/CHANGELOG.md b/sites/fast-color-explorer/CHANGELOG.md index 8323030283d..94dbbe05c86 100644 --- a/sites/fast-color-explorer/CHANGELOG.md +++ b/sites/fast-color-explorer/CHANGELOG.md @@ -1,11 +1,19 @@ # Change Log - @microsoft/fast-color-explorer -This log was last generated on Tue, 23 Nov 2021 07:12:23 GMT and should not be manually modified. +This log was last generated on Tue, 30 Nov 2021 07:13:40 GMT and should not be manually modified. ## 1.6.19 +Tue, 30 Nov 2021 07:13:40 GMT + +### Patches + +- Bump @microsoft/fast-components to v2.16.6 (jes@microsoft.com) + +## 1.6.19 + Tue, 23 Nov 2021 07:12:23 GMT ### Patches diff --git a/sites/fast-color-explorer/package.json b/sites/fast-color-explorer/package.json index 0105237e93d..daea89358db 100644 --- a/sites/fast-color-explorer/package.json +++ b/sites/fast-color-explorer/package.json @@ -71,7 +71,7 @@ }, "dependencies": { "@microsoft/fast-colors": "^5.1.4", - "@microsoft/fast-components": "^2.16.5", + "@microsoft/fast-components": "^2.16.6", "@microsoft/fast-components-react-base": "^4.27.0", "@microsoft/fast-components-react-msft": "^4.32.0", "@microsoft/fast-components-styles-msft": "^4.29.0", diff --git a/sites/fast-component-explorer/CHANGELOG.json b/sites/fast-component-explorer/CHANGELOG.json index ee83322b3a1..49986011047 100644 --- a/sites/fast-component-explorer/CHANGELOG.json +++ b/sites/fast-component-explorer/CHANGELOG.json @@ -1,6 +1,36 @@ { "name": "@microsoft/fast-component-explorer", "entries": [ + { + "date": "Thu, 02 Dec 2021 07:11:13 GMT", + "tag": "@microsoft/fast-component-explorer_v0.17.2", + "version": "0.17.2", + "comments": { + "none": [ + { + "comment": "Bump @microsoft/site-utilities to v0.9.0", + "author": "roeisenb@microsoft.com", + "commit": "2ec536794820959f771ebbfe25efd5a4489e7a76", + "package": "@microsoft/fast-component-explorer" + } + ] + } + }, + { + "date": "Tue, 30 Nov 2021 07:13:40 GMT", + "tag": "@microsoft/fast-component-explorer_v0.17.2", + "version": "0.17.2", + "comments": { + "patch": [ + { + "comment": "Bump @microsoft/site-utilities to v0.9.0", + "author": "jes@microsoft.com", + "commit": "17d3b0af07625b075721a440e932442c45a10044", + "package": "@microsoft/fast-component-explorer" + } + ] + } + }, { "date": "Tue, 23 Nov 2021 07:12:23 GMT", "tag": "@microsoft/fast-component-explorer_v0.17.2", diff --git a/sites/fast-component-explorer/CHANGELOG.md b/sites/fast-component-explorer/CHANGELOG.md index 7d2b6e19b98..0eab3b37b60 100644 --- a/sites/fast-component-explorer/CHANGELOG.md +++ b/sites/fast-component-explorer/CHANGELOG.md @@ -1,11 +1,19 @@ # Change Log - @microsoft/fast-component-explorer -This log was last generated on Tue, 23 Nov 2021 07:12:23 GMT and should not be manually modified. +This log was last generated on Tue, 30 Nov 2021 07:13:40 GMT and should not be manually modified. ## 0.17.2 +Tue, 30 Nov 2021 07:13:40 GMT + +### Patches + +- Bump @microsoft/site-utilities to v0.9.0 (jes@microsoft.com) + +## 0.17.2 + Tue, 23 Nov 2021 07:12:23 GMT ### Patches diff --git a/sites/fast-website/CHANGELOG.json b/sites/fast-website/CHANGELOG.json index 3a06ed154cc..496e6f7f4d7 100644 --- a/sites/fast-website/CHANGELOG.json +++ b/sites/fast-website/CHANGELOG.json @@ -1,6 +1,36 @@ { "name": "@microsoft/fast-website", "entries": [ + { + "date": "Thu, 02 Dec 2021 07:11:13 GMT", + "tag": "@microsoft/fast-website_v1.3.16", + "version": "1.3.16", + "comments": { + "none": [ + { + "comment": "Bump @microsoft/site-utilities to v0.9.0", + "author": "roeisenb@microsoft.com", + "commit": "2ec536794820959f771ebbfe25efd5a4489e7a76", + "package": "@microsoft/fast-website" + } + ] + } + }, + { + "date": "Tue, 30 Nov 2021 07:13:40 GMT", + "tag": "@microsoft/fast-website_v1.3.16", + "version": "1.3.16", + "comments": { + "patch": [ + { + "comment": "Bump @microsoft/site-utilities to v0.9.0", + "author": "jes@microsoft.com", + "commit": "17d3b0af07625b075721a440e932442c45a10044", + "package": "@microsoft/fast-website" + } + ] + } + }, { "date": "Tue, 23 Nov 2021 07:12:23 GMT", "tag": "@microsoft/fast-website_v1.3.16", diff --git a/sites/fast-website/CHANGELOG.md b/sites/fast-website/CHANGELOG.md index de9983ff6af..90c26598260 100644 --- a/sites/fast-website/CHANGELOG.md +++ b/sites/fast-website/CHANGELOG.md @@ -1,11 +1,19 @@ # Change Log - @microsoft/fast-website -This log was last generated on Tue, 23 Nov 2021 07:12:23 GMT and should not be manually modified. +This log was last generated on Tue, 30 Nov 2021 07:13:40 GMT and should not be manually modified. ## 1.3.16 +Tue, 30 Nov 2021 07:13:40 GMT + +### Patches + +- Bump @microsoft/site-utilities to v0.9.0 (jes@microsoft.com) + +## 1.3.16 + Tue, 23 Nov 2021 07:12:23 GMT ### Patches diff --git a/sites/fast-website/package.json b/sites/fast-website/package.json index e325af78b90..7a486291e14 100644 --- a/sites/fast-website/package.json +++ b/sites/fast-website/package.json @@ -10,9 +10,9 @@ "@babel/core": "^7.12.13", "@babel/preset-env": "^7.12.13", "@fluentui/svg-icons": "^1.1.139", - "@microsoft/fast-components": "^2.16.5", + "@microsoft/fast-components": "^2.16.6", "@microsoft/fast-element": "^1.6.2", - "@microsoft/fast-foundation": "^2.27.0", + "@microsoft/fast-foundation": "^2.27.1", "@microsoft/fast-web-utilities": "^5.0.2", "@microsoft/site-utilities": "^0.9.0", "@rollup/plugin-alias": "^3.1.1", diff --git a/sites/site-utilities/CHANGELOG.json b/sites/site-utilities/CHANGELOG.json index 43a4ce132c3..787dffbdbbc 100644 --- a/sites/site-utilities/CHANGELOG.json +++ b/sites/site-utilities/CHANGELOG.json @@ -1,6 +1,36 @@ { "name": "@microsoft/site-utilities", "entries": [ + { + "date": "Thu, 02 Dec 2021 07:11:13 GMT", + "tag": "@microsoft/site-utilities_v0.9.0", + "version": "0.9.0", + "comments": { + "none": [ + { + "comment": "Bump @microsoft/fast-components to v2.16.6", + "author": "roeisenb@microsoft.com", + "commit": "2ec536794820959f771ebbfe25efd5a4489e7a76", + "package": "@microsoft/site-utilities" + } + ] + } + }, + { + "date": "Tue, 30 Nov 2021 07:13:40 GMT", + "tag": "@microsoft/site-utilities_v0.9.0", + "version": "0.9.0", + "comments": { + "patch": [ + { + "comment": "Bump @microsoft/fast-components to v2.16.6", + "author": "jes@microsoft.com", + "commit": "17d3b0af07625b075721a440e932442c45a10044", + "package": "@microsoft/site-utilities" + } + ] + } + }, { "date": "Tue, 23 Nov 2021 07:12:23 GMT", "tag": "@microsoft/site-utilities_v0.9.0", diff --git a/sites/site-utilities/CHANGELOG.md b/sites/site-utilities/CHANGELOG.md index c662e6a3fcb..dbf65bfb49b 100644 --- a/sites/site-utilities/CHANGELOG.md +++ b/sites/site-utilities/CHANGELOG.md @@ -1,11 +1,19 @@ # Change Log - @microsoft/site-utilities -This log was last generated on Tue, 23 Nov 2021 07:12:23 GMT and should not be manually modified. +This log was last generated on Tue, 30 Nov 2021 07:13:40 GMT and should not be manually modified. ## 0.9.0 +Tue, 30 Nov 2021 07:13:40 GMT + +### Patches + +- Bump @microsoft/fast-components to v2.16.6 (jes@microsoft.com) + +## 0.9.0 + Tue, 23 Nov 2021 07:12:23 GMT ### Patches diff --git a/sites/site-utilities/package.json b/sites/site-utilities/package.json index 29ace0c2687..90187dd8837 100644 --- a/sites/site-utilities/package.json +++ b/sites/site-utilities/package.json @@ -59,8 +59,8 @@ }, "dependencies": { "@fluentui/web-components": "^1.2.3", - "@microsoft/fast-components": "^2.16.5", - "@microsoft/fast-foundation": "^2.27.0", + "@microsoft/fast-components": "^2.16.6", + "@microsoft/fast-foundation": "^2.27.1", "@microsoft/fast-tooling": "^0.29.0", "@microsoft/fast-tooling-react": "^2.11.4", "@skatejs/val": "^0.5.0", diff --git a/sites/website/src/docs/components/getting-started.md b/sites/website/src/docs/components/getting-started.md index 3547559b10b..144cf178dc3 100644 --- a/sites/website/src/docs/components/getting-started.md +++ b/sites/website/src/docs/components/getting-started.md @@ -77,17 +77,19 @@ A pre-bundled script that contains all APIs needed to use the components is avai - + ``` -When using either the FAST or Fluent Web Components from CDN, there is no need to register the components. The CDN script includes code that automatically sets up the design system and registers all the components. +The markup above always references the latest release of the components. When deploying to production, you will want to ship with a specific version. Here's an example of the markup for that: -:::important -The above CDN location points to the latest release of `@microsoft/fast-components`. It is advised that when you deploy your site or app, you import the specific version you have developed and tested with. -::: +```html + +``` + +When using either the FAST or [Fluent UI Web Components](https://docs.microsoft.com/en-us/fluent-ui/web-components/) from CDN, there is no need to register the components. The CDN script includes code that automatically sets up the design system and registers all the components. :::note For simplicity, examples throughout the documentation will assume the library has been installed from NPM, but you can always replace the import location with the CDN URL. diff --git a/sites/website/src/docs/design-systems/creating-a-component-library.md b/sites/website/src/docs/design-systems/creating-a-component-library.md index b03bad58b64..858e7aeba63 100644 --- a/sites/website/src/docs/design-systems/creating-a-component-library.md +++ b/sites/website/src/docs/design-systems/creating-a-component-library.md @@ -31,7 +31,7 @@ export class Counter extends FoundationElement { } ``` -One important detail to note is that we do not use the `@customElement` decorator in this case. The `@customElement` decorator forces immediate template and style resolution, and platform component element name registration. This is fine when building application components, or components not intended to be used as part of a library in another application. However, if used for library components, it prevents the consumer of the component from having the opportunity to customize the component in ways that me be critical for their app. `FoundationElement` helps address this challenge. +One important detail to note is that we do not use the `@customElement` decorator in this case. The `@customElement` decorator forces immediate template and style resolution, and platform component element name registration. This is fine when building application components, or components not intended to be used as part of a library in another application. However, if used for library components, it prevents the consumer of the component from having the opportunity to customize the component in ways that might be critical for their app. `FoundationElement` helps address this challenge. ### Define Templates and Styles