From a51533740fca9120561e2b53adb76e0335728033 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Tue, 11 Feb 2025 14:18:16 +0000
Subject: [PATCH 1/9] feat: Add Button component for teams-components package

Adds strict Button API that:

* restricts appearance
* supports and enforces tooltip for icon buttons
* enforces strics CSS classes
* supports strict icon and toltip slots with lightweight types that are
  compatible with Fluent UI slots
---
 packages/teams-components/jest.config.ts      |  3 +-
 .../src/components/Button/Button.test.tsx     | 34 +++++++++
 .../src/components/Button/Button.tsx          | 69 +++++++++++++++++++
 .../src/components/Button/index.ts            |  1 +
 packages/teams-components/src/index.ts        |  1 +
 packages/teams-components/src/strictSlot.ts   | 26 +++++++
 .../stories/Button/Default.stories.tsx        | 49 +++++++++++++
 .../stories/Button/index.stories.tsx          | 10 +++
 8 files changed, 191 insertions(+), 2 deletions(-)
 create mode 100644 packages/teams-components/src/components/Button/Button.test.tsx
 create mode 100644 packages/teams-components/src/components/Button/Button.tsx
 create mode 100644 packages/teams-components/src/components/Button/index.ts
 create mode 100644 packages/teams-components/src/strictSlot.ts
 create mode 100644 packages/teams-components/stories/Button/Default.stories.tsx
 create mode 100644 packages/teams-components/stories/Button/index.stories.tsx

diff --git a/packages/teams-components/jest.config.ts b/packages/teams-components/jest.config.ts
index c9c5d90c..7ca0bf13 100644
--- a/packages/teams-components/jest.config.ts
+++ b/packages/teams-components/jest.config.ts
@@ -24,7 +24,6 @@ export default {
   transform: {
     '^.+\\.[tj]s$': ['@swc/jest', swcJestConfig],
   },
-  moduleFileExtensions: ['ts', 'js', 'html'],
-  testEnvironment: 'jsdom',
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'html'],
   coverageDirectory: '../../coverage/packages/teams-components',
 };
diff --git a/packages/teams-components/src/components/Button/Button.test.tsx b/packages/teams-components/src/components/Button/Button.test.tsx
new file mode 100644
index 00000000..e23ef562
--- /dev/null
+++ b/packages/teams-components/src/components/Button/Button.test.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { fireEvent, render, screen, act } from '@testing-library/react';
+import { Button } from './Button';
+
+describe('Button', () => {
+  beforeEach(() => {
+    console.error = jest.fn();
+  });
+
+  it('should throw error for icon button if no tooltip is provided', () => {
+    console.error = jest.fn();
+    expect(() => render(<Button icon={<i>X</i>} />)).toThrow(
+      'Icon button must have a tooltip'
+    );
+  });
+
+  it('should render tooltip', () => {
+    jest.useFakeTimers();
+    const { getByRole } = render(
+      <Button icon={<i>X</i>} tooltip={'Tooltip'} />
+    );
+
+    const button = getByRole('button');
+    fireEvent.pointerEnter(button);
+    act(() => {
+      jest.runOnlyPendingTimers();
+    });
+
+    const tooltip = screen.queryByText('Tooltip');
+    expect(tooltip).not.toBeNull();
+
+    expect(tooltip?.textContent).toEqual(button.getAttribute('aria-label'));
+  });
+});
diff --git a/packages/teams-components/src/components/Button/Button.tsx b/packages/teams-components/src/components/Button/Button.tsx
new file mode 100644
index 00000000..1b68cec4
--- /dev/null
+++ b/packages/teams-components/src/components/Button/Button.tsx
@@ -0,0 +1,69 @@
+import * as React from 'react';
+import {
+  useButton_unstable,
+  useButtonStyles_unstable,
+  renderButton_unstable,
+  type ButtonProps as ButtonPropsBase,
+  Tooltip,
+} from '@fluentui/react-components';
+import { type StrictCssClass, validateStrictClasses } from '../../strictStyles';
+import { type StrictSlot } from '../../strictSlot';
+
+export interface ButtonProps
+  extends Pick<
+    ButtonPropsBase,
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-describedby'
+    | 'size'
+    | 'children'
+    | 'disabled'
+    | 'disabledFocusable'
+  > {
+  appearance?: 'transparent' | 'primary';
+  className?: StrictCssClass;
+  icon?: StrictSlot;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  tooltip?: StrictSlot;
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (userProps, ref) => {
+    if (process.env.NODE_ENV !== 'production') {
+      validateProps(userProps);
+    }
+
+    const { className, icon, tooltip, ...restProps } = userProps;
+    const props: ButtonPropsBase = {
+      ...restProps,
+      className: className?.toString(),
+      iconPosition: 'before',
+      icon,
+    };
+
+    let state = useButton_unstable(props, ref);
+    state = useButtonStyles_unstable(state);
+
+    const button = renderButton_unstable(state);
+
+    if (tooltip) {
+      return (
+        <Tooltip content={tooltip} relationship="label">
+          {button}
+        </Tooltip>
+      );
+    }
+
+    return button;
+  }
+);
+
+const validateProps = (props: ButtonProps) => {
+  validateStrictClasses(props.className);
+
+  if (!props.children && props.icon && !props.tooltip) {
+    throw new Error(
+      '@fluentui-contrib/teams-components::Icon button must have a tooltip'
+    );
+  }
+};
diff --git a/packages/teams-components/src/components/Button/index.ts b/packages/teams-components/src/components/Button/index.ts
new file mode 100644
index 00000000..8b166a86
--- /dev/null
+++ b/packages/teams-components/src/components/Button/index.ts
@@ -0,0 +1 @@
+export * from './Button';
diff --git a/packages/teams-components/src/index.ts b/packages/teams-components/src/index.ts
index e753dd8a..2abb1a54 100644
--- a/packages/teams-components/src/index.ts
+++ b/packages/teams-components/src/index.ts
@@ -3,3 +3,4 @@ export {
   mergeStrictClasses,
   type StrictCssClass,
 } from './strictStyles';
