@fluentui/web-components 2.5.14 → 2.5.16

package/CHANGELOG.json

@@ -2,7 +2,52 @@
   "name": "@fluentui/web-components",
   "entries": [
     {
-      "date": "Mon, 17 Apr 2023 07:38:52 GMT",
+      "date": "Thu, 20 Jul 2023 07:34:52 GMT",
+      "tag": "@fluentui/web-components_v2.5.16",
+      "version": "2.5.16",
+      "comments": {
+        "patch": [
+          {
+            "author": "vnbaaij@outlook.com",
+            "package": "@fluentui/web-components",
+            "commit": "9e52c0283219050674955e656d2934163a52a767",
+            "comment": "fix(web-components): ensures that text area size responds to rows and cols attributes"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 28 Jun 2023 07:37:30 GMT",
+      "tag": "@fluentui/web-components_v2.5.15",
+      "version": "2.5.15",
+      "comments": {
+        "none": [
+          {
+            "author": "martinhochel@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "fbe878e9c9785588197481f172c42c2c0a230292",
+            "comment": "fix: update .npmignore to unify v8 packages and exclude project.json"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 01 Jun 2023 07:38:37 GMT",
+      "tag": "@fluentui/web-components_v2.5.15",
+      "version": "2.5.15",
+      "comments": {
+        "patch": [
+          {
+            "author": "chhol@microsoft.com",
+            "package": "@fluentui/web-components",
+            "commit": "629df3c452dd3d0fd83472eb78ab8c98e22eb96e",
+            "comment": "fix listbox-option selected indicator position in RTL instances"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 17 Apr 2023 07:40:25 GMT",
       "tag": "@fluentui/web-components_v2.5.14",
       "version": "2.5.14",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,30 @@
 # Change Log - @fluentui/web-components
 
-This log was last generated on Mon, 17 Apr 2023 07:38:52 GMT and should not be manually modified.
+This log was last generated on Thu, 20 Jul 2023 07:34:52 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## [2.5.16](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.5.16)
+
+Thu, 20 Jul 2023 07:34:52 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v2.5.15..@fluentui/web-components_v2.5.16)
+
+### Patches
+
+- fix(web-components): ensures that text area size responds to rows and cols attributes ([PR #28135](https://github.com/microsoft/fluentui/pull/28135) by vnbaaij@outlook.com)
+
+## [2.5.15](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.5.15)
+
+Thu, 01 Jun 2023 07:38:37 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v2.5.14..@fluentui/web-components_v2.5.15)
+
+### Patches
+
+- fix listbox-option selected indicator position in RTL instances ([PR #27894](https://github.com/microsoft/fluentui/pull/27894) by chhol@microsoft.com)
+
 ## [2.5.14](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.5.14)
 
-Mon, 17 Apr 2023 07:38:52 GMT 
+Mon, 17 Apr 2023 07:40:25 GMT 
 [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v2.5.13..@fluentui/web-components_v2.5.14)
 
 ### Patches

package/dist/dts/custom-elements.d.ts

@@ -99,5 +99,5 @@ export declare const allComponents: {
     fluentTooltip: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof import("./tooltip/index").Tooltip>;
     fluentTreeView: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").FoundationElementDefinition, typeof TreeView>;
     fluentTreeItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<import("@microsoft/fast-foundation").TreeItemOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<import("@microsoft/fast-foundation").TreeItemOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
-    register(container?: Container | undefined, ...rest: any[]): void;
+    register(container?: Container, ...rest: any[]): void;
 };

package/dist/dts/divider/divider.stories.d.ts

@@ -1,6 +1,24 @@
 declare const _default: {
     title: string;
     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("@microsoft/fast-foundation").Divider>;
+    argTypes: {
+        orientation: {
+            description: string;
+            control: {
+                type: string;
+            };
+            options: string[];
+            default: string;
+        };
+        role: {
+            description: string;
+            control: {
+                type: string;
+            };
+            options: string[];
+            default: string;
+        };
+    };
 };
 export default _default;
 export declare const Divider: any;

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

@@ -24,6 +24,16 @@ declare const _default: {
                 type: string;
             };
         };
+        rows: {
+            control: {
+                type: string;
+            };
+        };
+        cols: {
+            control: {
+                type: string;
+            };
+        };
         resize: {
             options: string[];
             control: {

package/dist/esm/design-system-provider/index.js

@@ -14,11 +14,10 @@ import { accentBaseColor, accentFillActiveDelta, accentFillFocusDelta, accentFil
  */
 const swatchConverter = {
     toView(value) {
-        var _a;
         if (value === null || value === undefined) {
             return null;
         }
-        return (_a = value) === null || _a === void 0 ? void 0 : _a.toColorString();
+        return value === null || value === void 0 ? void 0 : value.toColorString();
     },
     fromView(value) {
         if (value === null || value === undefined) {

package/dist/esm/divider/divider.stories.js

@@ -2,9 +2,31 @@ import { fluentDivider } from './index';
 export default {
     title: 'Components/Divider',
     component: fluentDivider,
+    argTypes: {
+        orientation: {
+            description: 'This controls the orientation',
+            control: { type: 'select' },
+            options: ['horizontal', 'vertical'],
+            default: 'horizontal',
+        },
+        role: {
+            description: 'This controls the role',
+            control: { type: 'select' },
+            options: ['presentation', 'separator'],
+            default: 'presentation',
+        },
+    },
 };
-const DividerTemplate = () => `<fluent-divider role="presentation"></fluent-divider>`;
+const DividerTemplate = ({ orientation, role }) => `<div style="height: 40px; width: 100%;"><fluent-divider 
+    ${orientation ? `orientation="${orientation}"` : ''}
+    ${role ? `role="${role}"` : ''}
+  >
+  </fluent-divider></div>`;
 export const Divider = DividerTemplate.bind({});
+Divider.args = {
+    orientation: 'horizontal',
+    role: 'presentation',
+};
 const example = `
 <fluent-divider></fluent-divider>
 `;

package/dist/esm/divider/divider.styles.js

@@ -1,6 +1,6 @@
 import { css } from '@microsoft/fast-element';
 import { display } from '@microsoft/fast-foundation';
-import { neutralStrokeDividerRest, strokeWidth } from '../design-tokens';
+import { designUnit, neutralStrokeDividerRest, strokeWidth } from '../design-tokens';
 export const dividerStyles = (context, definition) => css `
     ${display('block')} :host {
       box-sizing: content-box;
@@ -8,4 +8,11 @@ export const dividerStyles = (context, definition) => css `
       border: none;
       border-top: calc(${strokeWidth} * 1px) solid ${neutralStrokeDividerRest};
     }
+
+    :host([orientation="vertical"]) {
+      border: none;
+      height: 100%;
+      margin: 0 calc(${designUnit} * 1px);
+      border-left: calc(${strokeWidth} * 1px) solid ${neutralStrokeDividerRest};
+  }
   `;

package/dist/esm/listbox-option/listbox-option.styles.js

@@ -5,6 +5,7 @@ import { heightNumber } from '../styles/size';
 import { accentFillRest, controlCornerRadius, designUnit, disabledOpacity, focusStrokeWidth, neutralFillSecondaryActive, neutralFillSecondaryHover, neutralFillSecondaryRest, neutralFillStealthActive, neutralFillStealthFocus, neutralFillStealthHover, neutralFillStealthRest, neutralForegroundRest, strokeWidth, } from '../design-tokens';
 import { typeRampBase } from '../styles/patterns/type-ramp';
 import { focusTreatmentBase } from '../styles/focus';
+import { DirectionalStyleSheetBehavior } from '../styles/direction';
 export const optionStyles = (context, definition) => css `
     ${display('inline-flex')} :host {
       position: relative;
@@ -103,7 +104,11 @@ export const optionStyles = (context, definition) => css `
     ::slotted([slot='start']) {
       margin-inline-end: 1ch;
     }
-  `.withBehaviors(forcedColorsStylesheetBehavior(css `
+  `.withBehaviors(new DirectionalStyleSheetBehavior(null, css `
+      :host::before {
+        right: calc((${focusStrokeWidth} - ${strokeWidth}) * 1px);
+      }
+    `), forcedColorsStylesheetBehavior(css `
         :host {
           background: ${SystemColors.ButtonFace};
           border-color: ${SystemColors.ButtonFace};

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

@@ -17,6 +17,12 @@ export default {
         readonly: {
             control: { type: 'boolean' },
         },
+        rows: {
+            control: { type: 'number' },
+        },
+        cols: {
+            control: { type: 'number' },
+        },
         resize: {
             options: ['both', 'horizontal', 'vertical'],
             control: { type: 'select' },
@@ -26,13 +32,15 @@ export default {
         },
     },
 };
-const TextAreaTemplate = ({ appearance, autoFocus, disabled, placeholder, readonly, resize, required }) => `
+const TextAreaTemplate = ({ appearance, autoFocus, disabled, placeholder, readonly, rows, cols, resize, required }) => `
 <fluent-text-area
   ${appearance ? `appearance="${appearance}"` : ''}
   ${autoFocus ? 'autofocus' : ''}
   ${disabled ? 'disabled' : ''}
   ${placeholder ? `placeholder="${placeholder}"` : ''}
   ${readonly ? 'readonly' : ''}
+  ${rows ? `rows="${rows}"` : ''}
+  ${cols ? `cols="${cols}"` : ''}
   ${resize ? `resize="${resize}"` : ''}
   ${required ? 'required' : ''}
 ></fluent-text-area>`;

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

@@ -36,4 +36,12 @@ export const textAreaStyles = (context, definition) => css `
     :host(.resize-vertical) .control {
       resize: vertical;
     }
+
+    :host([cols]) {
+      width: initial;
+    }
+
+    :host([rows]) .control {
+      height: initial;
+    }
   `.withBehaviors(appearanceBehavior('outline', inputOutlineStyles(context, definition, logicalControlSelector)), appearanceBehavior('filled', inputFilledStyles(context, definition, logicalControlSelector)), forcedColorsStylesheetBehavior(inputForcedColorStyles(context, definition, logicalControlSelector)));