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..c4c6fcc9dc4
--- /dev/null
+++ b/change/@microsoft-fast-foundation-ee614c70-ba01-4139-b580-bb76a115d096.json
@@ -0,0 +1,7 @@
+{
+ "type": "prerelease",
+ "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"
+}
diff --git a/packages/web-components/fast-foundation/docs/api-report.md b/packages/web-components/fast-foundation/docs/api-report.md
index c246768e513..a34b4030172 100644
--- a/packages/web-components/fast-foundation/docs/api-report.md
+++ b/packages/web-components/fast-foundation/docs/api-report.md
@@ -1026,9 +1026,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)
@@ -1071,8 +1068,6 @@ export class FASTDataGridCell extends FASTElement {
disconnectedCallback(): void;
gridColumn: string;
// (undocumented)
- protected gridColumnChanged(): void;
- // (undocumented)
handleFocusin(e: FocusEvent): void;
// (undocumented)
handleFocusout(e: FocusEvent): void;
@@ -1099,9 +1094,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 d1d66b83287..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,12 +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` | |
+| 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
@@ -191,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
@@ -236,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 | |
@@ -254,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
@@ -268,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 | |
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 f2d322fc61b..a39fbf6068f 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
@@ -91,11 +91,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
@@ -134,14 +129,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();
}
/**
@@ -325,8 +313,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 db47acea78b..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.updateRowStyle();
- }
- }
-
/**
* The type of row
*
@@ -211,8 +196,6 @@ export class FASTDataGridRow extends FASTElement {
this.addEventListener(eventKeyDown, this.handleKeydown);
this.addEventListener(eventClick, this.handleClick);
- this.updateRowStyle();
-
if (this.refocusOnLoad) {
// if focus was on the row when data changed try to refocus on same cell
this.refocusOnLoad = false;
@@ -354,8 +337,4 @@ export class FASTDataGridRow extends FASTElement {
? this.headerCellItemTemplate
: this.defaultHeaderCellItemTemplate;
}
-
- private updateRowStyle = (): 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 9d505d440a9..567f5d017b3 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
@@ -126,21 +126,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
@@ -198,21 +183,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.
@@ -312,9 +282,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();
@@ -457,8 +425,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..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
@@ -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,16 @@ DataGridFixedHeight.args = {
style: "height: 200px; overflow-y: scroll;",
};
+export const DataGridFixedWidth: Story = renderComponent(html`
+
+ ${storyTemplate}
+
+`).bind({});
+
+DataGridFixedWidth.args = {
+ style: "height: max-content; width: max-content; grid-template-columns: repeat(7, max-content);",
+};
+
export const DataGridColumnDefinitions: Story = renderComponent(
storyTemplate
).bind({});