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;