add toolbar to semantic style hooks

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

@@ -59,6 +59,11 @@ import { TabState } from '@fluentui/react-tabs';
 import { TextareaState } from '@fluentui/react-textarea';
 import { TextState } from '@fluentui/react-text';
 import { ToggleButtonState } from '@fluentui/react-button';
+import { ToolbarDividerState } from '@fluentui/react-toolbar';
+import { ToolbarGroupState } from '@fluentui/react-toolbar';
+import { ToolbarRadioButtonState } from '@fluentui/react-toolbar';
+import { ToolbarState } from '@fluentui/react-toolbar';
+import { ToolbarToggleButtonState } from '@fluentui/react-toolbar';
 import { TreeItemLayoutState } from '@fluentui/react-tree';
 import { TreeItemState } from '@fluentui/react-tree';
 import { TreeState } from '@fluentui/react-tree';
@@ -240,6 +245,24 @@ export const useSemanticTextStyles: (_state: unknown) => TextState;
 // @public (undocumented)
 export const useSemanticToggleButtonStyles: (_state: unknown) => ToggleButtonState;
 
+// @public
+export const useSemanticToolbarButtonStyles: (_state: unknown) => void;
+
+// @public
+export const useSemanticToolbarDividerStyles: (_state: unknown) => ToolbarDividerState;
+
+// @public
+export const useSemanticToolbarGroupStyles: (_state: unknown) => ToolbarGroupState;
+
+// @public
+export const useSemanticToolbarRadioButtonStyles: (_state: unknown) => ToolbarRadioButtonState;
+
+// @public
+export const useSemanticToolbarStyles: (_state: unknown) => ToolbarState;
+
+// @public
+export const useSemanticToolbarToggleButtonStyles: (_state: unknown) => ToolbarToggleButtonState;
+
 // @public
 export const useSemanticTreeItemLayoutStyles: (_state: unknown) => TreeItemLayoutState;
 

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

@@ -60,6 +60,7 @@
     "@fluentui/react-text": "^9.4.36",
     "@fluentui/react-textarea": "^9.4.6",
     "@fluentui/react-theme": "^9.1.24",
+    "@fluentui/react-toolbar": "^9.4.5",
     "@fluentui/react-tree": "^9.10.9",
     "@fluentui/react-utilities": "^9.19.0",
     "@fluentui/semantic-tokens": "0.0.0-alpha.1",

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

@@ -0,0 +1,6 @@
+export { useSemanticToolbarStyles } from './useSemanticToolbarStyles.styles';
+export { useSemanticToolbarButtonStyles } from './useSemanticToolbarButtonStyles.styles';
+export { useSemanticToolbarDividerStyles } from './useSemanticToolbarDividerStyles.styles';
+export { useSemanticToolbarGroupStyles } from './useSemanticToolbarGroupStyles.styles';
+export { useSemanticToolbarRadioButtonStyles } from './useSemanticToolbarRadioButtonStyles.styles';
+export { useSemanticToolbarToggleButtonStyles } from './useSemanticToolbarToggleButtonStyles.styles';

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

@@ -0,0 +1,40 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { useSemanticButtonStyles } from '../Button/useSemanticButtonStyles.styles';
+import { type ToolbarButtonState } from '@fluentui/react-toolbar';
+import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
+import * as semanticTokens from '@fluentui/semantic-tokens';
+
+const useBaseStyles = makeStyles({
+  vertical: {
+    flexDirection: 'column',
+  },
+  verticalIcon: {
+    fontSize: semanticTokens.sizeCtrlLgIcon,
+    margin: '0',
+  },
+});
+
+/**
+ * Apply styling to the ToolbarButton slots based on the state
+ */
+export const useSemanticToolbarButtonStyles = (_state: unknown) => {
+  'use no memo';
+
+  const state = _state as ToolbarButtonState;
+
+  useSemanticButtonStyles(state);
+  const buttonStyles = useBaseStyles();
+
+  state.root.className = mergeClasses(
+    state.root.className,
+    state.vertical && buttonStyles.vertical,
+    getSlotClassNameProp_unstable(state.root),
+  );
+  if (state.icon) {
+    state.icon.className = mergeClasses(
+      state.icon.className,
+      state.vertical && buttonStyles.verticalIcon,
+      getSlotClassNameProp_unstable(state.icon),
+    );
+  }
+};

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

