feat(web-components): update package name to align with @fluentui and update component namespace

change/@fluentui-web-components-2020-08-04-15-41-20-users-chhol-update-web-components-package-name.json

@@ -0,0 +1,8 @@
+{
+  "type": "minor",
+  "comment": "feat: update package namespace and update control names to prefix with fluent",
+  "packageName": "@fluentui/web-components",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-08-04T22:41:20.918Z"
+}

package.json

@@ -21,17 +21,17 @@
     "bundle:prod": "lerna run bundle --stream -- --production",
     "bundlesize": "cd scripts && npm run bundlesize",
     "bundlesizecollect": "cd scripts && just-scripts bundle-size-collect",
-    "checkchange": "beachball check  --scope \"!packages/fluentui/*\" --scope \"!packages/web-components\" --changehint \"Run 'yarn change' to generate a change file\"",
+    "checkchange": "beachball check  --scope \"!packages/fluentui/*\" --changehint \"Run 'yarn change' to generate a change file\"",
     "clean": "lerna run clean --stream",
     "codepen": "cd packages/office-ui-fabric-react && node ../../scripts/local-codepen.js",
     "code-style": "lerna run code-style --stream",
     "create-package": "plop --plopfile ./scripts/create-package/plopfile.ts --dest . --require ./scripts/ts-node-register",
-    "change": "beachball change --scope \"!packages/fluentui/*\" --scope \"!packages/web-components\"",
+    "change": "beachball change --scope \"!packages/fluentui/*\"",
     "dom-test": "cd apps/dom-tests && just-scripts jest-dom-with-webpack",
     "generate-version-files": "yarn workspace @uifabric/build just generate-version-files",
     "lint": "lerna run lint --stream",
-    "sync:beachball": "beachball sync --scope \"!packages/fluentui/*\" --scope \"!packages/web-components\"",
-    "publish:beachball": "beachball publish --scope \"!packages/fluentui/*\" --scope \"!packages/web-components\"",
+    "sync:beachball": "beachball sync --scope \"!packages/fluentui/*\"",
+    "publish:beachball": "beachball publish --scope \"!packages/fluentui/*\"",
     "check-for-changed-files": "cd scripts && just-scripts check-for-modified-files",
     "perf": "cross-env PERF=true gulp perf --times=100",
     "perf:debug": "cross-env PERF=true gulp perf:debug --debug",

packages/web-components/.storybook/preview-head.html

@@ -8,7 +8,7 @@
     height: 100%;
   }
 
