From a18b8c3381124b6a1fd5472572d7d48108f9955f Mon Sep 17 00:00:00 2001 From: Rachel Yoo Date: Thu, 17 Jul 2025 11:25:21 -0400 Subject: [PATCH] add table to semantic style hooks --- .../etc/semantic-style-hooks-preview.api.md | 68 +++++++ .../library/package.json | 3 +- .../src/component-styles/Table/index.ts | 17 ++ .../useSemanticDataGridBodyStyles.styles.ts | 22 +++ .../useSemanticDataGridCellStyles.styles.ts | 22 +++ ...SemanticDataGridHeaderCellStyles.styles.ts | 46 +++++ .../useSemanticDataGridHeaderStyles.styles.ts | 22 +++ .../useSemanticDataGridRowStyles.styles.ts | 29 +++ ...anticDataGridSelectionCellStyles.styles.ts | 38 ++++ .../Table/useSemanticDataGridStyles.styles.ts | 22 +++ .../useSemanticTableBodyStyles.styles.ts | 37 ++++ ...seSemanticTableCellActionsStyles.styles.ts | 42 +++++ ...useSemanticTableCellLayoutStyles.styles.ts | 133 ++++++++++++++ .../useSemanticTableCellStyles.styles.ts | 87 +++++++++ ...useSemanticTableHeaderCellStyles.styles.ts | 140 +++++++++++++++ .../useSemanticTableHeaderStyles.styles.ts | 37 ++++ ...eSemanticTableResizeHandleStyles.styles.ts | 63 +++++++ .../Table/useSemanticTableRowStyles.styles.ts | 166 ++++++++++++++++++ ...SemanticTableSelectionCellStyles.styles.ts | 105 +++++++++++ .../Table/useSemanticTableStyles.styles.ts | 53 ++++++ .../component-styles/semanticStyleHooks.ts | 37 ++++ .../library/src/index.ts | 19 ++ 22 files changed, 1207 insertions(+), 1 deletion(-) create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/index.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridBodyStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridCellStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridHeaderCellStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridHeaderStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridRowStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridSelectionCellStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableBodyStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableCellActionsStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableCellLayoutStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableCellStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableHeaderCellStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableHeaderStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableResizeHandleStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableRowStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableSelectionCellStyles.styles.ts create mode 100644 packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableStyles.styles.ts diff --git a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md index 049f2bfb4c2a0..50ecb84b49ecb 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md +++ b/packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md @@ -14,6 +14,13 @@ import { BreadcrumbState } from '@fluentui/react-breadcrumb'; import { ButtonState } from '@fluentui/react-button'; import { CheckboxState } from '@fluentui/react-checkbox'; import { CompoundButtonState } from '@fluentui/react-button'; +import { DataGridBodyState } from '@fluentui/react-table'; +import { DataGridCellState } from '@fluentui/react-table'; +import { DataGridHeaderCellState } from '@fluentui/react-table'; +import { DataGridHeaderState } from '@fluentui/react-table'; +import { DataGridRowState } from '@fluentui/react-table'; +import { DataGridSelectionCellState } from '@fluentui/react-table'; +import { DataGridState } from '@fluentui/react-table'; import { DialogActionsState } from '@fluentui/react-dialog'; import { DialogBodyState } from '@fluentui/react-dialog'; import { DialogContentState } from '@fluentui/react-dialog'; @@ -56,6 +63,16 @@ import { SpinButtonState } from '@fluentui/react-spinbutton'; import { SpinnerState } from '@fluentui/react-spinner'; import { SplitButtonState } from '@fluentui/react-button'; import { SwitchState } from '@fluentui/react-switch'; +import { TableBodyState } from '@fluentui/react-table'; +import { TableCellActionsState } from '@fluentui/react-table'; +import { TableCellLayoutState } from '@fluentui/react-table'; +import { TableCellState } from '@fluentui/react-table'; +import { TableHeaderCellState } from '@fluentui/react-table'; +import { TableHeaderState } from '@fluentui/react-table'; +import { TableResizeHandleState } from '@fluentui/react-table'; +import { TableRowState } from '@fluentui/react-table'; +import { TableSelectionCellState } from '@fluentui/react-table'; +import { TableState } from '@fluentui/react-table'; import { TabListState } from '@fluentui/react-tabs'; import { TabState } from '@fluentui/react-tabs'; import { TextareaState } from '@fluentui/react-textarea'; @@ -103,6 +120,27 @@ export const useSemanticCheckboxStyles: (_state: unknown) => CheckboxState; // @public (undocumented) export const useSemanticCompoundButtonStyles: (_state: unknown) => CompoundButtonState; +// @public +export const useSemanticDataGridBodyStyles: (_state: unknown) => DataGridBodyState; + +// @public +export const useSemanticDataGridCellStyles: (_state: unknown) => DataGridCellState; + +// @public +export const useSemanticDataGridHeaderCellStyles: (_state: unknown) => DataGridHeaderCellState; + +// @public +export const useSemanticDataGridHeaderStyles: (_state: unknown) => DataGridHeaderState; + +// @public +export const useSemanticDataGridRowStyles: (_state: unknown) => DataGridRowState; + +// @public +export const useSemanticDataGridSelectionCellStyles: (_state: unknown) => DataGridSelectionCellState; + +// @public +export const useSemanticDataGridStyles: (_state: unknown) => DataGridState; + // @public export const useSemanticDialogActionsStyles: (_state: unknown) => DialogActionsState; @@ -238,6 +276,36 @@ export const useSemanticTabContentStyles_unstable: (state: TabState) => TabState // @public export const useSemanticTabIndicatorStyles_unstable: (state: TabState) => TabState; +// @public +export const useSemanticTableBodyStyles: (_state: unknown) => TableBodyState; + +// @public +export const useSemanticTableCellActionsStyles: (_state: unknown) => TableCellActionsState; + +// @public +export const useSemanticTableCellLayoutStyles: (_state: unknown) => TableCellLayoutState; + +// @public +export const useSemanticTableCellStyles: (_state: unknown) => TableCellState; + +// @public +export const useSemanticTableHeaderCellStyles: (_state: unknown) => TableHeaderCellState; + +// @public +export const useSemanticTableHeaderStyles: (_state: unknown) => TableHeaderState; + +// @public +export const useSemanticTableResizeHandleStyles: (_state: unknown) => TableResizeHandleState; + +// @public +export const useSemanticTableRowStyles: (_state: unknown) => TableRowState; + +// @public +export const useSemanticTableSelectionCellStyles: (_state: unknown) => TableSelectionCellState; + +// @public +export const useSemanticTableStyles: (_state: unknown) => TableState; + // @public export const useSemanticTabListStyles: (_state: unknown) => TabListState; diff --git a/packages/react-components/semantic-style-hooks-preview/library/package.json b/packages/react-components/semantic-style-hooks-preview/library/package.json index 41a68d981030c..3976dbfe8b621 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/package.json +++ b/packages/react-components/semantic-style-hooks-preview/library/package.json @@ -56,8 +56,9 @@ "@fluentui/react-spinbutton": "^9.3.6", "@fluentui/react-spinner": "^9.5.11", "@fluentui/react-switch": "^9.2.6", - "@fluentui/react-tabster": "^9.24.6", + "@fluentui/react-table": "^9.16.6", "@fluentui/react-tabs": "^9.7.6", + "@fluentui/react-tabster": "^9.24.6", "@fluentui/react-text": "^9.4.36", "@fluentui/react-textarea": "^9.4.6", "@fluentui/react-theme": "^9.1.24", diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/index.ts new file mode 100644 index 0000000000000..862253cb16bbf --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/index.ts @@ -0,0 +1,17 @@ +export { useSemanticDataGridStyles } from './useSemanticDataGridStyles.styles'; +export { useSemanticDataGridBodyStyles } from './useSemanticDataGridBodyStyles.styles'; +export { useSemanticDataGridCellStyles } from './useSemanticDataGridCellStyles.styles'; +export { useSemanticDataGridHeaderStyles } from './useSemanticDataGridHeaderStyles.styles'; +export { useSemanticDataGridHeaderCellStyles } from './useSemanticDataGridHeaderCellStyles.styles'; +export { useSemanticDataGridRowStyles } from './useSemanticDataGridRowStyles.styles'; +export { useSemanticDataGridSelectionCellStyles } from './useSemanticDataGridSelectionCellStyles.styles'; +export { useSemanticTableStyles } from './useSemanticTableStyles.styles'; +export { useSemanticTableBodyStyles } from './useSemanticTableBodyStyles.styles'; +export { useSemanticTableCellStyles } from './useSemanticTableCellStyles.styles'; +export { useSemanticTableCellActionsStyles } from './useSemanticTableCellActionsStyles.styles'; +export { useSemanticTableCellLayoutStyles } from './useSemanticTableCellLayoutStyles.styles'; +export { useSemanticTableHeaderStyles } from './useSemanticTableHeaderStyles.styles'; +export { useSemanticTableHeaderCellStyles } from './useSemanticTableHeaderCellStyles.styles'; +export { useSemanticTableResizeHandleStyles } from './useSemanticTableResizeHandleStyles.styles'; +export { useSemanticTableRowStyles } from './useSemanticTableRowStyles.styles'; +export { useSemanticTableSelectionCellStyles } from './useSemanticTableSelectionCellStyles.styles'; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridBodyStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridBodyStyles.styles.ts new file mode 100644 index 0000000000000..85775d78adbbc --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridBodyStyles.styles.ts @@ -0,0 +1,22 @@ +import { mergeClasses } from '@griffel/react'; +import { dataGridBodyClassNames, type DataGridBodyState } from '@fluentui/react-table'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import { useSemanticTableBodyStyles } from './useSemanticTableBodyStyles.styles'; + +/** + * Apply styling to the DataGridBody slots based on the state + */ +export const useSemanticDataGridBodyStyles = (_state: unknown): DataGridBodyState => { + 'use no memo'; + + const state = _state as DataGridBodyState; + + useSemanticTableBodyStyles(state); + state.root.className = mergeClasses( + state.root.className, + dataGridBodyClassNames.root, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridCellStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridCellStyles.styles.ts new file mode 100644 index 0000000000000..e558cc8949be2 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridCellStyles.styles.ts @@ -0,0 +1,22 @@ +import { mergeClasses } from '@griffel/react'; +import { dataGridCellClassNames, type DataGridCellState } from '@fluentui/react-table'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import { useSemanticTableCellStyles } from './useSemanticTableCellStyles.styles'; + +/** + * Apply styling to the DataGridCell slots based on the state + */ +export const useSemanticDataGridCellStyles = (_state: unknown): DataGridCellState => { + 'use no memo'; + + const state = _state as DataGridCellState; + + useSemanticTableCellStyles(state); + state.root.className = mergeClasses( + state.root.className, + dataGridCellClassNames.root, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridHeaderCellStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridHeaderCellStyles.styles.ts new file mode 100644 index 0000000000000..38841e5a39817 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridHeaderCellStyles.styles.ts @@ -0,0 +1,46 @@ +import { mergeClasses } from '@griffel/react'; +import { dataGridHeaderCellClassNames, type DataGridHeaderCellState } from '@fluentui/react-table'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import { useSemanticTableHeaderCellStyles } from './useSemanticTableHeaderCellStyles.styles'; + +/** + * Apply styling to the DataGridHeaderCell slots based on the state + */ +export const useSemanticDataGridHeaderCellStyles = (_state: unknown): DataGridHeaderCellState => { + 'use no memo'; + + const state = _state as DataGridHeaderCellState; + + useSemanticTableHeaderCellStyles(state); + state.root.className = mergeClasses( + state.root.className, + dataGridHeaderCellClassNames.root, + getSlotClassNameProp_unstable(state.root), + ); + + if (state.button) { + state.button.className = mergeClasses( + state.button.className, + dataGridHeaderCellClassNames.button, + getSlotClassNameProp_unstable(state.button), + ); + } + + if (state.sortIcon) { + state.sortIcon.className = mergeClasses( + state.sortIcon.className, + dataGridHeaderCellClassNames.sortIcon, + getSlotClassNameProp_unstable(state.sortIcon), + ); + } + + if (state.aside) { + state.aside.className = mergeClasses( + state.aside.className, + dataGridHeaderCellClassNames.aside, + getSlotClassNameProp_unstable(state.aside), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridHeaderStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridHeaderStyles.styles.ts new file mode 100644 index 0000000000000..40525c9093e36 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridHeaderStyles.styles.ts @@ -0,0 +1,22 @@ +import { mergeClasses } from '@griffel/react'; +import { dataGridHeaderClassNames, type DataGridHeaderState } from '@fluentui/react-table'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import { useSemanticTableHeaderStyles } from './useSemanticTableHeaderStyles.styles'; + +/** + * Apply styling to the DataGridHeader slots based on the state + */ +export const useSemanticDataGridHeaderStyles = (_state: unknown): DataGridHeaderState => { + 'use no memo'; + + const state = _state as DataGridHeaderState; + + useSemanticTableHeaderStyles(state); + state.root.className = mergeClasses( + state.root.className, + dataGridHeaderClassNames.root, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridRowStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridRowStyles.styles.ts new file mode 100644 index 0000000000000..ecb521a9afa2c --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridRowStyles.styles.ts @@ -0,0 +1,29 @@ +import { mergeClasses } from '@griffel/react'; +import { dataGridRowClassNames, type DataGridRowState } from '@fluentui/react-table'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import { useSemanticTableRowStyles } from './useSemanticTableRowStyles.styles'; + +/** + * Apply styling to the DataGridRow slots based on the state + */ +export const useSemanticDataGridRowStyles = (_state: unknown): DataGridRowState => { + 'use no memo'; + + const state = _state as DataGridRowState; + + useSemanticTableRowStyles(state); + state.root.className = mergeClasses( + state.root.className, + dataGridRowClassNames.root, + getSlotClassNameProp_unstable(state.root), + ); + if (state.selectionCell) { + state.selectionCell.className = mergeClasses( + state.selectionCell.className, + dataGridRowClassNames.selectionCell, + getSlotClassNameProp_unstable(state.selectionCell), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridSelectionCellStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridSelectionCellStyles.styles.ts new file mode 100644 index 0000000000000..39a22fcc9ada1 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridSelectionCellStyles.styles.ts @@ -0,0 +1,38 @@ +import { mergeClasses } from '@griffel/react'; +import { dataGridSelectionCellClassNames, type DataGridSelectionCellState } from '@fluentui/react-table'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import { useSemanticTableSelectionCellStyles } from './useSemanticTableSelectionCellStyles.styles'; + +/** + * Apply styling to the DataGridSelectionCell slots based on the state + */ +export const useSemanticDataGridSelectionCellStyles = (_state: unknown): DataGridSelectionCellState => { + 'use no memo'; + + const state = _state as DataGridSelectionCellState; + + useSemanticTableSelectionCellStyles(state); + state.root.className = mergeClasses( + state.root.className, + dataGridSelectionCellClassNames.root, + getSlotClassNameProp_unstable(state.root), + ); + + if (state.checkboxIndicator) { + state.checkboxIndicator.className = mergeClasses( + state.checkboxIndicator.className, + dataGridSelectionCellClassNames.checkboxIndicator, + getSlotClassNameProp_unstable(state.checkboxIndicator), + ); + } + + if (state.radioIndicator) { + state.radioIndicator.className = mergeClasses( + state.radioIndicator.className, + dataGridSelectionCellClassNames.radioIndicator, + getSlotClassNameProp_unstable(state.radioIndicator), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridStyles.styles.ts new file mode 100644 index 0000000000000..92ae97b6ca5b7 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridStyles.styles.ts @@ -0,0 +1,22 @@ +import { mergeClasses } from '@griffel/react'; +import { dataGridClassNames, type DataGridState } from '@fluentui/react-table'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import { useSemanticTableStyles } from './useSemanticTableStyles.styles'; + +/** + * Apply styling to the DataGrid slots based on the state + */ +export const useSemanticDataGridStyles = (_state: unknown): DataGridState => { + 'use no memo'; + + const state = _state as DataGridState; + + useSemanticTableStyles(state); + state.root.className = mergeClasses( + state.root.className, + dataGridClassNames.root, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableBodyStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableBodyStyles.styles.ts new file mode 100644 index 0000000000000..e89b16e6f664d --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableBodyStyles.styles.ts @@ -0,0 +1,37 @@ +import { mergeClasses, makeStyles } from '@griffel/react'; +import { tableBodyClassName, type TableBodyState } from '@fluentui/react-table'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const useTableLayoutStyles = makeStyles({ + root: { + display: 'table-row-group', + }, +}); + +const useFlexLayoutStyles = makeStyles({ + root: { + display: 'block', + }, +}); + +/** + * Apply styling to the TableBody slots based on the state + */ +export const useSemanticTableBodyStyles = (_state: unknown): TableBodyState => { + 'use no memo'; + + const state = _state as TableBodyState; + + const layoutStyles = { + table: useTableLayoutStyles(), + flex: useFlexLayoutStyles(), + }; + state.root.className = mergeClasses( + state.root.className, + tableBodyClassName, + state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableCellActionsStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableCellActionsStyles.styles.ts new file mode 100644 index 0000000000000..e3cdf7a3b5819 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableCellActionsStyles.styles.ts @@ -0,0 +1,42 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import { tableCellActionsClassNames, type TableCellActionsState } from '@fluentui/react-table'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +/** + * Styles for the root slot + */ +const useStyles = makeStyles({ + root: { + backgroundColor: 'inherit', + position: 'absolute', + right: '0px', + top: '50%', + transform: 'translateY(-50%)', + opacity: 0, + marginLeft: 'auto', + }, + + visible: { + opacity: 1, + }, +}); + +/** + * Apply styling to the TableCellActions slots based on the state + */ +export const useSemanticTableCellActionsStyles = (_state: unknown): TableCellActionsState => { + 'use no memo'; + + const state = _state as TableCellActionsState; + + const styles = useStyles(); + state.root.className = mergeClasses( + state.root.className, + tableCellActionsClassNames.root, + styles.root, + state.visible && styles.visible, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableCellLayoutStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableCellLayoutStyles.styles.ts new file mode 100644 index 0000000000000..6cd3f5f6be377 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableCellLayoutStyles.styles.ts @@ -0,0 +1,133 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import { tableCellLayoutClassNames, type TableCellLayoutState } from '@fluentui/react-table'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +/** + * Styles for the root slot + */ +const useStyles = makeStyles({ + root: { + display: 'flex', + alignItems: 'center', + gap: semanticTokens.gapInsideCtrlDefault, + flex: '1 1 0px', + }, + + rootTruncate: { + overflowX: 'hidden', + }, + + content: { + display: 'flex', + flexDirection: 'column', + }, + + contentTruncate: { + overflowX: 'hidden', + }, + + media: { + display: 'flex', + alignItems: 'center', + }, + + mediaExtraSmall: { + fontSize: '16px', + }, + + mediaSmallAndMedium: { + fontSize: '20px', + }, + + mediaPrimary: { + fontSize: '24px', + }, + + mainPrimary: { + fontWeight: semanticTokens.textStyleDefaultHeaderWeight, + }, + + mainTruncate: { + overflowX: 'hidden', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + }, + + description: { + color: semanticTokens.foregroundContentNeutralSecondary, + fontFamily: semanticTokens.textStyleDefaultRegularFontFamily, + fontSize: semanticTokens.textGlobalCaption1FontSize, + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + lineHeight: semanticTokens.textGlobalCaption1LineHeight, + }, +}); + +/** + * Apply styling to the TableCellLayout slots based on the state + */ +export const useSemanticTableCellLayoutStyles = (_state: unknown): TableCellLayoutState => { + 'use no memo'; + + const state = _state as TableCellLayoutState; + + const styles = useStyles(); + const { truncate } = state; + + state.root.className = mergeClasses( + state.root.className, + tableCellLayoutClassNames.root, + styles.root, + truncate && styles.rootTruncate, + getSlotClassNameProp_unstable(state.root), + ); + const primary = state.appearance === 'primary'; + + if (state.media) { + const mediaSizedStyles = { + small: styles.mediaSmallAndMedium, + medium: styles.mediaSmallAndMedium, + 'extra-small': styles.mediaExtraSmall, + }; + + state.media.className = mergeClasses( + state.media.className, + tableCellLayoutClassNames.media, + styles.media, + mediaSizedStyles[state.size], + primary && styles.mediaPrimary, + getSlotClassNameProp_unstable(state.media), + ); + } + + if (state.main) { + state.main.className = mergeClasses( + state.main.className, + tableCellLayoutClassNames.main, + truncate && styles.mainTruncate, + primary && styles.mainPrimary, + getSlotClassNameProp_unstable(state.main), + ); + } + + if (state.description) { + state.description.className = mergeClasses( + state.description.className, + tableCellLayoutClassNames.description, + styles.description, + getSlotClassNameProp_unstable(state.description), + ); + } + + if (state.content) { + state.content.className = mergeClasses( + state.content.className, + tableCellLayoutClassNames.content, + styles.content, + truncate && styles.contentTruncate, + getSlotClassNameProp_unstable(state.content), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableCellStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableCellStyles.styles.ts new file mode 100644 index 0000000000000..780e9e9bd82d7 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableCellStyles.styles.ts @@ -0,0 +1,87 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; +import { tableCellClassNames, type TableCellState } from '@fluentui/react-table'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +const useTableLayoutStyles = makeStyles({ + root: { + display: 'table-cell', + verticalAlign: 'middle', + }, + + medium: { + height: '44px', + }, + + small: { + height: '34px', + }, + + 'extra-small': { + height: '24px', + }, +}); + +const useFlexLayoutStyles = makeStyles({ + root: { + display: 'flex', + minWidth: '0px', + alignItems: 'center', + flex: '1 1 0px', + }, + + medium: { + minHeight: '44px', + }, + + small: { + minHeight: '34px', + }, + + 'extra-small': { + minHeight: '24px', + }, +}); + +/** + * Styles for the root slot + */ +const useStyles = makeStyles({ + root: { + position: 'relative', + padding: `0px ${semanticTokens.ctrlChoicePaddingHorizontal}`, + + ...createCustomFocusIndicatorStyle( + { + outline: `${semanticTokens.ctrlFocusOuterStrokeWidth} solid ${semanticTokens.ctrlFocusInnerStroke}`, + borderRadius: semanticTokens.cornerCtrlRest, + }, + { selector: 'focus' }, + ), + }, +}); + +/** + * Apply styling to the TableCell slots based on the state + */ +export const useSemanticTableCellStyles = (_state: unknown): TableCellState => { + 'use no memo'; + + const state = _state as TableCellState; + + const styles = useStyles(); + const layoutStyles = { + table: useTableLayoutStyles(), + flex: useFlexLayoutStyles(), + }; + state.root.className = mergeClasses( + state.root.className, + tableCellClassNames.root, + styles.root, + state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, + state.noNativeElements ? layoutStyles.flex[state.size] : layoutStyles.table[state.size], + getSlotClassNameProp_unstable(state.root), + ); + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableHeaderCellStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableHeaderCellStyles.styles.ts new file mode 100644 index 0000000000000..0e67c0511ab83 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableHeaderCellStyles.styles.ts @@ -0,0 +1,140 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; +import { tableHeaderCellClassNames, type TableHeaderCellState } from '@fluentui/react-table'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +const useTableLayoutStyles = makeStyles({ + root: { + display: 'table-cell', + verticalAlign: 'middle', + }, +}); + +const useFlexLayoutStyles = makeStyles({ + root: { + display: 'flex', + flex: '1 1 0px', + minWidth: '0px', + }, +}); + +/** + * Styles for the root slot + */ +const useStyles = makeStyles({ + root: { + fontWeight: semanticTokens.textStyleDefaultRegularWeight, + padding: `0px ${semanticTokens.ctrlChoicePaddingHorizontal}`, + ...createCustomFocusIndicatorStyle( + { + outline: `${semanticTokens.ctrlFocusOuterStrokeWidth} solid ${semanticTokens.ctrlFocusInnerStroke}`, + borderRadius: semanticTokens.cornerCtrlRest, + }, + { selector: 'focus-within' }, + ), + position: 'relative', + }, + + rootInteractive: { + ':hover': { + color: semanticTokens.foregroundCtrlNeutralPrimaryHover, + backgroundColor: semanticTokens.backgroundCtrlSubtleHover, + }, + ':active': { + color: semanticTokens.foregroundCtrlNeutralPrimaryPressed, + backgroundColor: semanticTokens.backgroundCtrlSubtlePressed, + }, + }, + + resetButton: { + resize: 'horizontal', + boxSizing: 'content-box', + backgroundColor: 'inherit', + color: 'inherit', + fontFamily: 'inherit', + fontSize: 'inherit', + lineHeight: 'normal', + overflow: 'visible', + padding: '0', + border: 'none', + textAlign: 'unset', + }, + + button: { + position: 'relative', + width: '100%', + display: 'flex', + flexGrow: 1, + height: '100%', + alignItems: 'center', + gap: semanticTokens.gapInsideCtrlSmDefault, + minHeight: '32px', + flex: '1 1 0px', + outlineStyle: 'none', + }, + + sortable: { + cursor: 'pointer', + }, + + sortIcon: { + display: 'flex', + alignItems: 'center', + paddingTop: semanticTokens.gapBetweenContentXSmall, + }, + + resizeHandle: {}, +}); + +/** + * Apply styling to the TableHeaderCell slots based on the state + */ +export const useSemanticTableHeaderCellStyles = (_state: unknown): TableHeaderCellState => { + 'use no memo'; + + const state = _state as TableHeaderCellState; + + const styles = useStyles(); + const layoutStyles = { + table: useTableLayoutStyles(), + flex: useFlexLayoutStyles(), + }; + state.root.className = mergeClasses( + state.root.className, + tableHeaderCellClassNames.root, + styles.root, + state.sortable && styles.rootInteractive, + state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, + getSlotClassNameProp_unstable(state.root), + ); + + state.button.className = mergeClasses( + state.button.className, + tableHeaderCellClassNames.button, + styles.resetButton, + styles.button, + state.sortable && styles.sortable, + getSlotClassNameProp_unstable(state.button), + ); + + if (state.sortIcon) { + state.sortIcon.className = mergeClasses( + state.sortIcon.className, + tableHeaderCellClassNames.sortIcon, + styles.sortIcon, + getSlotClassNameProp_unstable(state.sortIcon), + ); + } + + if (state.aside) { + state.aside.className = mergeClasses( + state.aside.className, + tableHeaderCellClassNames.aside, + styles.resizeHandle, + getSlotClassNameProp_unstable(state.aside), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableHeaderStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableHeaderStyles.styles.ts new file mode 100644 index 0000000000000..dfd3782ee7ce5 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableHeaderStyles.styles.ts @@ -0,0 +1,37 @@ +import { mergeClasses, makeStyles } from '@griffel/react'; +import { tableHeaderClassName, type TableHeaderState } from '@fluentui/react-table'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; + +const useFlexLayoutStyles = makeStyles({ + root: { + display: 'block', + }, +}); + +const useTableLayoutStyles = makeStyles({ + root: { + display: 'table-row-group', + }, +}); + +/** + * Apply styling to the TableHeader slots based on the state + */ +export const useSemanticTableHeaderStyles = (_state: unknown): TableHeaderState => { + 'use no memo'; + + const state = _state as TableHeaderState; + + const layoutStyles = { + table: useTableLayoutStyles(), + flex: useFlexLayoutStyles(), + }; + state.root.className = mergeClasses( + state.root.className, + tableHeaderClassName, + state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableResizeHandleStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableResizeHandleStyles.styles.ts new file mode 100644 index 0000000000000..3f19979554c3b --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableResizeHandleStyles.styles.ts @@ -0,0 +1,63 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import { tableResizeHandleClassNames, type TableResizeHandleState } from '@fluentui/react-table'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +/** + * Styles for the root slot + */ +const useStyles = makeStyles({ + root: { + position: 'absolute', + right: 0, + top: 0, + bottom: 0, + width: '16px', + margin: '0 -8px', + cursor: 'col-resize', + opacity: 0, + transitionProperty: 'opacity', + transitionDuration: '.2s', + zIndex: 1, + + // If mouse users focus on the resize handle through a context menu, we want the handle + // to be visible because the mouse might not be hovering over the handle + ':focus': { + opacity: 1, + outlineStyle: 'none', + }, + + ':hover': { + opacity: 1, + }, + + '::after': { + content: '" "', + display: 'block', + width: semanticTokens.strokeWidthDividerDefault, + position: 'absolute', + left: '50%', + top: 0, + bottom: 0, + backgroundColor: semanticTokens.strokeDividerStrong, + }, + }, +}); + +/** + * Apply styling to the TableResizeHandle slots based on the state + */ +export const useSemanticTableResizeHandleStyles = (_state: unknown): TableResizeHandleState => { + 'use no memo'; + + const state = _state as TableResizeHandleState; + + const styles = useStyles(); + state.root.className = mergeClasses( + state.root.className, + tableResizeHandleClassNames.root, + styles.root, + getSlotClassNameProp_unstable(state.root), + ); + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableRowStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableRowStyles.styles.ts new file mode 100644 index 0000000000000..40e406258dc25 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableRowStyles.styles.ts @@ -0,0 +1,166 @@ +import { makeStyles, mergeClasses, shorthands } from '@griffel/react'; +import { tokens } from '@fluentui/react-theme'; +import { + tableRowClassNames, + tableCellActionsClassNames, + tableSelectionCellClassNames, + type TableRowState, +} from '@fluentui/react-table'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +const useTableLayoutStyles = makeStyles({ + root: { + display: 'table-row', + }, +}); + +const useFlexLayoutStyles = makeStyles({ + root: { + display: 'flex', + alignItems: 'center', + }, +}); + +/** + * Styles for the root slot + */ +const useStyles = makeStyles({ + root: { + color: semanticTokens.foregroundContentNeutralPrimary, + boxSizing: 'border-box', + ...createCustomFocusIndicatorStyle( + { + outline: `${semanticTokens.ctrlFocusOuterStrokeWidth} solid ${semanticTokens.ctrlFocusInnerStroke}`, + borderRadius: semanticTokens.cornerCtrlRest, + }, + { selector: 'focus' }, + ), + }, + + rootSubtleSelection: { + ...createCustomFocusIndicatorStyle( + { + [`& .${tableSelectionCellClassNames.root}`]: { + opacity: 1, + }, + }, + { selector: 'focus-within' }, + ), + ':hover': { + [`& .${tableSelectionCellClassNames.root}`]: { + opacity: 1, + }, + }, + }, + + rootInteractive: { + ...createCustomFocusIndicatorStyle( + { + [`& .${tableCellActionsClassNames.root}`]: { + opacity: 1, + }, + }, + { selector: 'focus-within' }, + ), + ':active': { + backgroundColor: semanticTokens.backgroundCtrlSubtlePressed, + color: semanticTokens.foregroundCtrlNeutralPrimaryPressed, + [`& .${tableCellActionsClassNames.root}`]: { + opacity: 1, + }, + }, + ':hover': { + backgroundColor: semanticTokens.backgroundCtrlSubtleHover, + color: semanticTokens.foregroundCtrlNeutralPrimaryHover, + [`& .${tableCellActionsClassNames.root}`]: { + opacity: 1, + }, + }, + // High contrast styles + '@media (forced-colors: active)': { + ':hover': { + color: 'Highlight', + ...shorthands.borderColor('Highlight'), + }, + }, + }, + + medium: { borderBottom: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.strokeDividerDefault}` }, + + small: { borderBottom: `${semanticTokens.strokeWidthDefault} solid ${semanticTokens.strokeDividerDefault}` }, + + 'extra-small': { + fontSize: semanticTokens.textRampSmItemBodyFontSize, + }, + + brand: { + backgroundColor: semanticTokens.statusBrandTintBackground, + ...shorthands.borderColor(semanticTokens.strokeCtrlOnActiveBrandPressed), + ':active': { + backgroundColor: semanticTokens.statusBrandTintBackground, + color: semanticTokens.foregroundContentNeutralPrimary, + }, + + '@media(forced-colors: active)': { + border: `${semanticTokens.ctrlFocusOuterStrokeWidth} solid ${semanticTokens.ctrlFocusOuterStroke}`, + borderRadius: semanticTokens.cornerCtrlRest, + boxSizing: 'border-box', + ':focus-visible': { + outlineOffset: '-4px', + }, + }, + }, + + neutral: { + '@media(forced-colors: active)': { + border: `${semanticTokens.ctrlFocusOuterStrokeWidth} solid ${semanticTokens.ctrlFocusOuterStroke}`, + borderRadius: semanticTokens.cornerCtrlRest, + boxSizing: 'border-box', + ':focus-visible': { + outlineOffset: '-4px', + }, + }, + backgroundColor: tokens.colorSubtleBackgroundSelected, + color: semanticTokens.foregroundCtrlNeutralPrimaryHover, + ':hover': { + backgroundColor: tokens.colorSubtleBackgroundSelected, + }, + ':active': { + backgroundColor: tokens.colorSubtleBackgroundSelected, + }, + + ...shorthands.borderColor(semanticTokens.strokeCtrlDividerOnBrand), + }, + + none: {}, +}); + +/** + * Apply styling to the TableRow slots based on the state + */ +export const useSemanticTableRowStyles = (_state: unknown): TableRowState => { + 'use no memo'; + + const state = _state as TableRowState; + + const styles = useStyles(); + const layoutStyles = { + table: useTableLayoutStyles(), + flex: useFlexLayoutStyles(), + }; + state.root.className = mergeClasses( + state.root.className, + tableRowClassNames.root, + styles.root, + styles.rootSubtleSelection, + !state.isHeaderRow && styles.rootInteractive, + styles[state.size], + state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, + styles[state.appearance], + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableSelectionCellStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableSelectionCellStyles.styles.ts new file mode 100644 index 0000000000000..52b6e7a3a1470 --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableSelectionCellStyles.styles.ts @@ -0,0 +1,105 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import { tableSelectionCellClassNames, type TableSelectionCellState } from '@fluentui/react-table'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import { createCustomFocusIndicatorStyle } from '@fluentui/react-tabster'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +export const CELL_WIDTH = 44; + +const useTableLayoutStyles = makeStyles({ + root: { + display: 'table-cell', + width: `${CELL_WIDTH}px`, + }, +}); + +const useFlexLayoutStyles = makeStyles({ + root: { + display: 'flex', + flex: '1 1 0px', + minWidth: `${CELL_WIDTH}px`, + maxWidth: `${CELL_WIDTH}px`, + justifyContent: 'center', + }, +}); + +/** + * Styles for the root slot + */ +const useStyles = makeStyles({ + root: { + textAlign: 'center', + whiteSpace: 'nowrap', + padding: '0', + ...createCustomFocusIndicatorStyle( + { + outline: `${semanticTokens.ctrlFocusOuterStrokeWidth} solid ${semanticTokens.ctrlFocusInnerStroke}`, + borderRadius: semanticTokens.cornerCtrlRest, + }, + { selector: 'focus' }, + ), + }, + + radioIndicator: { + display: 'flex', + flexGrow: 1, + alignItems: 'center', + justifyContent: 'center', + }, + + subtle: { + opacity: 0, + ...createCustomFocusIndicatorStyle( + { + opacity: 1, + }, + { selector: 'focus-within' }, + ), + }, + + hidden: { + opacity: 0, + }, +}); + +/** + * Apply styling to the TableSelectionCell slots based on the state + */ +export const useSemanticTableSelectionCellStyles = (_state: unknown): TableSelectionCellState => { + 'use no memo'; + + const state = _state as TableSelectionCellState; + + const styles = useStyles(); + const layoutStyles = { + table: useTableLayoutStyles(), + flex: useFlexLayoutStyles(), + }; + state.root.className = mergeClasses( + state.root.className, + tableSelectionCellClassNames.root, + styles.root, + state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, + state.subtle && state.checked === false && styles.subtle, + state.hidden && styles.hidden, + getSlotClassNameProp_unstable(state.root), + ); + if (state.checkboxIndicator) { + state.checkboxIndicator.className = mergeClasses( + state.checkboxIndicator.className, + tableSelectionCellClassNames.checkboxIndicator, + getSlotClassNameProp_unstable(state.checkboxIndicator), + ); + } + + if (state.radioIndicator) { + state.radioIndicator.className = mergeClasses( + state.radioIndicator.className, + tableSelectionCellClassNames.radioIndicator, + styles.radioIndicator, + getSlotClassNameProp_unstable(state.radioIndicator), + ); + } + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableStyles.styles.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableStyles.styles.ts new file mode 100644 index 0000000000000..6fe2b5004059f --- /dev/null +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticTableStyles.styles.ts @@ -0,0 +1,53 @@ +import { makeStyles, mergeClasses } from '@griffel/react'; +import { tableClassName, type TableState } from '@fluentui/react-table'; +import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities'; +import * as semanticTokens from '@fluentui/semantic-tokens'; + +const useTableLayoutStyles = makeStyles({ + root: { + display: 'table', + verticalAlign: 'middle', + width: '100%', + tableLayout: 'fixed', + }, +}); + +const useFlexLayoutStyles = makeStyles({ + root: { + display: 'block', + }, +}); + +/** + * Styles for the root slot + */ +const useStyles = makeStyles({ + root: { + borderCollapse: 'collapse', + backgroundColor: semanticTokens.backgroundCtrlSubtleRest, + }, +}); + +/** + * Apply styling to the Table slots based on the state + */ +export const useSemanticTableStyles = (_state: unknown): TableState => { + 'use no memo'; + + const state = _state as TableState; + + const styles = useStyles(); + const layoutStyles = { + table: useTableLayoutStyles(), + flex: useFlexLayoutStyles(), + }; + state.root.className = mergeClasses( + state.root.className, + tableClassName, + styles.root, + state.noNativeElements ? layoutStyles.flex.root : layoutStyles.table.root, + getSlotClassNameProp_unstable(state.root), + ); + + return state; +}; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts index 7c80f5b99e2a6..0086c41d61e82 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/component-styles/semanticStyleHooks.ts @@ -81,6 +81,25 @@ import { } from './Toolbar'; import { useSemanticTooltipStyles } from './Tooltip'; import { useSemanticInfoButtonStyles, useSemanticInfoLabelStyles } from './InfoLabel'; +import { + useSemanticDataGridStyles, + useSemanticDataGridBodyStyles, + useSemanticDataGridCellStyles, + useSemanticDataGridHeaderStyles, + useSemanticDataGridHeaderCellStyles, + useSemanticDataGridRowStyles, + useSemanticDataGridSelectionCellStyles, + useSemanticTableStyles, + useSemanticTableBodyStyles, + useSemanticTableCellStyles, + useSemanticTableCellActionsStyles, + useSemanticTableCellLayoutStyles, + useSemanticTableHeaderStyles, + useSemanticTableHeaderCellStyles, + useSemanticTableResizeHandleStyles, + useSemanticTableRowStyles, + useSemanticTableSelectionCellStyles, +} from './Table'; export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { // Accordion styles @@ -183,4 +202,22 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = { // InfoLabel styles useInfoButtonStyles_unstable: useSemanticInfoButtonStyles, useInfoLabelStyles_unstable: useSemanticInfoLabelStyles, + // Table styles + useDataGridStyles_unstable: useSemanticDataGridStyles, + useDataGridBodyStyles_unstable: useSemanticDataGridBodyStyles, + useDataGridCellStyles_unstable: useSemanticDataGridCellStyles, + useDataGridHeaderStyles_unstable: useSemanticDataGridHeaderStyles, + useDataGridHeaderCellStyles_unstable: useSemanticDataGridHeaderCellStyles, + useDataGridRowStyles_unstable: useSemanticDataGridRowStyles, + useDataGridSelectionCellStyles_unstable: useSemanticDataGridSelectionCellStyles, + useTableStyles_unstable: useSemanticTableStyles, + useTableBodyStyles_unstable: useSemanticTableBodyStyles, + useTableCellStyles_unstable: useSemanticTableCellStyles, + useTableCellActionsStyles_unstable: useSemanticTableCellActionsStyles, + useTableCellLayoutStyles_unstable: useSemanticTableCellLayoutStyles, + useTableHeaderStyles_unstable: useSemanticTableHeaderStyles, + useTableHeaderCellStyles_unstable: useSemanticTableHeaderCellStyles, + useTableResizeHandleStyles_unstable: useSemanticTableResizeHandleStyles, + useTableRowStyles_unstable: useSemanticTableRowStyles, + useTableSelectionCellStyles_unstable: useSemanticTableSelectionCellStyles, }; diff --git a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts index d370a65c37608..bdb3d224dabb4 100644 --- a/packages/react-components/semantic-style-hooks-preview/library/src/index.ts +++ b/packages/react-components/semantic-style-hooks-preview/library/src/index.ts @@ -84,3 +84,22 @@ export { useSemanticToolbarToggleButtonStyles, } from './component-styles/Toolbar'; export { useSemanticInfoButtonStyles, useSemanticInfoLabelStyles } from './component-styles/InfoLabel'; +export { + useSemanticDataGridStyles, + useSemanticDataGridBodyStyles, + useSemanticDataGridCellStyles, + useSemanticDataGridHeaderStyles, + useSemanticDataGridHeaderCellStyles, + useSemanticDataGridRowStyles, + useSemanticDataGridSelectionCellStyles, + useSemanticTableStyles, + useSemanticTableBodyStyles, + useSemanticTableCellStyles, + useSemanticTableCellActionsStyles, + useSemanticTableCellLayoutStyles, + useSemanticTableHeaderStyles, + useSemanticTableHeaderCellStyles, + useSemanticTableResizeHandleStyles, + useSemanticTableRowStyles, + useSemanticTableSelectionCellStyles, +} from './component-styles/Table';