update the names for controls to fluent

microsoft · Aug 5, 2020 · 338e685 · 338e685
1 parent 31a6037
commit 338e685
Show file tree

Hide file tree

Showing 78 changed files with 903 additions and 903 deletions.
diff --git a/packages/web-components/.storybook/preview-head.html b/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);

diff --git a/packages/web-components/README.md b/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.
 

diff --git a/packages/web-components/src/accordion/accordion-item/index.ts b/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

diff --git a/packages/web-components/src/accordion/accordion.stories.ts b/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',

diff --git a/packages/web-components/src/accordion/fixtures/base.html b/packages/web-components/src/accordion/fixtures/base.html
@@ -1,17 +1,17 @@
-<fast-design-system-provider use-defaults>
+<fluent-design-system-provider use-defaults>
   <style>
     .icon {
       stroke: var(--accent-fill-rest);
     }
 
-    fast-accordion-item.disabled::part(button) {
+    fluent-accordion-item.disabled::part(button) {
       pointer-events: none;
     }
   </style>
   <h1>Accordion</h1>
   <h4>Default</h4>
-  <fast-accordion>
-    <fast-accordion-item expanded>
+  <fluent-accordion>
+    <fluent-accordion-item expanded>
       <div slot="start">
         <button>1</button>
       </div>
@@ -53,8 +53,8 @@ <h4>Default</h4>
         <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
       </svg>
       Panel one content
-    </fast-accordion-item>
-    <fast-accordion-item>
+    </fluent-accordion-item>
+    <fluent-accordion-item>
       <span slot="heading">Panel two</span>
       <svg
         slot="expanded-icon"
@@ -90,8 +90,8 @@ <h4>Default</h4>
         <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
       </svg>
       Panel two content
-    </fast-accordion-item>
-    <fast-accordion-item expanded>
+    </fluent-accordion-item>
+    <fluent-accordion-item expanded>
       <span slot="heading">Panel three</span>
       <svg
         slot="expanded-icon"
@@ -127,11 +127,11 @@ <h4>Default</h4>
         <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
       </svg>
       Panel three content
-    </fast-accordion-item>
-  </fast-accordion>
+    </fluent-accordion-item>
+  </fluent-accordion>
   <h4>Single expand</h4>
-  <fast-accordion expand-mode="single">
-    <fast-accordion-item>
+  <fluent-accordion expand-mode="single">
+    <fluent-accordion-item>
       <div slot="start">
         <button>1</button>
       </div>
@@ -173,8 +173,8 @@ <h4>Single expand</h4>
         <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
       </svg>
       Panel one content
-    </fast-accordion-item>
-    <fast-accordion-item class="disabled">
+    </fluent-accordion-item>
+    <fluent-accordion-item class="disabled">
       <span slot="heading">Panel Two</span>
       <svg
         slot="expanded-icon"
@@ -210,8 +210,8 @@ <h4>Single expand</h4>
         <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
       </svg>
       Panel two content
-    </fast-accordion-item>
-    <fast-accordion-item>
+    </fluent-accordion-item>
+    <fluent-accordion-item>
       <span slot="heading">Panel three</span>
       <svg
         slot="expanded-icon"
@@ -247,11 +247,11 @@ <h4>Single expand</h4>
         <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
       </svg>
       Panel three content
-    </fast-accordion-item>
-  </fast-accordion>
+    </fluent-accordion-item>
+  </fluent-accordion>
   <h4>With disabled item</h4>
-  <fast-accordion>
-    <fast-accordion-item>
+  <fluent-accordion>
+    <fluent-accordion-item>
       <div slot="start">
         <button>1</button>
       </div>
@@ -293,8 +293,8 @@ <h4>With disabled item</h4>
         <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
       </svg>
       Panel one content
-    </fast-accordion-item>
-    <fast-accordion-item class="disabled">
+    </fluent-accordion-item>
+    <fluent-accordion-item class="disabled">
       <div slot="start">
         <button>1</button>
       </div>
@@ -336,8 +336,8 @@ <h4>With disabled item</h4>
         <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
       </svg>
       Disabled content
-    </fast-accordion-item>
-    <fast-accordion-item expanded>
+    </fluent-accordion-item>
+    <fluent-accordion-item expanded>
       <div slot="start">
         <button>1</button>
       </div>
@@ -379,6 +379,6 @@ <h4>With disabled item</h4>
         <path d="M5.44446 9H12.5556" stroke-linecap="round" stroke-linejoin="round" />
       </svg>
       Panel three content
-    </fast-accordion-item>
-  </fast-accordion>
-</fast-design-system-provider>
+    </fluent-accordion-item>
+  </fluent-accordion>
+</fluent-design-system-provider>
diff --git a/packages/web-components/src/accordion/index.ts b/packages/web-components/src/accordion/index.ts
@@ -5,20 +5,20 @@ import { AccordionStyles as styles } from './accordion.styles';
 export * from './accordion-item/index';
 
 /**
- * The FAST Accordion Element. Implements {@link @microsoft/fast-foundation#Accordion},
+ * The FluentUI Accordion Element. Implements {@link @microsoft/fast-foundation#Accordion},
  * {@link @microsoft/fast-foundation#AccordionTemplate}
  *
  *
  * @public
  * @remarks
- * HTML Element: \<fast-accordion\>
+ * HTML Element: \<fluent-accordion\>
  */
 @customElement({
-  name: 'fast-accordion',
+  name: 'fluent-accordion',
   template,
   styles,
 })
-export class FASTAccordion extends Accordion {}
+export class FluentAccordion extends Accordion {}
 
 /**
  * Styles for Accordion

diff --git a/packages/web-components/src/anchor/anchor.stories.ts b/packages/web-components/src/anchor/anchor.stories.ts
@@ -1,10 +1,10 @@
-import { FASTDesignSystemProvider } from '../design-system-provider';
+import { FluentDesignSystemProvider } from '../design-system-provider';
 import AnchorTemplate from './fixtures/anchor.html';
-import { FASTAnchor } from './';
+import { FluentAnchor } from './';
 
 // Prevent tree-shaking
-FASTAnchor;
-FASTDesignSystemProvider;
+FluentAnchor;
+FluentDesignSystemProvider;
 
 export default {
   title: 'Anchor',

diff --git a/packages/web-components/src/anchor/fixtures/anchor.html b/packages/web-components/src/anchor/fixtures/anchor.html
@@ -1,67 +1,67 @@
-<fast-design-system-provider use-defaults>
+<fluent-design-system-provider use-defaults>
   <h1>Anchor</h1>
 
   <h4>Default</h4>
-  <fast-anchor href="#">Anchor</fast-anchor>
+  <fluent-anchor href="#">Anchor</fluent-anchor>
 
   <h5>With target</h5>
-  <fast-anchor href="https://microsoft.com" target="_blank">Anchor</fast-anchor>
+  <fluent-anchor href="https://microsoft.com" target="_blank">Anchor</fluent-anchor>
 
   <h4>Neutral</h4>
-  <fast-anchor href="#" appearance="neutral">Button</fast-anchor>
+  <fluent-anchor href="#" appearance="neutral">Button</fluent-anchor>
 
   <h4>Accent</h4>
-  <fast-anchor href="#" appearance="accent">Anchor</fast-anchor>
+  <fluent-anchor href="#" appearance="accent">Anchor</fluent-anchor>
 
   <h4>Hypertext</h4>
-  <fast-anchor href="#" appearance="hypertext">Anchor</fast-anchor>
+  <fluent-anchor href="#" appearance="hypertext">Anchor</fluent-anchor>
   <br />
-  <fast-anchor appearance="hypertext">Anchor (no href)</fast-anchor>
+  <fluent-anchor appearance="hypertext">Anchor (no href)</fluent-anchor>
   <p>
     Lorem ipsum dolor sit amet consectetur adipisicing elit. Nesciunt ut aliquam quas quod ipsam cupiditate, voluptate,
     corrupti
-    <fast-anchor appearance="hypertext" href="#">doloremque totam</fast-anchor>
+    <fluent-anchor appearance="hypertext" href="#">doloremque totam</fluent-anchor>
     dicta perspiciatis commodi consequatur reprehenderit laborum aliquid minima. Neque, recusandae. Adipisci.
   </p>
 
   <h4>Lightweight</h4>
-  <fast-anchor href="#" appearance="lightweight">Anchor</fast-anchor>
+  <fluent-anchor href="#" appearance="lightweight">Anchor</fluent-anchor>
 
   <h4>Outline</h4>
-  <fast-anchor href="#" appearance="outline">Anchor</fast-anchor>
+  <fluent-anchor href="#" appearance="outline">Anchor</fluent-anchor>
 
   <h4>Stealth</h4>
-  <fast-anchor href="#" appearance="stealth">Anchor</fast-anchor>
+  <fluent-anchor href="#" appearance="stealth">Anchor</fluent-anchor>
 
   <h4>With start</h4>
-  <fast-anchor href="#">
+  <fluent-anchor href="#">
     Anchor
     <svg slot="start" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z"
       />
     </svg>
-  </fast-anchor>
+  </fluent-anchor>
 
   <h4>With end</h4>
-  <fast-anchor href="#">
+  <fluent-anchor href="#">
     Anchor
     <svg slot="end" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z"
       />
     </svg>
-  </fast-anchor>
+  </fluent-anchor>
 
   <h4>Icon in default slot</h4>
-  <fast-anchor href="#">
+  <fluent-anchor href="#">
     <svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
       <path
         d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z"
       />
     </svg>
-  </fast-anchor>
+  </fluent-anchor>
 
   <h4>With aria-label</h4>
-  <fast-anchor href="#" aria-label="Anchor with aria-label"></fast-anchor>
-</fast-design-system-provider>
+  <fluent-anchor href="#" aria-label="Anchor with aria-label"></fluent-anchor>
+</fluent-design-system-provider>
diff --git a/packages/web-components/src/anchor/index.ts b/packages/web-components/src/anchor/index.ts
@@ -10,25 +10,25 @@ import { AnchorStyles as styles } from './anchor.styles';
 export type AnchorAppearance = ButtonAppearance | 'hypertext';
 
 /**
- * The FAST Anchor Element. Implements {@link @microsoft/fast-foundation#Anchor},
+ * The Fluent Anchor Element. Implements {@link @microsoft/fast-foundation#Anchor},
  * {@link @microsoft/fast-foundation#AnchorTemplate}
  *
  *
  * @public
  * @remarks
- * HTML Element: \<fast-anchor\>
+ * HTML Element: \<fluent-anchor\>
  *
  * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
  */
 @customElement({
-  name: 'fast-anchor',
+  name: 'fluent-anchor',
   template,
   styles,
   shadowOptions: {
     delegatesFocus: true,
   },
 })
-export class FASTAnchor extends Anchor {
+export class FluentAnchor extends Anchor {
   /**
    * The appearance the anchor should have.
    *