From 8778aeccf197c6c101db6259b813a69b5ec0fab9 Mon Sep 17 00:00:00 2001 From: Jane Chu <7559015+janechu@users.noreply.github.com> Date: Wed, 23 Feb 2022 11:43:58 -0800 Subject: [PATCH 1/3] Updated to use the new FAST element 2.0 APIs for creating behaviors and creating element styles --- .../fast-foundation/src/data-grid/data-grid-row.ts | 8 ++++++-- .../fast-foundation/src/data-grid/data-grid.ts | 7 +++++-- .../src/design-system/component-presentation.ts | 4 ++-- .../src/design-token/custom-property-manager.ts | 2 +- .../fast-foundation/src/picker/picker.ts | 14 ++++++++++---- 5 files changed, 24 insertions(+), 11 deletions(-) diff --git a/packages/web-components/fast-foundation/src/data-grid/data-grid-row.ts b/packages/web-components/fast-foundation/src/data-grid/data-grid-row.ts index 7ea6a284bbc..8e4319e5712 100644 --- a/packages/web-components/fast-foundation/src/data-grid/data-grid-row.ts +++ b/packages/web-components/fast-foundation/src/data-grid/data-grid-row.ts @@ -1,5 +1,6 @@ import { attr, + HTMLDirective, observable, RepeatBehavior, RepeatDirective, @@ -175,11 +176,14 @@ export class DataGridRow extends FoundationElement { this.updateItemTemplate(); - this.cellsRepeatBehavior = new RepeatDirective( + const cellsRepeatDirective = new RepeatDirective( x => x.columnDefinitions, x => x.activeCellItemTemplate, { positioning: true } - ).createBehavior(this.cellsPlaceholder); + ); + this.cellsRepeatBehavior = cellsRepeatDirective.createBehavior({ + [cellsRepeatDirective.targetId]: this.cellsPlaceholder, + }); /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */ this.$fastController.addBehaviors([this.cellsRepeatBehavior!]); } diff --git a/packages/web-components/fast-foundation/src/data-grid/data-grid.ts b/packages/web-components/fast-foundation/src/data-grid/data-grid.ts index 3194dfa1f78..40175eb92ae 100644 --- a/packages/web-components/fast-foundation/src/data-grid/data-grid.ts +++ b/packages/web-components/fast-foundation/src/data-grid/data-grid.ts @@ -310,11 +310,14 @@ export class DataGrid extends FoundationElement { this.toggleGeneratedHeader(); - this.rowsRepeatBehavior = new RepeatDirective( + const rowsRepeatDirective = new RepeatDirective( x => x.rowsData, x => x.rowItemTemplate, { positioning: true } - ).createBehavior(this.rowsPlaceholder); + ); + this.rowsRepeatBehavior = rowsRepeatDirective.createBehavior({ + [rowsRepeatDirective.targetId]: this.rowsPlaceholder, + }); /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */ this.$fastController.addBehaviors([this.rowsRepeatBehavior!]); diff --git a/packages/web-components/fast-foundation/src/design-system/component-presentation.ts b/packages/web-components/fast-foundation/src/design-system/component-presentation.ts index c84963fdae6..06f275def57 100644 --- a/packages/web-components/fast-foundation/src/design-system/component-presentation.ts +++ b/packages/web-components/fast-foundation/src/design-system/component-presentation.ts @@ -109,10 +109,10 @@ export class DefaultComponentPresentation implements ComponentPresentation { styles === void 0 ? null : Array.isArray(styles) - ? ElementStyles.create(styles) + ? new ElementStyles(styles) : styles instanceof ElementStyles ? styles - : ElementStyles.create([styles]); + : new ElementStyles([styles]); } /** diff --git a/packages/web-components/fast-foundation/src/design-token/custom-property-manager.ts b/packages/web-components/fast-foundation/src/design-token/custom-property-manager.ts index 8b375ec8e5b..e3bc49b385d 100644 --- a/packages/web-components/fast-foundation/src/design-token/custom-property-manager.ts +++ b/packages/web-components/fast-foundation/src/design-token/custom-property-manager.ts @@ -39,7 +39,7 @@ class ConstructableStyleSheetTarget extends QueuedStyleSheetTarget { const sheet = new CSSStyleSheet(); this.target = (sheet.cssRules[sheet.insertRule(":host{}")] as CSSStyleRule).style; - source.$fastController.addStyles(ElementStyles.create([sheet])); + source.$fastController.addStyles(new ElementStyles([sheet])); } } diff --git a/packages/web-components/fast-foundation/src/picker/picker.ts b/packages/web-components/fast-foundation/src/picker/picker.ts index aa6d824729d..8c5d29068b7 100644 --- a/packages/web-components/fast-foundation/src/picker/picker.ts +++ b/packages/web-components/fast-foundation/src/picker/picker.ts @@ -539,11 +539,14 @@ export class Picker extends FormAssociatedPicker { this.updateListItemTemplate(); this.updateOptionTemplate(); - this.itemsRepeatBehavior = new RepeatDirective( + const itemsRepeatDirective = new RepeatDirective( x => x.selectedItems, x => x.activeListItemTemplate, { positioning: true } - ).createBehavior(this.itemsPlaceholderElement); + ); + this.itemsRepeatBehavior = itemsRepeatDirective.createBehavior({ + [itemsRepeatDirective.targetId]: this.itemsPlaceholderElement, + }); this.inputElement.addEventListener("input", this.handleTextInput); this.inputElement.addEventListener("click", this.handleInputClick); @@ -556,11 +559,14 @@ export class Picker extends FormAssociatedPicker { this.handleMenuOptionsUpdated ); - this.optionsRepeatBehavior = new RepeatDirective( + const optionsRepeatDirective = new RepeatDirective( x => x.filteredOptionsList, x => x.activeMenuOptionTemplate, { positioning: true } - ).createBehavior(this.optionsPlaceholder); + ); + this.optionsRepeatBehavior = optionsRepeatDirective.createBehavior({ + [optionsRepeatDirective.targetId]: this.optionsPlaceholder, + }); /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */ this.$fastController.addBehaviors([this.optionsRepeatBehavior!]); From 0f572973ed35ea74b2b34ce27021f3ed6ab0507e Mon Sep 17 00:00:00 2001 From: Jane Chu <7559015+janechu@users.noreply.github.com> Date: Wed, 23 Feb 2022 11:46:43 -0800 Subject: [PATCH 2/3] Change files --- ...st-foundation-3f378ae2-8f62-4b34-a458-937dc73de19e.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@microsoft-fast-foundation-3f378ae2-8f62-4b34-a458-937dc73de19e.json diff --git a/change/@microsoft-fast-foundation-3f378ae2-8f62-4b34-a458-937dc73de19e.json b/change/@microsoft-fast-foundation-3f378ae2-8f62-4b34-a458-937dc73de19e.json new file mode 100644 index 00000000000..6c9c50060fe --- /dev/null +++ b/change/@microsoft-fast-foundation-3f378ae2-8f62-4b34-a458-937dc73de19e.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Updated to use the new FAST element 2.0 APIs for creating behaviors and creating element styles", + "packageName": "@microsoft/fast-foundation", + "email": "7559015+janechu@users.noreply.github.com", + "dependentChangeType": "patch" +} From 19890eeaf0cc8f2c0dcfaa6aa48723f6c3164c50 Mon Sep 17 00:00:00 2001 From: Jane Chu <7559015+janechu@users.noreply.github.com> Date: Wed, 23 Feb 2022 11:47:33 -0800 Subject: [PATCH 3/3] remove unused import --- .../fast-foundation/src/data-grid/data-grid-row.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/web-components/fast-foundation/src/data-grid/data-grid-row.ts b/packages/web-components/fast-foundation/src/data-grid/data-grid-row.ts index 8e4319e5712..d45d7f8e46a 100644 --- a/packages/web-components/fast-foundation/src/data-grid/data-grid-row.ts +++ b/packages/web-components/fast-foundation/src/data-grid/data-grid-row.ts @@ -1,6 +1,5 @@ import { attr, - HTMLDirective, observable, RepeatBehavior, RepeatDirective,