Skip to content

Commit c2e54d0

Browse files
rachethecreatorMitch-At-Work
rachethecreator
authored and
Mitch-At-Work
committed
add toolbar to semantic style hooks (#34840)
1 parent cfcbec5 commit c2e54d0

11 files changed

+286
-0
lines changed

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

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,11 @@ import { TabState } from '@fluentui/react-tabs';
5959
import { TextareaState } from '@fluentui/react-textarea';
6060
import { TextState } from '@fluentui/react-text';
6161
import { ToggleButtonState } from '@fluentui/react-button';
62+
import { ToolbarDividerState } from '@fluentui/react-toolbar';
63+
import { ToolbarGroupState } from '@fluentui/react-toolbar';
64+
import { ToolbarRadioButtonState } from '@fluentui/react-toolbar';
65+
import { ToolbarState } from '@fluentui/react-toolbar';
66+
import { ToolbarToggleButtonState } from '@fluentui/react-toolbar';
6267
import { TreeItemLayoutState } from '@fluentui/react-tree';
6368
import { TreeItemState } from '@fluentui/react-tree';
6469
import { TreeState } from '@fluentui/react-tree';
@@ -240,6 +245,24 @@ export const useSemanticTextStyles: (_state: unknown) => TextState;
240245
// @public (undocumented)
241246
export const useSemanticToggleButtonStyles: (_state: unknown) => ToggleButtonState;
242247

248+
// @public
249+
export const useSemanticToolbarButtonStyles: (_state: unknown) => void;
250+
251+
// @public
252+
export const useSemanticToolbarDividerStyles: (_state: unknown) => ToolbarDividerState;
253+
254+
// @public
255+
export const useSemanticToolbarGroupStyles: (_state: unknown) => ToolbarGroupState;
256+
257+
// @public
258+
export const useSemanticToolbarRadioButtonStyles: (_state: unknown) => ToolbarRadioButtonState;
259+
260+
// @public
261+
export const useSemanticToolbarStyles: (_state: unknown) => ToolbarState;
262+
263+
// @public
264+
export const useSemanticToolbarToggleButtonStyles: (_state: unknown) => ToolbarToggleButtonState;
265+
243266
// @public
244267
export const useSemanticTreeItemLayoutStyles: (_state: unknown) => TreeItemLayoutState;
245268

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,7 @@
6060
"@fluentui/react-text": "^9.4.36",
6161
"@fluentui/react-textarea": "^9.4.6",
6262
"@fluentui/react-theme": "^9.1.24",
63+
"@fluentui/react-toolbar": "^9.4.5",
6364
"@fluentui/react-tree": "^9.10.9",
6465
"@fluentui/react-utilities": "^9.19.0",
6566
"@fluentui/semantic-tokens": "0.0.0-alpha.1",

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
export { useSemanticToolbarStyles } from './useSemanticToolbarStyles.styles';
2+
export { useSemanticToolbarButtonStyles } from './useSemanticToolbarButtonStyles.styles';
3+
export { useSemanticToolbarDividerStyles } from './useSemanticToolbarDividerStyles.styles';
4+
export { useSemanticToolbarGroupStyles } from './useSemanticToolbarGroupStyles.styles';
5+
export { useSemanticToolbarRadioButtonStyles } from './useSemanticToolbarRadioButtonStyles.styles';
6+
export { useSemanticToolbarToggleButtonStyles } from './useSemanticToolbarToggleButtonStyles.styles';

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

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { makeStyles, mergeClasses } from '@griffel/react';
2+
import { useSemanticButtonStyles } from '../Button/useSemanticButtonStyles.styles';
3+
import { type ToolbarButtonState } from '@fluentui/react-toolbar';
4+
import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
5+
import * as semanticTokens from '@fluentui/semantic-tokens';
6+
7+
const useBaseStyles = makeStyles({
8+
vertical: {
9+
flexDirection: 'column',
10+
},
11+
verticalIcon: {
12+
fontSize: semanticTokens.sizeCtrlLgIcon,
13+
margin: '0',
14+
},
15+
});
16+
17+
/**
18+
* Apply styling to the ToolbarButton slots based on the state
19+
*/
20+
export const useSemanticToolbarButtonStyles = (_state: unknown) => {
21+
'use no memo';
22+
23+
const state = _state as ToolbarButtonState;
24+
25+
useSemanticButtonStyles(state);
26+
const buttonStyles = useBaseStyles();
27+
28+
state.root.className = mergeClasses(
29+
state.root.className,
30+
state.vertical && buttonStyles.vertical,
31+
getSlotClassNameProp_unstable(state.root),
32+
);
33+
if (state.icon) {
34+
state.icon.className = mergeClasses(
35+
state.icon.className,
36+
state.vertical && buttonStyles.verticalIcon,
37+
getSlotClassNameProp_unstable(state.icon),
38+
);
39+
}
40+
};

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

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { makeStyles, mergeClasses } from '@griffel/react';
2+
import { useSemanticDividerStyles } from '../Divider/useSemanticDividerStyles.styles';
3+
import { type ToolbarDividerState } from '@fluentui/react-toolbar';
4+
import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
5+
import * as semanticTokens from '@fluentui/semantic-tokens';
6+
7+
const useBaseStyles = makeStyles({
8+
// Base styles
9+
root: {
10+
display: 'inline-flex',
11+
maxWidth: semanticTokens.strokeWidthDefault,
12+
padding: `${semanticTokens.paddingContentNone} ${semanticTokens.paddingCtrlHorizontalDefault}`,
13+
},
14+
vertical: {
15+
maxWidth: 'initial',
16+
},
17+
});
18+
19+
/**
20+
* Apply styling to the ToolbarDivider slots based on the state
21+
*/
22+
export const useSemanticToolbarDividerStyles = (_state: unknown): ToolbarDividerState => {
23+
'use no memo';
24+
25+
const state = _state as ToolbarDividerState;
26+
27+
useSemanticDividerStyles(state);
28+
const { vertical } = state;
29+
const toolbarDividerStyles = useBaseStyles();
30+
state.root.className = mergeClasses(
31+
state.root.className,
32+
toolbarDividerStyles.root,
33+
!vertical && toolbarDividerStyles.vertical,
34+
getSlotClassNameProp_unstable(state.root),
35+
);
36+
return state;
37+
};

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

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

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { tokens } from '@fluentui/react-theme';
2+
import { makeStyles, mergeClasses } from '@griffel/react';
3+
import { useSemanticToggleButtonStyles } from '../Button/useSemanticToggleButtonStyles.styles';
4+
import { type ToolbarRadioButtonState } from '@fluentui/react-toolbar';
5+
import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
6+
7+
const useBaseStyles = makeStyles({
8+
/* use subtle ToggleButton selected styles for Toolbar Radio selected state */
9+
selected: {
10+
backgroundColor: tokens.colorSubtleBackgroundSelected,
11+
color: tokens.colorNeutralForeground2Selected,
12+
},
13+
14+
iconSelected: {
15+
color: tokens.colorNeutralForeground2BrandSelected,
16+
},
17+
});
18+
19+
/**
20+
* Apply styling to the ToolbarRadioButton slots based on the state
21+
*/
22+
export const useSemanticToolbarRadioButtonStyles = (_state: unknown): ToolbarRadioButtonState => {
23+
'use no memo';
24+
25+
const state = _state as ToolbarRadioButtonState;
26+
27+
useSemanticToggleButtonStyles(state);
28+
const toggleButtonStyles = useBaseStyles();
29+
30+
state.root.className = mergeClasses(
31+
state.root.className,
32+
state.checked && toggleButtonStyles.selected,
33+
getSlotClassNameProp_unstable(state.root),
34+
);
35+
36+
if (state.icon) {
37+
state.icon.className = mergeClasses(
38+
state.icon.className,
39+
state.checked && toggleButtonStyles.iconSelected,
40+
getSlotClassNameProp_unstable(state.icon),
41+
);
42+
}
43+
44+
return state;
45+
};

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

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
2+
import { makeStyles, mergeClasses } from '@griffel/react';
3+
import { toolbarClassNames, type ToolbarState } from '@fluentui/react-toolbar';
4+
import * as semanticTokens from '@fluentui/semantic-tokens';
5+
6+
/**
7+
* Styles for the root slot
8+
*/
9+
const useStyles = makeStyles({
10+
root: {
11+
display: 'flex',
12+
alignItems: 'center',
13+
padding: `4px ${semanticTokens.ctrlChoicePaddingHorizontal}`,
14+
},
15+
vertical: {
16+
flexDirection: 'column',
17+
width: 'fit-content',
18+
},
19+
small: { padding: '0px 4px' },
20+
medium: { padding: `4px ${semanticTokens.ctrlChoicePaddingHorizontal}` },
21+
large: { padding: '4px 20px' },
22+
});
23+
24+
/**
25+
* Apply styling to the Toolbar slots based on the state
26+
*/
27+
export const useSemanticToolbarStyles = (_state: unknown): ToolbarState => {
28+
'use no memo';
29+
30+
const state = _state as ToolbarState;
31+
32+
const styles = useStyles();
33+
const { vertical, size } = state;
34+
state.root.className = mergeClasses(
35+
state.root.className,
36+
toolbarClassNames.root,
37+
styles.root,
38+
vertical && styles.vertical,
39+
size === 'small' && !vertical && styles.small,
40+
size === 'medium' && !vertical && styles.medium,
41+
size === 'large' && !vertical && styles.large,
42+
getSlotClassNameProp_unstable(state.root),
43+
);
44+
45+
return state;
46+
};

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

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
import { tokens } from '@fluentui/react-theme';
2+
import { makeStyles, mergeClasses } from '@griffel/react';
3+
import { useSemanticToggleButtonStyles } from '../Button/useSemanticToggleButtonStyles.styles';
4+
import { type ToolbarToggleButtonState } from '@fluentui/react-toolbar';
5+
import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
6+
7+
const useBaseStyles = makeStyles({
8+
/* use subtle ToggleButton selected styles for Toolbar Radio selected state */
9+
selected: {
10+
backgroundColor: tokens.colorSubtleBackgroundSelected,
11+
color: tokens.colorNeutralForeground2Selected,
12+
},
13+
14+
iconSelected: {
15+
color: tokens.colorNeutralForeground2BrandSelected,
16+
},
17+
});
18+
19+
/**
20+
* Apply styling to the ToolbarToggleButton slots based on the state
21+
*/
22+
export const useSemanticToolbarToggleButtonStyles = (_state: unknown): ToolbarToggleButtonState => {
23+
'use no memo';
24+
25+
const state = _state as ToolbarToggleButtonState;
26+
27+
useSemanticToggleButtonStyles(state);
28+
const toggleButtonStyles = useBaseStyles();
29+
30+
state.root.className = mergeClasses(
31+
state.root.className,
32+
state.checked && toggleButtonStyles.selected,
33+
getSlotClassNameProp_unstable(state.root),
34+
);
35+
36+
if (state.icon) {
37+
state.icon.className = mergeClasses(
38+
state.icon.className,
39+
state.checked && toggleButtonStyles.iconSelected,
40+
getSlotClassNameProp_unstable(state.icon),
41+
);
42+
}
43+
44+
return state;
45+
};

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,14 @@ import {
7171
} from './Breadcrumb';
7272
import { useSemanticSpinButtonStyles } from './SpinButton';
7373
import { useSemanticInputStyles } from './Input/useSemanticInputStyles.styles';
74+
import {
75+
useSemanticToolbarStyles,
76+
useSemanticToolbarButtonStyles,
77+
useSemanticToolbarDividerStyles,
78+
useSemanticToolbarGroupStyles,
79+
useSemanticToolbarRadioButtonStyles,
80+
useSemanticToolbarToggleButtonStyles,
81+
} from './Toolbar';
7482

7583
export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = {
7684
// Accordion styles
@@ -161,4 +169,11 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = {
161169
useSpinButtonStyles_unstable: useSemanticSpinButtonStyles,
162170
// Input styles
163171
useInputStyles_unstable: useSemanticInputStyles,
172+
// Toolbar styles
173+
useToolbarStyles_unstable: useSemanticToolbarStyles,
174+
useToolbarButtonStyles_unstable: useSemanticToolbarButtonStyles,
175+
useToolbarDividerStyles_unstable: useSemanticToolbarDividerStyles,
176+
useToolbarGroupStyles_unstable: useSemanticToolbarGroupStyles,
177+
useToolbarRadioButtonStyles_unstable: useSemanticToolbarRadioButtonStyles,
178+
useToolbarToggleButtonStyles_unstable: useSemanticToolbarToggleButtonStyles,
164179
};

0 commit comments

Comments
 (0)