@@ -0,0 +1,37 @@
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { useSemanticDividerStyles } from '../Divider/useSemanticDividerStyles.styles';
+import { type ToolbarDividerState } from '@fluentui/react-toolbar';
+import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
+import * as semanticTokens from '@fluentui/semantic-tokens';
+
+const useBaseStyles = makeStyles({
+  // Base styles
+  root: {
+    display: 'inline-flex',
+    maxWidth: semanticTokens.strokeWidthDefault,
+    padding: `${semanticTokens.paddingContentNone} ${semanticTokens.paddingCtrlHorizontalDefault}`,
+  },
+  vertical: {
+    maxWidth: 'initial',
+  },
+});
+
+/**
+ * Apply styling to the ToolbarDivider slots based on the state
+ */
+export const useSemanticToolbarDividerStyles = (_state: unknown): ToolbarDividerState => {
+  'use no memo';
+
+  const state = _state as ToolbarDividerState;
+
+  useSemanticDividerStyles(state);
+  const { vertical } = state;
+  const toolbarDividerStyles = useBaseStyles();
+  state.root.className = mergeClasses(
+    state.root.className,
+    toolbarDividerStyles.root,
+    !vertical && toolbarDividerStyles.vertical,
+    getSlotClassNameProp_unstable(state.root),
+  );
+  return state;
+};

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

@@ -0,0 +1,20 @@
+import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
+import { mergeClasses } from '@griffel/react';
+import { toolbarGroupClassNames, type ToolbarGroupState } from '@fluentui/react-toolbar';
+
+/**
+ * Apply styling to the Toolbar slots based on the state
+ */
+export const useSemanticToolbarGroupStyles = (_state: unknown): ToolbarGroupState => {
+  'use no memo';
+
+  const state = _state as ToolbarGroupState;
+
+  state.root.className = mergeClasses(
+    state.root.className,
+    toolbarGroupClassNames.root,
+    getSlotClassNameProp_unstable(state.root),
+  );
+
+  return state;
+};

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

@@ -0,0 +1,45 @@
+import { tokens } from '@fluentui/react-theme';
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { useSemanticToggleButtonStyles } from '../Button/useSemanticToggleButtonStyles.styles';
+import { type ToolbarRadioButtonState } from '@fluentui/react-toolbar';
+import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
+
+const useBaseStyles = makeStyles({
+  /* use subtle ToggleButton selected styles for Toolbar Radio selected state */
+  selected: {
+    backgroundColor: tokens.colorSubtleBackgroundSelected,
+    color: tokens.colorNeutralForeground2Selected,
+  },
+
+  iconSelected: {
+    color: tokens.colorNeutralForeground2BrandSelected,
+  },
+});
+
+/**
+ * Apply styling to the ToolbarRadioButton slots based on the state
+ */
+export const useSemanticToolbarRadioButtonStyles = (_state: unknown): ToolbarRadioButtonState => {
+  'use no memo';
+
+  const state = _state as ToolbarRadioButtonState;
+
+  useSemanticToggleButtonStyles(state);
+  const toggleButtonStyles = useBaseStyles();
+
+  state.root.className = mergeClasses(
+    state.root.className,
+    state.checked && toggleButtonStyles.selected,
+    getSlotClassNameProp_unstable(state.root),
+  );
+
+  if (state.icon) {
+    state.icon.className = mergeClasses(
+      state.icon.className,
+      state.checked && toggleButtonStyles.iconSelected,
+      getSlotClassNameProp_unstable(state.icon),
+    );
+  }
+
+  return state;
+};

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

@@ -0,0 +1,46 @@
+import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { toolbarClassNames, type ToolbarState } from '@fluentui/react-toolbar';
+import * as semanticTokens from '@fluentui/semantic-tokens';
+
+/**
+ * Styles for the root slot
+ */
+const useStyles = makeStyles({
+  root: {
+    display: 'flex',
+    alignItems: 'center',
+    padding: `4px ${semanticTokens.ctrlChoicePaddingHorizontal}`,
+  },
+  vertical: {
+    flexDirection: 'column',
+    width: 'fit-content',
+  },
+  small: { padding: '0px 4px' },
+  medium: { padding: `4px ${semanticTokens.ctrlChoicePaddingHorizontal}` },
+  large: { padding: '4px 20px' },
+});
+
+/**
+ * Apply styling to the Toolbar slots based on the state
+ */
+export const useSemanticToolbarStyles = (_state: unknown): ToolbarState => {
+  'use no memo';
+
+  const state = _state as ToolbarState;
+
+  const styles = useStyles();
+  const { vertical, size } = state;
+  state.root.className = mergeClasses(
+    state.root.className,
+    toolbarClassNames.root,
+    styles.root,
+    vertical && styles.vertical,
+    size === 'small' && !vertical && styles.small,
+    size === 'medium' && !vertical && styles.medium,
+    size === 'large' && !vertical && styles.large,
+    getSlotClassNameProp_unstable(state.root),
+  );
+
+  return state;
+};

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

