@fluentui/web-components 2.5.15 → 2.5.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.json CHANGED
@@ -2,7 +2,37 @@
2
2
  "name": "@fluentui/web-components",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 01 Jun 2023 07:36:29 GMT",
5
+ "date": "Thu, 20 Jul 2023 07:34:52 GMT",
6
+ "tag": "@fluentui/web-components_v2.5.16",
7
+ "version": "2.5.16",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "vnbaaij@outlook.com",
12
+ "package": "@fluentui/web-components",
13
+ "commit": "9e52c0283219050674955e656d2934163a52a767",
14
+ "comment": "fix(web-components): ensures that text area size responds to rows and cols attributes"
15
+ }
16
+ ]
17
+ }
18
+ },
19
+ {
20
+ "date": "Wed, 28 Jun 2023 07:37:30 GMT",
21
+ "tag": "@fluentui/web-components_v2.5.15",
22
+ "version": "2.5.15",
23
+ "comments": {
24
+ "none": [
25
+ {
26
+ "author": "martinhochel@microsoft.com",
27
+ "package": "@fluentui/web-components",
28
+ "commit": "fbe878e9c9785588197481f172c42c2c0a230292",
29
+ "comment": "fix: update .npmignore to unify v8 packages and exclude project.json"
30
+ }
31
+ ]
32
+ }
33
+ },
34
+ {
35
+ "date": "Thu, 01 Jun 2023 07:38:37 GMT",
6
36
  "tag": "@fluentui/web-components_v2.5.15",
7
37
  "version": "2.5.15",
8
38
  "comments": {
package/CHANGELOG.md CHANGED
@@ -1,12 +1,21 @@
1
1
  # Change Log - @fluentui/web-components
2
2
 
3
- This log was last generated on Thu, 01 Jun 2023 07:36:29 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 20 Jul 2023 07:34:52 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [2.5.16](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.5.16)
8
+
9
+ Thu, 20 Jul 2023 07:34:52 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v2.5.15..@fluentui/web-components_v2.5.16)
11
+
12
+ ### Patches
13
+
14
+ - 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)
15
+
7
16
  ## [2.5.15](https://github.com/microsoft/fluentui/tree/@fluentui/web-components_v2.5.15)
8
17
 
9
- Thu, 01 Jun 2023 07:36:29 GMT
18
+ Thu, 01 Jun 2023 07:38:37 GMT
10
19
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/web-components_v2.5.14..@fluentui/web-components_v2.5.15)
11
20
 
12
21
  ### Patches
@@ -99,5 +99,5 @@ export declare const allComponents: {
99
99
  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>;
100
100
  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>;
101
101
  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>>;
102
- register(container?: Container | undefined, ...rest: any[]): void;
102
+ register(container?: Container, ...rest: any[]): void;
103
103
  };
@@ -1,6 +1,24 @@
1
1
  declare const _default: {
2
2
  title: string;
3
3
  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>;
4
+ argTypes: {
5
+ orientation: {
6
+ description: string;
7
+ control: {
8
+ type: string;
9
+ };
10
+ options: string[];
11
+ default: string;
12
+ };
13
+ role: {
14
+ description: string;
15
+ control: {
16
+ type: string;
17
+ };
18
+ options: string[];
19
+ default: string;
20
+ };
21
+ };
4
22
  };
5
23
  export default _default;
6
24
  export declare const Divider: any;
@@ -24,6 +24,16 @@ declare const _default: {
24
24
  type: string;
25
25
  };
26
26
  };