+export { Button, type ButtonProps } from './components/Button/Button';
diff --git a/packages/teams-components/src/strictSlot.ts b/packages/teams-components/src/strictSlot.ts
new file mode 100644
index 00000000..6d3c2544
--- /dev/null
+++ b/packages/teams-components/src/strictSlot.ts
@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+export type DataAttributeProps = { [key: `data-${string}`]: string };
+export type SafeAriaAttributeProps = Pick<
+  React.AriaAttributes,
+  'aria-label' | 'aria-labelledby' | 'aria-describedby'
+>;
+
+export type StrictSlotShorthand = JSX.Element | string | undefined | null;
+
+export interface StrictSlotLonghand
+  extends DataAttributeProps,
+    SafeAriaAttributeProps {
+  children?: StrictSlotShorthand;
+}
+
+/**
+ * Simple type that defines the bare minimum support for slots in this package. Core principles
+ * 1. Slot shorthands are always JSX elements
+ * 2. Slot longhands are always objects with children as JSX elements
+ * 3. Slot longhand extensions must be explicit based on a component's requirements
+ * 4. Avoid generalizing default longhand properties early
+ */
+export type StrictSlot<TLonghandExtension extends object = object> =
+  | StrictSlotShorthand
+  | (StrictSlotLonghand & TLonghandExtension);
diff --git a/packages/teams-components/stories/Button/Default.stories.tsx b/packages/teams-components/stories/Button/Default.stories.tsx
new file mode 100644
index 00000000..aeefa865
--- /dev/null
+++ b/packages/teams-components/stories/Button/Default.stories.tsx
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { Button } from '@fluentui-contrib/teams-components';
+import { makeStyles, tokens } from '@fluentui/react-components';
+import {
+  CalendarRegular,
+  CalendarFilled,
+  bundleIcon,
+} from '@fluentui/react-icons';
+
+const CalendarIcon = bundleIcon(CalendarFilled, CalendarRegular);
+
+const useStyles = makeStyles({
+  sampleContainer: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(3, 120px)',
+    gap: tokens.spacingHorizontalL,
+  },
+
+  evil: {
+    background: 'red',
+  },
+});
+
+export const Default = () => {
+  const styles = useStyles();
+  return (
+    <div className={styles.sampleContainer}>
+      <Button>Button</Button>
+      <Button icon={{ children: <CalendarIcon /> }}>Button</Button>
+      <Button icon={<CalendarIcon />} tooltip="Calendar" />
+
+      <Button appearance="transparent">Button</Button>
+      <Button appearance="transparent" icon={<CalendarIcon />}>
+        Button
+      </Button>
+      <Button
+        appearance="transparent"
+        icon={<CalendarIcon />}
+        tooltip="Calendar"
+      />
+
+      <Button appearance="primary">Button</Button>
+      <Button appearance="primary" icon={<CalendarIcon />}>
+        Button
+      </Button>
+      <Button appearance="primary" icon={<CalendarIcon />} tooltip="Calendar" />
+    </div>
+  );
+};
diff --git a/packages/teams-components/stories/Button/index.stories.tsx b/packages/teams-components/stories/Button/index.stories.tsx
new file mode 100644
index 00000000..d7d1aadf
--- /dev/null
+++ b/packages/teams-components/stories/Button/index.stories.tsx
@@ -0,0 +1,10 @@
+import type { Meta } from '@storybook/react';
+import { Button } from '@fluentui-contrib/teams-components';
+export { Default } from './Default.stories';
+
+const meta = {
+  title: 'Packages/teams-components/Button',
+  component: Button,
+} satisfies Meta<typeof Button>;
+
+export default meta;

From 6b8d1948acdbf11c8b03be4c0ad2c5d79d6bc755 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Tue, 11 Feb 2025 15:10:24 +0000
Subject: [PATCH 2/9] add ToggleButton

---
 .../ToggleButton/ToggleButton.test.tsx        |  34 ++++++
 .../components/ToggleButton/ToggleButton.tsx  |  71 ++++++++++++
 .../src/components/ToggleButton/index.ts      |   1 +
 packages/teams-components/src/index.ts        |   4 +
 .../stories/ToggleButton/Default.stories.tsx  | 107 ++++++++++++++++++
 .../stories/ToggleButton/index.stories.tsx    |  10 ++
 6 files changed, 227 insertions(+)
 create mode 100644 packages/teams-components/src/components/ToggleButton/ToggleButton.test.tsx
 create mode 100644 packages/teams-components/src/components/ToggleButton/ToggleButton.tsx
 create mode 100644 packages/teams-components/src/components/ToggleButton/index.ts
 create mode 100644 packages/teams-components/stories/ToggleButton/Default.stories.tsx
 create mode 100644 packages/teams-components/stories/ToggleButton/index.stories.tsx

diff --git a/packages/teams-components/src/components/ToggleButton/ToggleButton.test.tsx b/packages/teams-components/src/components/ToggleButton/ToggleButton.test.tsx
new file mode 100644
index 00000000..78edbf7a
--- /dev/null
+++ b/packages/teams-components/src/components/ToggleButton/ToggleButton.test.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react';
+import { fireEvent, render, screen, act } from '@testing-library/react';
+import { ToggleButton } from './ToggleButton';
+
+describe('ToggleButton', () => {
+  beforeEach(() => {
+    console.error = jest.fn();
+  });
+
+  it('should throw error for icon button if no tooltip is provided', () => {
+    console.error = jest.fn();
+    expect(() => render(<ToggleButton checked icon={<i>X</i>} />)).toThrow(
+      'Icon button must have a tooltip'
+    );
+  });
+
+  it('should render tooltip', () => {
+    jest.useFakeTimers();
+    const { getByRole } = render(
+      <ToggleButton checked icon={<i>X</i>} tooltip={'Tooltip'} />
+    );
+
+    const button = getByRole('button');
+    fireEvent.pointerEnter(button);
+    act(() => {
+      jest.runOnlyPendingTimers();
+    });
+
+    const tooltip = screen.queryByText('Tooltip');
+    expect(tooltip).not.toBeNull();
+
+    expect(tooltip?.textContent).toEqual(button.getAttribute('aria-label'));
+  });
+});
diff --git a/packages/teams-components/src/components/ToggleButton/ToggleButton.tsx b/packages/teams-components/src/components/ToggleButton/ToggleButton.tsx
new file mode 100644
index 00000000..401ba4f8
--- /dev/null
+++ b/packages/teams-components/src/components/ToggleButton/ToggleButton.tsx
@@ -0,0 +1,71 @@
+import * as React from 'react';
+import {
+  type ToggleButtonProps as ToggleButtonPropsBase,
+  useToggleButtonStyles_unstable,
+  useToggleButton_unstable,
+  renderToggleButton_unstable,
+  Tooltip,
+} from '@fluentui/react-components';
+import { validateStrictClasses, type StrictCssClass } from '../../strictStyles';
+import type { StrictSlot } from '../../strictSlot';
+
+export interface ToggleButtonProps
+  extends Pick<
+    ToggleButtonPropsBase,
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-describedby'
+    | 'size'
+    | 'children'
+    | 'disabled'
+    | 'disabledFocusable'
+  > {
+  appearance?: 'transparent' | 'primary';
+  className?: StrictCssClass;
+  icon?: StrictSlot;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  tooltip?: StrictSlot;
+  checked: boolean;
+}
+
+export const ToggleButton = React.forwardRef<
+  HTMLButtonElement,
+  ToggleButtonProps
+>((userProps, ref) => {
+  if (process.env.NODE_ENV !== 'production') {
+    validateProps(userProps);
+  }
+
+  const { className, icon, tooltip, ...restProps } = userProps;
+  const props: ToggleButtonPropsBase = {
+    ...restProps,
+    className: className?.toString(),
+    iconPosition: 'before',
+    icon,
+  };
+
+  let state = useToggleButton_unstable(props, ref);
+  state = useToggleButtonStyles_unstable(state);
+
+  const button = renderToggleButton_unstable(state);
+
+  if (tooltip) {
+    return (
+      <Tooltip content={tooltip} relationship="label">
+        {button}
+      </Tooltip>
+    );
+  }
+
+  return button;
+});
+
+const validateProps = (props: ToggleButtonProps) => {
+  validateStrictClasses(props.className);
+
+  if (!props.children && props.icon && !props.tooltip) {
+    throw new Error(
+      '@fluentui-contrib/teams-components::Icon button must have a tooltip'
+    );
+  }
+};
diff --git a/packages/teams-components/src/components/ToggleButton/index.ts b/packages/teams-components/src/components/ToggleButton/index.ts
new file mode 100644
index 00000000..650fcfda
--- /dev/null
+++ b/packages/teams-components/src/components/ToggleButton/index.ts
@@ -0,0 +1 @@
+export * from './ToggleButton';
diff --git a/packages/teams-components/src/index.ts b/packages/teams-components/src/index.ts
index 2abb1a54..896dcbf8 100644
--- a/packages/teams-components/src/index.ts
+++ b/packages/teams-components/src/index.ts
@@ -1,3 +1,7 @@
+export {
+  ToggleButton,
+  type ToggleButtonProps,
+} from './components/ToggleButton';
 export {
   makeStrictStyles,
   mergeStrictClasses,
diff --git a/packages/teams-components/stories/ToggleButton/Default.stories.tsx b/packages/teams-components/stories/ToggleButton/Default.stories.tsx
new file mode 100644
index 00000000..a0ad7eea
--- /dev/null
+++ b/packages/teams-components/stories/ToggleButton/Default.stories.tsx
@@ -0,0 +1,107 @@
+import * as React from 'react';
+import { ToggleButton } from '@fluentui-contrib/teams-components';
+import { makeStyles, tokens } from '@fluentui/react-components';
+import {
+  CalendarRegular,
+  CalendarFilled,
+  bundleIcon,
+} from '@fluentui/react-icons';
+
+const CalendarIcon = bundleIcon(CalendarFilled, CalendarRegular);
+
+const useStyles = makeStyles({
+  sampleContainer: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(3, 120px)',
+    gap: tokens.spacingHorizontalL,
+  },
+
+  evil: {
+    background: 'red',
+  },
+});
+
+export const Default = () => {
+  const styles = useStyles();
+  const [checked, setChecked] = React.useState<number[]>([]);
+
+  const createOnClick = (value: number) => () => {
+    setChecked((prevChecked) => {
+      if (prevChecked.find((i) => i === value)) {
+        return prevChecked.filter((i) => i !== value);
+      } else {
+        return [...prevChecked, value];
+      }
+    });
+  };
+
+  const isChecked = (value: number) =>
+    checked.find((i) => i === value) !== undefined;
+
+  return (
+    <div className={styles.sampleContainer}>
+      <ToggleButton onClick={createOnClick(1)} checked={isChecked(1)}>
+        Toggle
+      </ToggleButton>
+      <ToggleButton
+        onClick={createOnClick(2)}
+        checked={isChecked(2)}
+        icon={{ children: <CalendarIcon /> }}
+      >
+        Toggle
+      </ToggleButton>
+      <ToggleButton
+        onClick={createOnClick(3)}
+        checked={isChecked(3)}
+        icon={<CalendarIcon />}
+        tooltip="Calendar"
+      />
+
+      <ToggleButton
+        onClick={createOnClick(4)}
+        checked={isChecked(4)}
+        appearance="transparent"
+      >
+        Toggle
+      </ToggleButton>
+      <ToggleButton
+        onClick={createOnClick(5)}
+        checked={isChecked(5)}
+        appearance="transparent"
+        icon={<CalendarIcon />}
+      >
+        Toggle
+      </ToggleButton>
+      <ToggleButton
+        onClick={createOnClick(6)}
+        checked={isChecked(6)}
+        appearance="transparent"
+        icon={<CalendarIcon />}
+        tooltip="Calendar"
+      />
+
+      <ToggleButton
+        checked={isChecked(7)}
+        onClick={createOnClick(7)}
+        appearance="primary"
+      >
+        Toggle
+      </ToggleButton>
+      <ToggleButton
+        checked={isChecked(8)}
+        onClick={createOnClick(8)}
+        appearance="primary"
+        icon={<CalendarIcon />}
+      >
+        Toggle
+      </ToggleButton>
+      <ToggleButton
+        checked={isChecked(9)}
+        onClick={createOnClick(9)}
+        appearance="primary"
+        icon={<CalendarIcon />}
+        tooltip="Calendar"
+      />
+    </div>
+  );
+};
diff --git a/packages/teams-components/stories/ToggleButton/index.stories.tsx b/packages/teams-components/stories/ToggleButton/index.stories.tsx
new file mode 100644
index 00000000..785ee9c5
--- /dev/null
+++ b/packages/teams-components/stories/ToggleButton/index.stories.tsx
@@ -0,0 +1,10 @@
+import type { Meta } from '@storybook/react';
+import { ToggleButton } from '@fluentui-contrib/teams-components';
+export { Default } from './Default.stories';
+
+const meta = {
+  title: 'Packages/teams-components/ToggleButton',
+  component: ToggleButton,
+} satisfies Meta<typeof ToggleButton>;
+
+export default meta;

