feat: Add Toolbar component to teams-components

package.json

@@ -29,7 +29,7 @@
     "@dnd-kit/modifiers": "^7.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@fluentui/react": "^8.120.2",
-    "@fluentui/react-components": "^9.54.13",
+    "@fluentui/react-components": "^9.59.0",
     "@fluentui/react-icons": "^2.0.249",
     "@fluentui/react-migration-v8-v9": "^9.6.23",
     "@fluentui/react-shared-contexts": "^9.7.2",

packages/teams-components/src/components/Button/Button.tsx

@@ -8,7 +8,7 @@ import {
 } from '@fluentui/react-components';
 import { validateIconButton, validateMenuButton } from './validateProps';
 import { type StrictCssClass, validateStrictClasses } from '../../strictStyles';
-import { type StrictSlot } from '../../strictSlot';
+import { type StrictSlot, DataAttributeProps } from '../../strictSlot';
 
 export interface ButtonProps
   extends Pick<
@@ -34,9 +34,18 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       validateProps(userProps);
     }
 
-    const { className, icon, title, ...restProps } = userProps;
-    const props: ButtonPropsBase = {
+    const {
+      className,
+      icon,
+      title,
+      appearance = 'secondary',
+      ...restProps
+    } = userProps;
+
+    const props: ButtonPropsBase & DataAttributeProps = {
       ...restProps,
+      'data-appearance': appearance,
+      appearance,
       className: className?.toString(),
       iconPosition: 'before',
       icon,

packages/teams-components/src/components/MenuButton/MenuButton.tsx

@@ -8,8 +8,13 @@ import {
 } from '@fluentui/react-components';
 import { ButtonProps, validateIconButton } from '../Button';
 import { validateStrictClasses } from '../../strictStyles';
+import { StrictSlot } from '../../strictSlot';
 
-export const MenuButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+export interface MenuButtonProps extends ButtonProps {
+  menuIcon?: StrictSlot;
+}
+
+export const MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(
   (userProps, ref) => {
     if (process.env.NODE_ENV !== 'production') {
       validateProps(userProps);

packages/teams-components/src/components/Toolbar/Toolbar.styles.ts

@@ -0,0 +1,7 @@
+import { makeStyles } from '@fluentui/react-components';
+
+export const useStyles = makeStyles({
+  root: {
+    display: 'flex',
+  },
+});

packages/teams-components/src/components/Toolbar/Toolbar.test.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { Toolbar } from './Toolbar';
+
+describe('Toolbar', () => {
+  it('should render', () => {
+    render(<Toolbar />);
+  });
+});

packages/teams-components/src/components/Toolbar/Toolbar.tsx

@@ -0,0 +1,87 @@
+import {
+  mergeClasses,
+  useArrowNavigationGroup,
+} from '@fluentui/react-components';
+import * as React from 'react';
+import { useStyles } from './Toolbar.styles';
+import { StrictCssClass } from '../../strictStyles';
+import {
+  ToolbarItemRegistrationProvider,
+  useInitItemRegistration,
+} from './itemRegistration';
+
+export interface ToolbarProps {
+  children: React.ReactNode;
+  className?: StrictCssClass;
+}
+
+export const toolbarClassNames = {
+  root: 'tco-Toolbar',
+};
+
+export const Toolbar = React.forwardRef<HTMLDivElement, ToolbarProps>(
+  (props, ref) => {
+    const { children, className } = props;
+    const styles = useStyles();
+    const registerItem = useInitItemRegistration();
+    const contextValue = React.useMemo(
+      () => ({ registerItem }),
+      [registerItem]
+    );
+
+    return (
+      <ToolbarItemRegistrationProvider value={contextValue}>
+        <div
+          role="toolbar"
+          className={mergeClasses(
+            toolbarClassNames.root,
+            styles.root,
+            className?.toString()
+          )}
+          ref={ref}
+          {...useArrowNavigationGroup({ axis: 'both', circular: true })}
+        >
+          {children}
+        </div>
+      </ToolbarItemRegistrationProvider>
+    );
+  }
+);
+
+// TODO implement DOM validation API
+// const isAllowedToolbarItem = (el: HTMLElement) => {
+//   return (
+//     el.classList.contains(toolbarButtonClassNames.root) ||
+//     el.classList.contains(toolbarDividerClassNames.root) ||
+//     el.classList.contains(toolbarMenuButtonClassNames.root) ||
+//     el.classList.contains(toolbarToggleButtonClassNames.root)
+//   );
+// };
+//
+// const isPortalSpan = (el: HTMLElement) => {
+//   return el.tagName === 'SPAN' && el.hasAttribute('hidden');
+// };
+//
+// const isTabsterDummy = (el: HTMLElement) => {
+//   return el.hasAttribute('data-tabster-dummy');
+// };
+//
+// const validateToolbarItems = (root: HTMLElement) => {
+//   const children = root.children;
+//   for (const child of children) {
+//     // TODO is this even possible?
+//     if (!isHTMLElement(child)) {
+//       continue;
+//     }
+//
+//     if (
+//       !isAllowedToolbarItem(child) &&
+//       !isPortalSpan(child) &&
+//       !isTabsterDummy(child)
+//     ) {
+//       throw new Error(
+//         '@fluentui-contrib/teams-components::Toolbar::Use Toolbar components from @fluentui-contrib/teams-components package only'
+//       );
+//     }
+//   }
+// };

packages/teams-components/src/components/Toolbar/ToolbarButton.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import { Button, type ButtonProps } from '../Button';
+import { createStrictClass } from '../../strictStyles/createStrictClass';
+import { useItemRegistration } from './itemRegistration';
+import { useMergedRefs } from '@fluentui/react-components';
+import { mergeStrictClasses } from '../../strictStyles/mergeStrictClasses';
+
+export const toolbarButtonClassNames = {
+  root: 'tco-ToolbarButton',
+};
+
+export type ToolbarButtonProps = Omit<ButtonProps, 'className'>;
+
+const rootStrictClassName = createStrictClass(toolbarButtonClassNames.root);
+
+// TODO teams-components should reuse composition patterns
+export const ToolbarButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (props, ref) => {
+    const { ref: registerRef, styles } = useItemRegistration({
+      appearance: props.appearance,
+      type: 'button',
+    });
+
+    return (
+      <Button
+        ref={useMergedRefs(ref, registerRef)}
+        {...props}
+        className={mergeStrictClasses(rootStrictClassName, styles.root)}
+        data-appearance={props.appearance}
+      />
+    );
+  }
+);

packages/teams-components/src/components/Toolbar/ToolbarDivider.styles.ts

@@ -0,0 +1,7 @@
+import { makeStyles } from '@fluentui/react-components';
+
+export const useStyles = makeStyles({
+  root: {
+    flexGrow: 'unset',
+  },
+});

packages/teams-components/src/components/Toolbar/ToolbarDivider.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import {
+  useDividerStyles_unstable,
+  useDivider_unstable,
+  renderDivider_unstable,
+  mergeClasses,
+  useMergedRefs,
+} from '@fluentui/react-components';
+import { useStyles } from './ToolbarDivider.styles';
+import { useItemRegistration } from './itemRegistration';
+
+export const toolbarDividerClassNames = {
+  root: 'tco-ToolbarDivider',
+};
+
+export const ToolbarDivider = React.forwardRef<
+  HTMLDivElement,
+  Record<string, never>
+>((props, ref) => {
+  const styles = useStyles();
+  const { ref: registerRef, styles: itemRegistrationStyles } =
+    useItemRegistration({
+      appearance: props.appearance,
+      type: 'divider',
+    });
+  const state = useDivider_unstable(
+    {
+      ...props,
+      vertical: true,
+      className: mergeClasses(
+        toolbarDividerClassNames.root,
+        styles.root,
+        itemRegistrationStyles.root.toString()
+      ),
+    },
+    useMergedRefs(ref, registerRef)
+  );
+  useDividerStyles_unstable(state);
+
+  return renderDivider_unstable(state);
+});

packages/teams-components/src/components/Toolbar/ToolbarMenuButton.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { MenuButton, MenuButtonProps } from '../MenuButton';
+import { createStrictClass } from '../../strictStyles/createStrictClass';
+import { useItemRegistration } from './itemRegistration';
+import { useMergedRefs } from '@fluentui/react-components';
+import { mergeStrictClasses } from '../../strictStyles';
+
+export const toolbarMenuButtonClassNames = {
+  root: 'tco-ToolbarMenuButton',
+};
+
+export type ToolbarMenuButtonProps = Omit<
+  MenuButtonProps,
+  'className' | 'menuIcon'
+>;
+
+const rootStrictClassName = createStrictClass(toolbarMenuButtonClassNames.root);
+
+// TODO teams-components should reuse composition patterns
+export const ToolbarMenuButton = React.forwardRef<
+  HTMLButtonElement,
+  MenuButtonProps
+>((props, ref) => {
+  const { ref: registerRef, styles } = useItemRegistration({
+    appearance: props.appearance,
+    type: 'button',
+  });
+  return (
+    <MenuButton
+      ref={useMergedRefs(ref, registerRef)}
+      {...props}
+      menuIcon={null}
+      className={mergeStrictClasses(rootStrictClassName, styles.root)}
+      data-appearance={props.appearance}
+    />
+  );
+});

packages/teams-components/src/components/Toolbar/ToolbarToggleButton.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react';
+import { ToggleButton, type ToggleButtonProps } from '../ToggleButton';
+import { createStrictClass } from '../../strictStyles/createStrictClass';
+import { useItemRegistration } from './itemRegistration';
+import { useMergedRefs } from '@fluentui/react-components';
+import { mergeStrictClasses } from '../../strictStyles';
+
+export const toolbarToggleButtonClassNames = {
+  root: 'tco-ToolbarToggleButton',
+};
+
+export type ToolbarToggleButtonProps = Omit<ToggleButtonProps, 'className'>;
+
+const rootStrictClassName = createStrictClass(
+  toolbarToggleButtonClassNames.root
+);
+
+// TODO teams-components should reuse composition patterns
+export const ToolbarToggleButton = React.forwardRef<
+  HTMLButtonElement,
+  ToggleButtonProps
+>((props, ref) => {
+  const { ref: registerRef, styles } = useItemRegistration({
+    appearance: props.appearance,
+    type: 'button',
+  });
+  return (
+    <ToggleButton
+      ref={useMergedRefs(ref, registerRef)}
+      {...props}
+      className={mergeStrictClasses(rootStrictClassName, styles.root)}
+      data-appearance={props.appearance}
+    />
+  );
+});

packages/teams-components/src/components/Toolbar/index.ts

@@ -0,0 +1,5 @@
+export * from './Toolbar';
+export * from './ToolbarDivider';
+export * from './ToolbarButton';
+export * from './ToolbarToggleButton';
+export * from './ToolbarMenuButton';

packages/teams-components/src/components/Toolbar/itemRegistration.styles.ts

@@ -0,0 +1,32 @@
+import { makeStrictStyles } from '../../strictStyles/makeStrictStyles';
+
+export const itemRegistrationVars = {
+  toolbarItemMarginInlineStart: '--toolbar-item-margin-inline-start',
+};
+
+let propertyRegisterComplete = false;
+
+export const registerCustomProperties = (win: typeof globalThis) => {
+  if (propertyRegisterComplete) {
+    return;
+  }
+
+  try {
+    win.CSS.registerProperty({
+      name: itemRegistrationVars.toolbarItemMarginInlineStart,
+      syntax: '<length>',
+      inherits: false,
+      initialValue: '0px',
+    });
+  } catch {
+    // ignore multiple registration error
+  }
+
+  propertyRegisterComplete = true;
+};
+
+export const useItemRegistrationStyles = makeStrictStyles({
+  root: {
+    marginInlineStart: `var(${itemRegistrationVars.toolbarItemMarginInlineStart})`,
+  },
+});