From ca87cc9b1c2c15caa3b537a732eb40bd293a2e33 Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Fri, 6 Jan 2023 17:36:07 +0100 Subject: [PATCH 1/3] BREAKING(TableCellLayout): `wrwapper` slot renamed to `content` See title Fixes #26203 --- .../react-components/react-table/etc/react-table.api.md | 2 +- .../components/TableCellLayout/TableCellLayout.types.ts | 2 +- .../components/TableCellLayout/renderTableCellLayout.tsx | 6 +++--- .../src/components/TableCellLayout/useTableCellLayout.ts | 4 ++-- .../TableCellLayout/useTableCellLayoutStyles.ts | 8 ++++---- 5 files changed, 11 insertions(+), 11 deletions(-) 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 d0865166507520..47ff982dd4a83b 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 c0a7e107ab2910..2ccc64ee276f8a 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/renderTableCellLayout.tsx b/packages/react-components/react-table/src/components/TableCellLayout/renderTableCellLayout.tsx index e3f8d155d7a790..d694f1ba11fc4b 100644 --- a/packages/react-components/react-table/src/components/TableCellLayout/renderTableCellLayout.tsx +++ b/packages/react-components/react-table/src/components/TableCellLayout/renderTableCellLayout.tsx @@ -19,11 +19,11 @@ export const renderTableCellLayout_unstable = ( )} - {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 0540f1be870491..a672393b0eb640 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 c27a2c3b37769f..243516467dd775 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; From 7af39fbea0a2196561388fc64e2769c12b162472 Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Fri, 6 Jan 2023 17:38:52 +0100 Subject: [PATCH 2/3] changefile --- ...i-react-table-b7b4e350-1297-4672-9a9d-88072c4990fa.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@fluentui-react-table-b7b4e350-1297-4672-9a9d-88072c4990fa.json 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 00000000000000..7a8e01343a63ac --- /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" +} From 1acb59e247700ed87a191ec01ed641d917e5201b Mon Sep 17 00:00:00 2001 From: Lingfan Gao Date: Mon, 9 Jan 2023 09:56:28 +0100 Subject: [PATCH 3/3] update snapshot --- .../TableCellLayout/__snapshots__/TableCellLayout.test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 853ac04bae07b7..4d827d37111c5d 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" >