diff --git a/change/@fluentui-react-table-b7b4e350-1297-4672-9a9d-88072c4990fa.json b/change/@fluentui-react-table-b7b4e350-1297-4672-9a9d-88072c4990fa.json new file mode 100644 index 0000000000000..7a8e01343a63a --- /dev/null +++ b/change/@fluentui-react-table-b7b4e350-1297-4672-9a9d-88072c4990fa.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "BREAKING(TableCellLayout): `wrapper` slot renamed to `content`", + "packageName": "@fluentui/react-table", + "email": "lingfangao@hotmail.com", + "dependentChangeType": "patch" +} diff --git a/packages/react-components/react-table/etc/react-table.api.md b/packages/react-components/react-table/etc/react-table.api.md index d086516650752..47ff982dd4a83 100644 --- a/packages/react-components/react-table/etc/react-table.api.md +++ b/packages/react-components/react-table/etc/react-table.api.md @@ -329,7 +329,7 @@ export type TableCellLayoutSlots = { media: Slot<'span'>; main: Slot<'span'>; description: Slot<'span'>; - wrapper: Slot<'div'>; + content: Slot<'div'>; }; // @public diff --git a/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.types.ts b/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.types.ts index c0a7e107ab291..2ccc64ee276f8 100644 --- a/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.types.ts +++ b/packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.types.ts @@ -29,7 +29,7 @@ export type TableCellLayoutSlots = { /** * A layout wrapper for the main and description slots */ - wrapper: Slot<'div'>; + content: Slot<'div'>; }; /** diff --git a/packages/react-components/react-table/src/components/TableCellLayout/__snapshots__/TableCellLayout.test.tsx.snap b/packages/react-components/react-table/src/components/TableCellLayout/__snapshots__/TableCellLayout.test.tsx.snap index 853ac04bae07b..4d827d37111c5 100644 --- a/packages/react-components/react-table/src/components/TableCellLayout/__snapshots__/TableCellLayout.test.tsx.snap +++ b/packages/react-components/react-table/src/components/TableCellLayout/__snapshots__/TableCellLayout.test.tsx.snap @@ -6,7 +6,7 @@ exports[`TableCellLayout renders a default state 1`] = ` class="fui-TableCellLayout" >
)} - {slots.wrapper && ( - + {slots.content && ( + {slots.main && {slotProps.root.children}} {slots.description && } - + )} ); diff --git a/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayout.ts b/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayout.ts index 0540f1be87049..a672393b0eb64 100644 --- a/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayout.ts +++ b/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayout.ts @@ -29,7 +29,7 @@ export const useTableCellLayout_unstable = ( root: 'div', main: 'span', description: 'span', - wrapper: 'div', + content: 'div', media: 'span', }, root: getNativeElementProps('div', { ref, ...props }), @@ -37,7 +37,7 @@ export const useTableCellLayout_unstable = ( main: resolveShorthand(props.main, { required: true }), media: resolveShorthand(props.media), description: resolveShorthand(props.description), - wrapper: resolveShorthand(props.wrapper, { required: !!props.description || !!props.children }), + content: resolveShorthand(props.content, { required: !!props.description || !!props.children }), avatarSize: tableAvatarSizeMap[size], size, }; diff --git a/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutStyles.ts b/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutStyles.ts index c27a2c3b37769..243516467dd77 100644 --- a/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutStyles.ts +++ b/packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutStyles.ts @@ -9,7 +9,7 @@ export const tableCellLayoutClassNames: SlotClassNames = { media: 'fui-TableCellLayout__media', main: 'fui-TableCellLayout__main', description: 'fui-TableCellLayout__description', - wrapper: 'fui-TableCellLayout__wrapper', + content: 'fui-TableCellLayout__content', }; /** @@ -22,7 +22,7 @@ const useStyles = makeStyles({ ...shorthands.gap(tokens.spacingHorizontalS), ...shorthands.flex(1, 1, '0px'), }, - wrapper: { + content: { display: 'flex', flexDirection: 'column', }, @@ -94,8 +94,8 @@ export const useTableCellLayoutStyles_unstable = (state: TableCellLayoutState): ); } - if (state.wrapper) { - state.wrapper.className = mergeClasses(tableCellLayoutClassNames.wrapper, styles.wrapper, state.wrapper.className); + if (state.content) { + state.content.className = mergeClasses(tableCellLayoutClassNames.content, styles.content, state.content.className); } return state;