Add tint appearance to CAP button (#571)

Author: pixel-perfectionist

change/@fluentui-contrib-react-cap-theme-26757ddb-0cd3-4b7b-b9ae-0e6147479c30.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Add CAP Button tint appearance and export the button/types from react-cap-theme.",
+  "packageName": "@fluentui-contrib/react-cap-theme",
+  "email": "olkatruk@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-cap-theme/AGENTS.md

@@ -1,4 +1,4 @@
-The `@fluentui/react-cap-theme` package implements a `@fluentui/react-components` theme.
+The `@fluentui-contrib/react-cap-theme` package implements a `@fluentui/react-components` theme.
 
 ## Component Spec
 

packages/react-cap-theme/src/components/Button/Button.styles.ts

@@ -1,8 +1,5 @@
-import {
-  makeStyles,
-  mergeClasses,
-  type ButtonState,
-} from '@fluentui/react-components';
+import { makeStyles, mergeClasses } from '@fluentui/react-components';
+import type { ButtonState } from './Button.types';
 import { CAP_TOKENS } from '../../theme/CAPTheme';
 
 export const useButtonStyles = makeStyles({

packages/react-cap-theme/src/components/Button/Button.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import { Button as FluentButton } from '@fluentui/react-components';
+import type { ButtonProps } from './Button.types';
+
+export const Button = FluentButton as ForwardRefComponent<ButtonProps>;
+
+Button.displayName = 'Button';

packages/react-cap-theme/src/components/Button/Button.types.ts

@@ -0,0 +1,16 @@
+import type {
+  ButtonProps as FluentButtonProps,
+  ButtonState as FluentButtonState,
+} from '@fluentui/react-components';
+
+export type ButtonAppearance =
+  | NonNullable<FluentButtonProps['appearance']>
+  | 'tint';
+
+export type ButtonProps = Omit<FluentButtonProps, 'appearance'> & {
+  appearance?: ButtonAppearance;
+};
+
+export type ButtonState = Omit<FluentButtonState, 'appearance'> & {
+  appearance?: ButtonAppearance;
+};

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

@@ -4,3 +4,8 @@ export {
   CAP_THEME_SHAREPOINT,
   CAP_THEME_TEAMS,
 } from './theme/CAPTheme';
+export { Button } from './components/Button/Button';
+export type {
+  ButtonProps,
+  ButtonState,
+} from './components/Button/Button.types';

packages/react-cap-theme/stories/components/Button.stories.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Button, type ButtonProps } from '@fluentui/react-components';
+import { Button, type ButtonProps } from '@fluentui-contrib/react-cap-theme';
 import { CAPThemeExamples, useCAPThemeSelection } from '../StorybookUtils';
 import {
   bundleIcon,