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({});