-  fast-design-system-provider {
+  fluent-design-system-provider {
     flex-grow: 1;
     overflow: auto;
     padding: calc(var(--design-unit) * 2px);

packages/web-components/README.md

@@ -1,28 +1,28 @@
-# FAST Components MSFT
+# Fluent UI Web Components
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
-[![npm version](https://badge.fury.io/js/%40microsoft%2Ffast-components-msft.svg)](https://badge.fury.io/js/%40microsoft%2Ffast-components-msft)
+[![npm version](https://badge.fury.io/js/%40microsoft%2Fweb-components.svg)](https://badge.fury.io/js/%40microsoft%2Fweb-components)
 
-`fast-components-msft` is a library of Web Components that _composes_ `fast-foundation`. `fast-components-msft` uses the same custom element names as `fast-components`, but makes use of different stylesheets that support Microsoft's Fluent design language.
+`@fluentui/web-components` is a library of Web Components that _composes_ `@microsoft/fast-foundation` and supports Microsoft's Fluent design language.
 
 ## Installation
 
 ### From NPM
 
-To install the `fast-components-msft` library, use either `npm` or `yarn` as follows:
+To install the `web-components` library, use either `npm` or `yarn` as follows:
 
 ```shell
-npm install --save @microsoft/fast-components-msft
+npm install --save @fluentui/web-components
 ```
 
 ```shell
-yarn add @microsoft/fast-components-msft
+yarn add @fluentui/web-components
 ```
 
 Within your JavaScript or TypeScript code, you can then import library APIs like this:
 
 ```ts
-import { FASTAnchor } from '@microsoft/fast-components-msft';
+import { FASTAnchor } from '@fluentui/web-components';
 ```
 
 Looking for a setup that integrates with a particular front-end framework or bundler? Check out [our integration docs](http://fast.design/docs/integrations/introduction).
@@ -35,13 +35,13 @@ A pre-bundled script that contains all APIs needed to use FAST Foundation is ava
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <script type="module" src="https://unpkg.com/@microsoft/fast-components-msft"></script>
+    <script type="module" src="https://unpkg.com/@fluentui/web-components"></script>
   </head>
   <!-- ... -->
 </html>
 ```
 
-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 above CDN location points to the latest release of `@fluentui/web-components`. It is advised that when you deploy your site or app, you import the specific version you have developed and tested with.
 
 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.
 

packages/web-components/docs/api-report.md

@@ -1,4 +1,4 @@
-## API Report File for "@microsoft/fast-components-msft"
+## API Report File for "@fluentui/web-components"
 
 > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
 
@@ -154,15 +154,18 @@ export const DividerStyles: import("@microsoft/fast-element").ElementStyles;
 export const elevation: string;
 
 // @public
-export class FASTAccordion extends Accordion {
+export const FlipperStyles: import("@microsoft/fast-element").ElementStyles;
+
+// @public
+export class FluentAccordion extends Accordion {
 }
 
 // @public
-export class FASTAccordionItem extends AccordionItem {
+export class FluentAccordionItem extends AccordionItem {
 }
 
 // @public
-export class FASTAnchor extends Anchor {
+export class FluentAnchor extends Anchor {
     appearance: AnchorAppearance;
     // (undocumented)
     appearanceChanged(oldValue: AnchorAppearance, newValue: AnchorAppearance): void;
@@ -171,13 +174,13 @@ export class FASTAnchor extends Anchor {
 }
 
 // @public
-export class FASTBadge extends Badge {
+export class FluentBadge extends Badge {
     // (undocumented)
     appearance: BadgeAppearance;
     }
 
 // @public
-export class FASTButton extends Button {
+export class FluentButton extends Button {
     appearance: ButtonAppearance;
     // (undocumented)
     appearanceChanged(oldValue: ButtonAppearance, newValue: ButtonAppearance): void;
@@ -186,15 +189,15 @@ export class FASTButton extends Button {
 }
 
 // @public
-export class FASTCard extends Card {
+export class FluentCard extends Card {
 }
 
 // @public
-export class FASTCheckbox extends Checkbox {
+export class FluentCheckbox extends Checkbox {
 }
 
 // @public
-export class FASTDesignSystemProvider extends DesignSystemProvider implements Omit<DesignSystem, 'contrast' | 'fontWeight' | 'neutralForegroundDarkIndex' | 'neutralForegroundLightIndex'> {
+export class FluentDesignSystemProvider extends DesignSystemProvider implements Omit<DesignSystem, 'contrast' | 'fontWeight' | 'neutralForegroundDarkIndex' | 'neutralForegroundLightIndex'> {
     // (undocumented)
     accentBaseColor: string;
     // (undocumented)
@@ -336,67 +339,67 @@ export class FASTDesignSystemProvider extends DesignSystemProvider implements Om
 }
 
 // @public
-export class FASTDialog extends Dialog {
+export class FluentDialog extends Dialog {
 }
 
 // @public
-export class FASTDivider extends Divider {
+export class FluentDivider extends Divider {
 }
 
 // @public
-export class FASTFlipper extends Flipper {
+export class FluentFlipper extends Flipper {
 }
 
 // @public
-export class FASTMenu extends Menu {
+export class FluentMenu extends Menu {
 }
 
 // @public
-export class FASTMenuItem extends MenuItem {
+export class FluentMenuItem extends MenuItem {
 }
 
 // @public
-export class FASTProgress extends BaseProgress {
+export class FluentProgress extends BaseProgress {
 }
 
 // @public
-export class FASTProgressRing extends BaseProgress {
+export class FluentProgressRing extends BaseProgress {
 }
 
 // @public
-export class FASTRadio extends Radio {
+export class FluentRadio extends Radio {
 }
 
 // @public
-export class FASTRadioGroup extends RadioGroup {
+export class FluentRadioGroup extends RadioGroup {
 }
 
 // @public
-export class FASTSlider extends Slider {
+export class FluentSlider extends Slider {
 }
 
 // @public
-export class FASTSliderLabel extends SliderLabel {
+export class FluentSliderLabel extends SliderLabel {
 }
 
 // @public
-export class FASTSwitch extends Switch {
+export class FluentSwitch extends Switch {
 }
 
 // @public
-export class FASTTab extends Tab {
+export class FluentTab extends Tab {
 }
 
 // @public
-export class FASTTabPanel extends TabPanel {
+export class FluentTabPanel extends TabPanel {
 }
 
 // @public
-export class FASTTabs extends Tabs {
+export class FluentTabs extends Tabs {
 }
 
 // @public
-export class FASTTextArea extends TextArea {
+export class FluentTextArea extends TextArea {
     appearance: TextAreaAppearance;
     // @internal (undocumented)
     appearanceChanged(oldValue: TextAreaAppearance, newValue: TextAreaAppearance): void;
@@ -405,7 +408,7 @@ export class FASTTextArea extends TextArea {
 }
 
 // @public
-export class FASTTextField extends TextField {
+export class FluentTextField extends TextField {
     appearance: TextFieldAppearance;
     // @internal (undocumented)
     appearanceChanged(oldValue: TextFieldAppearance, newValue: TextFieldAppearance): void;
@@ -414,16 +417,13 @@ export class FASTTextField extends TextField {
 }
 
 // @public
-export class FASTTreeItem extends TreeItem {
+export class FluentTreeItem extends TreeItem {
 }
 
 // @public
-export class FASTTreeView extends TreeView {
+export class FluentTreeView extends TreeView {
 }
 
-// @public
-export const FlipperStyles: import("@microsoft/fast-element").ElementStyles;
-
 // @public
 export const heightNumber = "(var(--base-height-multiplier) + var(--density)) * var(--design-unit)";
 

packages/web-components/package.json

@@ -1,8 +1,8 @@
 {
-  "name": "@microsoft/fast-components-msft",
+  "name": "@fluentui/web-components",
   "description": "A library of Fluent Web Components",
   "sideEffects": false,
-  "version": "1.6.0",
+  "version": "0.0.1",
   "author": {
     "name": "Microsoft",
     "url": "https://discord.gg/FcSNfg4"
@@ -16,8 +16,8 @@
     "url": "https://github.com/Microsoft/fluentui/issues/new/choose"
   },
   "main": "dist/esm/index.js",
-  "types": "dist/fast-components-msft.d.ts",
-  "unpkg": "dist/fast-components-msft.min.js",
+  "types": "dist/web-components.d.ts",
+  "unpkg": "dist/web-components.min.js",
   "scripts": {
     "clean": "node ./build/clean.js dist",
     "doc": "api-extractor run --local",

packages/web-components/src/accordion/accordion-item/index.ts

@@ -3,20 +3,20 @@ import { AccordionItem, AccordionItemTemplate as template } from '@microsoft/fas
 import { AccordionItemStyles as styles } from './accordion-item.styles';
 
 /**
- * The FAST Accordion Item Element. Implements {@link @microsoft/fast-foundation#AccordionItem},
+ * The Fluent Accordion Item Element. Implements {@link @microsoft/fast-foundation#AccordionItem},
  * {@link @microsoft/fast-foundation#AccordionItemTemplate}
  *
  *
  * @public
  * @remarks
- * HTML Element: \<fast-accordion-item\>
+ * HTML Element: \<fluent-accordion-item\>
  */
 @customElement({
-  name: 'fast-accordion-item',
+  name: 'fluent-accordion-item',
   template,
   styles,
 })
-export class FASTAccordionItem extends AccordionItem {}
+export class FluentAccordionItem extends AccordionItem {}
 
 /**
  * Styles for AccordionItem

packages/web-components/src/accordion/accordion.stories.ts

@@ -1,12 +1,12 @@
-import { FASTDesignSystemProvider } from '../design-system-provider';
+import { FluentDesignSystemProvider } from '../design-system-provider';
 import Examples from './fixtures/base.html';
-import { FASTAccordionItem } from './accordion-item';
-import { FASTAccordion } from '.';
+import { FluentAccordionItem } from './accordion-item';
+import { FluentAccordion } from '.';
 
 // Prevent tree-shaking
-FASTAccordion;
-FASTAccordionItem;
-FASTDesignSystemProvider;
+FluentAccordion;
+FluentAccordionItem;
+FluentDesignSystemProvider;
 
 export default {
   title: 'Accordion',