feat: Remove inline styling logic from DataGrid

change/@microsoft-fast-foundation-ee614c70-ba01-4139-b580-bb76a115d096.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "change DataGridRow.updateRowStyle to protected member from private property",
+  "packageName": "@microsoft/fast-foundation",
+  "email": "[email protected]",
+  "dependentChangeType": "prerelease"
+}

packages/web-components/fast-foundation/docs/api-report.md

@@ -1066,6 +1066,8 @@ export class FASTDataGridCell extends FASTElement {
 export class FASTDataGridRow extends FASTElement {
     // @internal
     activeCellItemTemplate?: ViewTemplate;
+    // (undocumented)
+    protected applyGridTemplateColumns(): void;
     // @internal
     cellElements: HTMLElement[];
     cellItemTemplate?: ViewTemplate;

packages/web-components/fast-foundation/src/data-grid/README.md

@@ -182,6 +182,7 @@ export const myDataGrid = DataGrid.compose({
 | `rowDataChanged`             | protected |                                               |                                         | `void` |                |
 | `toggleSelected`             | public    | Attempts to set the selected state of the row | `detail: DataGridSelectionChangeDetail` | `void` |                |
 | `handleFocusout`             | public    |                                               | `e: FocusEvent`                         | `void` |                |
+| `applyGridTemplateColumns`   | public    |                                               |                                         | `void` |                |
 
 #### Events
 

packages/web-components/fast-foundation/src/data-grid/data-grid-row.ts

@@ -43,7 +43,7 @@ export class FASTDataGridRow extends FASTElement {
     public gridTemplateColumns: string;
     protected gridTemplateColumnsChanged(): void {
         if (this.$fastController.isConnected) {
-            this.updateRowStyle();
+            this.applyGridTemplateColumns();
         }
     }
 
@@ -211,7 +211,7 @@ export class FASTDataGridRow extends FASTElement {
         this.addEventListener(eventKeyDown, this.handleKeydown);
         this.addEventListener(eventClick, this.handleClick);
 
-        this.updateRowStyle();
+        this.applyGridTemplateColumns();
 
         if (this.refocusOnLoad) {
             // if focus was on the row when data changed try to refocus on same cell
@@ -355,7 +355,13 @@ export class FASTDataGridRow extends FASTElement {
                 : this.defaultHeaderCellItemTemplate;
     }
 
-    private updateRowStyle = (): void => {
+    /**
+     * @public
+     *
+     * @remarks
+     * Applies the column definitions of the parent data-grid to the row's grid-template-columns CSS property.
+     */
+    protected applyGridTemplateColumns(): void {
         this.style.gridTemplateColumns = this.gridTemplateColumns;
-    };
+    }
 }