@fluentui/web-components 1.6.2 → 1.6.3

package/CHANGELOG.json

@@ -2,7 +2,60 @@
   "name": "@fluentui/web-components",
   "entries": [
     {
-      "date": "Thu, 14 Oct 2021 00:10:48 GMT",
+      "date": "Fri, 22 Oct 2021 19:29:44 GMT",
+      "tag": "@fluentui/web-components_v1.6.3",
+      "version": "1.6.3",
+      "comments": {
+        "none": [
+          {
+            "author": "brookdozer@gmail.com",
+            "package": "@fluentui/web-components",
+            "comment": "Web-components Storybook content updates",
+            "commit": "ed06ea1fabb97a1ee5ee4f73cf2eaac169dc69be"
+          }
+        ],
+        "patch": [
+          {
+            "author": "chhol@microsoft.com",
+            "package": "@fluentui/web-components",
+            "comment": "update foundation package and react documentation",
+            "commit": "ed06ea1fabb97a1ee5ee4f73cf2eaac169dc69be"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 21 Oct 2021 07:28:35 GMT",
+      "tag": "@fluentui/web-components_v1.6.2",
+      "version": "1.6.2",
+      "comments": {
+        "none": [
+          {
+            "author": "elcraig@microsoft.com",
+            "package": "@fluentui/web-components",
+            "comment": "Fix web-components storybook",
+            "commit": "619163b3e099a775a2486a21e0187cec86b2b7c2"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 19 Oct 2021 07:38:09 GMT",
+      "tag": "@fluentui/web-components_v1.6.2",
+      "version": "1.6.2",
+      "comments": {
+        "none": [
+          {
+            "author": "elcraig@microsoft.com",
+            "package": "@fluentui/web-components",
+            "comment": "Move storybook/html dev dep back to web-components and update scripts",
+            "commit": "ed3a8350b8d760cdef9323bb5646012888c75afd"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 14 Oct 2021 00:11:22 GMT",
       "tag": "@fluentui/web-components_v1.6.2",
       "version": "1.6.2",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,21 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Thu, 14 Oct 2021 00:10:48 GMT and should not be manually modified.
+This log was last generated on Fri, 22 Oct 2021 19:29:44 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [1.6.3](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v1.6.3)
+
+Fri, 22 Oct 2021 19:29:44 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v1.6.2..@fluentui/web-components_v1.6.3)
+
+### Patches
+
+- update foundation package and react documentation ([PR #20316](https://github.com/microsoft/fluentui/pull/20316) by chhol@microsoft.com)
+
 ## [1.6.2](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v1.6.2)
 
-Thu, 14 Oct 2021 00:10:48 GMT 
+Thu, 14 Oct 2021 00:11:22 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v1.6.1..@fluentui/web-components_v1.6.2)
 
 ### Patches

package/dist/dts/number-field/number-field.stories.d.ts

@@ -53,6 +53,7 @@ declare const _default: {
             control: {
                 type: string;
             };
+            defaultValue: number;
         };
         size: {
             control: {

package/dist/dts/text-area/text-area.stories.d.ts

@@ -4,6 +4,7 @@ declare const _default: {
     argTypes: {
         appearance: {
             options: string[];
+            defaultValue: string;
             control: {
                 type: string;
             };

package/dist/dts/text-field/text-field.stories.d.ts

@@ -3,8 +3,8 @@ declare const _default: {
     component: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import(".").TextField>;
     argTypes: {
         appearance: {
-            defaultValue: string;
             options: string[];
+            defaultValue: string;
             control: {
                 type: string;
             };

package/dist/esm/anchor/anchor.stories.js

@@ -10,15 +10,16 @@ export default {
     },
 };
 const AnchorTemplate = ({ appearance, label }) => `
-  <fluent-anchor 
+  <fluent-anchor
     ${appearance ? `appearance="${appearance}"` : ''}
-  >
+    href="https://bing.com" target="_blank"
+    >
     ${label}
   </fluent-anchor>
 `;
 export const Anchor = AnchorTemplate.bind({});
 const example = `
-<fluent-anchor href="#">Anchor</fluent-anchor>
+<fluent-anchor href="https://bing.com" target="_blank" appearance="neutral">Anchor</fluent-anchor>
 `;
 Anchor.args = {
     label: 'Anchor',

package/dist/esm/anchored-region/anchored-region.stories.js

@@ -1,4 +1,4 @@
-import { STORY_RENDERED } from '@storybook/core-events';
+import { DOCS_RENDERED } from '@storybook/core-events';
 import addons from '@storybook/addons';
 import { Direction, RtlScrollConverter } from '@microsoft/fast-web-utilities';
 import { AnchoredRegion } from '@microsoft/fast-foundation';
@@ -6,8 +6,8 @@ import AnchoreRegionTemplate from './fixtures/base.html';
 import './index';
 let scalingViewportPreviousXValue = 250;
 let scalingViewportPreviousYValue = 250;
-addons.getChannel().addListener(STORY_RENDERED, (name) => {
-    if (name.toLowerCase().startsWith('components-anchored-region')) {
+addons.getChannel().addListener(DOCS_RENDERED, (name) => {
+    if (name.toLowerCase().includes('anchored region')) {
         scrollViewports();
         setButtonActions();
         const scalingViewportUpdate = document.getElementById('viewport-scaling-update');

package/dist/esm/badge/badge.stories.js

@@ -10,7 +10,7 @@ export default {
     },
 };
 const BadgeTemplate = ({ appearance, label }) => `
-  <fluent-badge 
+  <fluent-badge
     ${appearance ? `appearance="${appearance}"` : ''}
   >${label}</fluent-badge>`;
 export const Badge = BadgeTemplate.bind({});
@@ -21,7 +21,7 @@ Badge.args = {
 Badge.parameters = {
     docs: {
         source: {
-            code: `<fluent-badge appearance="neutral">Text</fluent-badge>`,
+            code: `<fluent-badge appearance="accent">Text</fluent-badge>`,
         },
     },
 };

package/dist/esm/card/card.stories.js

@@ -5,7 +5,7 @@ export default {
 };
 export const Card = () => CardTemplate;
 const example = `
-<fluent-card>Card Content</fluent-card>
+<fluent-card>Card content in default slot</fluent-card>
 `;
 Card.parameters = {
     docs: {

package/dist/esm/checkbox/checkbox.stories.js

@@ -26,13 +26,13 @@ const CheckboxTemplate = ({ checked, disabled, label, required }) => `<fluent-ch
     >${label}</fluent-checkbox>`;
 export const Checkbox = CheckboxTemplate.bind({});
 Checkbox.args = {
-    label: 'Label',
+    label: 'Label string',
     checked: false,
     disabled: false,
     required: false,
 };
 const example = `
-<fluent-checkbox>Checkbox</fluent-checkbox>
+<fluent-checkbox>Label string</fluent-checkbox>
 `;
 Checkbox.parameters = {
     docs: {

package/dist/esm/combobox/combobox.stories.js

@@ -21,6 +21,11 @@ export default {
     },
 };
 const ComboboxTemplate = ({ appearance, autocomplete, position, required }) => `
+  <style>
+    div.docs-story>div:first-child {
+      height: 32em !important;
+    }
+  </style>
   <fluent-combobox
     ${appearance ? `appearance="${appearance}"` : ''}
     ${appearance ? `autocomplete="${autocomplete}"` : ''}

package/dist/esm/data-grid/data-grid.stories.js

@@ -1,7 +1,7 @@
 import { html } from '@microsoft/fast-element';
 import { GenerateHeaderOptions } from '@microsoft/fast-foundation/dist/esm/data-grid/data-grid.options';
 import addons from '@storybook/addons';
-import { STORY_RENDERED } from '@storybook/core-events';
+import { DOCS_RENDERED } from '@storybook/core-events';
 import DataGridTemplate from './fixtures/base.html';
 import './index';
 /* eslint-disable @typescript-eslint/ban-types */
@@ -39,8 +39,8 @@ const customHeaderCellItemTemplate = html `
         :columnDefinition="${x => x}"
     ></fast-data-grid-header-cell>
 `;
-addons.getChannel().addListener(STORY_RENDERED, (name) => {
-    if (name.toLowerCase().startsWith('components-data-grid')) {
+addons.getChannel().addListener(DOCS_RENDERED, (name) => {
+    if (name.toLowerCase().includes('components/data grid')) {
         defaultGridElement = document.getElementById('defaultGrid');
         reset();
         const defaultGridRow = document.getElementById('defaultGridRow');

package/dist/esm/number-field/number-field.stories.js

@@ -34,6 +34,7 @@ export default {
         },
         step: {
             control: { type: 'number' },
+            defaultValue: 1,
         },
         size: {
             control: { type: 'number' },
@@ -71,7 +72,7 @@ NumberField.args = {
     required: false,
 };
 const example = `
-<fluent-number-field></fluent-number-field>
+<fluent-number-field appearance="outline" ></fluent-number-field>
 `;
 NumberField.parameters = {
     docs: {

package/dist/esm/radio-group/radio-group.stories.js

@@ -18,6 +18,7 @@ const RadioGroupTemplate = ({ disabled, required }) => `
   >
     <fluent-radio>Apples</fluent-radio>
     <fluent-radio>Bananas</fluent-radio>
+    <fluent-radio>Tomatoes</fluent-radio>
   </fluent-radio-group>`;
 export const RadioGroup = RadioGroupTemplate.bind({});
 RadioGroup.args = {
@@ -25,10 +26,11 @@ RadioGroup.args = {
     required: false,
 };
 const example = `
-<fluent-radio-group name="numbers">
+<fluent-radio-group name="fruits" >
   <label style="color: --var(neutral-foreground-rest)" slot="label"> Numbers </label>
-  <fluent-radio value="one">One</fluent-radio>
-  <fluent-radio value="two">Two</fluent-radio>
+  <fluent-radio>Apples</fluent-radio>
+  <fluent-radio>Bananas</fluent-radio>
+  <fluent-radio>Bananas</fluent-radio>
 </fluent-radio-group>
 `;
 RadioGroup.parameters = {

package/dist/esm/slider/slider.stories.js

@@ -10,9 +10,9 @@ export default {
     },
 };
 const SliderTemplate = ({ orientation }) => `
-  <fluent-slider 
+  <fluent-slider
     ${orientation ? `orientation="${orientation}"` : ''}
-    min="0" max="100" step="10"
+    min="0" max="100" step="10" style="width:80%;"
   >
     <fluent-slider-label position="0"> 0&#8451; </fluent-slider-label>
     <fluent-slider-label position="10"> 10&#8451; </fluent-slider-label>
@@ -24,7 +24,12 @@ Slider.args = {
     orientation: 'horizontal',
 };
 const example = `
-<fluent-slider></fluent-slider>
+<fluent-slider min="0" max="100" step="10" orientation="horizontal" style="width:80%;">
+  <fluent-slider-label position="0"> 0&#8451; </fluent-slider-label>
+  <fluent-slider-label position="10"> 10&#8451; </fluent-slider-label>
+  <fluent-slider-label position="90"> 90&#8451; </fluent-slider-label>
+  <fluent-slider-label position="100"> 100&#8451; </fluent-slider-label>
+</fluent-slider>
 `;
 Slider.parameters = {
     docs: {

package/dist/esm/switch/switch.stories.js

@@ -15,7 +15,11 @@ const SwitchTemplate = ({ checked, disabled }) => `
 <fluent-switch
   ${checked ? 'checked' : ''}
   ${disabled ? 'disabled' : ''}
-></fluent-switch>
+>
+  <span slot="checked-message">On</span>
+  <span slot="unchecked-message">Off</span>
+  <label for="direction-switch">Captions:</label>
+</fluent-switch>
 `;
 export const Switch = SwitchTemplate.bind({});
 Switch.args = {
@@ -23,7 +27,11 @@ Switch.args = {
     disabled: false,
 };
 const example = `
-<fluent-switch></fluent-switch>
+<fluent-switch>
+  <span slot="checked-message">On</span>
+  <span slot="unchecked-message">Off</span>
+  <label for="direction-switch">Captions:</label>
+</fluent-switch>
 `;
 Switch.parameters = {
     docs: {

package/dist/esm/tabs/tabs.stories.js

@@ -29,10 +29,10 @@ export const Tabs = TabsTemplate.bind({});
 Tabs.args = {
     activeId: 'TabTwo',
     activeIndicator: true,
-    orientation: 'vertical',
+    orientation: 'horizontal',
 };
 const example = `
-<fluent-tabs id="myTab" activeId="TabTwo">
+<fluent-tabs id="myTab" activeId="TabTwo" orientation="horizontal">
   <fluent-tab id="TabOne">Tab one</fluent-tab>
   <fluent-tab id="TabTwo">Tab two</fluent-tab>
   <fluent-tab id="TabThree">Tab three</fluent-tab>

package/dist/esm/text-area/text-area.stories.js

@@ -4,7 +4,8 @@ export default {
     component: fluentTextArea,
     argTypes: {
         appearance: {
-            options: ['filled'],
+            options: ['filled', 'outline'],
+            defaultValue: 'outline',
             control: { type: 'radio' },
         },
         autoFocus: {
@@ -44,7 +45,7 @@ TextArea.args = {
     required: false,
 };
 const example = `
-<fluent-text-area></fluent-text-area>
+<fluent-text-area appearance="outline"></fluent-text-area>
 `;
 TextArea.parameters = {
     docs: {

package/dist/esm/text-field/text-field.stories.js

@@ -4,8 +4,8 @@ export default {
     component: fluentTextField,
     argTypes: {
         appearance: {
-            defaultValue: 'outlined',
-            options: ['filled', 'outlined'],
+            options: ['filled', 'outline'],
+            defaultValue: 'outline',
             control: { type: 'radio' },
         },
         autoFocus: {
@@ -77,7 +77,7 @@ TextField.args = {
     required: false,
 };
 const example = `
-<fluent-text-field></fluent-text-field>
+<fluent-text-field appearance="outline"></fluent-text-field>
 `;
 TextField.parameters = {
     docs: {

package/dist/esm/tree-view/tree-view.stories.js

@@ -12,6 +12,11 @@ export default {
     },
 };
 const TreeViewTemplate = ({ disabled, renderCollapsedNodes }) => `
+<style>
+div.docs-story>div:first-child {
+  height: 22em !important;
+}
+</style>
 <fluent-tree-view
   ${disabled ? 'disabled' : ''}
   ${renderCollapsedNodes ? `render-collapsed-nodes="${renderCollapsedNodes}` : ''}
@@ -48,14 +53,31 @@ TreeView.args = {
 };
 const example = `
 <fluent-tree-view>
-  <fluent-tree-item selected>Daisy</fluent-tree-item>
-  <fluent-tree-item>Sunflower</fluent-tree-item>
-  <fluent-tree-item>Rose</fluent-tree-item>
-  <fluent-divider></fluent-divider>
-  <fluent-tree-item>Petunia</fluent-tree-item>
-  <fluent-tree-item>Tulip</fluent-tree-item>
-</fluent-tree-view>
-`;
+  <fluent-tree-item>
+    Root item 1
+    <fluent-tree-item>
+      Flowers
+      <fluent-tree-item disabled>Daisy</fluent-tree-item>
+      <fluent-tree-item>Sunflower</fluent-tree-item>
+      <fluent-tree-item>Rose</fluent-tree-item>
+    </fluent-tree-item>
+    <fluent-tree-item>Nested item 2</fluent-tree-item>
+    <fluent-tree-item>Nested item 3</fluent-tree-item>
+  </fluent-tree-item>
+  <fluent-tree-item>
+    Root item 2
+    <fluent-divider></fluent-divider>
+    <fluent-tree-item>
+      Flowers
+      <fluent-tree-item disabled>Daisy</fluent-tree-item>
+      <fluent-tree-item>Sunflower</fluent-tree-item>
+      <fluent-tree-item>Rose</fluent-tree-item>
+    </fluent-tree-item>
+    <fluent-tree-item>Nested item 2</fluent-tree-item>
+    <fluent-tree-item>Nested item 3</fluent-tree-item>
+  </fluent-tree-item>
+  <fluent-tree-item> Root item 3 - Leaf Erikson </fluent-tree-item>
+</fluent-tree-view>`;
 TreeView.parameters = {
     docs: {
         source: {