27
+ rows: {
28
+ control: {
29
+ type: string;
30
+ };
31
+ };
32
+ cols: {
33
+ control: {
34
+ type: string;
35
+ };
36
+ };
27
37
  resize: {
28
38
  options: string[];
29
39
  control: {
@@ -14,11 +14,10 @@ import { accentBaseColor, accentFillActiveDelta, accentFillFocusDelta, accentFil
14
14
  */
15
15
  const swatchConverter = {
16
16
  toView(value) {
17
- var _a;
18
17
  if (value === null || value === undefined) {
19
18
  return null;
20
19
  }
21
- return (_a = value) === null || _a === void 0 ? void 0 : _a.toColorString();
20
+ return value === null || value === void 0 ? void 0 : value.toColorString();
22
21
  },
23
22
  fromView(value) {
24
23
  if (value === null || value === undefined) {
@@ -2,9 +2,31 @@ import { fluentDivider } from './index';
2
2
  export default {
3
3
  title: 'Components/Divider',
4
4
  component: fluentDivider,
5
+ argTypes: {
6
+ orientation: {
7
+ description: 'This controls the orientation',
8
+ control: { type: 'select' },
9
+ options: ['horizontal', 'vertical'],
10
+ default: 'horizontal',
11
+ },
12
+ role: {
13
+ description: 'This controls the role',
14
+ control: { type: 'select' },
15
+ options: ['presentation', 'separator'],
16
+ default: 'presentation',
17
+ },
18
+ },
5
19
  };
6
- const DividerTemplate = () => `<fluent-divider role="presentation"></fluent-divider>`;
20
+ const DividerTemplate = ({ orientation, role }) => `<div style="height: 40px; width: 100%;"><fluent-divider
21
+ ${orientation ? `orientation="${orientation}"` : ''}
22
+ ${role ? `role="${role}"` : ''}
23
+ >
24
+ </fluent-divider></div>`;
7
25
  export const Divider = DividerTemplate.bind({});
26
+ Divider.args = {
27
+ orientation: 'horizontal',
28
+ role: 'presentation',
29
+ };
8
30
  const example = `
9
31
  <fluent-divider></fluent-divider>
10
32
  `;
@@ -1,6 +1,6 @@
1
1
  import { css } from '@microsoft/fast-element';
2
2
  import { display } from '@microsoft/fast-foundation';
3
- import { neutralStrokeDividerRest, strokeWidth } from '../design-tokens';
3
+ import { designUnit, neutralStrokeDividerRest, strokeWidth } from '../design-tokens';
4
4
  export const dividerStyles = (context, definition) => css `
5
5
  ${display('block')} :host {
6
6
  box-sizing: content-box;
@@ -8,4 +8,11 @@ export const dividerStyles = (context, definition) => css `
8
8
  border: none;
9
9
  border-top: calc(${strokeWidth} * 1px) solid ${neutralStrokeDividerRest};
10
10
  }
11
+
12
+ :host([orientation="vertical"]) {
13
+ border: none;
14
+ height: 100%;
15
+ margin: 0 calc(${designUnit} * 1px);
16
+ border-left: calc(${strokeWidth} * 1px) solid ${neutralStrokeDividerRest};
17
+ }
11
18
  `;
@@ -17,6 +17,12 @@ export default {
17
17
  readonly: {
18
18
  control: { type: 'boolean' },
19
19
  },
20
+ rows: {
21
+ control: { type: 'number' },
22
+ },
23
+ cols: {
24
+ control: { type: 'number' },
25
+ },
20
26
  resize: {
21
27
  options: ['both', 'horizontal', 'vertical'],
22
28
  control: { type: 'select' },
@@ -26,13 +32,15 @@ export default {
26
32
  },
27
33
  },
28
34
  };
29
- const TextAreaTemplate = ({ appearance, autoFocus, disabled, placeholder, readonly, resize, required }) => `
35
+ const TextAreaTemplate = ({ appearance, autoFocus, disabled, placeholder, readonly, rows, cols, resize, required }) => `
30
36
  <fluent-text-area
31
37
  ${appearance ? `appearance="${appearance}"` : ''}
32
38
  ${autoFocus ? 'autofocus' : ''}
33
39
  ${disabled ? 'disabled' : ''}
34
40
  ${placeholder ? `placeholder="${placeholder}"` : ''}
35
41
  ${readonly ? 'readonly' : ''}
42
+ ${rows ? `rows="${rows}"` : ''}
43
+ ${cols ? `cols="${cols}"` : ''}
36
44
  ${resize ? `resize="${resize}"` : ''}
37
45
  ${required ? 'required' : ''}
38
46
  ></fluent-text-area>`;
@@ -36,4 +36,12 @@ export const textAreaStyles = (context, definition) => css `
36
36
  :host(.resize-vertical) .control {
37
37
  resize: vertical;
38
38
  }
39
+
40
+ :host([cols]) {
41
+ width: initial;
42
+ }
43
+
44
+ :host([rows]) .control {
45
+ height: initial;
46
+ }
39
47
  `.withBehaviors(appearanceBehavior('outline', inputOutlineStyles(context, definition, logicalControlSelector)), appearanceBehavior('filled', inputFilledStyles(context, definition, logicalControlSelector)), forcedColorsStylesheetBehavior(inputForcedColorStyles(context, definition, logicalControlSelector)));