@@ -0,0 +1,45 @@
+import { tokens } from '@fluentui/react-theme';
+import { makeStyles, mergeClasses } from '@griffel/react';
+import { useSemanticToggleButtonStyles } from '../Button/useSemanticToggleButtonStyles.styles';
+import { type ToolbarToggleButtonState } from '@fluentui/react-toolbar';
+import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
+
+const useBaseStyles = makeStyles({
+  /* use subtle ToggleButton selected styles for Toolbar Radio selected state */
+  selected: {
+    backgroundColor: tokens.colorSubtleBackgroundSelected,
+    color: tokens.colorNeutralForeground2Selected,
+  },
+
+  iconSelected: {
+    color: tokens.colorNeutralForeground2BrandSelected,
+  },
+});
+
+/**
+ * Apply styling to the ToolbarToggleButton slots based on the state
+ */
+export const useSemanticToolbarToggleButtonStyles = (_state: unknown): ToolbarToggleButtonState => {
+  'use no memo';
+
+  const state = _state as ToolbarToggleButtonState;
+
+  useSemanticToggleButtonStyles(state);
+  const toggleButtonStyles = useBaseStyles();
+
+  state.root.className = mergeClasses(
+    state.root.className,
+    state.checked && toggleButtonStyles.selected,
+    getSlotClassNameProp_unstable(state.root),
+  );
+
+  if (state.icon) {
+    state.icon.className = mergeClasses(
+      state.icon.className,
+      state.checked && toggleButtonStyles.iconSelected,
+      getSlotClassNameProp_unstable(state.icon),
+    );
+  }
+
+  return state;
+};

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

@@ -71,6 +71,14 @@ import {
 } from './Breadcrumb';
 import { useSemanticSpinButtonStyles } from './SpinButton';
 import { useSemanticInputStyles } from './Input/useSemanticInputStyles.styles';
+import {
+  useSemanticToolbarStyles,
+  useSemanticToolbarButtonStyles,
+  useSemanticToolbarDividerStyles,
+  useSemanticToolbarGroupStyles,
+  useSemanticToolbarRadioButtonStyles,
+  useSemanticToolbarToggleButtonStyles,
+} from './Toolbar';
 
 export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = {
   // Accordion styles
@@ -161,4 +169,11 @@ export const SEMANTIC_STYLE_HOOKS: FluentProviderCustomStyleHooks = {
   useSpinButtonStyles_unstable: useSemanticSpinButtonStyles,
   // Input styles
   useInputStyles_unstable: useSemanticInputStyles,
+  // Toolbar styles
+  useToolbarStyles_unstable: useSemanticToolbarStyles,
+  useToolbarButtonStyles_unstable: useSemanticToolbarButtonStyles,
+  useToolbarDividerStyles_unstable: useSemanticToolbarDividerStyles,
+  useToolbarGroupStyles_unstable: useSemanticToolbarGroupStyles,
+  useToolbarRadioButtonStyles_unstable: useSemanticToolbarRadioButtonStyles,
+  useToolbarToggleButtonStyles_unstable: useSemanticToolbarToggleButtonStyles,
 };

packages/react-components/semantic-style-hooks-preview/library/src/index.ts

@@ -75,3 +75,11 @@ export {
 } from './component-styles/Breadcrumb';
 export { useSemanticSpinButtonStyles } from './component-styles/SpinButton';
 export { useSemanticInputStyles } from './component-styles/Input';
+export {
+  useSemanticToolbarStyles,
+  useSemanticToolbarButtonStyles,
+  useSemanticToolbarDividerStyles,
+  useSemanticToolbarGroupStyles,
+  useSemanticToolbarRadioButtonStyles,
+  useSemanticToolbarToggleButtonStyles,
+} from './component-styles/Toolbar';