From 4b29987530ff85a09444569e170134ecb7553bc9 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Tue, 11 Feb 2025 16:00:19 +0000
Subject: [PATCH 3/9] allow aria label with no tooltip

---
 .../src/components/Button/Button.test.tsx                | 9 ++++++++-
 .../teams-components/src/components/Button/Button.tsx    | 9 +++++++--
 .../src/components/ToggleButton/ToggleButton.test.tsx    | 9 ++++++++-
 .../src/components/ToggleButton/ToggleButton.tsx         | 9 +++++++--
 4 files changed, 30 insertions(+), 6 deletions(-)

diff --git a/packages/teams-components/src/components/Button/Button.test.tsx b/packages/teams-components/src/components/Button/Button.test.tsx
index e23ef562..61045d6a 100644
--- a/packages/teams-components/src/components/Button/Button.test.tsx
+++ b/packages/teams-components/src/components/Button/Button.test.tsx
@@ -7,13 +7,20 @@ describe('Button', () => {
     console.error = jest.fn();
   });
 
-  it('should throw error for icon button if no tooltip is provided', () => {
+  it('should throw error for icon button if no tooltip or aria-label is provided', () => {
     console.error = jest.fn();
     expect(() => render(<Button icon={<i>X</i>} />)).toThrow(
       'Icon button must have a tooltip'
     );
   });
 
+  it('should not throw error for icon button if aria-label is provided', () => {
+    console.error = jest.fn();
+    expect(() =>
+      render(<Button aria-label="label" icon={<i>X</i>} />)
+    ).not.toThrow();
+  });
+
   it('should render tooltip', () => {
     jest.useFakeTimers();
     const { getByRole } = render(
diff --git a/packages/teams-components/src/components/Button/Button.tsx b/packages/teams-components/src/components/Button/Button.tsx
index 1b68cec4..293ecb17 100644
--- a/packages/teams-components/src/components/Button/Button.tsx
+++ b/packages/teams-components/src/components/Button/Button.tsx
@@ -61,9 +61,14 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 const validateProps = (props: ButtonProps) => {
   validateStrictClasses(props.className);
 
-  if (!props.children && props.icon && !props.tooltip) {
+  if (
+    !props.children &&
+    props.icon &&
+    !props.tooltip &&
+    !(props['aria-label'] || props['aria-labelledby'])
+  ) {
     throw new Error(
-      '@fluentui-contrib/teams-components::Icon button must have a tooltip'
+      '@fluentui-contrib/teams-components::Icon button must have a tooltip or aria label'
     );
   }
 };
diff --git a/packages/teams-components/src/components/ToggleButton/ToggleButton.test.tsx b/packages/teams-components/src/components/ToggleButton/ToggleButton.test.tsx
index 78edbf7a..e356385f 100644
--- a/packages/teams-components/src/components/ToggleButton/ToggleButton.test.tsx
+++ b/packages/teams-components/src/components/ToggleButton/ToggleButton.test.tsx
@@ -7,13 +7,20 @@ describe('ToggleButton', () => {
     console.error = jest.fn();
   });
 
-  it('should throw error for icon button if no tooltip is provided', () => {
+  it('should throw error for icon button if no tooltip or aria-label is provided', () => {
     console.error = jest.fn();
     expect(() => render(<ToggleButton checked icon={<i>X</i>} />)).toThrow(
       'Icon button must have a tooltip'
     );
   });
 
+  it('should not throw error for icon button if aria-label is provided', () => {
+    console.error = jest.fn();
+    expect(() =>
+      render(<ToggleButton checked aria-label="label" icon={<i>X</i>} />)
+    ).not.toThrow();
+  });
+
   it('should render tooltip', () => {
     jest.useFakeTimers();
     const { getByRole } = render(
diff --git a/packages/teams-components/src/components/ToggleButton/ToggleButton.tsx b/packages/teams-components/src/components/ToggleButton/ToggleButton.tsx
index 401ba4f8..c6b87d4d 100644
--- a/packages/teams-components/src/components/ToggleButton/ToggleButton.tsx
+++ b/packages/teams-components/src/components/ToggleButton/ToggleButton.tsx
@@ -63,9 +63,14 @@ export const ToggleButton = React.forwardRef<
 const validateProps = (props: ToggleButtonProps) => {
   validateStrictClasses(props.className);
 
-  if (!props.children && props.icon && !props.tooltip) {
+  if (
+    !props.children &&
+    props.icon &&
+    !props.tooltip &&
+    !(props['aria-label'] || props['aria-labelledby'])
+  ) {
     throw new Error(
-      '@fluentui-contrib/teams-components::Icon button must have a tooltip'
+      '@fluentui-contrib/teams-components::Icon button must have a tooltip or aria label'
     );
   }
 };

From 698ce7467e50886652fe41282f2d5b3d110cfaa2 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Tue, 11 Feb 2025 16:26:07 +0000
Subject: [PATCH 4/9] share validateion

---
 .../src/components/Button/Button.tsx          | 13 ++----------
 .../src/components/Button/index.ts            |  1 +
 .../components/Button/validateIconButton.ts   | 21 +++++++++++++++++++
 .../components/ToggleButton/ToggleButton.tsx  | 13 ++----------
 4 files changed, 26 insertions(+), 22 deletions(-)
 create mode 100644 packages/teams-components/src/components/Button/validateIconButton.ts

diff --git a/packages/teams-components/src/components/Button/Button.tsx b/packages/teams-components/src/components/Button/Button.tsx
index 293ecb17..dacddb85 100644
--- a/packages/teams-components/src/components/Button/Button.tsx
+++ b/packages/teams-components/src/components/Button/Button.tsx
@@ -6,6 +6,7 @@ import {
   type ButtonProps as ButtonPropsBase,
   Tooltip,
 } from '@fluentui/react-components';
+import { validateIconButton } from './validateIconButton';
 import { type StrictCssClass, validateStrictClasses } from '../../strictStyles';
 import { type StrictSlot } from '../../strictSlot';
 
@@ -60,15 +61,5 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 
 const validateProps = (props: ButtonProps) => {
   validateStrictClasses(props.className);
-
-  if (
-    !props.children &&
-    props.icon &&
-    !props.tooltip &&
-    !(props['aria-label'] || props['aria-labelledby'])
-  ) {
-    throw new Error(
-      '@fluentui-contrib/teams-components::Icon button must have a tooltip or aria label'
-    );
-  }
+  validateIconButton(props);
 };
diff --git a/packages/teams-components/src/components/Button/index.ts b/packages/teams-components/src/components/Button/index.ts
index 8b166a86..e264ebf9 100644
--- a/packages/teams-components/src/components/Button/index.ts
+++ b/packages/teams-components/src/components/Button/index.ts
@@ -1 +1,2 @@
 export * from './Button';
+export * from './validateIconButton';
diff --git a/packages/teams-components/src/components/Button/validateIconButton.ts b/packages/teams-components/src/components/Button/validateIconButton.ts
new file mode 100644
index 00000000..79fb0ec8
--- /dev/null
+++ b/packages/teams-components/src/components/Button/validateIconButton.ts
@@ -0,0 +1,21 @@
+/**
+ * @throws Error if icon button is missing required props
+ */
+export const validateIconButton = (props: {
+  icon?: unknown;
+  children?: unknown;
+  tooltip?: unknown;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+}) => {
+  if (
+    !props.children &&
+    props.icon &&
+    !props.tooltip &&
+    !(props['aria-label'] || props['aria-labelledby'])
+  ) {
+    throw new Error(
+      '@fluentui-contrib/teams-components::Icon button must have a tooltip or aria label'
+    );
+  }
+};
diff --git a/packages/teams-components/src/components/ToggleButton/ToggleButton.tsx b/packages/teams-components/src/components/ToggleButton/ToggleButton.tsx
index c6b87d4d..e775cc6c 100644
--- a/packages/teams-components/src/components/ToggleButton/ToggleButton.tsx
+++ b/packages/teams-components/src/components/ToggleButton/ToggleButton.tsx
@@ -8,6 +8,7 @@ import {
 } from '@fluentui/react-components';
 import { validateStrictClasses, type StrictCssClass } from '../../strictStyles';
 import type { StrictSlot } from '../../strictSlot';
+import { validateIconButton } from '../Button/validateIconButton';
 
 export interface ToggleButtonProps
   extends Pick<
@@ -62,15 +63,5 @@ export const ToggleButton = React.forwardRef<
 
 const validateProps = (props: ToggleButtonProps) => {
   validateStrictClasses(props.className);
-
-  if (
-    !props.children &&
-    props.icon &&
-    !props.tooltip &&
-    !(props['aria-label'] || props['aria-labelledby'])
-  ) {
-    throw new Error(
-      '@fluentui-contrib/teams-components::Icon button must have a tooltip or aria label'
-    );
-  }
+  validateIconButton(props);
 };

From 5b641acbbe268a63df042348f5f3e04bc7a184a8 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Tue, 11 Feb 2025 17:42:50 +0000
Subject: [PATCH 5/9] add menu button and menu validatoin

---
 .../src/components/Button/Button.test.tsx     | 15 +++-
 .../src/components/Button/Button.tsx          |  3 +-
 .../src/components/Button/index.ts            |  2 +-
 ...validateIconButton.ts => validateProps.ts} | 12 +++
 .../MenuButton/MenuButton.styles.ts           | 22 +++++
 .../components/MenuButton/MenuButton.test.tsx |  9 ++
 .../src/components/MenuButton/MenuButton.tsx  | 64 ++++++++++++++
 .../src/components/MenuButton/index.ts        |  1 +
 .../ToggleButton/ToggleButton.test.tsx        | 14 +++
 .../components/ToggleButton/ToggleButton.tsx  |  3 +-
 packages/teams-components/src/index.ts        |  1 +
 .../stories/MenuButton/Default.stories.tsx    | 86 +++++++++++++++++++
 .../stories/MenuButton/index.stories.tsx      | 10 +++
 13 files changed, 238 insertions(+), 4 deletions(-)
 rename packages/teams-components/src/components/Button/{validateIconButton.ts => validateProps.ts} (57%)
 create mode 100644 packages/teams-components/src/components/MenuButton/MenuButton.styles.ts
 create mode 100644 packages/teams-components/src/components/MenuButton/MenuButton.test.tsx
 create mode 100644 packages/teams-components/src/components/MenuButton/MenuButton.tsx
 create mode 100644 packages/teams-components/src/components/MenuButton/index.ts
 create mode 100644 packages/teams-components/stories/MenuButton/Default.stories.tsx
 create mode 100644 packages/teams-components/stories/MenuButton/index.stories.tsx

diff --git a/packages/teams-components/src/components/Button/Button.test.tsx b/packages/teams-components/src/components/Button/Button.test.tsx
index 61045d6a..3311bbfb 100644
--- a/packages/teams-components/src/components/Button/Button.test.tsx
+++ b/packages/teams-components/src/components/Button/Button.test.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { fireEvent, render, screen, act } from '@testing-library/react';
+import { Menu, MenuPopover, MenuTrigger } from '@fluentui/react-components';
 import { Button } from './Button';
 
 describe('Button', () => {
@@ -8,7 +9,6 @@ describe('Button', () => {
   });
 
   it('should throw error for icon button if no tooltip or aria-label is provided', () => {
-    console.error = jest.fn();
     expect(() => render(<Button icon={<i>X</i>} />)).toThrow(
       'Icon button must have a tooltip'
     );
@@ -38,4 +38,17 @@ describe('Button', () => {
 
     expect(tooltip?.textContent).toEqual(button.getAttribute('aria-label'));
   });
+
+  it('should error when attempting to wrap with a menu', () => {
+    expect(() =>
+      render(
+        <Menu>
+          <MenuTrigger>
+            <Button icon={<i>X</i>} />
+          </MenuTrigger>
+          <MenuPopover></MenuPopover>
+        </Menu>
+      )
+    ).toThrow('Icon button must have a tooltip');
+  });
 });
diff --git a/packages/teams-components/src/components/Button/Button.tsx b/packages/teams-components/src/components/Button/Button.tsx
index dacddb85..007bfbf9 100644
--- a/packages/teams-components/src/components/Button/Button.tsx
+++ b/packages/teams-components/src/components/Button/Button.tsx
@@ -6,7 +6,7 @@ import {
   type ButtonProps as ButtonPropsBase,
   Tooltip,
 } from '@fluentui/react-components';
-import { validateIconButton } from './validateIconButton';
+import { validateIconButton, validateMenuButton } from './validateProps';
 import { type StrictCssClass, validateStrictClasses } from '../../strictStyles';
 import { type StrictSlot } from '../../strictSlot';
 
@@ -62,4 +62,5 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 const validateProps = (props: ButtonProps) => {
   validateStrictClasses(props.className);
   validateIconButton(props);
+  validateMenuButton(props);
 };
diff --git a/packages/teams-components/src/components/Button/index.ts b/packages/teams-components/src/components/Button/index.ts
index e264ebf9..164d0fad 100644
--- a/packages/teams-components/src/components/Button/index.ts
+++ b/packages/teams-components/src/components/Button/index.ts
@@ -1,2 +1,2 @@
 export * from './Button';
-export * from './validateIconButton';
+export * from './validateProps';
diff --git a/packages/teams-components/src/components/Button/validateIconButton.ts b/packages/teams-components/src/components/Button/validateProps.ts
similarity index 57%
rename from packages/teams-components/src/components/Button/validateIconButton.ts
rename to packages/teams-components/src/components/Button/validateProps.ts
index 79fb0ec8..28c4d126 100644
--- a/packages/teams-components/src/components/Button/validateIconButton.ts
+++ b/packages/teams-components/src/components/Button/validateProps.ts
@@ -19,3 +19,15 @@ export const validateIconButton = (props: {
     );
   }
 };
+
+/**
+ * Infers a Menu being used by detecting `aria-haspopup` of the MenuTrigger
+ * @throws Error if a menu is used
+ */
+export const validateMenuButton = (props: unknown) => {
+  if (typeof props === 'object' && props && 'aria-haspopup' in props) {
+    throw new Error(
+      '@fluentui-contrib/teams-components:: MenuButton should be used to open a Menu'
+    );
+  }
+};
diff --git a/packages/teams-components/src/components/MenuButton/MenuButton.styles.ts b/packages/teams-components/src/components/MenuButton/MenuButton.styles.ts
new file mode 100644
index 00000000..b54388da
--- /dev/null
+++ b/packages/teams-components/src/components/MenuButton/MenuButton.styles.ts
@@ -0,0 +1,22 @@
+import { makeStyles, shorthands, tokens } from '@fluentui/react-components';
+
+export const useStyles = makeStyles({
+  root: {
+    ...shorthands.padding(tokens.spacingHorizontalM),
+    ...shorthands.border(
+      tokens.strokeWidthThin,
+      'solid',
+      tokens.colorNeutralStroke1
+    ),
+    color: tokens.colorNeutralForeground1,
+    backgroundColor: tokens.colorNeutralBackground1,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    maxWidth: '200px',
+    ':hover': {
+      backgroundColor: tokens.colorNeutralBackground1Hover,
+      color: tokens.colorNeutralForeground1Hover,
+    },
+  },
+});
diff --git a/packages/teams-components/src/components/MenuButton/MenuButton.test.tsx b/packages/teams-components/src/components/MenuButton/MenuButton.test.tsx
new file mode 100644
index 00000000..5c10eff8
--- /dev/null
+++ b/packages/teams-components/src/components/MenuButton/MenuButton.test.tsx
@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { render } from '@testing-library/react';
+import { MenuButton } from './MenuButton';
+
+describe('MenuButton', () => {
+  it('should render', () => {
+    render(<MenuButton />);
+  });
+});
diff --git a/packages/teams-components/src/components/MenuButton/MenuButton.tsx b/packages/teams-components/src/components/MenuButton/MenuButton.tsx
new file mode 100644
index 00000000..dce82e19
--- /dev/null
+++ b/packages/teams-components/src/components/MenuButton/MenuButton.tsx
@@ -0,0 +1,64 @@
+import * as React from 'react';
+import {
+  useMenuButton_unstable,
+  useMenuButtonStyles_unstable,
+  renderMenuButton_unstable,
+  type MenuButtonProps as MenuButtonPropsBase,
+  Tooltip,
+} from '@fluentui/react-components';
+import { validateIconButton } from '../Button';
+import { type StrictCssClass, validateStrictClasses } from '../../strictStyles';
+import { type StrictSlot } from '../../strictSlot';
+
+export interface MenuButtonProps
+  extends Pick<
+    MenuButtonPropsBase,
+    | 'aria-label'
+    | 'aria-labelledby'
+    | 'aria-describedby'
+    | 'size'
+    | 'children'
+    | 'disabled'
+    | 'disabledFocusable'
+  > {
+  appearance?: 'transparent' | 'primary';
+  className?: StrictCssClass;
+  icon?: StrictSlot;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  tooltip?: StrictSlot;
+}
+
+export const MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(
+  (userProps, ref) => {
+    if (process.env.NODE_ENV !== 'production') {
+      validateProps(userProps);
+    }
+
+    const { className, icon, tooltip, ...restProps } = userProps;
+    const props: MenuButtonPropsBase = {
+      ...restProps,
+      className: className?.toString(),
+      icon,
+    };
+
+    let state = useMenuButton_unstable(props, ref);
+    state = useMenuButtonStyles_unstable(state);
+
+    const button = renderMenuButton_unstable(state);
+
+    if (tooltip) {
+      return (
+        <Tooltip content={tooltip} relationship="label">
+          {button}
+        </Tooltip>
+      );
+    }
+
+    return button;
+  }
+);
+
+const validateProps = (props: MenuButtonProps) => {
+  validateStrictClasses(props.className);
+  validateIconButton(props);
+};
diff --git a/packages/teams-components/src/components/MenuButton/index.ts b/packages/teams-components/src/components/MenuButton/index.ts
new file mode 100644
index 00000000..727d0f9a
--- /dev/null
+++ b/packages/teams-components/src/components/MenuButton/index.ts
@@ -0,0 +1 @@
+export * from './MenuButton';
diff --git a/packages/teams-components/src/components/ToggleButton/ToggleButton.test.tsx b/packages/teams-components/src/components/ToggleButton/ToggleButton.test.tsx
index e356385f..729f7453 100644
--- a/packages/teams-components/src/components/ToggleButton/ToggleButton.test.tsx
+++ b/packages/teams-components/src/components/ToggleButton/ToggleButton.test.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { fireEvent, render, screen, act } from '@testing-library/react';
+import { Menu, MenuPopover, MenuTrigger } from '@fluentui/react-components';
 import { ToggleButton } from './ToggleButton';
 
 describe('ToggleButton', () => {
@@ -38,4 +39,17 @@ describe('ToggleButton', () => {
 
     expect(tooltip?.textContent).toEqual(button.getAttribute('aria-label'));
   });
+
+  it('should error when attempting to wrap with a menu', () => {
+    expect(() =>
+      render(
+        <Menu>
+          <MenuTrigger>
+            <ToggleButton checked={false} icon={<i>X</i>} />
+          </MenuTrigger>
+          <MenuPopover></MenuPopover>
+        </Menu>
+      )
+    ).toThrow('Icon button must have a tooltip');
+  });
 });
diff --git a/packages/teams-components/src/components/ToggleButton/ToggleButton.tsx b/packages/teams-components/src/components/ToggleButton/ToggleButton.tsx
index e775cc6c..00c75e46 100644
--- a/packages/teams-components/src/components/ToggleButton/ToggleButton.tsx
+++ b/packages/teams-components/src/components/ToggleButton/ToggleButton.tsx
@@ -8,7 +8,7 @@ import {
 } from '@fluentui/react-components';
 import { validateStrictClasses, type StrictCssClass } from '../../strictStyles';
 import type { StrictSlot } from '../../strictSlot';
-import { validateIconButton } from '../Button/validateIconButton';
+import { validateIconButton, validateMenuButton } from '../Button';
 
 export interface ToggleButtonProps
   extends Pick<
@@ -64,4 +64,5 @@ export const ToggleButton = React.forwardRef<
 const validateProps = (props: ToggleButtonProps) => {
   validateStrictClasses(props.className);
   validateIconButton(props);
+  validateMenuButton(props);
 };
diff --git a/packages/teams-components/src/index.ts b/packages/teams-components/src/index.ts
index 896dcbf8..67ab50d4 100644
--- a/packages/teams-components/src/index.ts
+++ b/packages/teams-components/src/index.ts
@@ -1,3 +1,4 @@
+export { MenuButton, type MenuButtonProps } from './components/MenuButton';
 export {
   ToggleButton,
   type ToggleButtonProps,
diff --git a/packages/teams-components/stories/MenuButton/Default.stories.tsx b/packages/teams-components/stories/MenuButton/Default.stories.tsx
new file mode 100644
index 00000000..e311a7c2
--- /dev/null
+++ b/packages/teams-components/stories/MenuButton/Default.stories.tsx
@@ -0,0 +1,86 @@
+import * as React from 'react';
+import { MenuButton } from '@fluentui-contrib/teams-components';
+import {
+  CalendarRegular,
+  CalendarFilled,
+  bundleIcon,
+} from '@fluentui/react-icons';
+import {
+  makeStyles,
+  tokens,
+  Menu,
+  MenuTrigger,
+  MenuList,
+  MenuItem,
+  MenuPopover,
+} from '@fluentui/react-components';
+
+const CalendarIcon = bundleIcon(CalendarFilled, CalendarRegular);
+
+const useStyles = makeStyles({
+  sampleContainer: {
+    display: 'grid',
+    gridTemplateColumns: 'repeat(3, 120px)',
+    gap: tokens.spacingHorizontalL,
+  },
+
+  evil: {
+    background: 'red',
+  },
+});
+
+export const Default = () => {
+  const styles = useStyles();
+  return (
+    <div className={styles.sampleContainer}>
+      {withMenu(<MenuButton>Menu</MenuButton>)}
+      {withMenu(
+        <MenuButton icon={{ children: <CalendarIcon /> }}>Menu</MenuButton>
+      )}
+      {withMenu(<MenuButton icon={<CalendarIcon />} tooltip="Calendar" />)}
+
+      {withMenu(<MenuButton appearance="transparent">Menu</MenuButton>)}
+      {withMenu(
+        <MenuButton appearance="transparent" icon={<CalendarIcon />}>
+          Menu
+        </MenuButton>
+      )}
+      {withMenu(
+        <MenuButton
+          appearance="transparent"
+          icon={<CalendarIcon />}
+          tooltip="Calendar"
+        />
+      )}
+
+      {withMenu(<MenuButton appearance="primary">Menu</MenuButton>)}
+      {withMenu(
+        <MenuButton appearance="primary" icon={<CalendarIcon />}>
+          Menu
+        </MenuButton>
+      )}
+      {withMenu(
+        <MenuButton
+          appearance="primary"
+          icon={<CalendarIcon />}
+          tooltip="Calendar"
+        />
+      )}
+    </div>
+  );
+};
+
+const withMenu = (component: JSX.Element) => (
+  <Menu positioning={{ autoSize: true }}>
+    <MenuTrigger disableButtonEnhancement>{component}</MenuTrigger>
+
+    <MenuPopover>
+      <MenuList>
+        <MenuItem>New </MenuItem>
+        <MenuItem>New Window</MenuItem>
+        <MenuItem disabled>Open File</MenuItem>
+        <MenuItem>Open Folder</MenuItem>
+      </MenuList>
+    </MenuPopover>
+  </Menu>
+);
diff --git a/packages/teams-components/stories/MenuButton/index.stories.tsx b/packages/teams-components/stories/MenuButton/index.stories.tsx
new file mode 100644
index 00000000..417a8bea
--- /dev/null
+++ b/packages/teams-components/stories/MenuButton/index.stories.tsx
@@ -0,0 +1,10 @@
+import type { Meta } from '@storybook/react';
+import { MenuButton } from '@fluentui-contrib/teams-components';
+export { Default } from './Default.stories';
+
+const meta = {
+  title: 'Packages/teams-components/MenuButton',
+  component: MenuButton,
+} satisfies Meta<typeof MenuButton>;
+
+export default meta;

From 3b944f2972d979c044d5e6b77a81f2f80398b0dd Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Tue, 11 Feb 2025 17:53:55 +0000
Subject: [PATCH 6/9] reuise props and rename tooltip to title

---
 .../src/components/Button/Button.test.tsx     | 18 +++++-----
 .../src/components/Button/Button.tsx          |  8 ++---
 .../src/components/Button/validateProps.ts    |  6 ++--
 .../src/components/MenuButton/MenuButton.tsx  | 33 ++++---------------
 .../ToggleButton/ToggleButton.test.tsx        | 16 ++++-----
 .../components/ToggleButton/ToggleButton.tsx  | 28 ++++------------
 6 files changed, 36 insertions(+), 73 deletions(-)

diff --git a/packages/teams-components/src/components/Button/Button.test.tsx b/packages/teams-components/src/components/Button/Button.test.tsx
index 3311bbfb..7e2082d3 100644
--- a/packages/teams-components/src/components/Button/Button.test.tsx
+++ b/packages/teams-components/src/components/Button/Button.test.tsx
@@ -8,9 +8,9 @@ describe('Button', () => {
     console.error = jest.fn();
   });
 
-  it('should throw error for icon button if no tooltip or aria-label is provided', () => {
+  it('should throw error for icon button if no title or aria-label is provided', () => {
     expect(() => render(<Button icon={<i>X</i>} />)).toThrow(
-      'Icon button must have a tooltip'
+      'Icon button must have a title'
     );
   });
 
@@ -21,11 +21,9 @@ describe('Button', () => {
     ).not.toThrow();
   });
 
-  it('should render tooltip', () => {
+  it('should render title', () => {
     jest.useFakeTimers();
-    const { getByRole } = render(
-      <Button icon={<i>X</i>} tooltip={'Tooltip'} />
-    );
+    const { getByRole } = render(<Button icon={<i>X</i>} title={'Tooltip'} />);
 
     const button = getByRole('button');
     fireEvent.pointerEnter(button);
@@ -33,10 +31,10 @@ describe('Button', () => {
       jest.runOnlyPendingTimers();
     });
 
-    const tooltip = screen.queryByText('Tooltip');
-    expect(tooltip).not.toBeNull();
+    const title = screen.queryByText('Tooltip');
+    expect(title).not.toBeNull();
 
-    expect(tooltip?.textContent).toEqual(button.getAttribute('aria-label'));
+    expect(title?.textContent).toEqual(button.getAttribute('aria-label'));
   });
 
   it('should error when attempting to wrap with a menu', () => {
@@ -49,6 +47,6 @@ describe('Button', () => {
           <MenuPopover></MenuPopover>
         </Menu>
       )
-    ).toThrow('Icon button must have a tooltip');
+    ).toThrow('Icon button must have a title');
   });
 });
diff --git a/packages/teams-components/src/components/Button/Button.tsx b/packages/teams-components/src/components/Button/Button.tsx
index 007bfbf9..bbd39cd0 100644
--- a/packages/teams-components/src/components/Button/Button.tsx
+++ b/packages/teams-components/src/components/Button/Button.tsx
@@ -25,7 +25,7 @@ export interface ButtonProps
   className?: StrictCssClass;
   icon?: StrictSlot;
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
-  tooltip?: StrictSlot;
+  title?: StrictSlot;
 }
 
 export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
@@ -34,7 +34,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
       validateProps(userProps);
     }
 
-    const { className, icon, tooltip, ...restProps } = userProps;
+    const { className, icon, title, ...restProps } = userProps;
     const props: ButtonPropsBase = {
       ...restProps,
       className: className?.toString(),
@@ -47,9 +47,9 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 
     const button = renderButton_unstable(state);
 
-    if (tooltip) {
+    if (title) {
       return (
-        <Tooltip content={tooltip} relationship="label">
+        <Tooltip content={title} relationship="label">
           {button}
         </Tooltip>
       );
diff --git a/packages/teams-components/src/components/Button/validateProps.ts b/packages/teams-components/src/components/Button/validateProps.ts
index 28c4d126..fb2c1790 100644
--- a/packages/teams-components/src/components/Button/validateProps.ts
+++ b/packages/teams-components/src/components/Button/validateProps.ts
@@ -4,18 +4,18 @@
 export const validateIconButton = (props: {
   icon?: unknown;
   children?: unknown;
-  tooltip?: unknown;
+  title?: unknown;
   'aria-label'?: string;
   'aria-labelledby'?: string;
 }) => {
   if (
     !props.children &&
     props.icon &&
-    !props.tooltip &&
+    !props.title &&
     !(props['aria-label'] || props['aria-labelledby'])
   ) {
     throw new Error(
-      '@fluentui-contrib/teams-components::Icon button must have a tooltip or aria label'
+      '@fluentui-contrib/teams-components::Icon button must have a title or aria label'
     );
   }
 };
diff --git a/packages/teams-components/src/components/MenuButton/MenuButton.tsx b/packages/teams-components/src/components/MenuButton/MenuButton.tsx
index dce82e19..d2909570 100644
--- a/packages/teams-components/src/components/MenuButton/MenuButton.tsx
+++ b/packages/teams-components/src/components/MenuButton/MenuButton.tsx
@@ -6,35 +6,16 @@ import {
   type MenuButtonProps as MenuButtonPropsBase,
   Tooltip,
 } from '@fluentui/react-components';
-import { validateIconButton } from '../Button';
-import { type StrictCssClass, validateStrictClasses } from '../../strictStyles';
-import { type StrictSlot } from '../../strictSlot';
+import { ButtonProps, validateIconButton } from '../Button';
+import { validateStrictClasses } from '../../strictStyles';
 
-export interface MenuButtonProps
-  extends Pick<
-    MenuButtonPropsBase,
-    | 'aria-label'
-    | 'aria-labelledby'
-    | 'aria-describedby'
-    | 'size'
-    | 'children'
-    | 'disabled'
-    | 'disabledFocusable'
-  > {
-  appearance?: 'transparent' | 'primary';
-  className?: StrictCssClass;
-  icon?: StrictSlot;
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
-  tooltip?: StrictSlot;
-}
-
-export const MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(
+export const MenuButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
   (userProps, ref) => {
     if (process.env.NODE_ENV !== 'production') {
       validateProps(userProps);
     }
 
-    const { className, icon, tooltip, ...restProps } = userProps;
+    const { className, icon, title, ...restProps } = userProps;
     const props: MenuButtonPropsBase = {
       ...restProps,
       className: className?.toString(),
@@ -46,9 +27,9 @@ export const MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(
 
     const button = renderMenuButton_unstable(state);
 
-    if (tooltip) {
+    if (title) {
       return (
-        <Tooltip content={tooltip} relationship="label">
+        <Tooltip content={title} relationship="label">
           {button}
         </Tooltip>
       );
@@ -58,7 +39,7 @@ export const MenuButton = React.forwardRef<HTMLButtonElement, MenuButtonProps>(
   }
 );
 
-const validateProps = (props: MenuButtonProps) => {
+const validateProps = (props: ButtonProps) => {
   validateStrictClasses(props.className);
   validateIconButton(props);
 };
diff --git a/packages/teams-components/src/components/ToggleButton/ToggleButton.test.tsx b/packages/teams-components/src/components/ToggleButton/ToggleButton.test.tsx
index 729f7453..1dc33549 100644
--- a/packages/teams-components/src/components/ToggleButton/ToggleButton.test.tsx
+++ b/packages/teams-components/src/components/ToggleButton/ToggleButton.test.tsx
@@ -8,10 +8,10 @@ describe('ToggleButton', () => {
     console.error = jest.fn();
   });
 
-  it('should throw error for icon button if no tooltip or aria-label is provided', () => {
+  it('should throw error for icon button if no title or aria-label is provided', () => {
     console.error = jest.fn();
     expect(() => render(<ToggleButton checked icon={<i>X</i>} />)).toThrow(
-      'Icon button must have a tooltip'
+      'Icon button must have a title'
     );
   });
 
@@ -22,10 +22,10 @@ describe('ToggleButton', () => {
     ).not.toThrow();
   });
 
-  it('should render tooltip', () => {
+  it('should render title', () => {
     jest.useFakeTimers();
     const { getByRole } = render(
-      <ToggleButton checked icon={<i>X</i>} tooltip={'Tooltip'} />
+      <ToggleButton checked icon={<i>X</i>} title={'Tooltip'} />
     );
 
     const button = getByRole('button');
@@ -34,10 +34,10 @@ describe('ToggleButton', () => {
       jest.runOnlyPendingTimers();
     });
 
-    const tooltip = screen.queryByText('Tooltip');
-    expect(tooltip).not.toBeNull();
+    const title = screen.queryByText('Tooltip');
+    expect(title).not.toBeNull();
 
-    expect(tooltip?.textContent).toEqual(button.getAttribute('aria-label'));
+    expect(title?.textContent).toEqual(button.getAttribute('aria-label'));
   });
 
   it('should error when attempting to wrap with a menu', () => {
@@ -50,6 +50,6 @@ describe('ToggleButton', () => {
           <MenuPopover></MenuPopover>
         </Menu>
       )
-    ).toThrow('Icon button must have a tooltip');
+    ).toThrow('Icon button must have a title');
   });
 });
diff --git a/packages/teams-components/src/components/ToggleButton/ToggleButton.tsx b/packages/teams-components/src/components/ToggleButton/ToggleButton.tsx
index 00c75e46..f204cd09 100644
--- a/packages/teams-components/src/components/ToggleButton/ToggleButton.tsx
+++ b/packages/teams-components/src/components/ToggleButton/ToggleButton.tsx
@@ -6,26 +6,10 @@ import {
   renderToggleButton_unstable,
   Tooltip,
 } from '@fluentui/react-components';
-import { validateStrictClasses, type StrictCssClass } from '../../strictStyles';
-import type { StrictSlot } from '../../strictSlot';
-import { validateIconButton, validateMenuButton } from '../Button';
+import { validateStrictClasses } from '../../strictStyles';
+import { ButtonProps, validateIconButton, validateMenuButton } from '../Button';
 
-export interface ToggleButtonProps
-  extends Pick<
-    ToggleButtonPropsBase,
-    | 'aria-label'
-    | 'aria-labelledby'
-    | 'aria-describedby'
-    | 'size'
-    | 'children'
-    | 'disabled'
-    | 'disabledFocusable'
-  > {
-  appearance?: 'transparent' | 'primary';
-  className?: StrictCssClass;
-  icon?: StrictSlot;
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
-  tooltip?: StrictSlot;
+export interface ToggleButtonProps extends ButtonProps {
   checked: boolean;
 }
 
@@ -37,7 +21,7 @@ export const ToggleButton = React.forwardRef<
     validateProps(userProps);
   }
 
-  const { className, icon, tooltip, ...restProps } = userProps;
+  const { className, icon, title, ...restProps } = userProps;
   const props: ToggleButtonPropsBase = {
     ...restProps,
     className: className?.toString(),
@@ -50,9 +34,9 @@ export const ToggleButton = React.forwardRef<
 
   const button = renderToggleButton_unstable(state);
 
-  if (tooltip) {
+  if (title) {
     return (
-      <Tooltip content={tooltip} relationship="label">
+      <Tooltip content={title} relationship="label">
         {button}
       </Tooltip>
     );

From 0ee2db793c2b13221a66f29d5c79e6b9ca0a4620 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Tue, 11 Feb 2025 17:54:55 +0000
Subject: [PATCH 7/9] fix type

---
 packages/teams-components/src/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/teams-components/src/index.ts b/packages/teams-components/src/index.ts
index 67ab50d4..0d8982ff 100644
--- a/packages/teams-components/src/index.ts
+++ b/packages/teams-components/src/index.ts
@@ -1,4 +1,4 @@
-export { MenuButton, type MenuButtonProps } from './components/MenuButton';
+export { MenuButton } from './components/MenuButton';
 export {
   ToggleButton,
   type ToggleButtonProps,

From c347afc82000659494409e55da3ae2a40163e28a Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Tue, 11 Feb 2025 17:59:44 +0000
Subject: [PATCH 8/9] update check

---
 .../src/components/Button/validateProps.ts                 | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/packages/teams-components/src/components/Button/validateProps.ts b/packages/teams-components/src/components/Button/validateProps.ts
index fb2c1790..b9d6e27a 100644
--- a/packages/teams-components/src/components/Button/validateProps.ts
+++ b/packages/teams-components/src/components/Button/validateProps.ts
@@ -25,7 +25,12 @@ export const validateIconButton = (props: {
  * @throws Error if a menu is used
  */
 export const validateMenuButton = (props: unknown) => {
-  if (typeof props === 'object' && props && 'aria-haspopup' in props) {
+  if (
+    typeof props === 'object' &&
+    props &&
+    'aria-haspopup' in props &&
+    props['aria-haspopup'] === 'menu'
+  ) {
     throw new Error(
       '@fluentui-contrib/teams-components:: MenuButton should be used to open a Menu'
     );

From f4631eff5d7afb4d749162700748436d37061a0c Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Tue, 11 Feb 2025 18:03:38 +0000
Subject: [PATCH 9/9] fix tests

---
 packages/teams-components/jest.config.ts                    | 5 +++--
 .../teams-components/stories/Button/Default.stories.tsx     | 6 +++---
 .../teams-components/stories/MenuButton/Default.stories.tsx | 6 +++---
 .../stories/ToggleButton/Default.stories.tsx                | 6 +++---
 4 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/teams-components/jest.config.ts b/packages/teams-components/jest.config.ts
index 7ca0bf13..3e1c3f76 100644
--- a/packages/teams-components/jest.config.ts
+++ b/packages/teams-components/jest.config.ts
@@ -22,8 +22,9 @@ export default {
   displayName: 'teams-components',
   preset: '../../jest.preset.js',
   transform: {
-    '^.+\\.[tj]s$': ['@swc/jest', swcJestConfig],
+    '^.+\\.[tj]sx?$': ['@swc/jest', swcJestConfig],
   },
-  moduleFileExtensions: ['ts', 'tsx', 'js', 'html'],
+  moduleFileExtensions: ['ts', 'js', 'html'],
+  testEnvironment: 'jsdom',
   coverageDirectory: '../../coverage/packages/teams-components',
 };
diff --git a/packages/teams-components/stories/Button/Default.stories.tsx b/packages/teams-components/stories/Button/Default.stories.tsx
index aeefa865..b62d7b25 100644
--- a/packages/teams-components/stories/Button/Default.stories.tsx
+++ b/packages/teams-components/stories/Button/Default.stories.tsx
@@ -27,7 +27,7 @@ export const Default = () => {
     <div className={styles.sampleContainer}>
       <Button>Button</Button>
       <Button icon={{ children: <CalendarIcon /> }}>Button</Button>
-      <Button icon={<CalendarIcon />} tooltip="Calendar" />
+      <Button icon={<CalendarIcon />} title="Calendar" />
 
       <Button appearance="transparent">Button</Button>
       <Button appearance="transparent" icon={<CalendarIcon />}>
@@ -36,14 +36,14 @@ export const Default = () => {
       <Button
         appearance="transparent"
         icon={<CalendarIcon />}
-        tooltip="Calendar"
+        title="Calendar"
       />
 
       <Button appearance="primary">Button</Button>
       <Button appearance="primary" icon={<CalendarIcon />}>
         Button
       </Button>
-      <Button appearance="primary" icon={<CalendarIcon />} tooltip="Calendar" />
+      <Button appearance="primary" icon={<CalendarIcon />} title="Calendar" />
     </div>
   );
 };
diff --git a/packages/teams-components/stories/MenuButton/Default.stories.tsx b/packages/teams-components/stories/MenuButton/Default.stories.tsx
index e311a7c2..d908b13e 100644
--- a/packages/teams-components/stories/MenuButton/Default.stories.tsx
+++ b/packages/teams-components/stories/MenuButton/Default.stories.tsx
@@ -37,7 +37,7 @@ export const Default = () => {
       {withMenu(
         <MenuButton icon={{ children: <CalendarIcon /> }}>Menu</MenuButton>
       )}
-      {withMenu(<MenuButton icon={<CalendarIcon />} tooltip="Calendar" />)}
+      {withMenu(<MenuButton icon={<CalendarIcon />} title="Calendar" />)}
 
       {withMenu(<MenuButton appearance="transparent">Menu</MenuButton>)}
       {withMenu(
@@ -49,7 +49,7 @@ export const Default = () => {
         <MenuButton
           appearance="transparent"
           icon={<CalendarIcon />}
-          tooltip="Calendar"
+          title="Calendar"
         />
       )}
 
@@ -63,7 +63,7 @@ export const Default = () => {
         <MenuButton
           appearance="primary"
           icon={<CalendarIcon />}
-          tooltip="Calendar"
+          title="Calendar"
         />
       )}
     </div>
diff --git a/packages/teams-components/stories/ToggleButton/Default.stories.tsx b/packages/teams-components/stories/ToggleButton/Default.stories.tsx
index a0ad7eea..2ff3d05a 100644
--- a/packages/teams-components/stories/ToggleButton/Default.stories.tsx
+++ b/packages/teams-components/stories/ToggleButton/Default.stories.tsx
@@ -54,7 +54,7 @@ export const Default = () => {
         onClick={createOnClick(3)}
         checked={isChecked(3)}
         icon={<CalendarIcon />}
-        tooltip="Calendar"
+        title="Calendar"
       />
 
       <ToggleButton
@@ -77,7 +77,7 @@ export const Default = () => {
         checked={isChecked(6)}
         appearance="transparent"
         icon={<CalendarIcon />}
-        tooltip="Calendar"
+        title="Calendar"
       />
 
       <ToggleButton
@@ -100,7 +100,7 @@ export const Default = () => {
         onClick={createOnClick(9)}
         appearance="primary"
         icon={<CalendarIcon />}
-        tooltip="Calendar"
+        title="Calendar"
       />
     </div>
   );