feat: Implement table cell layout components (#24773)

* feat: Implement table cell layout components

Implements table cell layout components from #24762 to break up the
aforementioned PR

* changefiles

change/@fluentui-react-components-5596cfa5-301f-4b16-81ef-f2d953a7f397.json

@@ -0,0 +1,7 @@
+{
+ "type": "patch",
+ "comment": "feat: Export table cell layout components from unstable",
+ "packageName": "@fluentui/react-components",
+ "email": "lingfangao@hotmail.com",
+ "dependentChangeType": "patch"
+}

change/@fluentui-react-table-563b3e0b-f140-4bac-bcae-d4974090994d.json

@@ -0,0 +1,7 @@
+{
+ "type": "prerelease",
+ "comment": "feat: Implement table cell layout components",
+ "packageName": "@fluentui/react-table",
+ "email": "lingfangao@hotmail.com",
+ "dependentChangeType": "patch"
+}

packages/react-components/react-components/etc/react-components.unstable.api.md

@@ -153,6 +153,8 @@ import { renderTable_unstable } from '@fluentui/react-table';
 import { renderTableBody_unstable } from '@fluentui/react-table';
 import { renderTableCell_unstable } from '@fluentui/react-table';
 import { renderTableCellActions_unstable } from '@fluentui/react-table';
+import { renderTableCellLayout_unstable } from '@fluentui/react-table';
+import { renderTableCellPrimaryLayout_unstable } from '@fluentui/react-table';
 import { renderTableHeader_unstable } from '@fluentui/react-table';
 import { renderTableHeaderCell_unstable } from '@fluentui/react-table';
 import { renderTablePrimaryCell_unstable } from '@fluentui/react-table';
@@ -191,6 +193,10 @@ import { TableCellActionsSlots } from '@fluentui/react-table';
 import { TableCellActionsState } from '@fluentui/react-table';
 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 { TableCellPrimaryLayout } from '@fluentui/react-table';
+import { tableCellPrimaryLayoutClassNames } from '@fluentui/react-table';
 import { TableCellProps } from '@fluentui/react-table';
 import { TableCellSlots } from '@fluentui/react-table';
 import { TableCellState } from '@fluentui/react-table';
@@ -295,6 +301,10 @@ import { useTableBodyStyles_unstable } from '@fluentui/react-table';
 import { useTableCell_unstable } from '@fluentui/react-table';
 import { useTableCellActions_unstable } from '@fluentui/react-table';
 import { useTableCellActionsStyles_unstable } from '@fluentui/react-table';
+import { useTableCellLayout_unstable } from '@fluentui/react-table';
+import { useTableCellLayoutStyles_unstable } from '@fluentui/react-table';
+import { useTableCellPrimaryLayout_unstable } from '@fluentui/react-table';
+import { useTableCellPrimaryLayoutStyles_unstable } from '@fluentui/react-table';
 import { useTableCellStyles_unstable } from '@fluentui/react-table';
 import { useTableContext } from '@fluentui/react-table';
 import { useTableHeader_unstable } from '@fluentui/react-table';
@@ -610,6 +620,10 @@ export { renderTableCell_unstable }
 
 export { renderTableCellActions_unstable }
 
+export { renderTableCellLayout_unstable }
+
+export { renderTableCellPrimaryLayout_unstable }
+
 export { renderTableHeader_unstable }
 
 export { renderTableHeaderCell_unstable }
@@ -686,6 +700,14 @@ export { tableCellClassName }
 
 export { tableCellClassNames }
 
+export { TableCellLayout }
+
+export { tableCellLayoutClassNames }
+
+export { TableCellPrimaryLayout }
+
+export { tableCellPrimaryLayoutClassNames }
+
 export { TableCellProps }
 
 export { TableCellSlots }
@@ -894,6 +916,14 @@ export { useTableCellActions_unstable }
 
 export { useTableCellActionsStyles_unstable }
 
+export { useTableCellLayout_unstable }
+
+export { useTableCellLayoutStyles_unstable }
+
+export { useTableCellPrimaryLayout_unstable }
+
+export { useTableCellPrimaryLayoutStyles_unstable }
+
 export { useTableCellStyles_unstable }
 
 export { useTableContext }

packages/react-components/react-components/src/unstable/index.ts

@@ -271,6 +271,16 @@ export {
  useTableCellActionsStyles_unstable,
  useTableCellActions_unstable,
  renderTableCellActions_unstable,
+ TableCellLayout,
+ useTableCellLayout_unstable,
+ useTableCellLayoutStyles_unstable,
+ renderTableCellLayout_unstable,
+ tableCellLayoutClassNames,
+ TableCellPrimaryLayout,
+ useTableCellPrimaryLayout_unstable,
+ useTableCellPrimaryLayoutStyles_unstable,
+ renderTableCellPrimaryLayout_unstable,
+ tableCellPrimaryLayoutClassNames,
 } from '@fluentui/react-table';
 export type {
  SortDirection,

packages/react-components/react-table/etc/react-table.api.md

@@ -43,6 +43,12 @@ export const renderTableCell_unstable: (state: TableCellState) => JSX.Element;
 // @public
 export const renderTableCellActions_unstable: (state: TableCellActionsState) => JSX.Element;
 
+// @public
+export const renderTableCellLayout_unstable: (state: TableCellLayoutState) => JSX.Element;
+
+// @public
+export const renderTableCellPrimaryLayout_unstable: (state: TableCellPrimaryLayoutState) => JSX.Element;
+
 // @public
 export const renderTableHeader_unstable: (state: TableHeaderState) => JSX.Element;
 
@@ -119,6 +125,43 @@ export const tableCellClassName = "fui-TableCell";
 // @public (undocumented)
 export const tableCellClassNames: SlotClassNames<TableCellSlots>;
 
+// @public
+export const TableCellLayout: ForwardRefComponent<TableCellLayoutProps>;
+
+// @public (undocumented)
+export const tableCellLayoutClassNames: SlotClassNames<TableCellLayoutSlots>;
+
+// @public
+export type TableCellLayoutProps = ComponentProps<TableCellLayoutSlots> & {};
+
+// @public (undocumented)
+export type TableCellLayoutSlots = {
+ root: Slot<'div'>;
+ media?: Slot<'span'>;
+};
+
+// @public
+export type TableCellLayoutState = ComponentState<TableCellLayoutSlots>;
+
+// @public
+export const TableCellPrimaryLayout: ForwardRefComponent<TableCellPrimaryLayoutProps>;
+
+// @public (undocumented)
+export const tableCellPrimaryLayoutClassNames: SlotClassNames<TableCellPrimaryLayoutSlots>;
+
+// @public
+export type TableCellPrimaryLayoutProps = ComponentProps<Partial<TableCellPrimaryLayoutSlots>> & {};
+
+// @public (undocumented)
+export type TableCellPrimaryLayoutSlots = {
+ main: Slot<'span'>;
+ secondary: Slot<'span'>;
+ wrapper: Slot<'div'>;
+} & TableCellLayoutSlots;
+
+// @public
+export type TableCellPrimaryLayoutState = ComponentState<TableCellPrimaryLayoutSlots>;
+
 // @public
 export type TableCellProps = ComponentProps<TableCellSlots> & {};
 
@@ -314,6 +357,18 @@ export const useTableCellActions_unstable: (props: TableCellActionsProps, ref: R
 // @public
 export const useTableCellActionsStyles_unstable: (state: TableCellActionsState) => TableCellActionsState;
 
+// @public
+export const useTableCellLayout_unstable: (props: TableCellLayoutProps, ref: React_2.Ref<HTMLElement>) => TableCellLayoutState;
+
+// @public
+export const useTableCellLayoutStyles_unstable: (state: TableCellLayoutState) => TableCellLayoutState;
+
+// @public
+export const useTableCellPrimaryLayout_unstable: (props: TableCellPrimaryLayoutProps, ref: React_2.Ref<HTMLElement>) => TableCellPrimaryLayoutState;
+
+// @public
+export const useTableCellPrimaryLayoutStyles_unstable: (state: TableCellPrimaryLayoutState) => TableCellPrimaryLayoutState;
+
 // @public
 export const useTableCellStyles_unstable: (state: TableCellState) => TableCellState;
 

packages/react-components/react-table/src/TableCellLayout.ts

@@ -0,0 +1 @@
+export * from './components/TableCellLayout/index';

packages/react-components/react-table/src/TableCellPrimaryLayout.ts

@@ -0,0 +1 @@
+export * from './components/TableCellPrimaryLayout/index';

packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.test.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { TableCellLayout } from './TableCellLayout';
+import { isConformant } from '../../common/isConformant';
+
+describe('TableCellLayout', () => {
+ isConformant({
+ Component: TableCellLayout,
+ displayName: 'TableCellLayout',
+ testOptions: {
+ 'has-static-classnames': [
+ {
+ props: {
+ media: 'Test Icon',
+ },
+ },
+ ],
+ },
+ });
+
+ // TODO add more tests here, and create visual regression tests in /apps/vr-tests
+
+ it('renders a default state', () => {
+ const result = render(<TableCellLayout>Default TableCellLayout</TableCellLayout>);
+ expect(result.container).toMatchSnapshot();
+ });
+});

packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { useTableCellLayout_unstable } from './useTableCellLayout';
+import { renderTableCellLayout_unstable } from './renderTableCellLayout';
+import { useTableCellLayoutStyles_unstable } from './useTableCellLayoutStyles';
+import type { TableCellLayoutProps } from './TableCellLayout.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+
+/**
+ * TableCellLayout component - TODO: add more docs
+ */
+export const TableCellLayout: ForwardRefComponent<TableCellLayoutProps> = React.forwardRef((props, ref) => {
+ const state = useTableCellLayout_unstable(props, ref);
+
+ useTableCellLayoutStyles_unstable(state);
+ return renderTableCellLayout_unstable(state);
+});
+
+TableCellLayout.displayName = 'TableCellLayout';

packages/react-components/react-table/src/components/TableCellLayout/TableCellLayout.types.ts

@@ -0,0 +1,17 @@
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+
+export type TableCellLayoutSlots = {
+ root: Slot<'div'>;
+
+ media?: Slot<'span'>;
+};
+
+/**
+ * TableCellLayout Props
+ */
+export type TableCellLayoutProps = ComponentProps<TableCellLayoutSlots> & {};
+
+/**
+ * State used in rendering TableCellLayout
+ */
+export type TableCellLayoutState = ComponentState<TableCellLayoutSlots>;

packages/react-components/react-table/src/components/TableCellLayout/__snapshots__/TableCellLayout.test.tsx.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TableCellLayout renders a default state 1`] = `
+<div>
+ <div
+ class="fui-TableCellLayout"
+ >
+ 
+ Default TableCellLayout
+ </div>
+</div>
+`;

packages/react-components/react-table/src/components/TableCellLayout/index.ts

@@ -0,0 +1,5 @@
+export * from './TableCellLayout';
+export * from './TableCellLayout.types';
+export * from './renderTableCellLayout';
+export * from './useTableCellLayout';
+export * from './useTableCellLayoutStyles';

packages/react-components/react-table/src/components/TableCellLayout/renderTableCellLayout.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+import type { TableCellLayoutState, TableCellLayoutSlots } from './TableCellLayout.types';
+
+/**
+ * Render the final JSX of TableCellLayout
+ */
+export const renderTableCellLayout_unstable = (state: TableCellLayoutState) => {
+ const { slots, slotProps } = getSlots<TableCellLayoutSlots>(state);
+
+ return (
+ <slots.root {...slotProps.root}>
+ {slots.media && <slots.media {...slotProps.media} />} {slotProps.root.children}
+ </slots.root>
+ );
+};

packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayout.ts

@@ -0,0 +1,29 @@
+import * as React from 'react';
+import { getNativeElementProps, resolveShorthand } from '@fluentui/react-utilities';
+import type { TableCellLayoutProps, TableCellLayoutState } from './TableCellLayout.types';
+
+/**
+ * Create the state required to render TableCellLayout.
+ *
+ * The returned state can be modified with hooks such as useTableCellLayoutStyles_unstable,
+ * before being passed to renderTableCellLayout_unstable.
+ *
+ * @param props - props from this instance of TableCellLayout
+ * @param ref - reference to root HTMLElement of TableCellLayout
+ */
+export const useTableCellLayout_unstable = (
+ props: TableCellLayoutProps,
+ ref: React.Ref<HTMLElement>,
+): TableCellLayoutState => {
+ return {
+ components: {
+ root: 'div',
+ media: 'span',
+ },
+ root: getNativeElementProps('div', {
+ ref,
+ ...props,
+ }),
+ media: resolveShorthand(props.media),
+ };
+};

packages/react-components/react-table/src/components/TableCellLayout/useTableCellLayoutStyles.ts

@@ -0,0 +1,41 @@
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+import type { TableCellLayoutSlots, TableCellLayoutState } from './TableCellLayout.types';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+export const tableCellLayoutClassNames: SlotClassNames<TableCellLayoutSlots> = {
+ root: 'fui-TableCellLayout',
+ media: 'fui-TableCellLayout__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 TableCellLayout slots based on the state
+ */
+export const useTableCellLayoutStyles_unstable = (state: TableCellLayoutState): TableCellLayoutState => {
+ const styles = useStyles();
+ state.root.className = mergeClasses(tableCellLayoutClassNames.root, styles.root, state.root.className);
+ if (state.media) {
+ state.media.className = mergeClasses(tableCellLayoutClassNames.media, styles.media, state.media.className);
+ }
+
+ return state;
+};

packages/react-components/react-table/src/components/TableCellPrimaryLayout/TableCellPrimaryLayout.test.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { TableCellPrimaryLayout } from './TableCellPrimaryLayout';
+import { isConformant } from '../../common/isConformant';
+import { TableCellPrimaryLayoutProps } from './TableCellPrimaryLayout.types';
+
+describe('TableCellPrimaryLayout', () => {
+ isConformant({
+ Component: TableCellPrimaryLayout as React.FC<TableCellPrimaryLayoutProps>,
+ displayName: 'TableCellPrimaryLayout',
+ testOptions: {
+ 'has-static-classnames': [
+ {
+ props: {
+ media: 'Test Icon',
+ main: 'Main content',
+ secondary: 'Secondary content',
+ },
+ },
+ ],
+ },
+ });
+
+ it('renders a default state', () => {
+ const result = render(<TableCellPrimaryLayout>Default TableCellPrimaryLayout</TableCellPrimaryLayout>);
+ expect(result.container).toMatchSnapshot();
+ });
+});