From dba67cecbfc1bce22616646012538500d2a88c74 Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Sun, 11 Sep 2022 22:42:35 +0200 Subject: [PATCH 01/23] Add content wrapper and use native table styles --- .../src/components/Table/useTableStyles.ts | 2 ++ .../components/TableBody/useTableBodyStyles.ts | 11 +++++++++-- .../components/TableCell/TableCell.types.ts | 2 ++ .../components/TableCell/renderTableCell.tsx | 4 +++- .../src/components/TableCell/useTableCell.ts | 2 ++ .../components/TableCell/useTableCellStyles.ts | 7 +++++++ .../TableHeader/useTableHeaderStyles.ts | 11 +++++++++-- .../useTableHeaderCellStyles.ts | 10 +++++----- .../renderTablePrimaryCell.tsx | 18 ++++++++++-------- .../components/TableRow/useTableRowStyles.ts | 2 +- 10 files changed, 50 insertions(+), 19 deletions(-) diff --git a/packages/react-components/react-table/src/components/Table/useTableStyles.ts b/packages/react-components/react-table/src/components/Table/useTableStyles.ts index 4ea585c732a080..0346f576cbd82e 100644 --- a/packages/react-components/react-table/src/components/Table/useTableStyles.ts +++ b/packages/react-components/react-table/src/components/Table/useTableStyles.ts @@ -13,6 +13,8 @@ export const tableClassNames: SlotClassNames = { const useStyles = makeStyles({ root: { width: '100%', + display: 'table', + tableLayout: 'fixed', }, }); diff --git a/packages/react-components/react-table/src/components/TableBody/useTableBodyStyles.ts b/packages/react-components/react-table/src/components/TableBody/useTableBodyStyles.ts index 061f9ff43a9b5b..c819d69fb6fd0c 100644 --- a/packages/react-components/react-table/src/components/TableBody/useTableBodyStyles.ts +++ b/packages/react-components/react-table/src/components/TableBody/useTableBodyStyles.ts @@ -1,7 +1,13 @@ -import { mergeClasses } from '@griffel/react'; +import { mergeClasses, makeStyles } from '@griffel/react'; import type { TableBodySlots, TableBodyState } from './TableBody.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; +const useStyles = makeStyles({ + root: { + display: 'table-row-group', + }, +}); + export const tableBodyClassName = 'fui-TableBody'; export const tableBodyClassNames: SlotClassNames = { root: 'fui-TableBody', @@ -11,7 +17,8 @@ export const tableBodyClassNames: SlotClassNames = { * Apply styling to the TableBody slots based on the state */ export const useTableBodyStyles_unstable = (state: TableBodyState): TableBodyState => { - state.root.className = mergeClasses(tableBodyClassName, state.root.className); + const styles = useStyles(); + state.root.className = mergeClasses(tableBodyClassName, styles.root, state.root.className); return state; }; diff --git a/packages/react-components/react-table/src/components/TableCell/TableCell.types.ts b/packages/react-components/react-table/src/components/TableCell/TableCell.types.ts index c01684a8366180..f9c1defbf613fd 100644 --- a/packages/react-components/react-table/src/components/TableCell/TableCell.types.ts +++ b/packages/react-components/react-table/src/components/TableCell/TableCell.types.ts @@ -3,6 +3,8 @@ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utili export type TableCellSlots = { root: Slot<'td', 'div'>; + content?: Slot<'div'>; + media?: Slot<'span'>; }; diff --git a/packages/react-components/react-table/src/components/TableCell/renderTableCell.tsx b/packages/react-components/react-table/src/components/TableCell/renderTableCell.tsx index 7c4c4a84d841f2..e6f94aae568a31 100644 --- a/packages/react-components/react-table/src/components/TableCell/renderTableCell.tsx +++ b/packages/react-components/react-table/src/components/TableCell/renderTableCell.tsx @@ -11,7 +11,9 @@ export const renderTableCell_unstable = (state: TableCellState) => { // TODO Add additional slots in the appropriate place return ( - {slots.media && } {slotProps.root.children} + + {slots.media && } {slotProps.root.children} + ); }; diff --git a/packages/react-components/react-table/src/components/TableCell/useTableCell.ts b/packages/react-components/react-table/src/components/TableCell/useTableCell.ts index 3b19ff4644325f..be82931d085d6c 100644 --- a/packages/react-components/react-table/src/components/TableCell/useTableCell.ts +++ b/packages/react-components/react-table/src/components/TableCell/useTableCell.ts @@ -21,7 +21,9 @@ export const useTableCell_unstable = (props: TableCellProps, ref: React.Ref = { root: tableCellClassName, media: 'fui-TableCell__media', + content: 'fui-TableCell__content', }; /** @@ -14,6 +15,9 @@ export const tableCellClassNames: SlotClassNames = { */ const useStyles = makeStyles({ root: { + display: 'table-cell', + }, + content: { ...shorthands.padding('0px', tokens.spacingHorizontalS), display: 'flex', alignItems: 'center', @@ -33,6 +37,9 @@ const useStyles = makeStyles({ export const useTableCellStyles_unstable = (state: TableCellState): TableCellState => { const styles = useStyles(); state.root.className = mergeClasses(tableCellClassNames.root, styles.root, state.root.className); + if (state.content) { + state.content.className = mergeClasses(tableCellClassNames.content, styles.content, state.content.className); + } if (state.media) { state.media.className = mergeClasses(tableCellClassNames.media, styles.media); } diff --git a/packages/react-components/react-table/src/components/TableHeader/useTableHeaderStyles.ts b/packages/react-components/react-table/src/components/TableHeader/useTableHeaderStyles.ts index fb7a52fcb46127..8e58908c1d2319 100644 --- a/packages/react-components/react-table/src/components/TableHeader/useTableHeaderStyles.ts +++ b/packages/react-components/react-table/src/components/TableHeader/useTableHeaderStyles.ts @@ -1,4 +1,4 @@ -import { mergeClasses } from '@griffel/react'; +import { mergeClasses, makeStyles } from '@griffel/react'; import type { TableHeaderSlots, TableHeaderState } from './TableHeader.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; @@ -7,11 +7,18 @@ export const tableHeaderClassNames: SlotClassNames = { root: 'fui-TableHeader', }; +const useStyles = makeStyles({ + root: { + display: 'table-row-group', + }, +}); + /** * Apply styling to the TableHeader slots based on the state */ export const useTableHeaderStyles_unstable = (state: TableHeaderState): TableHeaderState => { - state.root.className = mergeClasses(tableHeaderClassName, state.root.className); + const styles = useStyles(); + state.root.className = mergeClasses(tableHeaderClassName, styles.root, state.root.className); return state; }; diff --git a/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts b/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts index 659ed3d2a17f3d..c74605907a0828 100644 --- a/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts +++ b/packages/react-components/react-table/src/components/TableHeaderCell/useTableHeaderCellStyles.ts @@ -15,14 +15,11 @@ export const tableHeaderCellClassNames: SlotClassNames = { */ const useStyles = makeStyles({ root: { - minHeight: '44px', - ...shorthands.padding('0px', tokens.spacingHorizontalS), - display: 'flex', - alignItems: 'center', - ...shorthands.flex(1, 1, '0px'), + display: 'table-cell', }, resetButton: { + resize: 'horizontal', boxSizing: 'content-box', backgroundColor: 'inherit', color: 'inherit', @@ -41,6 +38,9 @@ const useStyles = makeStyles({ height: '100%', alignItems: 'center', ...shorthands.gap(tokens.spacingHorizontalS), + minHeight: '44px', + ...shorthands.padding('0px', tokens.spacingHorizontalS), + ...shorthands.flex(1, 1, '0px'), }, sortable: { cursor: 'pointer', diff --git a/packages/react-components/react-table/src/components/TablePrimaryCell/renderTablePrimaryCell.tsx b/packages/react-components/react-table/src/components/TablePrimaryCell/renderTablePrimaryCell.tsx index 3d9be317354cae..9215ba094ec9a8 100644 --- a/packages/react-components/react-table/src/components/TablePrimaryCell/renderTablePrimaryCell.tsx +++ b/packages/react-components/react-table/src/components/TablePrimaryCell/renderTablePrimaryCell.tsx @@ -10,14 +10,16 @@ export const renderTablePrimaryCell_unstable = (state: TablePrimaryCellState) => return ( - {slots.media && } - {slots.wrapper && ( - - {slots.main && } - {slots.secondary && } - - )} - {slotProps.root.children} + + {slots.media && } + {slots.wrapper && ( + + {slots.main && } + {slots.secondary && } + + )} + {slotProps.root.children} + ); }; diff --git a/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts b/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts index aab746793a516d..29130c1f00a7da 100644 --- a/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts +++ b/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts @@ -14,7 +14,7 @@ export const tableRowClassNames: SlotClassNames = { */ const useStyles = makeStyles({ root: { - display: 'flex', + display: 'table-row', color: tokens.colorNeutralForeground1, ':hover': { backgroundColor: tokens.colorNeutralBackground1Hover, From 1d5eee1685a7305ad32aa0378c1d03d606570438 Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Mon, 12 Sep 2022 14:51:07 +0200 Subject: [PATCH 02/23] all table cell components to be items --- .../react-table/config/api-extractor.json | 6 ++- .../config/api-extractor.local.json | 5 --- .../react-components/react-table/package.json | 5 +-- .../react-table/src/TableCellItem.ts | 1 + .../react-table/src/TableCellPrimaryItem.ts | 1 + .../react-table/src/TablePrimaryCell.ts | 1 - .../src/components/Table/useTableStyles.ts | 1 + .../components/TableCell/TableCell.types.ts | 4 -- .../components/TableCell/renderTableCell.tsx | 9 +--- .../src/components/TableCell/useTableCell.ts | 6 +-- .../TableCell/useTableCellStyles.ts | 20 --------- .../TableCellItem/TableCellItem.test.tsx | 18 ++++++++ .../TableCellItem/TableCellItem.tsx | 18 ++++++++ .../TableCellItem/TableCellItem.types.ts | 17 ++++++++ .../src/components/TableCellItem/index.ts | 5 +++ .../TableCellItem/renderTableCellItem.tsx | 16 ++++++++ .../TableCellItem/useTableCellItem.ts | 29 +++++++++++++ .../TableCellItem/useTableCellItemStyles.ts | 41 +++++++++++++++++++ .../TableCellPrimaryItem.test.tsx} | 14 +++---- .../TableCellPrimaryItem.tsx | 18 ++++++++ .../TableCellPrimaryItem.types.ts | 20 +++++++++ .../TablePrimaryCell.test.tsx.snap | 11 +++++ .../components/TableCellPrimaryItem/index.ts | 5 +++ .../renderTableCellPrimaryItem.tsx | 23 +++++++++++ .../useTableCellPrimaryItem.ts | 34 +++++++++++++++ .../useTableCellPrimaryItemStyles.ts} | 24 +++++------ .../TablePrimaryCell/TablePrimaryCell.tsx | 18 -------- .../TablePrimaryCell.types.ts | 20 --------- .../TablePrimaryCell.test.tsx.snap | 11 ----- .../src/components/TablePrimaryCell/index.ts | 5 --- .../renderTablePrimaryCell.tsx | 25 ----------- .../TablePrimaryCell/useTablePrimaryCell.ts | 33 --------------- .../components/TableRow/useTableRowStyles.ts | 6 +-- .../TableSelectionCell.types.ts | 3 +- .../useTableSelectionCellStyles.ts | 7 ++-- .../react-components/react-table/src/index.ts | 23 ++++++++--- .../src/stories/Table/CellActions.stories.tsx | 41 +++++++++++++------ .../Table/CellNavigationMode.stories.tsx | 27 +++++++----- .../Table/CompositeNavigationMode.stories.tsx | 23 ++++++----- .../src/stories/Table/Default.stories.tsx | 22 ++++++---- .../stories/Table/MultipleSelect.stories.tsx | 25 +++++++++-- .../MultipleSelectControlled.stories.tsx | 25 +++++++++-- .../Table/NonNativeElements.stories.tsx | 21 +++++++--- .../src/stories/Table/PrimaryCell.stories.tsx | 33 +++++++++------ .../Table/RowNavigationMode.stories.tsx | 22 ++++++---- .../stories/Table/SingleSelect.stories.tsx | 17 ++++++-- .../Table/SingleSelectControlled.stories.tsx | 17 ++++++-- .../src/stories/Table/SizeSmall.stories.tsx | 27 ++++++------ .../src/stories/Table/SizeSmaller.stories.tsx | 28 +++++++------ .../src/stories/Table/Sort.stories.tsx | 19 +++++++-- .../stories/Table/SortControlled.stories.tsx | 19 +++++++-- .../react-table/tsconfig.lib.json | 4 +- workspace.json | 30 +++++++------- 53 files changed, 580 insertions(+), 323 deletions(-) delete mode 100644 packages/react-components/react-table/config/api-extractor.local.json create mode 100644 packages/react-components/react-table/src/TableCellItem.ts create mode 100644 packages/react-components/react-table/src/TableCellPrimaryItem.ts delete mode 100644 packages/react-components/react-table/src/TablePrimaryCell.ts create mode 100644 packages/react-components/react-table/src/components/TableCellItem/TableCellItem.test.tsx create mode 100644 packages/react-components/react-table/src/components/TableCellItem/TableCellItem.tsx create mode 100644 packages/react-components/react-table/src/components/TableCellItem/TableCellItem.types.ts create mode 100644 packages/react-components/react-table/src/components/TableCellItem/index.ts create mode 100644 packages/react-components/react-table/src/components/TableCellItem/renderTableCellItem.tsx create mode 100644 packages/react-components/react-table/src/components/TableCellItem/useTableCellItem.ts create mode 100644 packages/react-components/react-table/src/components/TableCellItem/useTableCellItemStyles.ts rename packages/react-components/react-table/src/components/{TablePrimaryCell/TablePrimaryCell.test.tsx => TableCellPrimaryItem/TableCellPrimaryItem.test.tsx} (71%) create mode 100644 packages/react-components/react-table/src/components/TableCellPrimaryItem/TableCellPrimaryItem.tsx create mode 100644 packages/react-components/react-table/src/components/TableCellPrimaryItem/TableCellPrimaryItem.types.ts create mode 100644 packages/react-components/react-table/src/components/TableCellPrimaryItem/__snapshots__/TablePrimaryCell.test.tsx.snap create mode 100644 packages/react-components/react-table/src/components/TableCellPrimaryItem/index.ts create mode 100644 packages/react-components/react-table/src/components/TableCellPrimaryItem/renderTableCellPrimaryItem.tsx create mode 100644 packages/react-components/react-table/src/components/TableCellPrimaryItem/useTableCellPrimaryItem.ts rename packages/react-components/react-table/src/components/{TablePrimaryCell/useTablePrimaryCellStyles.ts => TableCellPrimaryItem/useTableCellPrimaryItemStyles.ts} (64%) delete mode 100644 packages/react-components/react-table/src/components/TablePrimaryCell/TablePrimaryCell.tsx delete mode 100644 packages/react-components/react-table/src/components/TablePrimaryCell/TablePrimaryCell.types.ts delete mode 100644 packages/react-components/react-table/src/components/TablePrimaryCell/__snapshots__/TablePrimaryCell.test.tsx.snap delete mode 100644 packages/react-components/react-table/src/components/TablePrimaryCell/index.ts delete mode 100644 packages/react-components/react-table/src/components/TablePrimaryCell/renderTablePrimaryCell.tsx delete mode 100644 packages/react-components/react-table/src/components/TablePrimaryCell/useTablePrimaryCell.ts diff --git a/packages/react-components/react-table/config/api-extractor.json b/packages/react-components/react-table/config/api-extractor.json index eee94ff6de902d..637d9797ae3e6e 100644 --- a/packages/react-components/react-table/config/api-extractor.json +++ b/packages/react-components/react-table/config/api-extractor.json @@ -1,5 +1,9 @@ { "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json", "extends": "@fluentui/scripts/api-extractor/api-extractor.common.v-next.json", - "mainEntryPointFilePath": "/dist/types/index.d.ts" + "dtsRollup": { + "enabled": true, + "untrimmedFilePath": "", + "publicTrimmedFilePath": "/dist/index.d.ts" + } } diff --git a/packages/react-components/react-table/config/api-extractor.local.json b/packages/react-components/react-table/config/api-extractor.local.json deleted file mode 100644 index 69e764bce3a592..00000000000000 --- a/packages/react-components/react-table/config/api-extractor.local.json +++ /dev/null @@ -1,5 +0,0 @@ -{ - "$schema": "https://developer.microsoft.com/json-schemas/api-extractor/v7/api-extractor.schema.json", - "extends": "./api-extractor.json", - "mainEntryPointFilePath": "/dist/types/packages/react-components//src/index.d.ts" -} diff --git a/packages/react-components/react-table/package.json b/packages/react-components/react-table/package.json index 428d1cf67a5880..613ba0be0ed585 100644 --- a/packages/react-components/react-table/package.json +++ b/packages/react-components/react-table/package.json @@ -18,11 +18,10 @@ "just": "just-scripts", "lint": "just-scripts lint", "test": "jest --passWithNoTests", - "docs": "api-extractor run --config=config/api-extractor.local.json --local", - "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-table/src && yarn docs", "type-check": "tsc -b tsconfig.json", "storybook": "start-storybook", - "start": "yarn storybook" + "start": "yarn storybook", + "generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor" }, "devDependencies": { "@fluentui/eslint-plugin": "*", diff --git a/packages/react-components/react-table/src/TableCellItem.ts b/packages/react-components/react-table/src/TableCellItem.ts new file mode 100644 index 00000000000000..15a6c4833fd9df --- /dev/null +++ b/packages/react-components/react-table/src/TableCellItem.ts @@ -0,0 +1 @@ +export * from './components/TableCellItem/index'; diff --git a/packages/react-components/react-table/src/TableCellPrimaryItem.ts b/packages/react-components/react-table/src/TableCellPrimaryItem.ts new file mode 100644 index 00000000000000..4223779135de4f --- /dev/null +++ b/packages/react-components/react-table/src/TableCellPrimaryItem.ts @@ -0,0 +1 @@ +export * from './components/TableCellPrimaryItem/index'; diff --git a/packages/react-components/react-table/src/TablePrimaryCell.ts b/packages/react-components/react-table/src/TablePrimaryCell.ts deleted file mode 100644 index be51f7bfd19659..00000000000000 --- a/packages/react-components/react-table/src/TablePrimaryCell.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './components/TablePrimaryCell/index'; diff --git a/packages/react-components/react-table/src/components/Table/useTableStyles.ts b/packages/react-components/react-table/src/components/Table/useTableStyles.ts index 0346f576cbd82e..f03673365cc568 100644 --- a/packages/react-components/react-table/src/components/Table/useTableStyles.ts +++ b/packages/react-components/react-table/src/components/Table/useTableStyles.ts @@ -12,6 +12,7 @@ export const tableClassNames: SlotClassNames = { */ const useStyles = makeStyles({ root: { + borderCollapse: 'collapse', width: '100%', display: 'table', tableLayout: 'fixed', diff --git a/packages/react-components/react-table/src/components/TableCell/TableCell.types.ts b/packages/react-components/react-table/src/components/TableCell/TableCell.types.ts index f9c1defbf613fd..d3227e64d45e95 100644 --- a/packages/react-components/react-table/src/components/TableCell/TableCell.types.ts +++ b/packages/react-components/react-table/src/components/TableCell/TableCell.types.ts @@ -2,10 +2,6 @@ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utili export type TableCellSlots = { root: Slot<'td', 'div'>; - - content?: Slot<'div'>; - - media?: Slot<'span'>; }; /** diff --git a/packages/react-components/react-table/src/components/TableCell/renderTableCell.tsx b/packages/react-components/react-table/src/components/TableCell/renderTableCell.tsx index e6f94aae568a31..308a9675c3b258 100644 --- a/packages/react-components/react-table/src/components/TableCell/renderTableCell.tsx +++ b/packages/react-components/react-table/src/components/TableCell/renderTableCell.tsx @@ -8,12 +8,5 @@ import type { TableCellState, TableCellSlots } from './TableCell.types'; export const renderTableCell_unstable = (state: TableCellState) => { const { slots, slotProps } = getSlots(state); - // TODO Add additional slots in the appropriate place - return ( - - - {slots.media && } {slotProps.root.children} - - - ); + return ; }; diff --git a/packages/react-components/react-table/src/components/TableCell/useTableCell.ts b/packages/react-components/react-table/src/components/TableCell/useTableCell.ts index be82931d085d6c..1d64891da000eb 100644 --- a/packages/react-components/react-table/src/components/TableCell/useTableCell.ts +++ b/packages/react-components/react-table/src/components/TableCell/useTableCell.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities'; +import { getNativeElementProps } from '@fluentui/react-utilities'; import type { TableCellProps, TableCellState } from './TableCell.types'; import { useTableContext } from '../../contexts/tableContext'; @@ -20,11 +20,7 @@ export const useTableCell_unstable = (props: TableCellProps, ref: React.Ref = { root: tableCellClassName, - media: 'fui-TableCell__media', - content: 'fui-TableCell__content', }; /** @@ -16,18 +14,7 @@ export const tableCellClassNames: SlotClassNames = { const useStyles = makeStyles({ root: { display: 'table-cell', - }, - content: { ...shorthands.padding('0px', tokens.spacingHorizontalS), - display: 'flex', - alignItems: 'center', - ...shorthands.gap(tokens.spacingHorizontalS), - ...shorthands.flex(1, 1, '0px'), - }, - - media: { - display: 'flex', - alignItems: 'center', }, }); @@ -37,12 +24,5 @@ const useStyles = makeStyles({ export const useTableCellStyles_unstable = (state: TableCellState): TableCellState => { const styles = useStyles(); state.root.className = mergeClasses(tableCellClassNames.root, styles.root, state.root.className); - if (state.content) { - state.content.className = mergeClasses(tableCellClassNames.content, styles.content, state.content.className); - } - if (state.media) { - state.media.className = mergeClasses(tableCellClassNames.media, styles.media); - } - return state; }; diff --git a/packages/react-components/react-table/src/components/TableCellItem/TableCellItem.test.tsx b/packages/react-components/react-table/src/components/TableCellItem/TableCellItem.test.tsx new file mode 100644 index 00000000000000..dcc63a55e1a709 --- /dev/null +++ b/packages/react-components/react-table/src/components/TableCellItem/TableCellItem.test.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import { render } from '@testing-library/react'; +import { TableCellItem } from './TableCellItem'; +import { isConformant } from '../../common/isConformant'; + +describe('TableCellItem', () => { + isConformant({ + Component: TableCellItem, + displayName: 'TableCellItem', + }); + + // TODO add more tests here, and create visual regression tests in /apps/vr-tests + + it('renders a default state', () => { + const result = render(Default TableCellItem); + expect(result.container).toMatchSnapshot(); + }); +}); diff --git a/packages/react-components/react-table/src/components/TableCellItem/TableCellItem.tsx b/packages/react-components/react-table/src/components/TableCellItem/TableCellItem.tsx new file mode 100644 index 00000000000000..89b8f6af09d697 --- /dev/null +++ b/packages/react-components/react-table/src/components/TableCellItem/TableCellItem.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import { useTableCellItem_unstable } from './useTableCellItem'; +import { renderTableCellItem_unstable } from './renderTableCellItem'; +import { useTableCellItemStyles_unstable } from './useTableCellItemStyles'; +import type { TableCellItemProps } from './TableCellItem.types'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; + +/** + * TableCellItem component - TODO: add more docs + */ +export const TableCellItem: ForwardRefComponent = React.forwardRef((props, ref) => { + const state = useTableCellItem_unstable(props, ref); + + useTableCellItemStyles_unstable(state); + return renderTableCellItem_unstable(state); +}); + +TableCellItem.displayName = 'TableCellItem'; diff --git a/packages/react-components/react-table/src/components/TableCellItem/TableCellItem.types.ts b/packages/react-components/react-table/src/components/TableCellItem/TableCellItem.types.ts new file mode 100644 index 00000000000000..ecaa32773a3407 --- /dev/null +++ b/packages/react-components/react-table/src/components/TableCellItem/TableCellItem.types.ts @@ -0,0 +1,17 @@ +import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; + +export type TableCellItemSlots = { + root: Slot<'div'>; + + media?: Slot<'span'>; +}; + +/** + * TableCellItem Props + */ +export type TableCellItemProps = ComponentProps & {}; + +/** + * State used in rendering TableCellItem + */ +export type TableCellItemState = ComponentState; diff --git a/packages/react-components/react-table/src/components/TableCellItem/index.ts b/packages/react-components/react-table/src/components/TableCellItem/index.ts new file mode 100644 index 00000000000000..f36eec66a05558 --- /dev/null +++ b/packages/react-components/react-table/src/components/TableCellItem/index.ts @@ -0,0 +1,5 @@ +export * from './TableCellItem'; +export * from './TableCellItem.types'; +export * from './renderTableCellItem'; +export * from './useTableCellItem'; +export * from './useTableCellItemStyles'; diff --git a/packages/react-components/react-table/src/components/TableCellItem/renderTableCellItem.tsx b/packages/react-components/react-table/src/components/TableCellItem/renderTableCellItem.tsx new file mode 100644 index 00000000000000..05e04a03543a9e --- /dev/null +++ b/packages/react-components/react-table/src/components/TableCellItem/renderTableCellItem.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; +import { getSlots } from '@fluentui/react-utilities'; +import type { TableCellItemState, TableCellItemSlots } from './TableCellItem.types'; + +/** + * Render the final JSX of TableCellItem + */ +export const renderTableCellItem_unstable = (state: TableCellItemState) => { + const { slots, slotProps } = getSlots(state); + + return ( + + {slots.media && } {slotProps.root.children} + + ); +}; diff --git a/packages/react-components/react-table/src/components/TableCellItem/useTableCellItem.ts b/packages/react-components/react-table/src/components/TableCellItem/useTableCellItem.ts new file mode 100644 index 00000000000000..f97dc5829ffff9 --- /dev/null +++ b/packages/react-components/react-table/src/components/TableCellItem/useTableCellItem.ts @@ -0,0 +1,29 @@ +import * as React from 'react'; +import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities'; +import type { TableCellItemProps, TableCellItemState } from './TableCellItem.types'; + +/** + * Create the state required to render TableCellItem. + * + * The returned state can be modified with hooks such as useTableCellItemStyles_unstable, + * before being passed to renderTableCellItem_unstable. + * + * @param props - props from this instance of TableCellItem + * @param ref - reference to root HTMLElement of TableCellItem + */ +export const useTableCellItem_unstable = ( + props: TableCellItemProps, + ref: React.Ref, +): TableCellItemState => { + return { + components: { + root: 'div', + media: 'span', + }, + root: getNativeElementProps('div', { + ref, + ...props, + }), + media: resolveShorthand(props.media), + }; +}; diff --git a/packages/react-components/react-table/src/components/TableCellItem/useTableCellItemStyles.ts b/packages/react-components/react-table/src/components/TableCellItem/useTableCellItemStyles.ts new file mode 100644 index 00000000000000..dfc644310e798f --- /dev/null +++ b/packages/react-components/react-table/src/components/TableCellItem/useTableCellItemStyles.ts @@ -0,0 +1,41 @@ +import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; +import { tokens } from '@fluentui/react-theme'; +import type { TableCellItemSlots, TableCellItemState } from './TableCellItem.types'; +import type { SlotClassNames } from '@fluentui/react-utilities'; + +export const tableCellItemClassNames: SlotClassNames = { + root: 'fui-TableCellItem', + media: 'fui-TableCellItem_media', +}; + +/** + * Styles for the root slot + */ +const useStyles = makeStyles({ + root: { + display: 'flex', + alignItems: 'center', + ...shorthands.gap(tokens.spacingHorizontalS), + ...shorthands.flex(1, 1, '0px'), + }, + + media: { + display: 'flex', + alignItems: 'center', + }, + + // TODO add additional classes for different states and/or slots +}); + +/** + * Apply styling to the TableCellItem slots based on the state + */ +export const useTableCellItemStyles_unstable = (state: TableCellItemState): TableCellItemState => { + const styles = useStyles(); + state.root.className = mergeClasses(tableCellItemClassNames.root, styles.root, state.root.className); + if (state.media) { + state.media.className = mergeClasses(styles.media, state.media.className); + } + + return state; +}; diff --git a/packages/react-components/react-table/src/components/TablePrimaryCell/TablePrimaryCell.test.tsx b/packages/react-components/react-table/src/components/TableCellPrimaryItem/TableCellPrimaryItem.test.tsx similarity index 71% rename from packages/react-components/react-table/src/components/TablePrimaryCell/TablePrimaryCell.test.tsx rename to packages/react-components/react-table/src/components/TableCellPrimaryItem/TableCellPrimaryItem.test.tsx index 667c97cf883b95..ca571c5709eb74 100644 --- a/packages/react-components/react-table/src/components/TablePrimaryCell/TablePrimaryCell.test.tsx +++ b/packages/react-components/react-table/src/components/TableCellPrimaryItem/TableCellPrimaryItem.test.tsx @@ -1,18 +1,18 @@ import * as React from 'react'; import { render } from '@testing-library/react'; -import { TablePrimaryCell } from './TablePrimaryCell'; +import { TableCellPrimaryItem } from './TableCellPrimaryItem'; import { isConformant } from '../../common/isConformant'; -import { TablePrimaryCellProps } from './TablePrimaryCell.types'; +import { TableCellPrimaryItemProps } from './TableCellPrimaryItem.types'; import { tableContextDefaultValue, TableContextProvider } from '../../contexts/tableContext'; const tr = document.createElement('tr'); -describe('TablePrimaryCell', () => { +describe('TableCellPrimaryItem', () => { beforeEach(() => { document.body.appendChild(tr); }); isConformant({ - Component: TablePrimaryCell as React.FC, - displayName: 'TablePrimaryCell', + Component: TableCellPrimaryItem as React.FC, + displayName: 'TableCellPrimaryItem', renderOptions: { container: tr, }, @@ -32,14 +32,14 @@ describe('TablePrimaryCell', () => { // TODO add more tests here, and create visual regression tests in /apps/vr-tests it('renders a default state', () => { - const result = render(Default TablePrimaryCell, { container: tr }); + const result = render(Default TableCellPrimaryItem, { container: tr }); expect(result.container).toMatchSnapshot(); }); it('renders as div if `noNativeElements` is set', () => { const { container } = render( - Table cell + Table cell , ); expect(container.firstElementChild?.tagName).toEqual('DIV'); diff --git a/packages/react-components/react-table/src/components/TableCellPrimaryItem/TableCellPrimaryItem.tsx b/packages/react-components/react-table/src/components/TableCellPrimaryItem/TableCellPrimaryItem.tsx new file mode 100644 index 00000000000000..9e6451b1b69487 --- /dev/null +++ b/packages/react-components/react-table/src/components/TableCellPrimaryItem/TableCellPrimaryItem.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import { useTableCellPrimaryItem_unstable } from './useTableCellPrimaryItem'; +import { renderTableCellPrimaryItem_unstable } from './renderTableCellPrimaryItem'; +import { useTableCellPrimaryItemStyles_unstable } from './useTableCellPrimaryItemStyles'; +import type { TableCellPrimaryItemProps } from './TableCellPrimaryItem.types'; +import type { ForwardRefComponent } from '@fluentui/react-utilities'; + +/** + * TableCellPrimaryItem component - TODO: add more docs + */ +export const TableCellPrimaryItem: ForwardRefComponent = React.forwardRef((props, ref) => { + const state = useTableCellPrimaryItem_unstable(props, ref); + + useTableCellPrimaryItemStyles_unstable(state); + return renderTableCellPrimaryItem_unstable(state); +}); + +TableCellPrimaryItem.displayName = 'TableCellPrimaryItem'; diff --git a/packages/react-components/react-table/src/components/TableCellPrimaryItem/TableCellPrimaryItem.types.ts b/packages/react-components/react-table/src/components/TableCellPrimaryItem/TableCellPrimaryItem.types.ts new file mode 100644 index 00000000000000..400458bd974039 --- /dev/null +++ b/packages/react-components/react-table/src/components/TableCellPrimaryItem/TableCellPrimaryItem.types.ts @@ -0,0 +1,20 @@ +import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; +import { TableCellItemSlots } from '../TableCellItem'; + +export type TableCellPrimaryItemSlots = { + main: Slot<'span'>; + + secondary: Slot<'span'>; + + wrapper: Slot<'div'>; +} & TableCellItemSlots; + +/** + * TableCellPrimaryItem Props + */ +export type TableCellPrimaryItemProps = ComponentProps> & {}; + +/** + * State used in rendering TableCellPrimaryItem + */ +export type TableCellPrimaryItemState = ComponentState; diff --git a/packages/react-components/react-table/src/components/TableCellPrimaryItem/__snapshots__/TablePrimaryCell.test.tsx.snap b/packages/react-components/react-table/src/components/TableCellPrimaryItem/__snapshots__/TablePrimaryCell.test.tsx.snap new file mode 100644 index 00000000000000..e71098f7f16e71 --- /dev/null +++ b/packages/react-components/react-table/src/components/TableCellPrimaryItem/__snapshots__/TablePrimaryCell.test.tsx.snap @@ -0,0 +1,11 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`TableCellPrimaryItem renders a default state 1`] = ` + + + Default TableCellPrimaryItem + + +`; diff --git a/packages/react-components/react-table/src/components/TableCellPrimaryItem/index.ts b/packages/react-components/react-table/src/components/TableCellPrimaryItem/index.ts new file mode 100644 index 00000000000000..1d185d7947ec04 --- /dev/null +++ b/packages/react-components/react-table/src/components/TableCellPrimaryItem/index.ts @@ -0,0 +1,5 @@ +export * from './TableCellPrimaryItem'; +export * from './TableCellPrimaryItem.types'; +export * from './renderTableCellPrimaryItem'; +export * from './useTableCellPrimaryItem'; +export * from './useTableCellPrimaryItemStyles'; diff --git a/packages/react-components/react-table/src/components/TableCellPrimaryItem/renderTableCellPrimaryItem.tsx b/packages/react-components/react-table/src/components/TableCellPrimaryItem/renderTableCellPrimaryItem.tsx new file mode 100644 index 00000000000000..469976e44c5d35 --- /dev/null +++ b/packages/react-components/react-table/src/components/TableCellPrimaryItem/renderTableCellPrimaryItem.tsx @@ -0,0 +1,23 @@ +import * as React from 'react'; +import { getSlots } from '@fluentui/react-utilities'; +import type { TableCellPrimaryItemState, TableCellPrimaryItemSlots } from './TableCellPrimaryItem.types'; + +/** + * Render the final JSX of TableCellPrimaryItem + */ +export const renderTableCellPrimaryItem_unstable = (state: TableCellPrimaryItemState) => { + const { slots, slotProps } = getSlots(state); + + return ( + + {slots.media && } + {slots.wrapper && ( + + {slots.main && } + {slots.secondary && } + + )} + {slotProps.root.children} + + ); +}; diff --git a/packages/react-components/react-table/src/components/TableCellPrimaryItem/useTableCellPrimaryItem.ts b/packages/react-components/react-table/src/components/TableCellPrimaryItem/useTableCellPrimaryItem.ts new file mode 100644 index 00000000000000..207cb73168f67b --- /dev/null +++ b/packages/react-components/react-table/src/components/TableCellPrimaryItem/useTableCellPrimaryItem.ts @@ -0,0 +1,34 @@ +import * as React from 'react'; +import { resolveShorthand } from '@fluentui/react-utilities'; +import type { TableCellPrimaryItemProps, TableCellPrimaryItemState } from './TableCellPrimaryItem.types'; +import { useTableCellItem_unstable } from '../TableCellItem/useTableCellItem'; + +/** + * Create the state required to render TableCellPrimaryItem. + * + * The returned state can be modified with hooks such as useTableCellPrimaryItemStyles_unstable, + * before being passed to renderTableCellPrimaryItem_unstable. + * + * @param props - props from this instance of TableCellPrimaryItem + * @param ref - reference to root HTMLElement of TableCellPrimaryItem + */ +export const useTableCellPrimaryItem_unstable = ( + props: TableCellPrimaryItemProps, + ref: React.Ref, +): TableCellPrimaryItemState => { + const tableCellState = useTableCellItem_unstable(props, ref); + + return { + ...tableCellState, + components: { + ...tableCellState.components, + main: 'span', + secondary: 'span', + wrapper: 'div', + media: 'span', + }, + main: resolveShorthand(props.secondary), + secondary: resolveShorthand(props.main), + wrapper: resolveShorthand(props.wrapper, { required: !!props.main || !!props.secondary }), + }; +}; diff --git a/packages/react-components/react-table/src/components/TablePrimaryCell/useTablePrimaryCellStyles.ts b/packages/react-components/react-table/src/components/TableCellPrimaryItem/useTableCellPrimaryItemStyles.ts similarity index 64% rename from packages/react-components/react-table/src/components/TablePrimaryCell/useTablePrimaryCellStyles.ts rename to packages/react-components/react-table/src/components/TableCellPrimaryItem/useTableCellPrimaryItemStyles.ts index ac72f919ad5f54..e07fa101f552c6 100644 --- a/packages/react-components/react-table/src/components/TablePrimaryCell/useTablePrimaryCellStyles.ts +++ b/packages/react-components/react-table/src/components/TableCellPrimaryItem/useTableCellPrimaryItemStyles.ts @@ -1,15 +1,15 @@ import { makeStyles, mergeClasses } from '@griffel/react'; import { tokens } from '@fluentui/react-theme'; -import type { TablePrimaryCellSlots, TablePrimaryCellState } from './TablePrimaryCell.types'; +import type { TableCellPrimaryItemSlots, TableCellPrimaryItemState } from './TableCellPrimaryItem.types'; import type { SlotClassNames } from '@fluentui/react-utilities'; -import { useTableCellStyles_unstable } from '../TableCell/useTableCellStyles'; +import { useTableCellItemStyles_unstable } from '../TableCellItem/useTableCellItemStyles'; -export const tablePrimaryCellClassNames: SlotClassNames = { - root: 'fui-TablePrimaryCell', - media: 'fui-TablePrimaryCell__media', - main: 'fui-TablePrimaryCell__main', - secondary: 'fui-TablePrimaryCell__secondary', - wrapper: 'fui-TablePrimaryCell__wrapper', +export const tablePrimaryCellClassNames: SlotClassNames = { + root: 'fui-TableCellPrimaryItem', + media: 'fui-TableCellPrimaryItem__media', + main: 'fui-TableCellPrimaryItem__main', + secondary: 'fui-TableCellPrimaryItem__secondary', + wrapper: 'fui-TableCellPrimaryItem__wrapper', }; /** @@ -36,15 +36,13 @@ const useStyles = makeStyles({ fontSize: tokens.fontSizeBase300, color: tokens.colorNeutralForeground2, }, - - // TODO add additional classes for different states and/or slots }); /** - * Apply styling to the TablePrimaryCell slots based on the state + * Apply styling to the TableCellPrimaryItem slots based on the state */ -export const useTablePrimaryCellStyles_unstable = (state: TablePrimaryCellState): TablePrimaryCellState => { - useTableCellStyles_unstable(state); +export const useTableCellPrimaryItemStyles_unstable = (state: TableCellPrimaryItemState): TableCellPrimaryItemState => { + useTableCellItemStyles_unstable(state); const styles = useStyles(); state.root.className = mergeClasses(tablePrimaryCellClassNames.root, state.root.className); diff --git a/packages/react-components/react-table/src/components/TablePrimaryCell/TablePrimaryCell.tsx b/packages/react-components/react-table/src/components/TablePrimaryCell/TablePrimaryCell.tsx deleted file mode 100644 index e6bae5635b1ac0..00000000000000 --- a/packages/react-components/react-table/src/components/TablePrimaryCell/TablePrimaryCell.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import * as React from 'react'; -import { useTablePrimaryCell_unstable } from './useTablePrimaryCell'; -import { renderTablePrimaryCell_unstable } from './renderTablePrimaryCell'; -import { useTablePrimaryCellStyles_unstable } from './useTablePrimaryCellStyles'; -import type { TablePrimaryCellProps } from './TablePrimaryCell.types'; -import type { ForwardRefComponent } from '@fluentui/react-utilities'; - -/** - * TablePrimaryCell component - TODO: add more docs - */ -export const TablePrimaryCell: ForwardRefComponent = React.forwardRef((props, ref) => { - const state = useTablePrimaryCell_unstable(props, ref); - - useTablePrimaryCellStyles_unstable(state); - return renderTablePrimaryCell_unstable(state); -}); - -TablePrimaryCell.displayName = 'TablePrimaryCell'; diff --git a/packages/react-components/react-table/src/components/TablePrimaryCell/TablePrimaryCell.types.ts b/packages/react-components/react-table/src/components/TablePrimaryCell/TablePrimaryCell.types.ts deleted file mode 100644 index 5db13646456764..00000000000000 --- a/packages/react-components/react-table/src/components/TablePrimaryCell/TablePrimaryCell.types.ts +++ /dev/null @@ -1,20 +0,0 @@ -import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; -import { TableCellSlots } from '../TableCell/TableCell.types'; - -export type TablePrimaryCellSlots = { - main: Slot<'span'>; - - secondary: Slot<'span'>; - - wrapper: Slot<'div'>; -} & TableCellSlots; - -/** - * TablePrimaryCell Props - */ -export type TablePrimaryCellProps = ComponentProps> & {}; - -/** - * State used in rendering TablePrimaryCell - */ -export type TablePrimaryCellState = ComponentState; diff --git a/packages/react-components/react-table/src/components/TablePrimaryCell/__snapshots__/TablePrimaryCell.test.tsx.snap b/packages/react-components/react-table/src/components/TablePrimaryCell/__snapshots__/TablePrimaryCell.test.tsx.snap deleted file mode 100644 index 020bc1a82b2725..00000000000000 --- a/packages/react-components/react-table/src/components/TablePrimaryCell/__snapshots__/TablePrimaryCell.test.tsx.snap +++ /dev/null @@ -1,11 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`TablePrimaryCell renders a default state 1`] = ` - - - Default TablePrimaryCell - - -`; diff --git a/packages/react-components/react-table/src/components/TablePrimaryCell/index.ts b/packages/react-components/react-table/src/components/TablePrimaryCell/index.ts deleted file mode 100644 index 8d155e177b5445..00000000000000 --- a/packages/react-components/react-table/src/components/TablePrimaryCell/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export * from './TablePrimaryCell'; -export * from './TablePrimaryCell.types'; -export * from './renderTablePrimaryCell'; -export * from './useTablePrimaryCell'; -export * from './useTablePrimaryCellStyles'; diff --git a/packages/react-components/react-table/src/components/TablePrimaryCell/renderTablePrimaryCell.tsx b/packages/react-components/react-table/src/components/TablePrimaryCell/renderTablePrimaryCell.tsx deleted file mode 100644 index 9215ba094ec9a8..00000000000000 --- a/packages/react-components/react-table/src/components/TablePrimaryCell/renderTablePrimaryCell.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import * as React from 'react'; -import { getSlots } from '@fluentui/react-utilities'; -import type { TablePrimaryCellState, TablePrimaryCellSlots } from './TablePrimaryCell.types'; - -/** - * Render the final JSX of TablePrimaryCell - */ -export const renderTablePrimaryCell_unstable = (state: TablePrimaryCellState) => { - const { slots, slotProps } = getSlots(state); - - return ( - - - {slots.media && } - {slots.wrapper && ( - - {slots.main && } - {slots.secondary && } - - )} - {slotProps.root.children} - - - ); -}; diff --git a/packages/react-components/react-table/src/components/TablePrimaryCell/useTablePrimaryCell.ts b/packages/react-components/react-table/src/components/TablePrimaryCell/useTablePrimaryCell.ts deleted file mode 100644 index aa86812ae6a564..00000000000000 --- a/packages/react-components/react-table/src/components/TablePrimaryCell/useTablePrimaryCell.ts +++ /dev/null @@ -1,33 +0,0 @@ -import * as React from 'react'; -import { resolveShorthand } from '@fluentui/react-utilities'; -import type { TablePrimaryCellProps, TablePrimaryCellState } from './TablePrimaryCell.types'; -import { useTableCell_unstable } from '../TableCell/useTableCell'; - -/** - * Create the state required to render TablePrimaryCell. - * - * The returned state can be modified with hooks such as useTablePrimaryCellStyles_unstable, - * before being passed to renderTablePrimaryCell_unstable. - * - * @param props - props from this instance of TablePrimaryCell - * @param ref - reference to root HTMLElement of TablePrimaryCell - */ -export const useTablePrimaryCell_unstable = ( - props: TablePrimaryCellProps, - ref: React.Ref, -): TablePrimaryCellState => { - const tableCellState = useTableCell_unstable(props, ref); - - return { - ...tableCellState, - components: { - ...tableCellState.components, - main: 'span', - secondary: 'span', - wrapper: 'div', - }, - main: resolveShorthand(props.secondary), - secondary: resolveShorthand(props.main), - wrapper: resolveShorthand(props.wrapper, { required: !!props.main || !!props.secondary }), - }; -}; diff --git a/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts b/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts index 29130c1f00a7da..8ddf4e50a82d3b 100644 --- a/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts +++ b/packages/react-components/react-table/src/components/TableRow/useTableRowStyles.ts @@ -25,17 +25,17 @@ const useStyles = makeStyles({ }, medium: { - minHeight: '44px', + height: '44px', ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2), }, small: { - minHeight: '34px', + height: '34px', ...shorthands.borderBottom(tokens.strokeWidthThin, 'solid', tokens.colorNeutralStroke2), }, smaller: { - minHeight: '24px', + height: '24px', fontSize: tokens.fontSizeBase200, }, }); diff --git a/packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.types.ts b/packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.types.ts index 339d0a7e0ddfbe..c8ff497d29eb38 100644 --- a/packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.types.ts +++ b/packages/react-components/react-table/src/components/TableSelectionCell/TableSelectionCell.types.ts @@ -1,6 +1,6 @@ import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; import type { Checkbox, CheckboxProps } from '@fluentui/react-checkbox'; -import { TableCellSlots, TableCellState } from '../TableCell/TableCell.types'; +import { TableCellSlots } from '../TableCell/TableCell.types'; export type TableSelectionCellSlots = { /** @@ -28,5 +28,4 @@ export type TableSelectionCellProps = ComponentProps & - Pick & Pick, 'type' | 'checked'>; diff --git a/packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.ts b/packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.ts index 3581d7d83bbc3a..c1f98c66d22e66 100644 --- a/packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.ts +++ b/packages/react-components/react-table/src/components/TableSelectionCell/useTableSelectionCellStyles.ts @@ -14,11 +14,10 @@ export const tableSelectionCellClassNames: SlotClassNames { {items.map(item => ( - - {item.file.label} - - + + + ))} diff --git a/packages/react-components/react-table/src/stories/Table/CompositeNavigationMode.stories.tsx b/packages/react-components/react-table/src/stories/Table/CompositeNavigationMode.stories.tsx index fdf79fd07aa37e..5d54b0537a69de 100644 --- a/packages/react-components/react-table/src/stories/Table/CompositeNavigationMode.stories.tsx +++ b/packages/react-components/react-table/src/stories/Table/CompositeNavigationMode.stories.tsx @@ -9,7 +9,7 @@ import { Video16Regular as VideoRegular, } from '@fluentui/react-icons'; import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components'; -import { TableBody, TableCell, TableRow, Table, TableHeader, TableHeaderCell } from '../..'; +import { TableBody, TableCell, TableRow, Table, TableHeader, TableHeaderCell, TableCellItem } from '../..'; import { useNavigationMode } from '../../navigationModes'; const items = [ @@ -74,18 +74,21 @@ export const CompositeNavigationMode = () => { {items.map(item => ( - - {item.file.label} + + {item.file.label} - } - > - {item.author.label} + + + } + > + {item.author.label} + {item.lastUpdated.label} - - {item.lastUpdate.label} + + {item.lastUpdate.label} ))} diff --git a/packages/react-components/react-table/src/stories/Table/Default.stories.tsx b/packages/react-components/react-table/src/stories/Table/Default.stories.tsx index a996a0783f7b39..268a3f5ae93b2a 100644 --- a/packages/react-components/react-table/src/stories/Table/Default.stories.tsx +++ b/packages/react-components/react-table/src/stories/Table/Default.stories.tsx @@ -9,7 +9,7 @@ import { Video16Regular as VideoRegular, } from '@fluentui/react-icons'; import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components'; -import { TableBody, TableCell, TableRow, Table, TableHeader, TableHeaderCell } from '../..'; +import { TableBody, TableCell, TableRow, Table, TableHeader, TableHeaderCell, TableCellItem } from '../..'; const items = [ { @@ -70,14 +70,22 @@ export const Default = () => { {items.map(item => ( - {item.file.label} - } - > - {item.author.label} + + {item.file.label} + + + + } + > + {item.author.label} + {item.lastUpdated.label} - {item.lastUpdate.label} + + {item.lastUpdate.label} + ))} diff --git a/packages/react-components/react-table/src/stories/Table/MultipleSelect.stories.tsx b/packages/react-components/react-table/src/stories/Table/MultipleSelect.stories.tsx index 95cc79b9f02f4e..ccc6c0ea83e709 100644 --- a/packages/react-components/react-table/src/stories/Table/MultipleSelect.stories.tsx +++ b/packages/react-components/react-table/src/stories/Table/MultipleSelect.stories.tsx @@ -9,7 +9,16 @@ import { VideoRegular, } from '@fluentui/react-icons'; import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components'; -import { TableBody, TableCell, TableRow, Table, TableHeader, TableHeaderCell, TableSelectionCell } from '../..'; +import { + TableBody, + TableCell, + TableRow, + Table, + TableHeader, + TableHeaderCell, + TableSelectionCell, + TableCellItem, +} from '../..'; import { useTable, ColumnDefinition } from '../../hooks'; import { useNavigationMode } from '../../navigationModes/useNavigationMode'; @@ -135,10 +144,18 @@ export const MultipleSelect = () => { {rows.map(({ item, selected, onClick, onKeyDown }) => ( - {item.file.label} - }>{item.author.label} + + {item.file.label} + + + }> + {item.author.label} + + {item.lastUpdated.label} - {item.lastUpdate.label} + + {item.lastUpdate.label} + ))} diff --git a/packages/react-components/react-table/src/stories/Table/MultipleSelectControlled.stories.tsx b/packages/react-components/react-table/src/stories/Table/MultipleSelectControlled.stories.tsx index 052fe68b0b88eb..5c60e3b1cb9b60 100644 --- a/packages/react-components/react-table/src/stories/Table/MultipleSelectControlled.stories.tsx +++ b/packages/react-components/react-table/src/stories/Table/MultipleSelectControlled.stories.tsx @@ -9,7 +9,16 @@ import { VideoRegular, } from '@fluentui/react-icons'; import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components'; -import { TableBody, TableCell, TableRow, Table, TableHeader, TableHeaderCell, TableSelectionCell } from '../..'; +import { + TableBody, + TableCell, + TableRow, + Table, + TableHeader, + TableHeaderCell, + TableSelectionCell, + TableCellItem, +} from '../..'; import { useTable, ColumnDefinition, RowId } from '../../hooks'; import { useNavigationMode } from '../../navigationModes/useNavigationMode'; @@ -137,10 +146,18 @@ export const MultipleSelectControlled = () => { {rows.map(({ item, selected, onClick, onKeyDown }) => ( - {item.file.label} - }>{item.author.label} + + {item.file.label} + + + }> + {item.author.label} + + {item.lastUpdated.label} - {item.lastUpdate.label} + + {item.lastUpdate.label} + ))} diff --git a/packages/react-components/react-table/src/stories/Table/NonNativeElements.stories.tsx b/packages/react-components/react-table/src/stories/Table/NonNativeElements.stories.tsx index c1260f8e4b2711..657cfae9d091de 100644 --- a/packages/react-components/react-table/src/stories/Table/NonNativeElements.stories.tsx +++ b/packages/react-components/react-table/src/stories/Table/NonNativeElements.stories.tsx @@ -10,6 +10,7 @@ import { } from '@fluentui/react-icons'; import { PresenceBadgeStatus, Avatar } from '@fluentui/react-components'; import { TableBody, TableCell, TableRow, Table, TableHeader, TableHeaderCell } from '../..'; +import { TableCellItem } from '../../components/TableCellItem/TableCellItem'; const items = [ { @@ -70,14 +71,22 @@ export const NonNativeElements = () => { {items.map(item => ( - {item.file.label} - } - > - {item.author.label} + + {item.file.label} + + + + } + > + {item.author.label} + {item.lastUpdated.label} - {item.lastUpdate.label} + + {item.lastUpdate.label} + ))} diff --git a/packages/react-components/react-table/src/stories/Table/PrimaryCell.stories.tsx b/packages/react-components/react-table/src/stories/Table/PrimaryCell.stories.tsx index 453718573c9870..26ce4735e31d6b 100644 --- a/packages/react-components/react-table/src/stories/Table/PrimaryCell.stories.tsx +++ b/packages/react-components/react-table/src/stories/Table/PrimaryCell.stories.tsx @@ -18,7 +18,8 @@ import { TableHeader, TableHeaderCell, TableCellActions, - TablePrimaryCell, + TableCellPrimaryItem, + TableCellItem, } from '../..'; const items = [ @@ -80,19 +81,27 @@ export const PrimaryCell = () => { {items.map(item => ( - - -