diff --git a/change/@fluentui-web-components-7d7304ec-799d-4f98-950d-42e8bf37b003.json b/change/@fluentui-web-components-7d7304ec-799d-4f98-950d-42e8bf37b003.json new file mode 100644 index 0000000000000..362f65275f2cc --- /dev/null +++ b/change/@fluentui-web-components-7d7304ec-799d-4f98-950d-42e8bf37b003.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "Update content for web component overview docs", + "packageName": "@fluentui/web-components", + "email": "brookdozer@gmail.com", + "dependentChangeType": "none" +} diff --git a/packages/web-components/src/_docs/getting-started/overview.stories.mdx b/packages/web-components/src/_docs/getting-started/overview.stories.mdx index 2bdb190f274fb..acb99fdaec294 100644 --- a/packages/web-components/src/_docs/getting-started/overview.stories.mdx +++ b/packages/web-components/src/_docs/getting-started/overview.stories.mdx @@ -2,19 +2,17 @@ import { Meta } from '@storybook/addon-docs'; -## Overview +## The official Fluent UI Web Component library -## What are the Fluent UI Web Components? +Microsoft's [Fluent UI Web Components](https://github.com/microsoft/fluentui/tree/master/packages/web-components) is designed to help you build Fluent web apps using extensible Web Components. The package composes the `@microsoft/fast-foundation` Web Component package and styles it with the [Fluent design language](https://github.com/microsoft/fluentui). +You can use these Web Components flexibly, either from [npm packages](https://www.npmjs.com/package/@fluentui/web-components), from the [CDN](https://unpkg.com/@fluentui/web-components), or you can bring it into your project to customize and extend it. See the [installation page](?path=/docs/getting-started-installation--page) for details. -The Fluent UI Web Components is a library of Web Components that composes `@microsoft/fast-foundation`, styled with design tokens for Microsoft's [Fluent design language](https://github.com/microsoft/fluentui). -It is designed to get you up and running quickly with an extensible set of Web Components for building Fluent UI web applications. - -This storybook provides some documentation and an interactive component playground from [Accordion](?path=/docs/components-accordion--accordion) to [TreeView](?path=/docs/components-tree-view--tree-view) +This storybook provides documentation and an interactive component playground from [Accordion](?path=/docs/components-accordion--accordion) to [TreeView](?path=/docs/components-tree-view--tree-view) to help you understand be - See the **COMPONENTS** _live_ in the side bar. -- See the [installation page](?path=/docs/getting-started-installation--page) for more details -- View the [integration examples](?path=/docs/integrations-introduction--page) - Ember coming soon! -- Check out the [GitHub repo](https://aka.ms/fluentui-web-components) for Web Components, part of the Fluent UI [monorepo](https://github.com/microsoft/fluentui). +- See the [installation page](?path=/docs/getting-started-installation--page) for installation and getting started +- View the [integration examples](?path=/docs/integrations-introduction--page) to leverage the components in your front-end framework +- Check out the [GitHub repo](https://aka.ms/fluentui-web-components) for Web Components, part of the Fluent UI [monorepo](https://github.com/microsoft/fluentui) ### What are Web Components? @@ -24,7 +22,7 @@ This storybook provides some documentation and an interactive component playgrou Fluent UI Web Components is built directly on the W3C Web Component standards, and does not create its own component model. This allows our components to function the same as built-in, native HTML elements. You do not need a framework to use Fluent UI components but you can use them in combination with any framework or library of your choice. See [Integrations](?path=/docs/integrations-introduction--page) for more. -## Joining the community +### Joining the community Looking to get answers to questions or engage with us in realtime? Our community is most active [on Discord](https://discord.gg/FcSNfg4). Submit requests and issues on [GitHub](https://github.com/Microsoft/fast/issues/new/choose), or join us by contributing on [some good first issues via GitHub](https://github.com/Microsoft/fast/labels/community:good-first-issue). diff --git a/packages/web-components/src/_docs/integrations/ember.stories.mdx b/packages/web-components/src/_docs/integrations/ember.stories.mdx new file mode 100644 index 0000000000000..ba4056f5a1708 --- /dev/null +++ b/packages/web-components/src/_docs/integrations/ember.stories.mdx @@ -0,0 +1,107 @@ +import { Meta } from '@storybook/addon-docs'; + + + +Fluent UI Web Components and Ember work great together. + +## Setting up the Ember project + +First, you'll need to make sure that you have Node.js installed. You can learn more and download that [on the official site](https://nodejs.org/). + +With Node.js installed, you can run the following command to install the Ember CLI: + +```shell +npm install -g ember-cli +``` + +With the CLI installed, you have access to the `ember` command-line interface. This can be used to create a new Ember project. For example, to create a new Ember App named "fluent-ember", you would use the following command: + +```shell +ember new fluent-ember --lang en +``` + +When the CLI completes, you should have a basic runnable Ember application. + +## Configuring packages + +Next, we'll install the Fluent UI Web Component packages, along with supporting libraries. To do that, run this command from your new project folder: + +```shell +npm install --save @fluentui/web-components @microsoft/fast-element lodash-es +``` + +## Using the components + +With all the pieces in place, let's run our app in dev mode with `npm start`. The Ember CLI should build your project and make it available on localhost. Right now, it displays a basic welcome message, since we haven't added any code or interesting HTML. Let's change that. + +First, open your `app/app.js` file and add the following code: + +```ts +import { provideFluentDesignSystem, fluentCard, fluentButton, fluentTextField } from '@fluentui/web-components'; + +provideFluentDesignSystem().register(fluentCard(), fluentButton(), fluentTextField()); +``` + +This code uses the Fluent Design System to register the ``, ``, and `` components. Once you save, the dev server will rebuild and refresh your browser. However, you still won't see anything. Open your `application.hbs` file and replace the `` component with the following HTML and then save again. + +```html +

