feat(react-cap-theme): add react-toolbar component

change/@fluentui-contrib-react-cap-theme-afc5499b-e728-4f39-8ffd-57c6c69c0eb2.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "add react-toolbar component",
+  "packageName": "@fluentui-contrib/react-cap-theme",
+  "email": "egianoglio@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-cap-theme/src/capStyleHooks.ts

@@ -111,6 +111,8 @@ import type {
 } from '@fluentui/react-menu';
 import { usePopoverSurfaceStyles } from './components/react-popover';
 import type { PopoverSurfaceState } from '@fluentui/react-popover';
+import { useToolbarStyles } from './components/react-toolbar';
+import type { ToolbarState } from './components/react-toolbar';
 import { useTooltipStyles } from './components/react-tooltip';
 import type { TooltipState } from './components/react-tooltip';
 
@@ -225,6 +227,9 @@ export const CAP_STYLE_HOOKS: NonNullable<
   useToggleButtonStyles_unstable: (state) => {
     return useToggleButtonStyles(state as ToggleButtonState);
   },
+  useToolbarStyles_unstable: (state) => {
+    return useToolbarStyles(state as ToolbarState);
+  },
   useTooltipStyles_unstable: (state) => {
     return useTooltipStyles(state as TooltipState);
   },

packages/react-cap-theme/src/components/react-toolbar/components/Toolbar/Toolbar.types.ts

@@ -0,0 +1,36 @@
+import type {
+  ToolbarProps as FluentToolbarProps,
+  ToolbarState as FluentToolbarState,
+  ToolbarSlots,
+} from '@fluentui/react-toolbar';
+
+/**
+ * Slots for the Toolbar component.
+ * @public
+ */
+export type { ToolbarSlots };
+
+/**
+ * Props for the Toolbar component.
+ * Extends Fluent UI ToolbarProps with SharePoint-specific appearance and size options.
+ * @public
+ */
+export type ToolbarProps = Omit<FluentToolbarProps, 'size'> & {
+  /**
+   * The contextual appearance adds shadow to the toolbar. The static appearance is Fluent default appearance.
+   * @default contextual
+   */
+  appearance?: 'contextual' | 'static';
+  /**
+   * Toolbar can have small, medium, or large size.
+   * @default small
+   */
+  size?: 'small' | 'medium' | 'large';
+};
+
+/**
+ * State for the Toolbar component.
+ * @public
+ */
+export type ToolbarState = FluentToolbarState &
+  Required<Pick<ToolbarProps, 'appearance'>>;

packages/react-cap-theme/src/components/react-toolbar/components/Toolbar/useToolbarStyles.styles.ts

@@ -0,0 +1,35 @@
+import { makeStyles, mergeClasses, shorthands } from '@griffel/react';
+import { tokens } from '@fluentui/tokens';
+import { getSlotClassNameProp_unstable } from '@fluentui/react-utilities';
+import type { ToolbarState } from './Toolbar.types';
+
+const useStyles = makeStyles({
+  root: {
+    ...shorthands.border('1px', 'solid', tokens.colorTransparentStroke),
+    backgroundColor: tokens.colorNeutralBackground1,
+    borderRadius: tokens.borderRadiusMedium,
+    display: 'inline-flex',
+  },
+  contextual: { boxShadow: tokens.shadow8 },
+  static: { boxShadow: 'none' },
+});
+
+/**
+ * Apply styles to the Toolbar component.
+ * @param state - The toolbar state containing appearance and styling information
+ * @returns The updated toolbar state with applied styles
+ * @public
+ */
+export const useToolbarStyles = (state: ToolbarState): ToolbarState => {
+  const styles = useStyles();
+  const { appearance } = state;
+
+  state.root.className = mergeClasses(
+    state.root.className,
+    styles.root,
+    styles[appearance],
+    getSlotClassNameProp_unstable(state.root)
+  );
+
+  return state;
+};

packages/react-cap-theme/src/components/react-toolbar/index.ts

@@ -0,0 +1,2 @@
+export { useToolbarStyles } from './components/Toolbar/useToolbarStyles.styles';
+export type { ToolbarState } from './components/Toolbar/Toolbar.types';