From b14c982123aad40a61b0036a5222773fb91ef7b8 Mon Sep 17 00:00:00 2001
From: Nathan Brown <32497422+KingOfTac@users.noreply.github.com>
Date: Mon, 8 Jan 2024 11:55:57 -0700
Subject: [PATCH 1/8] change DataGridRow.updateRowStyle to protected member
from private property
---
packages/web-components/fast-foundation/docs/api-report.md | 2 ++
.../web-components/fast-foundation/src/data-grid/README.md | 1 +
.../fast-foundation/src/data-grid/data-grid-row.ts | 4 ++--
3 files changed, 5 insertions(+), 2 deletions(-)
diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
index 6c297230a42..b04f856cccb 100644
--- a/packages/web-components/fast-foundation/docs/api-report.md
+++ b/packages/web-components/fast-foundation/docs/api-report.md
@@ -1107,6 +1107,8 @@ export class FASTDataGridRow extends FASTElement {
slottedCellElements: HTMLElement[];
// Warning: (ae-forgotten-export) The symbol "DataGridSelectionChangeDetail" needs to be exported by the entry point index.d.ts
toggleSelected(detail: DataGridSelectionChangeDetail): void;
+ // (undocumented)
+ protected updateRowStyle(): void;
}
// @public
diff --git a/packages/web-components/fast-foundation/src/data-grid/README.md b/packages/web-components/fast-foundation/src/data-grid/README.md
index d1d66b83287..aabd4d55cea 100644
--- a/packages/web-components/fast-foundation/src/data-grid/README.md
+++ b/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` | |
+| `updateRowStyle` | protected | | | `void` | |
#### Events
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 db47acea78b..2dcdd6c3bda 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
@@ -355,7 +355,7 @@ export class FASTDataGridRow extends FASTElement {
: this.defaultHeaderCellItemTemplate;
}
- private updateRowStyle = (): void => {
+ protected updateRowStyle(): void {
this.style.gridTemplateColumns = this.gridTemplateColumns;
- };
+ }
}
From 5ea462a7e819bbee24d134bdd3e76dc7cabe5a6c Mon Sep 17 00:00:00 2001
From: Nathan Brown <32497422+KingOfTac@users.noreply.github.com>
Date: Mon, 8 Jan 2024 11:56:17 -0700
Subject: [PATCH 2/8] Change files
---
...st-foundation-ee614c70-ba01-4139-b580-bb76a115d096.json | 7 +++++++
1 file changed, 7 insertions(+)
create mode 100644 change/@microsoft-fast-foundation-ee614c70-ba01-4139-b580-bb76a115d096.json
diff --git a/change/@microsoft-fast-foundation-ee614c70-ba01-4139-b580-bb76a115d096.json b/change/@microsoft-fast-foundation-ee614c70-ba01-4139-b580-bb76a115d096.json
new file mode 100644
index 00000000000..219a225a591
--- /dev/null
+++ b/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": "32497422+KingOfTac@users.noreply.github.com",
+ "dependentChangeType": "patch"
+}
From d46d9bdbe3f63ae74b1a58fdfb90d988f864ce91 Mon Sep 17 00:00:00 2001
From: Nathan Brown <32497422+KingOfTac@users.noreply.github.com>
Date: Mon, 8 Jan 2024 11:56:37 -0700
Subject: [PATCH 3/8] change file
---
...ft-fast-foundation-ee614c70-ba01-4139-b580-bb76a115d096.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/change/@microsoft-fast-foundation-ee614c70-ba01-4139-b580-bb76a115d096.json b/change/@microsoft-fast-foundation-ee614c70-ba01-4139-b580-bb76a115d096.json
index 219a225a591..629e7e77c18 100644
--- a/change/@microsoft-fast-foundation-ee614c70-ba01-4139-b580-bb76a115d096.json
+++ b/change/@microsoft-fast-foundation-ee614c70-ba01-4139-b580-bb76a115d096.json
@@ -3,5 +3,5 @@
"comment": "change DataGridRow.updateRowStyle to protected member from private property",
"packageName": "@microsoft/fast-foundation",
"email": "32497422+KingOfTac@users.noreply.github.com",
- "dependentChangeType": "patch"
+ "dependentChangeType": "prerelease"
}
From 7e45483e2a3f1f2b03eb42c0fcff132a6da1f9be Mon Sep 17 00:00:00 2001
From: Nathan Brown <32497422+KingOfTac@users.noreply.github.com>
Date: Mon, 8 Jan 2024 14:22:56 -0700
Subject: [PATCH 4/8] change method name and add docs
---
.../fast-foundation/docs/api-report.md | 4 ++--
.../fast-foundation/src/data-grid/README.md | 2 +-
.../fast-foundation/src/data-grid/data-grid-row.ts | 12 +++++++++---
3 files changed, 12 insertions(+), 6 deletions(-)
diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
index b04f856cccb..7623950445e 100644
--- a/packages/web-components/fast-foundation/docs/api-report.md
+++ b/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;
@@ -1107,8 +1109,6 @@ export class FASTDataGridRow extends FASTElement {
slottedCellElements: HTMLElement[];
// Warning: (ae-forgotten-export) The symbol "DataGridSelectionChangeDetail" needs to be exported by the entry point index.d.ts
toggleSelected(detail: DataGridSelectionChangeDetail): void;
- // (undocumented)
- protected updateRowStyle(): void;
}
// @public
diff --git a/packages/web-components/fast-foundation/src/data-grid/README.md b/packages/web-components/fast-foundation/src/data-grid/README.md
index aabd4d55cea..40c51c413fa 100644
--- a/packages/web-components/fast-foundation/src/data-grid/README.md
+++ b/packages/web-components/fast-foundation/src/data-grid/README.md
@@ -182,7 +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` | |
-| `updateRowStyle` | protected | | | `void` | |
+| `applyGridTemplateColumns` | public | | | `void` | |
#### Events
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 2dcdd6c3bda..b4b41473008 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
@@ -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;
}
- protected 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;
}
}
From ea2bbb7196853bd64a0d8e11fd5977014d97ac06 Mon Sep 17 00:00:00 2001
From: Nathan Brown <32497422+KingOfTac@users.noreply.github.com>
Date: Tue, 9 Jan 2024 10:25:00 -0700
Subject: [PATCH 5/8] remove inline styling from data grid
---
.../src/data-grid/data-grid-cell.ts | 16 ------
.../src/data-grid/data-grid-row.pw.spec.ts | 13 -----
.../src/data-grid/data-grid-row.ts | 27 ----------
.../src/data-grid/data-grid.ts | 54 +------------------
.../stories/data-grid-cell.register.ts | 1 +
.../stories/data-grid-row.register.ts | 4 ++
.../stories/data-grid-row.stories.ts | 2 -
.../data-grid/stories/data-grid.register.ts | 7 ++-
.../data-grid/stories/data-grid.stories.ts | 12 +++--
9 files changed, 20 insertions(+), 116 deletions(-)
diff --git a/packages/web-components/fast-foundation/src/data-grid/data-grid-cell.ts b/packages/web-components/fast-foundation/src/data-grid/data-grid-cell.ts
index 030e64c51b7..66ca6d23ddc 100644
--- a/packages/web-components/fast-foundation/src/data-grid/data-grid-cell.ts
+++ b/packages/web-components/fast-foundation/src/data-grid/data-grid-cell.ts
@@ -90,11 +90,6 @@ export class FASTDataGridCell extends FASTElement {
*/
@attr({ attribute: "grid-column" })
public gridColumn: string;
- protected gridColumnChanged(): void {
- if (this.$fastController.isConnected) {
- this.updateCellStyle();
- }
- }
/**
* The base data for the parent row
@@ -133,14 +128,7 @@ export class FASTDataGridCell extends FASTElement {
this.addEventListener(eventFocusOut, this.handleFocusout);
this.addEventListener(eventKeyDown, this.handleKeydown);
- this.style.gridColumn = `${
- this.columnDefinition?.gridColumn === undefined
- ? 0
- : this.columnDefinition.gridColumn
- }`;
-
this.updateCellView();
- this.updateCellStyle();
}
/**
@@ -333,8 +321,4 @@ export class FASTDataGridCell extends FASTElement {
this.customCellView = null;
}
}
-
- private updateCellStyle = (): void => {
- this.style.gridColumn = this.gridColumn;
- };
}
diff --git a/packages/web-components/fast-foundation/src/data-grid/data-grid-row.pw.spec.ts b/packages/web-components/fast-foundation/src/data-grid/data-grid-row.pw.spec.ts
index 2f6cf893c09..cd071804e18 100644
--- a/packages/web-components/fast-foundation/src/data-grid/data-grid-row.pw.spec.ts
+++ b/packages/web-components/fast-foundation/src/data-grid/data-grid-row.pw.spec.ts
@@ -34,19 +34,6 @@ test.describe("DataGridRow", () => {
await expect(element).toHaveAttribute("role", "row");
});
- test("should set `grid-template-columns` style to match attribute", async () => {
- await root.evaluate(node => {
- node.innerHTML = /* html */ `
-
- `;
- });
-
- await expect(element).toHaveAttribute(
- "style",
- "grid-template-columns: 1fr 2fr 3fr;"
- );
- });
-
test("should fire an event when a child cell is focused", async () => {
await root.evaluate(node => {
node.innerHTML = /* html */ `
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 b4b41473008..c11e1f735b1 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
@@ -32,21 +32,6 @@ import {
* @public
*/
export class FASTDataGridRow extends FASTElement {
- /**
- * String that gets applied to the the css gridTemplateColumns attribute for the row
- *
- * @public
- * @remarks
- * HTML Attribute: grid-template-columns
- */
- @attr({ attribute: "grid-template-columns" })
- public gridTemplateColumns: string;
- protected gridTemplateColumnsChanged(): void {
- if (this.$fastController.isConnected) {
- this.applyGridTemplateColumns();
- }
- }
-
/**
* The type of row
*
@@ -211,8 +196,6 @@ export class FASTDataGridRow extends FASTElement {
this.addEventListener(eventKeyDown, this.handleKeydown);
this.addEventListener(eventClick, this.handleClick);
- this.applyGridTemplateColumns();
-
if (this.refocusOnLoad) {
// if focus was on the row when data changed try to refocus on same cell
this.refocusOnLoad = false;
@@ -354,14 +337,4 @@ export class FASTDataGridRow extends FASTElement {
? this.headerCellItemTemplate
: this.defaultHeaderCellItemTemplate;
}
-
- /**
- * @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;
- }
}
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 1b2297f4471..e555afc8436 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
@@ -125,21 +125,6 @@ export class FASTDataGrid extends FASTElement {
});
}
- /**
- * generates a gridTemplateColumns based on columndefinitions
- */
- private static generateTemplateColumns(
- columnDefinitions: ColumnDefinition[]
- ): string {
- let templateColumns: string = "";
- columnDefinitions.forEach((column: ColumnDefinition) => {
- templateColumns = `${templateColumns}${
- templateColumns === "" ? "" : " "
- }${"1fr"}`;
- });
- return templateColumns;
- }
-
/**
* Default callback to determine if a row is selectable (also depends on selectionMode)
* By default all rows except for header rows are selectable
@@ -199,21 +184,6 @@ export class FASTDataGrid extends FASTElement {
}
}
- /**
- * String that gets applied to the the css gridTemplateColumns attribute of child rows
- *
- * @public
- * @remarks
- * HTML Attribute: grid-template-columns
- */
- @attr({ attribute: "grid-template-columns" })
- public gridTemplateColumns: string;
- protected gridTemplateColumnsChanged(): void {
- if (this.$fastController.isConnected) {
- this.updateRowIndexes();
- }
- }
-
/**
* The number of rows to move selection on page up/down keystrokes.
* When undefined the grid will use viewport height/the height of the first non-header row.
@@ -313,9 +283,7 @@ export class FASTDataGrid extends FASTElement {
if (!this.columnDefinitions) {
return;
}
- this.generatedGridTemplateColumns = FASTDataGrid.generateTemplateColumns(
- this.columnDefinitions
- );
+
if (this.$fastController.isConnected) {
this.columnDefinitionsStale = true;
this.queueRowIndexUpdate();
@@ -458,8 +426,6 @@ export class FASTDataGrid extends FASTElement {
private rowindexUpdateQueued: boolean = false;
private columnDefinitionsStale: boolean = true;
- private generatedGridTemplateColumns: string = "";
-
private lastNotShiftSelectedRowIndex = -1;
private preShiftRowSelection: number[] | null = null;
@@ -941,7 +907,6 @@ export class FASTDataGrid extends FASTElement {
);
this.generatedHeader = generatedHeaderElement as unknown as FASTDataGridRow;
this.generatedHeader.columnDefinitions = this.columnDefinitions;
- this.generatedHeader.gridTemplateColumns = this.gridTemplateColumns;
this.generatedHeader.rowType =
this.generateHeader === GenerateHeaderOptions.sticky
? DataGridRowTypes.stickyHeader
@@ -987,26 +952,9 @@ export class FASTDataGrid extends FASTElement {
};
private updateRowIndexes = (): void => {
- let newGridTemplateColumns = this.gridTemplateColumns;
-
- if (newGridTemplateColumns === undefined) {
- // try to generate columns based on manual rows
- if (this.generatedGridTemplateColumns === "" && this.rowElements.length > 0) {
- const firstRow: FASTDataGridRow = this.rowElements[0] as FASTDataGridRow;
- this.generatedGridTemplateColumns = new Array(
- firstRow.cellElements.length
- )
- .fill("1fr")
- .join(" ");
- }
-
- newGridTemplateColumns = this.generatedGridTemplateColumns;
- }
-
this.rowElements.forEach((element: Element, index: number): void => {
const thisRow = element as FASTDataGridRow;
thisRow.rowIndex = index;
- thisRow.gridTemplateColumns = newGridTemplateColumns;
thisRow.selectionBehavior = this.selectionBehavior;
if (
this.selectionMode === DataGridSelectionMode.singleRow ||
diff --git a/packages/web-components/fast-foundation/src/data-grid/stories/data-grid-cell.register.ts b/packages/web-components/fast-foundation/src/data-grid/stories/data-grid-cell.register.ts
index cc2097884fd..fbfbccfba9d 100644
--- a/packages/web-components/fast-foundation/src/data-grid/stories/data-grid-cell.register.ts
+++ b/packages/web-components/fast-foundation/src/data-grid/stories/data-grid-cell.register.ts
@@ -4,6 +4,7 @@ import { dataGridCellTemplate } from "../data-grid-cell.template.js";
const styles = css`
:host {
+ grid-column: ${x => x.gridColumn ?? 0};
color: var(--neutral-foreground-rest);
box-sizing: border-box;
padding: calc(var(--design-unit) * 1px) calc(var(--design-unit) * 3px);
diff --git a/packages/web-components/fast-foundation/src/data-grid/stories/data-grid-row.register.ts b/packages/web-components/fast-foundation/src/data-grid/stories/data-grid-row.register.ts
index f200d0443a0..c1f48ffe781 100644
--- a/packages/web-components/fast-foundation/src/data-grid/stories/data-grid-row.register.ts
+++ b/packages/web-components/fast-foundation/src/data-grid/stories/data-grid-row.register.ts
@@ -5,6 +5,10 @@ import { dataGridRowTemplate } from "../data-grid-row.template.js";
const styles = css`
:host {
display: grid;
+ grid-template-columns: subgrid;
+ grid-column-start: 1;
+ grid-column-end: span all;
+ grid-auto-flow: row;
padding: 1px 0;
box-sizing: border-box;
width: 100%;
diff --git a/packages/web-components/fast-foundation/src/data-grid/stories/data-grid-row.stories.ts b/packages/web-components/fast-foundation/src/data-grid/stories/data-grid-row.stories.ts
index de2e7e19de6..138232aa086 100644
--- a/packages/web-components/fast-foundation/src/data-grid/stories/data-grid-row.stories.ts
+++ b/packages/web-components/fast-foundation/src/data-grid/stories/data-grid-row.stories.ts
@@ -8,7 +8,6 @@ const storyTemplate = html>`
${x => x.storyContent}
@@ -23,7 +22,6 @@ export default {
},
argTypes: {
columnDefinitions: { control: "object" },
- gridTemplateColumns: { control: "text" },
rowType: { control: "select", options: Object.values(DataGridRowTypes) },
storyContent: { table: { disable: true } },
},
diff --git a/packages/web-components/fast-foundation/src/data-grid/stories/data-grid.register.ts b/packages/web-components/fast-foundation/src/data-grid/stories/data-grid.register.ts
index ceb48e71e42..b4d53681b60 100644
--- a/packages/web-components/fast-foundation/src/data-grid/stories/data-grid.register.ts
+++ b/packages/web-components/fast-foundation/src/data-grid/stories/data-grid.register.ts
@@ -5,7 +5,12 @@ import { registerComplexCell } from "./examples/complex-cell.js";
const styles = css`
:host {
- display: block;
+ display: grid;
+ grid-auto-flow: row;
+ grid-template-columns: repeat(
+ ${x => x.columnDefinitions?.length ?? 1},
+ minmax(0, 1fr)
+ );
}
:host([selection-mode="multi-row"]) {
diff --git a/packages/web-components/fast-foundation/src/data-grid/stories/data-grid.stories.ts b/packages/web-components/fast-foundation/src/data-grid/stories/data-grid.stories.ts
index 7f707662f04..2d215cae6e5 100644
--- a/packages/web-components/fast-foundation/src/data-grid/stories/data-grid.stories.ts
+++ b/packages/web-components/fast-foundation/src/data-grid/stories/data-grid.stories.ts
@@ -16,7 +16,6 @@ const storyTemplate = html>`
:rowsData="${x => x.rowsData}"
no-tabbing="${x => x.noTabbing}"
generate-header="${x => x.generateHeader}"
- grid-template-columns="${x => x.gridTemplateColumns}"
page-size="${x => x.pageSize}"
disable-click-select="${x => x.disableClickSelect}"
selection-mode="${x => x.selectionMode}"
@@ -63,9 +62,6 @@ export default {
pageSize: {
control: "number",
},
- gridTemplateColumns: {
- control: "text",
- },
columnDefinitions: {
control: { type: "object" },
},
@@ -98,6 +94,14 @@ DataGridFixedHeight.args = {
style: "height: 200px; overflow-y: scroll;",
};
+export const DataGridFixedWidth: Story = renderComponent(html`
+ ${storyTemplate}
+`).bind({});
+
+DataGridFixedWidth.args = {
+ style: "height: 200px; overflow-y: auto; width: max-content; grid-template-columns: repeat(7, max-content);",
+};
+
export const DataGridColumnDefinitions: Story = renderComponent(
storyTemplate
).bind({});
From 974b7174b0de7b76e8114bac0a411e4dabd7ae1b Mon Sep 17 00:00:00 2001
From: Nathan Brown <32497422+KingOfTac@users.noreply.github.com>
Date: Tue, 9 Jan 2024 10:55:46 -0700
Subject: [PATCH 6/8] update DataGrid API docs
---
.../fast-foundation/docs/api-report.md | 10 ------
.../fast-foundation/src/data-grid/README.md | 36 ++++++++-----------
2 files changed, 14 insertions(+), 32 deletions(-)
diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
index 7623950445e..8761a255aeb 100644
--- a/packages/web-components/fast-foundation/docs/api-report.md
+++ b/packages/web-components/fast-foundation/docs/api-report.md
@@ -1007,9 +1007,6 @@ export class FASTDataGrid extends FASTElement {
focusRowIndex: number;
static generateColumns(row: object): ColumnDefinition[];
generateHeader: GenerateHeaderOptions;
- gridTemplateColumns: string;
- // (undocumented)
- protected gridTemplateColumnsChanged(): void;
// @internal (undocumented)
handleFocus(e: FocusEvent): void;
// @internal (undocumented)
@@ -1052,8 +1049,6 @@ export class FASTDataGridCell extends FASTElement {
disconnectedCallback(): void;
gridColumn: string;
// (undocumented)
- protected gridColumnChanged(): void;
- // (undocumented)
handleFocusin(e: FocusEvent): void;
// (undocumented)
handleFocusout(e: FocusEvent): void;
@@ -1066,8 +1061,6 @@ export class FASTDataGridCell extends FASTElement {
export class FASTDataGridRow extends FASTElement {
// @internal
activeCellItemTemplate?: ViewTemplate;
- // (undocumented)
- protected applyGridTemplateColumns(): void;
// @internal
cellElements: HTMLElement[];
cellItemTemplate?: ViewTemplate;
@@ -1082,9 +1075,6 @@ export class FASTDataGridRow extends FASTElement {
disconnectedCallback(): void;
// @internal (undocumented)
focusColumnIndex: number;
- gridTemplateColumns: string;
- // (undocumented)
- protected gridTemplateColumnsChanged(): void;
// @internal (undocumented)
handleCellFocus(e: Event): void;
// @internal (undocumented)
diff --git a/packages/web-components/fast-foundation/src/data-grid/README.md b/packages/web-components/fast-foundation/src/data-grid/README.md
index 40c51c413fa..3297e291ff6 100644
--- a/packages/web-components/fast-foundation/src/data-grid/README.md
+++ b/packages/web-components/fast-foundation/src/data-grid/README.md
@@ -117,7 +117,6 @@ export const myDataGrid = DataGrid.compose({
| Name | Privacy | Description | Parameters | Return | Inherited From |
| ------------------------- | --------- | ----------- | ------------------------------------------------------------------------ | ------ | -------------- |
-| `gridColumnChanged` | protected | | | `void` | |
| `columnDefinitionChanged` | protected | | `oldValue: ColumnDefinition or null, newValue: ColumnDefinition or null` | `void` | |
| `handleFocusin` | public | | `e: FocusEvent` | `void` | |
| `handleFocusout` | public | | `e: FocusEvent` | `void` | |
@@ -166,7 +165,6 @@ export const myDataGrid = DataGrid.compose({
| Name | Privacy | Type | Default | Description | Inherited From |
| ------------------------ | ------- | ---------------------------- | ------- | --------------------------------------------------------------------------------------------------- | -------------- |
-| `gridTemplateColumns` | public | `string` | | String that gets applied to the the css gridTemplateColumns attribute for the row | |
| `rowType` | public | `DataGridRowTypes` | | The type of row | |
| `rowData` | public | `object or null` | `null` | The base data for this row | |
| `columnDefinitions` | public | `ColumnDefinition[] or null` | `null` | The column definitions of the row | |
@@ -176,13 +174,11 @@ export const myDataGrid = DataGrid.compose({
#### Methods
-| Name | Privacy | Description | Parameters | Return | Inherited From |
-| ---------------------------- | --------- | --------------------------------------------- | --------------------------------------- | ------ | -------------- |
-| `gridTemplateColumnsChanged` | protected | | | `void` | |
-| `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` | |
+| Name | Privacy | Description | Parameters | Return | Inherited From |
+| ---------------- | --------- | --------------------------------------------- | --------------------------------------- | ------ | -------------- |
+| `rowDataChanged` | protected | | | `void` | |
+| `toggleSelected` | public | Attempts to set the selected state of the row | `detail: DataGridSelectionChangeDetail` | `void` | |
+| `handleFocusout` | public | | `e: FocusEvent` | `void` | |
#### Events
@@ -192,10 +188,9 @@ export const myDataGrid = DataGrid.compose({
#### Attributes
-| Name | Field | Inherited From |
-| ----------------------- | ------------------- | -------------- |
-| `grid-template-columns` | gridTemplateColumns | |
-| `row-type` | rowType | |
+| Name | Field | Inherited From |
+| ---------- | ------- | -------------- |
+| `row-type` | rowType | |
#### Slots
@@ -237,7 +232,6 @@ export const myDataGrid = DataGrid.compose({
| ------------------------ | ------- | --------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- |
| `noTabbing` | public | `boolean` | `false` | When true the component will not add itself to the tab queue. Default is false. | |
| `generateHeader` | public | `GenerateHeaderOptions` | | Whether the grid should automatically generate a header row and its type | |
-| `gridTemplateColumns` | public | `string` | | String that gets applied to the the css gridTemplateColumns attribute of child rows | |
| `pageSize` | public | `number or undefined` | | The number of rows to move selection on page up/down keystrokes. When undefined the grid will use viewport height/the height of the first non-header row. If the grid itself is a scrolling container it will be considered the viewport for this purpose, otherwise the document will be used. | |
| `selectionMode` | public | `DataGridSelectionMode` | | Defines how the grid handles row or cell selection. | |
| `selectionBehavior` | public | `DataGridSelectionBehavior` | | Controls selection behavior | |
@@ -255,13 +249,12 @@ export const myDataGrid = DataGrid.compose({
#### Methods
-| Name | Privacy | Description | Parameters | Return | Inherited From |
-| ---------------------------- | --------- | ----------- | ---------------- | ------ | -------------- |
-| `noTabbingChanged` | protected | | | `void` | |
-| `gridTemplateColumnsChanged` | protected | | | `void` | |
-| `rowsDataChanged` | protected | | | `void` | |
-| `columnDefinitionsChanged` | protected | | | `void` | |
-| `handleRowSelectedChange` | public | | `e: CustomEvent` | `void` | |
+| Name | Privacy | Description | Parameters | Return | Inherited From |
+| -------------------------- | --------- | ----------- | ---------------- | ------ | -------------- |
+| `noTabbingChanged` | protected | | | `void` | |
+| `rowsDataChanged` | protected | | | `void` | |
+| `columnDefinitionsChanged` | protected | | | `void` | |
+| `handleRowSelectedChange` | public | | `e: CustomEvent` | `void` | |
#### Attributes
@@ -269,7 +262,6 @@ export const myDataGrid = DataGrid.compose({
| ----------------------- | ------------------- | -------------- |
| `no-tabbing` | noTabbing | |
| `generate-header` | generateHeader | |
-| `grid-template-columns` | gridTemplateColumns | |
| `page-size` | pageSize | |
| `selection-mode` | selectionMode | |
| `selection-behavior` | selectionBehavior | |
From 968c4a7947b2f94bcb4fdfb0cb46f42eb043984e Mon Sep 17 00:00:00 2001
From: Nathan Brown <32497422+KingOfTac@users.noreply.github.com>
Date: Tue, 9 Jan 2024 10:57:15 -0700
Subject: [PATCH 7/8] change file
---
...ft-fast-foundation-ee614c70-ba01-4139-b580-bb76a115d096.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/change/@microsoft-fast-foundation-ee614c70-ba01-4139-b580-bb76a115d096.json b/change/@microsoft-fast-foundation-ee614c70-ba01-4139-b580-bb76a115d096.json
index 629e7e77c18..c4c6fcc9dc4 100644
--- a/change/@microsoft-fast-foundation-ee614c70-ba01-4139-b580-bb76a115d096.json
+++ b/change/@microsoft-fast-foundation-ee614c70-ba01-4139-b580-bb76a115d096.json
@@ -1,6 +1,6 @@
{
"type": "prerelease",
- "comment": "change DataGridRow.updateRowStyle to protected member from private property",
+ "comment": "Remove inline styling logic from DataGrid and sub components in favor of consumer CSS implementations.",
"packageName": "@microsoft/fast-foundation",
"email": "32497422+KingOfTac@users.noreply.github.com",
"dependentChangeType": "prerelease"
From 485cf6f909163751e2449e68c5af15bcc224ea4b Mon Sep 17 00:00:00 2001
From: Nathan Brown <32497422+KingOfTac@users.noreply.github.com>
Date: Tue, 9 Jan 2024 11:11:01 -0700
Subject: [PATCH 8/8] tweak story styles
---
.../src/data-grid/stories/data-grid.stories.ts | 6 ++++--
1 file changed, 4 insertions(+), 2 deletions(-)
diff --git a/packages/web-components/fast-foundation/src/data-grid/stories/data-grid.stories.ts b/packages/web-components/fast-foundation/src/data-grid/stories/data-grid.stories.ts
index 2d215cae6e5..028adf7c361 100644
--- a/packages/web-components/fast-foundation/src/data-grid/stories/data-grid.stories.ts
+++ b/packages/web-components/fast-foundation/src/data-grid/stories/data-grid.stories.ts
@@ -95,11 +95,13 @@ DataGridFixedHeight.args = {
};
export const DataGridFixedWidth: Story = renderComponent(html`
- ${storyTemplate}
+
+ ${storyTemplate}
+
`).bind({});
DataGridFixedWidth.args = {
- style: "height: 200px; overflow-y: auto; width: max-content; grid-template-columns: repeat(7, max-content);",
+ style: "height: max-content; width: max-content; grid-template-columns: repeat(7, max-content);",
};
export const DataGridColumnDefinitions: Story = renderComponent(