add data grid as a new component

change/@fluentui-web-components-542808a8-7f11-430c-8996-27ca4cc8714d.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "add data grid as a new web component",
+  "packageName": "@fluentui/web-components",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "patch"
+}

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

@@ -16,6 +16,9 @@ import { Checkbox } from '@microsoft/fast-foundation';
 import { ColorRGBA64 } from '@microsoft/fast-colors';
 import { Combobox } from '@microsoft/fast-foundation';
 import { CSSCustomPropertyBehavior } from '@microsoft/fast-foundation';
+import { DataGrid } from '@microsoft/fast-foundation';
+import { DataGridCell } from '@microsoft/fast-foundation';
+import { DataGridRow } from '@microsoft/fast-foundation';
 import { DesignSystemProvider } from '@microsoft/fast-foundation';
 import { Dialog } from '@microsoft/fast-foundation';
 import { Direction } from '@microsoft/fast-web-utilities';
@@ -261,6 +264,15 @@ export const ComboboxStyles: import("@microsoft/fast-element").ElementStyles;
 // @public
 export function createColorPalette(baseColor: any): string[];
 
+// @public
+export const DataGridCellStyles: import("@microsoft/fast-element").ElementStyles;
+
+// @public
+export const DataGridRowStyles: import("@microsoft/fast-element").ElementStyles;
+
+// @public
+export const DataGridStyles: import("@microsoft/fast-element").ElementStyles;
+
 // @public
 export interface DesignSystem {
     accentBaseColor: string;
@@ -473,6 +485,18 @@ export class FluentCombobox extends Combobox {
     connectedCallback(): void;
 }
 
+// @public
+export class FluentDataGrid extends DataGrid {
+}
+
+// @public
+export class FluentDataGridCell extends DataGridCell {
+}
+
+// @public
+export class FluentDataGridRow extends DataGridRow {
+}
+
 // @public
 export type FluentDesignSystem = Omit<DesignSystem, 'contrast' | 'fontWeight' | 'neutralForegroundDarkIndex' | 'neutralForegroundLightIndex'>;
 

packages/web-components/src/data-grid/data-grid-cell.styles.ts

@@ -0,0 +1,50 @@
+import { css } from '@microsoft/fast-element';
+import { SystemColors } from '@microsoft/fast-web-utilities';
+import { focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import { neutralFocusBehavior, neutralForegroundActiveBehavior, neutralForegroundRestBehavior } from '../styles';
+
+export const DataGridCellStyles = css`
+    :host {
+        padding: calc(var(--design-unit) * 1px) calc(var(--design-unit) * 3px);
+        color: ${neutralForegroundRestBehavior.var};
+        box-sizing: border-box;
+        font-family: var(--body-font);
+        font-size: var(--type-ramp-base-font-size);
+        line-height: var(--type-ramp-base-line-height);
+        font-weight: 400;
+        border: transparent calc(var(--outline-width) * 1px) solid;
+        overflow: hidden;
+        white-space: nowrap;
+        border-radius: calc(var(--corner-radius) * 1px);
+    }
+
+    :host(.column-header) {
+        font-weight: 600;
+    }
+
+    :host(:${focusVisible}) {
+        border: ${neutralFocusBehavior.var} calc(var(--outline-width) * 1px) solid;
+        color: ${neutralForegroundActiveBehavior.var};
+    }
+
+`.withBehaviors(
+  neutralFocusBehavior,
+  neutralForegroundActiveBehavior,
+  neutralForegroundRestBehavior,
+  forcedColorsStylesheetBehavior(
+    css`
+        :host {
+            forced-color-adjust: none;
+            border-color: transparent;
+            background: ${SystemColors.Field};
+            color: ${SystemColors.FieldText};
+        }
+
+        :host(:${focusVisible}) {
+            border-color: ${SystemColors.FieldText};
+            box-shadow: 0 0 0 2px inset ${SystemColors.Field};
+            color: ${SystemColors.FieldText};
+        }
+        `,
+  ),
+);

packages/web-components/src/data-grid/data-grid-row.styles.ts

@@ -0,0 +1,31 @@
+import { css } from '@microsoft/fast-element';
+import { forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import { neutralDividerRestBehavior, neutralFillRestBehavior } from '../styles';
+
+export const DataGridRowStyles = css`
+  :host {
+    display: grid;
+    padding: 1px 0;
+    box-sizing: border-box;
+    width: 100%;
+    border-bottom: calc(var(--outline-width) * 1px) solid var(--neutral-divider-rest);
+  }
+
+  :host(.header) {
+  }
+
+  :host(.sticky-header) {
+    background: ${neutralFillRestBehavior.var};
+    position: sticky;
+    top: 0;
+  }
+`.withBehaviors(
+  neutralDividerRestBehavior,
+  neutralFillRestBehavior,
+  forcedColorsStylesheetBehavior(
+    css`
+      :host {
+      }
+    `,
+  ),
+);