Fluent Ember

+ + Click Me +
+``` + +Now you should see the Fluent web components displayed in your Ember application. + +Next, let's improve this by refactoring it into a component. Stop the CLI and run the following command to scaffold a new Ember component that will be called `fluent-demo`. + +```ts +ember generate component fluent-demo +``` + +Copy your original HTML above and use it to replace the HTML in your `app/components/fluent-demo.hbs` file. Next replace that same HTML in `templates/application.hbs` file with the following Ember component use: + +```html + +``` + +Run `npm start` again and you should see the same output, but now we have moved our web components into a `fluentDemo` Ember component. + +Let's take it a little further. Create a `fluent-demo.js` file in the same folder as your `fluent-demo.hbs` file and paste the following code: + +```js +import Component from '@glimmer/component'; +import { action } from '@ember/object'; +import { tracked } from '@glimmer/tracking'; + +export default class FluentDemoComponent extends Component { + @tracked exampleTextField = ''; + + @action + onClick() { + console.log(this.exampleTextField); + } + + @action + onInput(event) { + this.exampleTextField = event.target.value; + } +} +``` + +Next, update the `fluent-demo.hbs` file with the following HTML: + +```html + +

fluent Ember

+ + Click Me +
+``` + +With this code in place, you now have Fluent Web Components fully binding to data and handling user interactions, all from inside an Ember component. + +Congratulations! You're now set up to use Fluent and Ember! diff --git a/packages/web-components/src/_docs/integrations/vue.stories.mdx b/packages/web-components/src/_docs/integrations/vue.stories.mdx index c61e4f25cb535..7c7894e10e773 100644 --- a/packages/web-components/src/_docs/integrations/vue.stories.mdx +++ b/packages/web-components/src/_docs/integrations/vue.stories.mdx @@ -2,7 +2,7 @@ import { Meta } from '@storybook/addon-docs'; -Fluent UI Web Component works great with Vue. Let's take a look at how you can set up a Vue project, starting from scratch. +Fluent UI Web Components work great with Vue. Let's take a look at how you can set up a Vue project, starting from scratch. ## Setting up the Vue project diff --git a/packages/web-components/src/combobox/combobox.stories.ts b/packages/web-components/src/combobox/combobox.stories.ts index 420c15b7b7805..bae2737962afb 100644 --- a/packages/web-components/src/combobox/combobox.stories.ts +++ b/packages/web-components/src/combobox/combobox.stories.ts @@ -42,7 +42,7 @@ const ComboboxTemplate = ({ appearance, autocomplete, position, required }) => ` Yellow Submarine Abbey Road Let It Be - + `; export const Combobox = ComboboxTemplate.bind({});