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.58.3",
     "@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,168 @@
+import {
+  tokens,
+  useMergedRefs,
+  mergeClasses,
+  useArrowNavigationGroup,
+} from '@fluentui/react-components';
+import { isHTMLElement } from '@fluentui/react-utilities';
+import * as React from 'react';
+import { useStyles } from './Toolbar.styles';
+import { HTMLElementWalker } from '../../elementWalker';
+import { StrictCssClass } from '../../strictStyles';
+import { toolbarButtonClassNames } from './ToolbarButton';
+import { toolbarDividerClassNames } from './ToolbarDivider';
+import { toolbarToggleButtonClassNames } from './ToolbarToggleButton';
+import { toolbarMenuButtonClassNames } from './ToolbarMenuButton';
+
+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 enforceSpacingRef = useEnforceItemSpacing();
+
+    return (
+      <div
+        role="toolbar"
+        className={mergeClasses(
+          toolbarClassNames.root,
+          styles.root,
+          className?.toString()
+        )}
+        ref={useMergedRefs(ref, enforceSpacingRef)}
+        {...useArrowNavigationGroup({ axis: 'both', circular: true })}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+
+const useEnforceItemSpacing = () => {
+  const elRef = React.useRef<HTMLDivElement | null>(null);
+
+  React.useLayoutEffect(() => {
+    if (!elRef.current?.ownerDocument.defaultView) {
+      return;
+    }
+
+    if (process.env.NODE_ENV !== 'production') {
+      validateToolbarItems(elRef.current);
+    }
+
+    const treeWalker = new HTMLElementWalker(elRef.current, (el) => {
+      if (isAllowedToolbarItem(el) || el === treeWalker.root) {
+        return NodeFilter.FILTER_ACCEPT;
+      }
+
+      return NodeFilter.FILTER_REJECT;
+    });
+
+    reaclcToolbarSpacing(treeWalker);
+
+    const mutationObserver =
+      new elRef.current.ownerDocument.defaultView.MutationObserver(() => {
+        if (!elRef.current) {
+          return;
+        }
+
+        if (process.env.NODE_ENV !== 'production') {
+          validateToolbarItems(elRef.current);
+        }
+
+        // TODO can optimize by only doing recalc of affected elements
+        reaclcToolbarSpacing(treeWalker);
+      });
+
+    mutationObserver.observe(elRef.current, {
+      childList: true,
+    });
+
+    return () => mutationObserver.disconnect();
+  }, []);
+
+  return elRef;
+};
+
+const reaclcToolbarSpacing = (treeWalker: HTMLElementWalker) => {
+  treeWalker.currentElement = treeWalker.root;
+  let current = treeWalker.firstChild();
+  while (current) {
+    recalcToolbarItemSpacing(current, treeWalker);
+
+    treeWalker.currentElement = current;
+    current = treeWalker.nextElement();
+  }
+};
+
+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'
+      );
+    }
+  }
+};
+
+const recalcToolbarItemSpacing = (
+  el: HTMLElement,
+  treeWalker: HTMLElementWalker
+) => {
+  treeWalker.currentElement = treeWalker.root;
+  if (el === treeWalker.firstChild() || !isAllowedToolbarItem(el)) {
+    return;
+  }
+
+  if (el.classList.contains(toolbarDividerClassNames.root)) {
+    el.style.marginInlineStart = tokens.spacingHorizontalS;
+    return;
+  }
+
+  treeWalker.currentElement = el;
+  const prev = treeWalker.previousElement();
+  if (prev && prev.dataset.appearance !== 'transparent') {
+    el.style.marginInlineStart = tokens.spacingHorizontalS;
+    return;
+  }
+
+  if (prev && el.dataset.appearance !== 'transparent') {
+    prev.style.marginInlineStart = tokens.spacingHorizontalS;
+    return;
+  }
+};

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

@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Button, type ButtonProps } from '../Button';
+import { createStrictClass } from '../../strictStyles/createStrictClass';
+
+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) => {
+    return (
+      <Button
+        ref={ref}
+        {...props}
+        className={rootStrictClassName}
+        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,30 @@
+import * as React from 'react';
+import {
+  useDividerStyles_unstable,
+  useDivider_unstable,
+  renderDivider_unstable,
+  mergeClasses,
+} from '@fluentui/react-components';
+import { useStyles } from './ToolbarDivider.styles';
+
+export const toolbarDividerClassNames = {
+  root: 'tco-ToolbarDivider',
+};
+
+export const ToolbarDivider = React.forwardRef<
+  HTMLDivElement,
+  Record<string, never>
+>((props, ref) => {
+  const styles = useStyles();
+  const state = useDivider_unstable(
+    {
+      ...props,
+      vertical: true,
+      className: mergeClasses(toolbarDividerClassNames.root, styles.root),
+    },
+    ref
+  );
+  useDividerStyles_unstable(state);
+
+  return renderDivider_unstable(state);
+});

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

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { MenuButton, MenuButtonProps } from '../MenuButton';
+import { createStrictClass } from '../../strictStyles/createStrictClass';
+
+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) => {
+  return (
+    <MenuButton
+      ref={ref}
+      {...props}
+      menuIcon={null}
+      className={rootStrictClassName}
+      data-appearance={props.appearance}
+    />
+  );
+});

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

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { ToggleButton, type ToggleButtonProps } from '../ToggleButton';
+import { createStrictClass } from '../../strictStyles/createStrictClass';
+
+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) => {
+  return (
+    <ToggleButton
+      ref={ref}
+      {...props}
+      className={rootStrictClassName}
+      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';