From a8a9068a28985973e76dca2b8ddeeec8eb9c2f2b Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Mon, 28 Nov 2022 14:13:16 +0100 Subject: [PATCH 1/2] feat: Improve docs for `DataGrid`, export as unstable Updates the documentation for `DataGrid` and exports the components from `@fluentui/react-components/unstable` --- .../etc/react-components.unstable.api.md | 183 ++++++++++++++++++ .../react-components/src/unstable/index.ts | 61 ++++++ .../DataGridRow/DataGridRow.types.ts | 4 + .../stories/DataGrid/DataGridDescription.md | 23 +++ .../DataGrid/KeyboardNavigation.stories.tsx | 11 ++ .../DataGrid/MultipleSelect.stories.tsx | 11 ++ .../MultipleSelectControlled.stories.tsx | 11 ++ .../DataGrid/SelectionAppearance.stories.tsx | 11 ++ .../stories/DataGrid/SingleSelect.stories.tsx | 11 ++ .../SingleSelectControlled.stories.tsx | 11 ++ .../stories/DataGrid/Sort.stories.tsx | 11 ++ .../DataGrid/SortControlled.stories.tsx | 11 ++ .../DataGrid/SubtleSelection.stories.tsx | 15 ++ .../stories/DataGrid/index.stories.tsx | 23 ++- 14 files changed, 395 insertions(+), 2 deletions(-) create mode 100644 packages/react-components/react-table/stories/DataGrid/DataGridDescription.md diff --git a/packages/react-components/react-components/etc/react-components.unstable.api.md b/packages/react-components/react-components/etc/react-components.unstable.api.md index 306b04cb2acb54..1ccd052427e840 100644 --- a/packages/react-components/react-components/etc/react-components.unstable.api.md +++ b/packages/react-components/react-components/etc/react-components.unstable.api.md @@ -52,6 +52,43 @@ import { CreateColumnOptions } from '@fluentui/react-table'; import { DATA_OVERFLOW_ITEM } from '@fluentui/react-overflow'; import { DATA_OVERFLOW_MENU } from '@fluentui/react-overflow'; import { DATA_OVERFLOWING } from '@fluentui/react-overflow'; +import { DataGrid } from '@fluentui/react-table'; +import { DataGridBody } from '@fluentui/react-table'; +import { dataGridBodyClassNames } from '@fluentui/react-table'; +import { DataGridBodyProps } from '@fluentui/react-table'; +import { DataGridBodySlots } from '@fluentui/react-table'; +import { DataGridBodyState } from '@fluentui/react-table'; +import { DataGridCell } from '@fluentui/react-table'; +import { dataGridCellClassNames } from '@fluentui/react-table'; +import { DataGridCellProps } from '@fluentui/react-table'; +import { DataGridCellSlots } from '@fluentui/react-table'; +import { DataGridCellState } from '@fluentui/react-table'; +import { dataGridClassNames } from '@fluentui/react-table'; +import { DataGridContextValue } from '@fluentui/react-table'; +import { DataGridContextValues } from '@fluentui/react-table'; +import { DataGridHeader } from '@fluentui/react-table'; +import { DataGridHeaderCell } from '@fluentui/react-table'; +import { dataGridHeaderCellClassNames } from '@fluentui/react-table'; +import { DataGridHeaderCellProps } from '@fluentui/react-table'; +import { DataGridHeaderCellSlots } from '@fluentui/react-table'; +import { DataGridHeaderCellState } from '@fluentui/react-table'; +import { dataGridHeaderClassNames } from '@fluentui/react-table'; +import { DataGridHeaderProps } from '@fluentui/react-table'; +import { DataGridHeaderSlots } from '@fluentui/react-table'; +import { DataGridHeaderState } from '@fluentui/react-table'; +import { DataGridProps } from '@fluentui/react-table'; +import { DataGridRow } from '@fluentui/react-table'; +import { dataGridRowClassNames } from '@fluentui/react-table'; +import { DataGridRowProps } from '@fluentui/react-table'; +import { DataGridRowSlots } from '@fluentui/react-table'; +import { DataGridRowState } from '@fluentui/react-table'; +import { DataGridSelectionCell } from '@fluentui/react-table'; +import { dataGridSelectionCellClassNames } from '@fluentui/react-table'; +import { DataGridSelectionCellProps } from '@fluentui/react-table'; +import { DataGridSelectionCellSlots } from '@fluentui/react-table'; +import { DataGridSelectionCellState } from '@fluentui/react-table'; +import { DataGridSlots } from '@fluentui/react-table'; +import { DataGridState } from '@fluentui/react-table'; import { Dropdown } from '@fluentui/react-combobox'; import { dropdownClassNames } from '@fluentui/react-combobox'; import { DropdownContextValues } from '@fluentui/react-combobox'; @@ -115,6 +152,13 @@ import { renderCardFooter_unstable } from '@fluentui/react-card'; import { renderCardHeader_unstable } from '@fluentui/react-card'; import { renderCardPreview_unstable } from '@fluentui/react-card'; import { renderCombobox_unstable } from '@fluentui/react-combobox'; +import { renderDataGrid_unstable } from '@fluentui/react-table'; +import { renderDataGridBody_unstable } from '@fluentui/react-table'; +import { renderDataGridCell_unstable } from '@fluentui/react-table'; +import { renderDataGridHeader_unstable } from '@fluentui/react-table'; +import { renderDataGridHeaderCell_unstable } from '@fluentui/react-table'; +import { renderDataGridRow_unstable } from '@fluentui/react-table'; +import { renderDataGridSelectionCell_unstable } from '@fluentui/react-table'; import { renderDropdown_unstable } from '@fluentui/react-combobox'; import { renderField_unstable } from '@fluentui/react-field'; import { renderInfoButton_unstable } from '@fluentui/react-infobutton'; @@ -171,6 +215,9 @@ import { tableCellClassName } from '@fluentui/react-table'; import { tableCellClassNames } from '@fluentui/react-table'; import { TableCellLayout } from '@fluentui/react-table'; import { tableCellLayoutClassNames } from '@fluentui/react-table'; +import { TableCellLayoutProps } from '@fluentui/react-table'; +import { TableCellLayoutSlots } from '@fluentui/react-table'; +import { TableCellLayoutState } from '@fluentui/react-table'; import { TableCellProps } from '@fluentui/react-table'; import { TableCellSlots } from '@fluentui/react-table'; import { TableCellState } from '@fluentui/react-table'; @@ -239,6 +286,20 @@ import { useCardPreviewStyles_unstable } from '@fluentui/react-card'; import { useCardStyles_unstable } from '@fluentui/react-card'; import { useCombobox_unstable } from '@fluentui/react-combobox'; import { useComboboxStyles_unstable } from '@fluentui/react-combobox'; +import { useDataGrid_unstable } from '@fluentui/react-table'; +import { useDataGridBody_unstable } from '@fluentui/react-table'; +import { useDataGridBodyStyles_unstable } from '@fluentui/react-table'; +import { useDataGridCell_unstable } from '@fluentui/react-table'; +import { useDataGridCellStyles_unstable } from '@fluentui/react-table'; +import { useDataGridHeader_unstable } from '@fluentui/react-table'; +import { useDataGridHeaderCell_unstable } from '@fluentui/react-table'; +import { useDataGridHeaderCellStyles_unstable } from '@fluentui/react-table'; +import { useDataGridHeaderStyles_unstable } from '@fluentui/react-table'; +import { useDataGridRow_unstable } from '@fluentui/react-table'; +import { useDataGridRowStyles_unstable } from '@fluentui/react-table'; +import { useDataGridSelectionCell_unstable } from '@fluentui/react-table'; +import { useDataGridSelectionCellStyles_unstable } from '@fluentui/react-table'; +import { useDataGridStyles_unstable } from '@fluentui/react-table'; import { useDropdown_unstable } from '@fluentui/react-combobox'; import { useDropdownStyles_unstable } from '@fluentui/react-combobox'; import { useField_unstable } from '@fluentui/react-field'; @@ -383,6 +444,80 @@ export { DATA_OVERFLOW_MENU } export { DATA_OVERFLOWING } +export { DataGrid } + +export { DataGridBody } + +export { dataGridBodyClassNames } + +export { DataGridBodyProps } + +export { DataGridBodySlots } + +export { DataGridBodyState } + +export { DataGridCell } + +export { dataGridCellClassNames } + +export { DataGridCellProps } + +export { DataGridCellSlots } + +export { DataGridCellState } + +export { dataGridClassNames } + +export { DataGridContextValue } + +export { DataGridContextValues } + +export { DataGridHeader } + +export { DataGridHeaderCell } + +export { dataGridHeaderCellClassNames } + +export { DataGridHeaderCellProps } + +export { DataGridHeaderCellSlots } + +export { DataGridHeaderCellState } + +export { dataGridHeaderClassNames } + +export { DataGridHeaderProps } + +export { DataGridHeaderSlots } + +export { DataGridHeaderState } + +export { DataGridProps } + +export { DataGridRow } + +export { dataGridRowClassNames } + +export { DataGridRowProps } + +export { DataGridRowSlots } + +export { DataGridRowState } + +export { DataGridSelectionCell } + +export { dataGridSelectionCellClassNames } + +export { DataGridSelectionCellProps } + +export { DataGridSelectionCellSlots } + +export { DataGridSelectionCellState } + +export { DataGridSlots } + +export { DataGridState } + export { Dropdown } export { dropdownClassNames } @@ -509,6 +644,20 @@ export { renderCardPreview_unstable } export { renderCombobox_unstable } +export { renderDataGrid_unstable } + +export { renderDataGridBody_unstable } + +export { renderDataGridCell_unstable } + +export { renderDataGridHeader_unstable } + +export { renderDataGridHeaderCell_unstable } + +export { renderDataGridRow_unstable } + +export { renderDataGridSelectionCell_unstable } + export { renderDropdown_unstable } export { renderField_unstable } @@ -621,6 +770,12 @@ export { TableCellLayout } export { tableCellLayoutClassNames } +export { TableCellLayoutProps } + +export { TableCellLayoutSlots } + +export { TableCellLayoutState } + export { TableCellProps } export { TableCellSlots } @@ -758,6 +913,34 @@ export { useCombobox_unstable } export { useComboboxStyles_unstable } +export { useDataGrid_unstable } + +export { useDataGridBody_unstable } + +export { useDataGridBodyStyles_unstable } + +export { useDataGridCell_unstable } + +export { useDataGridCellStyles_unstable } + +export { useDataGridHeader_unstable } + +export { useDataGridHeaderCell_unstable } + +export { useDataGridHeaderCellStyles_unstable } + +export { useDataGridHeaderStyles_unstable } + +export { useDataGridRow_unstable } + +export { useDataGridRowStyles_unstable } + +export { useDataGridSelectionCell_unstable } + +export { useDataGridSelectionCellStyles_unstable } + +export { useDataGridStyles_unstable } + export { useDropdown_unstable } export { useDropdownStyles_unstable } diff --git a/packages/react-components/react-components/src/unstable/index.ts b/packages/react-components/react-components/src/unstable/index.ts index 524a4a2b4f988d..35045e48736bac 100644 --- a/packages/react-components/react-components/src/unstable/index.ts +++ b/packages/react-components/react-components/src/unstable/index.ts @@ -208,6 +208,41 @@ export { useTableCellLayoutStyles_unstable, renderTableCellLayout_unstable, tableCellLayoutClassNames, + DataGridCell, + dataGridCellClassNames, + useDataGridCellStyles_unstable, + useDataGridCell_unstable, + renderDataGridCell_unstable, + DataGridRow, + dataGridRowClassNames, + useDataGridRowStyles_unstable, + useDataGridRow_unstable, + renderDataGridRow_unstable, + DataGridBody, + dataGridBodyClassNames, + useDataGridBodyStyles_unstable, + useDataGridBody_unstable, + renderDataGridBody_unstable, + DataGrid, + dataGridClassNames, + useDataGridStyles_unstable, + useDataGrid_unstable, + renderDataGrid_unstable, + DataGridHeader, + dataGridHeaderClassNames, + useDataGridHeaderStyles_unstable, + useDataGridHeader_unstable, + renderDataGridHeader_unstable, + DataGridHeaderCell, + dataGridHeaderCellClassNames, + useDataGridHeaderCellStyles_unstable, + useDataGridHeaderCell_unstable, + renderDataGridHeaderCell_unstable, + DataGridSelectionCell, + useDataGridSelectionCellStyles_unstable, + useDataGridSelectionCell_unstable, + renderDataGridSelectionCell_unstable, + dataGridSelectionCellClassNames, useTable, useSelection, useSort, @@ -242,6 +277,9 @@ export type { TableCellActionsProps, TableCellActionsState, TableCellActionsSlots, + TableCellLayoutProps, + TableCellLayoutState, + TableCellLayoutSlots, UseTableOptions, TableState as HeadlessTableState, TableSelectionState, @@ -252,6 +290,29 @@ export type { ColumnDefinition, ColumnId, CreateColumnOptions, + DataGridHeaderCellProps, + DataGridHeaderCellSlots, + DataGridHeaderCellState, + DataGridHeaderProps, + DataGridHeaderSlots, + DataGridHeaderState, + DataGridProps, + DataGridSlots, + DataGridState, + DataGridContextValue, + DataGridContextValues, + DataGridBodyProps, + DataGridBodyState, + DataGridBodySlots, + DataGridRowProps, + DataGridRowState, + DataGridRowSlots, + DataGridCellProps, + DataGridCellState, + DataGridCellSlots, + DataGridSelectionCellProps, + DataGridSelectionCellState, + DataGridSelectionCellSlots, } from '@fluentui/react-table'; export { CheckboxField_unstable as CheckboxField, checkboxFieldClassNames } from '@fluentui/react-checkbox'; diff --git a/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.types.ts b/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.types.ts index 526cf22216076e..1adc0fb962eafa 100644 --- a/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.types.ts +++ b/packages/react-components/react-table/src/components/DataGridRow/DataGridRow.types.ts @@ -5,6 +5,10 @@ import type { TableRowProps, TableRowSlots, TableRowState } from '../TableRow/Ta import type { TableSelectionCell } from '../TableSelectionCell/TableSelectionCell'; export type DataGridRowSlots = TableRowSlots & { + /** + * When selection is enabled on the @see DataGrid, all rows + * will render the selection cell. + */ selectionCell?: Slot; }; diff --git a/packages/react-components/react-table/stories/DataGrid/DataGridDescription.md b/packages/react-components/react-table/stories/DataGrid/DataGridDescription.md new file mode 100644 index 00000000000000..6a73c583498c3e --- /dev/null +++ b/packages/react-components/react-table/stories/DataGrid/DataGridDescription.md @@ -0,0 +1,23 @@ + + +> **⚠️ Preview components are considered unstable:** +> +> ```jsx +> +> import { Table } from '@fluentui/react-components/unstable'; +> +> ``` +> +> - Features and APIs may change before final release +> - Please contact us if you intend to use this in your product + +> 💡 This component is a higher level extension of the `Table` primitive components and the `useTableFeatures` hook. +> `DataGrid` is a feature-rich component that uses `useTableFeatures` internally, +> so there should always be full feature parity with what can be +> achieved with primitives. This component is **opinionated** and this is intentional. If the desired scenario can +> be achieved easily and does not vary too much from documented examples, it can be very convenient. If the desired +> scenario varies a lot from the documented examples please use the `Table` components with `useTableFeatures` (or +> another state management solution of choice). + +> ⚠️ Feature requests will be accepted, but the team will prioritize overall API scalability and extensibility over +> uncommon features and scenarios. diff --git a/packages/react-components/react-table/stories/DataGrid/KeyboardNavigation.stories.tsx b/packages/react-components/react-table/stories/DataGrid/KeyboardNavigation.stories.tsx index 71fcead973928e..b220a1a8e620a3 100644 --- a/packages/react-components/react-table/stories/DataGrid/KeyboardNavigation.stories.tsx +++ b/packages/react-components/react-table/stories/DataGrid/KeyboardNavigation.stories.tsx @@ -167,3 +167,14 @@ export const KeyboardNavigation = () => { ); }; + +KeyboardNavigation.parameters = { + docs: { + description: { + story: [ + 'Keyboard navigation can be achieved with the `focusMode` prop. This prop needs to be explicitly set since', + 'there is no keyboard navigation enabled by default.', + ].join('\n'), + }, + }, +}; diff --git a/packages/react-components/react-table/stories/DataGrid/MultipleSelect.stories.tsx b/packages/react-components/react-table/stories/DataGrid/MultipleSelect.stories.tsx index a266a08035e8dc..89909089f0e83b 100644 --- a/packages/react-components/react-table/stories/DataGrid/MultipleSelect.stories.tsx +++ b/packages/react-components/react-table/stories/DataGrid/MultipleSelect.stories.tsx @@ -175,3 +175,14 @@ export const MultipleSelect = () => { ); }; + +MultipleSelect.parameters = { + docs: { + description: { + story: [ + 'In order to enable this feature the `selectionMode` prop needs to be set. The API surface is directly', + 'equivalent to the usage of `useTableFeatures`.', + ].join('\n'), + }, + }, +}; diff --git a/packages/react-components/react-table/stories/DataGrid/MultipleSelectControlled.stories.tsx b/packages/react-components/react-table/stories/DataGrid/MultipleSelectControlled.stories.tsx index a5160328cc8bcb..0360e49ae06ec6 100644 --- a/packages/react-components/react-table/stories/DataGrid/MultipleSelectControlled.stories.tsx +++ b/packages/react-components/react-table/stories/DataGrid/MultipleSelectControlled.stories.tsx @@ -183,3 +183,14 @@ export const MultipleSelectControlled = () => { ); }; + +MultipleSelectControlled.parameters = { + docs: { + description: { + story: [ + 'To enable selection, the `selectionMode` prop needs to be set. The API surface is directly', + 'equivalent to the usage of `useTableFeatures`.', + ].join('\n'), + }, + }, +}; diff --git a/packages/react-components/react-table/stories/DataGrid/SelectionAppearance.stories.tsx b/packages/react-components/react-table/stories/DataGrid/SelectionAppearance.stories.tsx index 461413367aeae9..ea7fff3618d27f 100644 --- a/packages/react-components/react-table/stories/DataGrid/SelectionAppearance.stories.tsx +++ b/packages/react-components/react-table/stories/DataGrid/SelectionAppearance.stories.tsx @@ -176,3 +176,14 @@ export const SelectionAppearance = () => { ); }; + +SelectionAppearance.parameters = { + docs: { + description: { + story: [ + 'The `selectionAppearance` prop will vary the appearance of selected rows. The default appearance is a brand', + 'background color. However a neutral (grey) background is also available.', + ].join('\n'), + }, + }, +}; diff --git a/packages/react-components/react-table/stories/DataGrid/SingleSelect.stories.tsx b/packages/react-components/react-table/stories/DataGrid/SingleSelect.stories.tsx index 2f8c90ed667963..00576b4d0558d7 100644 --- a/packages/react-components/react-table/stories/DataGrid/SingleSelect.stories.tsx +++ b/packages/react-components/react-table/stories/DataGrid/SingleSelect.stories.tsx @@ -175,3 +175,14 @@ export const SingleSelect = () => { ); }; + +SingleSelect.parameters = { + docs: { + description: { + story: [ + 'To enable selection, the `selectionMode` prop needs to be set. The API surface is directly', + 'equivalent to the usage of `useTableFeatures`.', + ].join('\n'), + }, + }, +}; diff --git a/packages/react-components/react-table/stories/DataGrid/SingleSelectControlled.stories.tsx b/packages/react-components/react-table/stories/DataGrid/SingleSelectControlled.stories.tsx index f556b697106f01..27b668cc462170 100644 --- a/packages/react-components/react-table/stories/DataGrid/SingleSelectControlled.stories.tsx +++ b/packages/react-components/react-table/stories/DataGrid/SingleSelectControlled.stories.tsx @@ -183,3 +183,14 @@ export const SingleSelectControlled = () => { ); }; + +SingleSelectControlled.parameters = { + docs: { + description: { + story: [ + 'To enable selection, the `selectionMode` prop needs to be set. The API surface is directly', + 'equivalent to the usage of `useTableFeatures`.', + ].join('\n'), + }, + }, +}; diff --git a/packages/react-components/react-table/stories/DataGrid/Sort.stories.tsx b/packages/react-components/react-table/stories/DataGrid/Sort.stories.tsx index 2b3423cda5d7c0..8eb371e9dae9cd 100644 --- a/packages/react-components/react-table/stories/DataGrid/Sort.stories.tsx +++ b/packages/react-components/react-table/stories/DataGrid/Sort.stories.tsx @@ -170,3 +170,14 @@ export const Sort = () => { ); }; + +Sort.parameters = { + docs: { + description: { + story: [ + 'To enable sorting, the `sortable` prop needs to be set. The API surface is directly', + 'equivalent to the usage of `useTableFeatures`.', + ].join('\n'), + }, + }, +}; diff --git a/packages/react-components/react-table/stories/DataGrid/SortControlled.stories.tsx b/packages/react-components/react-table/stories/DataGrid/SortControlled.stories.tsx index d4d53508ef1dd8..2288284e055080 100644 --- a/packages/react-components/react-table/stories/DataGrid/SortControlled.stories.tsx +++ b/packages/react-components/react-table/stories/DataGrid/SortControlled.stories.tsx @@ -181,3 +181,14 @@ export const SortControlled = () => { ); }; + +SortControlled.parameters = { + docs: { + description: { + story: [ + 'To enable sorting, the `sortable` prop needs to be set. The API surface is directly', + 'equivalent to the usage of `useTableFeatures`.', + ].join('\n'), + }, + }, +}; diff --git a/packages/react-components/react-table/stories/DataGrid/SubtleSelection.stories.tsx b/packages/react-components/react-table/stories/DataGrid/SubtleSelection.stories.tsx index 045ab6d60cd57d..74d14c8a208396 100644 --- a/packages/react-components/react-table/stories/DataGrid/SubtleSelection.stories.tsx +++ b/packages/react-components/react-table/stories/DataGrid/SubtleSelection.stories.tsx @@ -176,3 +176,18 @@ export const SubtleSelection = () => { ); }; + +SubtleSelection.parameters = { + docs: { + description: { + story: [ + 'To enable subtle selection mode, the `subtleSelection` should be set.', + 'The selection indicator slot will only', + 'appear when:', + '- the `DataGridRow` component is hovered.', + '- The current focused element is within the `DataGridRow`', + '- The `DataGridSelectionCell` is checked', + ].join('\n'), + }, + }, +}; diff --git a/packages/react-components/react-table/stories/DataGrid/index.stories.tsx b/packages/react-components/react-table/stories/DataGrid/index.stories.tsx index 28479914e313ff..dc7a8aab3736a4 100644 --- a/packages/react-components/react-table/stories/DataGrid/index.stories.tsx +++ b/packages/react-components/react-table/stories/DataGrid/index.stories.tsx @@ -1,4 +1,13 @@ -import { DataGrid } from '../../src/components/DataGrid/DataGrid'; +import { + DataGrid, + DataGridHeader, + DataGridHeaderCell, + DataGridBody, + DataGridRow, + DataGridCell, + DataGridSelectionCell, +} from '@fluentui/react-components/unstable'; +import descriptionMd from './DataGridDescription.md'; export { Default } from './Default.stories'; export { KeyboardNavigation } from './KeyboardNavigation.stories'; @@ -13,9 +22,19 @@ export { SelectionAppearance } from './SelectionAppearance.stories'; export default { title: 'Preview Components/DataGrid', component: DataGrid, + subcomponents: { + DataGridHeader, + DataGridHeaderCell, + DataGridBody, + DataGridRow, + DataGridCell, + DataGridSelectionCell, + }, parameters: { docs: { - description: {}, + description: { + component: [descriptionMd].join('\n'), + }, }, }, }; From c4725881de8fb24f8e3ef926ffba2ffc0ce8a4b9 Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Mon, 28 Nov 2022 14:15:31 +0100 Subject: [PATCH 2/2] changefile --- ...ct-components-cc26cc7b-28ab-4693-b09d-35be4a270df1.json | 7 +++++++ ...i-react-table-e81f8ce0-fe1c-4559-a770-6ade46e5fac9.json | 7 +++++++ 2 files changed, 14 insertions(+) create mode 100644 change/@fluentui-react-components-cc26cc7b-28ab-4693-b09d-35be4a270df1.json create mode 100644 change/@fluentui-react-table-e81f8ce0-fe1c-4559-a770-6ade46e5fac9.json diff --git a/change/@fluentui-react-components-cc26cc7b-28ab-4693-b09d-35be4a270df1.json b/change/@fluentui-react-components-cc26cc7b-28ab-4693-b09d-35be4a270df1.json new file mode 100644 index 00000000000000..7cfa61eee0803d --- /dev/null +++ b/change/@fluentui-react-components-cc26cc7b-28ab-4693-b09d-35be4a270df1.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "feat: Export `DataGrid` as unstable", + "packageName": "@fluentui/react-components", + "email": "lingfangao@hotmail.com", + "dependentChangeType": "patch" +} diff --git a/change/@fluentui-react-table-e81f8ce0-fe1c-4559-a770-6ade46e5fac9.json b/change/@fluentui-react-table-e81f8ce0-fe1c-4559-a770-6ade46e5fac9.json new file mode 100644 index 00000000000000..52697a7483e232 --- /dev/null +++ b/change/@fluentui-react-table-e81f8ce0-fe1c-4559-a770-6ade46e5fac9.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "docs: Improve `DataGrid` docs", + "packageName": "@fluentui/react-table", + "email": "lingfangao@hotmail.com", + "dependentChangeType": "none" +}