Skip to content

Commit 75e9f47

Browse files
rachethecreatorMitch-At-Work
rachethecreator
authored and
Mitch-At-Work
committed
add table to semantic style hooks (#34863)
1 parent c920a38 commit 75e9f47

22 files changed

+1207
-1
lines changed

‎packages/react-components/semantic-style-hooks-preview/library/etc/semantic-style-hooks-preview.api.md

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,13 @@ import { BreadcrumbState } from '@fluentui/react-breadcrumb';
1414
import { ButtonState } from '@fluentui/react-button';
1515
import { CheckboxState } from '@fluentui/react-checkbox';
1616
import { CompoundButtonState } from '@fluentui/react-button';
17+
import { DataGridBodyState } from '@fluentui/react-table';
18+
import { DataGridCellState } from '@fluentui/react-table';
19+
import { DataGridHeaderCellState } from '@fluentui/react-table';
20+
import { DataGridHeaderState } from '@fluentui/react-table';
21+
import { DataGridRowState } from '@fluentui/react-table';
22+
import { DataGridSelectionCellState } from '@fluentui/react-table';
23+
import { DataGridState } from '@fluentui/react-table';
1724
import { DialogActionsState } from '@fluentui/react-dialog';
1825
import { DialogBodyState } from '@fluentui/react-dialog';
1926
import { DialogContentState } from '@fluentui/react-dialog';
@@ -56,6 +63,16 @@ import { SpinButtonState } from '@fluentui/react-spinbutton';
5663
import { SpinnerState } from '@fluentui/react-spinner';
5764
import { SplitButtonState } from '@fluentui/react-button';
5865
import { SwitchState } from '@fluentui/react-switch';
66+
import { TableBodyState } from '@fluentui/react-table';
67+
import { TableCellActionsState } from '@fluentui/react-table';
68+
import { TableCellLayoutState } from '@fluentui/react-table';
69+
import { TableCellState } from '@fluentui/react-table';
70+
import { TableHeaderCellState } from '@fluentui/react-table';
71+
import { TableHeaderState } from '@fluentui/react-table';
72+
import { TableResizeHandleState } from '@fluentui/react-table';
73+
import { TableRowState } from '@fluentui/react-table';
74+
import { TableSelectionCellState } from '@fluentui/react-table';
75+
import { TableState } from '@fluentui/react-table';
5976
import { TabListState } from '@fluentui/react-tabs';
6077
import { TabState } from '@fluentui/react-tabs';
6178
import { TextareaState } from '@fluentui/react-textarea';
@@ -108,6 +125,27 @@ export const useSemanticCheckboxStyles: (_state: unknown) => CheckboxState;
108125
// @public (undocumented)
109126
export const useSemanticCompoundButtonStyles: (_state: unknown) => CompoundButtonState;
110127

128+
// @public
129+
export const useSemanticDataGridBodyStyles: (_state: unknown) => DataGridBodyState;
130+
131+
// @public
132+
export const useSemanticDataGridCellStyles: (_state: unknown) => DataGridCellState;
133+
134+
// @public
135+
export const useSemanticDataGridHeaderCellStyles: (_state: unknown) => DataGridHeaderCellState;
136+
137+
// @public
138+
export const useSemanticDataGridHeaderStyles: (_state: unknown) => DataGridHeaderState;
139+
140+
// @public
141+
export const useSemanticDataGridRowStyles: (_state: unknown) => DataGridRowState;
142+
143+
// @public
144+
export const useSemanticDataGridSelectionCellStyles: (_state: unknown) => DataGridSelectionCellState;
145+
146+
// @public
147+
export const useSemanticDataGridStyles: (_state: unknown) => DataGridState;
148+
111149
// @public
112150
export const useSemanticDialogActionsStyles: (_state: unknown) => DialogActionsState;
113151

@@ -243,6 +281,36 @@ export const useSemanticTabContentStyles_unstable: (state: TabState) => TabState
243281
// @public
244282
export const useSemanticTabIndicatorStyles_unstable: (state: TabState) => TabState;
245283

284+
// @public
285+
export const useSemanticTableBodyStyles: (_state: unknown) => TableBodyState;
286+
287+
// @public
288+
export const useSemanticTableCellActionsStyles: (_state: unknown) => TableCellActionsState;
289+
290+
// @public
291+
export const useSemanticTableCellLayoutStyles: (_state: unknown) => TableCellLayoutState;
292+
293+
// @public
294+
export const useSemanticTableCellStyles: (_state: unknown) => TableCellState;
295+
296+
// @public
297+
export const useSemanticTableHeaderCellStyles: (_state: unknown) => TableHeaderCellState;
298+
299+
// @public
300+
export const useSemanticTableHeaderStyles: (_state: unknown) => TableHeaderState;
301+
302+
// @public
303+
export const useSemanticTableResizeHandleStyles: (_state: unknown) => TableResizeHandleState;
304+
305+
// @public
306+
export const useSemanticTableRowStyles: (_state: unknown) => TableRowState;
307+
308+
// @public
309+
export const useSemanticTableSelectionCellStyles: (_state: unknown) => TableSelectionCellState;
310+
311+
// @public
312+
export const useSemanticTableStyles: (_state: unknown) => TableState;
313+
246314
// @public
247315
export const useSemanticTabListStyles: (_state: unknown) => TabListState;
248316

‎packages/react-components/semantic-style-hooks-preview/library/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -56,8 +56,9 @@
5656
"@fluentui/react-spinbutton": "^9.3.6",
5757
"@fluentui/react-spinner": "^9.5.11",
5858
"@fluentui/react-switch": "^9.2.6",
59-
"@fluentui/react-tabster": "^9.24.6",
59+
"@fluentui/react-table": "^9.16.6",
6060
"@fluentui/react-tabs": "^9.7.6",
61+
"@fluentui/react-tabster": "^9.24.6",
6162
"@fluentui/react-text": "^9.4.36",
6263
"@fluentui/react-textarea": "^9.4.6",
6364
"@fluentui/react-theme": "^9.1.24",

‎packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/index.ts

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
export { useSemanticDataGridStyles } from './useSemanticDataGridStyles.styles';
2+
export { useSemanticDataGridBodyStyles } from './useSemanticDataGridBodyStyles.styles';
3+
export { useSemanticDataGridCellStyles } from './useSemanticDataGridCellStyles.styles';
4+
export { useSemanticDataGridHeaderStyles } from './useSemanticDataGridHeaderStyles.styles';
5+
export { useSemanticDataGridHeaderCellStyles } from './useSemanticDataGridHeaderCellStyles.styles';
6+
export { useSemanticDataGridRowStyles } from './useSemanticDataGridRowStyles.styles';
7+
export { useSemanticDataGridSelectionCellStyles } from './useSemanticDataGridSelectionCellStyles.styles';
8+
export { useSemanticTableStyles } from './useSemanticTableStyles.styles';
9+
export { useSemanticTableBodyStyles } from './useSemanticTableBodyStyles.styles';
10+
export { useSemanticTableCellStyles } from './useSemanticTableCellStyles.styles';
11+
export { useSemanticTableCellActionsStyles } from './useSemanticTableCellActionsStyles.styles';
12+
export { useSemanticTableCellLayoutStyles } from './useSemanticTableCellLayoutStyles.styles';
13+
export { useSemanticTableHeaderStyles } from './useSemanticTableHeaderStyles.styles';
14+
export { useSemanticTableHeaderCellStyles } from './useSemanticTableHeaderCellStyles.styles';
15+
export { useSemanticTableResizeHandleStyles } from './useSemanticTableResizeHandleStyles.styles';
16+
export { useSemanticTableRowStyles } from './useSemanticTableRowStyles.styles';
17+
export { useSemanticTableSelectionCellStyles } from './useSemanticTableSelectionCellStyles.styles';

‎packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridBodyStyles.styles.ts

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { mergeClasses } from '@griffel/react';
2+
import { dataGridBodyClassNames, type DataGridBodyState } from '@fluentui/react-table';
3+
import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
4+
import { useSemanticTableBodyStyles } from './useSemanticTableBodyStyles.styles';
5+
6+
/**
7+
* Apply styling to the DataGridBody slots based on the state
8+
*/
9+
export const useSemanticDataGridBodyStyles = (_state: unknown): DataGridBodyState => {
10+
'use no memo';
11+
12+
const state = _state as DataGridBodyState;
13+
14+
useSemanticTableBodyStyles(state);
15+
state.root.className = mergeClasses(
16+
state.root.className,
17+
dataGridBodyClassNames.root,
18+
getSlotClassNameProp_unstable(state.root),
19+
);
20+
21+
return state;
22+
};

‎packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridCellStyles.styles.ts

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { mergeClasses } from '@griffel/react';
2+
import { dataGridCellClassNames, type DataGridCellState } from '@fluentui/react-table';
3+
import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
4+
import { useSemanticTableCellStyles } from './useSemanticTableCellStyles.styles';
5+
6+
/**
7+
* Apply styling to the DataGridCell slots based on the state
8+
*/
9+
export const useSemanticDataGridCellStyles = (_state: unknown): DataGridCellState => {
10+
'use no memo';
11+
12+
const state = _state as DataGridCellState;
13+
14+
useSemanticTableCellStyles(state);
15+
state.root.className = mergeClasses(
16+
state.root.className,
17+
dataGridCellClassNames.root,
18+
getSlotClassNameProp_unstable(state.root),
19+
);
20+
21+
return state;
22+
};

‎packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridHeaderCellStyles.styles.ts

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { mergeClasses } from '@griffel/react';
2+
import { dataGridHeaderCellClassNames, type DataGridHeaderCellState } from '@fluentui/react-table';
3+
import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
4+
import { useSemanticTableHeaderCellStyles } from './useSemanticTableHeaderCellStyles.styles';
5+
6+
/**
7+
* Apply styling to the DataGridHeaderCell slots based on the state
8+
*/
9+
export const useSemanticDataGridHeaderCellStyles = (_state: unknown): DataGridHeaderCellState => {
10+
'use no memo';
11+
12+
const state = _state as DataGridHeaderCellState;
13+
14+
useSemanticTableHeaderCellStyles(state);
15+
state.root.className = mergeClasses(
16+
state.root.className,
17+
dataGridHeaderCellClassNames.root,
18+
getSlotClassNameProp_unstable(state.root),
19+
);
20+
21+
if (state.button) {
22+
state.button.className = mergeClasses(
23+
state.button.className,
24+
dataGridHeaderCellClassNames.button,
25+
getSlotClassNameProp_unstable(state.button),
26+
);
27+
}
28+
29+
if (state.sortIcon) {
30+
state.sortIcon.className = mergeClasses(
31+
state.sortIcon.className,
32+
dataGridHeaderCellClassNames.sortIcon,
33+
getSlotClassNameProp_unstable(state.sortIcon),
34+
);
35+
}
36+
37+
if (state.aside) {
38+
state.aside.className = mergeClasses(
39+
state.aside.className,
40+
dataGridHeaderCellClassNames.aside,
41+
getSlotClassNameProp_unstable(state.aside),
42+
);
43+
}
44+
45+
return state;
46+
};

‎packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridHeaderStyles.styles.ts

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { mergeClasses } from '@griffel/react';
2+
import { dataGridHeaderClassNames, type DataGridHeaderState } from '@fluentui/react-table';
3+
import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
4+
import { useSemanticTableHeaderStyles } from './useSemanticTableHeaderStyles.styles';
5+
6+
/**
7+
* Apply styling to the DataGridHeader slots based on the state
8+
*/
9+
export const useSemanticDataGridHeaderStyles = (_state: unknown): DataGridHeaderState => {
10+
'use no memo';
11+
12+
const state = _state as DataGridHeaderState;
13+
14+
useSemanticTableHeaderStyles(state);
15+
state.root.className = mergeClasses(
16+
state.root.className,
17+
dataGridHeaderClassNames.root,
18+
getSlotClassNameProp_unstable(state.root),
19+
);
20+
21+
return state;
22+
};

‎packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridRowStyles.styles.ts

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { mergeClasses } from '@griffel/react';
2+
import { dataGridRowClassNames, type DataGridRowState } from '@fluentui/react-table';
3+
import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
4+
import { useSemanticTableRowStyles } from './useSemanticTableRowStyles.styles';
5+
6+
/**
7+
* Apply styling to the DataGridRow slots based on the state
8+
*/
9+
export const useSemanticDataGridRowStyles = (_state: unknown): DataGridRowState => {
10+
'use no memo';
11+
12+
const state = _state as DataGridRowState;
13+
14+
useSemanticTableRowStyles(state);
15+
state.root.className = mergeClasses(
16+
state.root.className,
17+
dataGridRowClassNames.root,
18+
getSlotClassNameProp_unstable(state.root),
19+
);
20+
if (state.selectionCell) {
21+
state.selectionCell.className = mergeClasses(
22+
state.selectionCell.className,
23+
dataGridRowClassNames.selectionCell,
24+
getSlotClassNameProp_unstable(state.selectionCell),
25+
);
26+
}
27+
28+
return state;
29+
};

‎packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridSelectionCellStyles.styles.ts

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import { mergeClasses } from '@griffel/react';
2+
import { dataGridSelectionCellClassNames, type DataGridSelectionCellState } from '@fluentui/react-table';
3+
import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
4+
import { useSemanticTableSelectionCellStyles } from './useSemanticTableSelectionCellStyles.styles';
5+
6+
/**
7+
* Apply styling to the DataGridSelectionCell slots based on the state
8+
*/
9+
export const useSemanticDataGridSelectionCellStyles = (_state: unknown): DataGridSelectionCellState => {
10+
'use no memo';
11+
12+
const state = _state as DataGridSelectionCellState;
13+
14+
useSemanticTableSelectionCellStyles(state);
15+
state.root.className = mergeClasses(
16+
state.root.className,
17+
dataGridSelectionCellClassNames.root,
18+
getSlotClassNameProp_unstable(state.root),
19+
);
20+
21+
if (state.checkboxIndicator) {
22+
state.checkboxIndicator.className = mergeClasses(
23+
state.checkboxIndicator.className,
24+
dataGridSelectionCellClassNames.checkboxIndicator,
25+
getSlotClassNameProp_unstable(state.checkboxIndicator),
26+
);
27+
}
28+
29+
if (state.radioIndicator) {
30+
state.radioIndicator.className = mergeClasses(
31+
state.radioIndicator.className,
32+
dataGridSelectionCellClassNames.radioIndicator,
33+
getSlotClassNameProp_unstable(state.radioIndicator),
34+
);
35+
}
36+
37+
return state;
38+
};

‎packages/react-components/semantic-style-hooks-preview/library/src/component-styles/Table/useSemanticDataGridStyles.styles.ts

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { mergeClasses } from '@griffel/react';
2+
import { dataGridClassNames, type DataGridState } from '@fluentui/react-table';
3+
import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
4+
import { useSemanticTableStyles } from './useSemanticTableStyles.styles';
5+
6+
/**
7+
* Apply styling to the DataGrid slots based on the state
8+
*/
9+
export const useSemanticDataGridStyles = (_state: unknown): DataGridState => {
10+
'use no memo';
11+
12+
const state = _state as DataGridState;
13+
14+
useSemanticTableStyles(state);
15+
state.root.className = mergeClasses(
16+
state.root.className,
17+
dataGridClassNames.root,
18+
getSlotClassNameProp_unstable(state.root),
19+
);
20+
21+
return state;
22+
};

0 commit comments

Comments
 (0)