DRAFT: Introduce new Button appearance props ("tint" and "outlineColor") for CAP visual refresh

apps/public-docsite-v9/.storybook/preview.js

@@ -1,9 +1,10 @@
 import * as rootPreview from '../../../.storybook/preview';
+import { withCAPTheme } from '../../../packages/react-components/react-button/stories/src/CAPTheme';
 
 import './docs-root-v9.css';
 
 /** @type {NonNullable<import('@storybook/react').Decorator[]>} */
-export const decorators = rootPreview.decorators;
+export const decorators = [...rootPreview.decorators, withCAPTheme];
 
 /** @type {import("@fluentui/react-storybook-addon").FluentParameters & typeof rootPreview.parameters} */
 export const parameters = {

packages/react-components/react-button/library/docs/SPEC.md

@@ -45,6 +45,8 @@ The `Button` component has several apparance variants depending on where it's be
 - appearance="primary": The `Button` is styled to emphasize that it represents the primary action.
 - appearance="subtle": The `Button` is styled to blend into its background to become less emphasized.
 - appearance="transparent": The `Button` is styled such that it has no background or border styling and is just emphasized through its content styling.
+- appearance="tint": The `Button` is styled with a tinted background using brand colors.
+- appearance="outlineColor": The `Button` is styled with a colored outline using brand colors.
 
 ### Icon
 

packages/react-components/react-button/library/etc/react-button.api.md

@@ -30,7 +30,7 @@ export interface ButtonContextValue {
 
 // @public (undocumented)
 export type ButtonProps = ComponentProps<ButtonSlots> & {
-    appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent';
+    appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent' | 'tint' | 'outlineColor';
     disabledFocusable?: boolean;
     disabled?: boolean;
     iconPosition?: 'before' | 'after';

packages/react-components/react-button/library/src/components/Button/Button.types.ts

@@ -26,10 +26,12 @@ export type ButtonProps = ComponentProps<ButtonSlots> & {
    * - 'outline': Removes background styling.
    * - 'subtle': Minimizes emphasis to blend into the background until hovered or focused.
    * - 'transparent': Removes background and border styling.
+   * - 'tint': Applies a tinted background with brand colors.
+   * - 'outlineColor': Applies a colored outline with brand colors.
    *
    * @default 'secondary'
    */
-  appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent';
+  appearance?: 'secondary' | 'primary' | 'outline' | 'subtle' | 'transparent' | 'tint' | 'outlineColor';
 
   /**
    * When set, allows the button to be focusable even when it has been disabled. This is used in scenarios where it

packages/react-components/react-button/library/src/components/Button/useButtonStyles.styles.ts

@@ -279,6 +279,12 @@ const useRootStyles = makeStyles({
       },
     },
   },
+  tint: {
+    /* Styles provided by consumer via custom hooks */
+  },
+  outlineColor: {
+    /* Styles provided by consumer via custom hooks */
+  },
 
   // Shape variations
   circular: { borderRadius: tokens.borderRadiusCircular },
@@ -459,6 +465,12 @@ const useRootDisabledStyles = makeStyles({
       ...shorthands.borderColor('transparent'),
     },
   },
+  tint: {
+    /* Styles provided by consumer via custom hooks */
+  },
+  outlineColor: {
+    /* Styles provided by consumer via custom hooks */
+  },
 });
 
 const useRootFocusStyles = makeStyles({

packages/react-components/react-button/library/src/components/CompoundButton/useCompoundButtonStyles.styles.ts

@@ -129,6 +129,12 @@ const useRootStyles = makeStyles({
       },
     },
   },
+  tint: {
+    /* Styles provided by custom hooks */
+  },
+  outlineColor: {
+    /* Styles provided by custom hooks */
+  },
 
   // Size variations
   small: {

packages/react-components/react-button/library/src/components/MenuButton/useMenuButtonStyles.styles.ts

@@ -45,6 +45,12 @@ const useRootExpandedStyles = makeStyles({
     backgroundColor: tokens.colorTransparentBackgroundSelected,
     color: tokens.colorNeutralForeground2BrandSelected,
   },
+  tint: {
+    /* Styles provided by consumer via custom hooks */
+  },
+  outlineColor: {
+    /* Styles provided by consumer via custom hooks */
+  },
 });
 
 const useIconExpandedStyles = makeStyles({
@@ -64,6 +70,12 @@ const useIconExpandedStyles = makeStyles({
   transparent: {
     color: tokens.colorNeutralForeground2BrandSelected,
   },
+  tint: {
+    /* Styles provided by consumer via custom hooks */
+  },
+  outlineColor: {
+    /* Styles provided by consumer via custom hooks */
+  },
   highContrast: {
     // High contrast styles
     '@media (forced-colors: active)': {

packages/react-components/react-button/library/src/components/SplitButton/useSplitButtonStyles.styles.ts

@@ -126,6 +126,12 @@ const useRootStyles = makeStyles({
       },
     },
   },
+  tint: {
+    /* Styles provided by consumer via custom hooks */
+  },
+  outlineColor: {
+    /* Styles provided by consumer via custom hooks */
+  },
 
   // Shape variations
   circular: {},

packages/react-components/react-button/library/src/components/ToggleButton/useToggleButtonStyles.styles.ts

@@ -142,6 +142,12 @@ const useRootCheckedStyles = makeStyles({
       color: tokens.colorNeutralForeground2BrandPressed,
     },
   },
+  tint: {
+    /* Styles provided by custom hooks */
+  },
+  outlineColor: {
+    /* Styles provided by custom hooks */
+  },
 });
 
 const useRootDisabledStyles = makeStyles({
@@ -210,6 +216,12 @@ const useRootDisabledStyles = makeStyles({
       ...shorthands.borderColor('transparent'),
     },
   },
+  tint: {
+    /* Styles provided by custom hooks */
+  },
+  outlineColor: {
+    /* Styles provided by custom hooks */
+  },
 });
 
 const useIconCheckedStyles = makeStyles({

packages/react-components/react-button/stories/.storybook/preview.js

@@ -1,7 +1,8 @@
 import * as rootPreview from '../../../../../.storybook/preview';
+import { withCAPTheme } from '../src/CAPTheme';
 
 /** @type {typeof rootPreview.decorators} */
-export const decorators = [...rootPreview.decorators];
+export const decorators = [...rootPreview.decorators, withCAPTheme];
 
 /** @type {typeof rootPreview.parameters} */
 export const parameters = { ...rootPreview.parameters };

packages/react-components/react-button/stories/src/Button/ButtonAppearance.stories.tsx

@@ -9,6 +9,8 @@ const useStyles = makeStyles({
   wrapper: {
     columnGap: '15px',
     display: 'flex',
+    flexWrap: 'wrap',
+    rowGap: '15px',
   },
 });
 
@@ -30,6 +32,12 @@ export const Appearance = (): JSXElement => {
       <Button appearance="transparent" icon={<CalendarMonth />}>
         Transparent
       </Button>
+      <Button appearance="tint" icon={<CalendarMonth />}>
+        Tint
+      </Button>
+      <Button appearance="outlineColor" icon={<CalendarMonth />}>
+        Outline Color
+      </Button>
     </div>
   );
 };
@@ -42,7 +50,9 @@ Appearance.parameters = {
         '- `primary`: emphasizes the button as a primary action.\n' +
         '- `outline`: removes background styling.\n' +
         '- `subtle`: minimizes emphasis to blend into the background until hovered or focused\n' +
-        '- `transparent`: removes background and border styling.\n',
+        '- `transparent`: removes background and border styling.\n' +
+        '- `tint`: applies a tinted background with brand colors.\n' +
+        '- `outlineColor`: applies a colored outline with brand colors.\n',
     },
   },
 };

packages/react-components/react-button/stories/src/CAPTheme/index.ts

@@ -0,0 +1,6 @@
+// This styles mock the actualy CAP theme styles, that once ready will be exported from "@fluentui-contrib/react-cap-theme" package.
+export { withCAPTheme } from './withCAPTheme';
+export { useCapButtonStyles } from './useCapButtonStyles';
+export { useCapMenuButtonStyles } from './useCapMenuButtonStyles';
+export { useCapSplitButtonStyles } from './useCapSplitButtonStyles';
+export { useCapToggleButtonStyles } from './useCapToggleButtonStyles';