From 19592b862050cb1275a5d35f1d39bdad3b4cc715 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Fri, 14 Feb 2025 16:36:29 +0000
Subject: [PATCH 1/2] feat: Extensions to makeStrictStyles

---
 .../src/components/Button/Button.tsx          | 15 ++++++-
 .../src/strictStyles/types.ts                 | 39 +++++++++++++++----
 .../src/strictStyles/validateStrictClasses.ts |  4 +-
 3 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/packages/teams-components/src/components/Button/Button.tsx b/packages/teams-components/src/components/Button/Button.tsx
index bbd39cd0..0cfcc742 100644
--- a/packages/teams-components/src/components/Button/Button.tsx
+++ b/packages/teams-components/src/components/Button/Button.tsx
@@ -5,11 +5,22 @@ import {
   renderButton_unstable,
   type ButtonProps as ButtonPropsBase,
   Tooltip,
+  GriffelStyle,
 } from '@fluentui/react-components';
 import { validateIconButton, validateMenuButton } from './validateProps';
-import { type StrictCssClass, validateStrictClasses } from '../../strictStyles';
+import {
+  type StrictCssClass,
+  validateStrictClasses,
+  type DefaultStrictStyles,
+} from '../../strictStyles';
 import { type StrictSlot } from '../../strictSlot';
 
+export type ButtonStrictOverrides = Pick<
+  GriffelStyle,
+  'maxWidth' | 'minWidth'
+> &
+  DefaultStrictStyles;
+
 export interface ButtonProps
   extends Pick<
     ButtonPropsBase,
@@ -22,7 +33,7 @@ export interface ButtonProps
     | 'disabledFocusable'
   > {
   appearance?: 'transparent' | 'primary';
-  className?: StrictCssClass;
+  className?: StrictCssClass<ButtonStrictOverrides>;
   icon?: StrictSlot;
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
   title?: StrictSlot;
diff --git a/packages/teams-components/src/strictStyles/types.ts b/packages/teams-components/src/strictStyles/types.ts
index 88cd80ff..96761095 100644
--- a/packages/teams-components/src/strictStyles/types.ts
+++ b/packages/teams-components/src/strictStyles/types.ts
@@ -1,18 +1,20 @@
+import * as React from 'react';
 import type { STRICT_SYMBOL } from './STRICT_SYMBOL';
 import type { GriffelStyle } from '@fluentui/react-components';
 
-export interface StrictCssClass {
+export interface StrictCssClass<TExtension = DefaultStrictStyles> {
   /**
    * @returns CSS class string
    */
   toString: () => string;
   DO_NOT_USE_OR_YOU_WILL_BE_FIRED: typeof STRICT_SYMBOL;
+  /**
+   * This field is only used to allow style extensions for components
+   */
+  overrideFilter?: TExtension;
 }
 
-/**
- * Allow list for CSS properties - add to this cautiously
- */
-export type StrictStyles = Pick<
+export type DefaultStrictStyles = Pick<
   GriffelStyle,
   | 'marginInline'
   | 'marginBlock'
@@ -25,9 +27,30 @@ export type StrictStyles = Pick<
   | 'alignSelf'
 >;
 
-export type MakeStrictStyles = <Slots extends string>(
-  styles: Record<Slots, StrictStyles>
-) => () => Record<Slots, StrictCssClass>;
+/**
+ * Allow list for CSS properties - add to this cautiously
+ */
+export type StrictStyles<TExtension = DefaultStrictStyles> =
+  DefaultStrictStyles & TExtension;
+
+type BaseComponenType = React.JSXElementConstructor<{
+  className?: StrictCssClass;
+}>;
+
+type ExtractStrictStyleOverrides<TComponent extends BaseComponenType> =
+  NonNullable<
+    NonNullable<React.ComponentProps<TComponent>['className']>['overrideFilter']
+  >;
+
+export type MakeStrictStyles = <
+  TComponent extends BaseComponenType,
+  Slots extends string = string
+>(
+  styles: Record<Slots, StrictStyles<ExtractStrictStyleOverrides<TComponent>>>
+) => () => Record<
+  Slots,
+  StrictCssClass<ExtractStrictStyleOverrides<TComponent>>
+>;
 
 export type MergeStrictClasses = (
   ...strictClasses: StrictCssClass[]
diff --git a/packages/teams-components/src/strictStyles/validateStrictClasses.ts b/packages/teams-components/src/strictStyles/validateStrictClasses.ts
index 86f9dcc2..f540da04 100644
--- a/packages/teams-components/src/strictStyles/validateStrictClasses.ts
+++ b/packages/teams-components/src/strictStyles/validateStrictClasses.ts
@@ -1,8 +1,8 @@
 import { STRICT_SYMBOL } from './STRICT_SYMBOL';
 import type { StrictCssClass } from './types';
 
-export const validateStrictClasses = (
-  className?: StrictCssClass | false | undefined
+export const validateStrictClasses = <TExtension>(
+  className?: StrictCssClass<TExtension> | false | undefined
 ) => {
   if (!className) {
     return;

From 933a3a1a163c97f81281b59c51b907b2c35b3109 Mon Sep 17 00:00:00 2001
From: Lingfan Gao <lingfangao@hotmail.com>
Date: Fri, 14 Feb 2025 17:31:31 +0000
Subject: [PATCH 2/2] fix type export

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

diff --git a/packages/teams-components/src/strictStyles/index.ts b/packages/teams-components/src/strictStyles/index.ts
index 2e7ca70c..2226973b 100644
--- a/packages/teams-components/src/strictStyles/index.ts
+++ b/packages/teams-components/src/strictStyles/index.ts
@@ -1,4 +1,4 @@
 export { makeStrictStyles } from './makeStrictStyles';
 export { mergeStrictClasses } from './mergeStrictClasses';
 export { validateStrictClasses } from './validateStrictClasses';
-export type { StrictCssClass } from './types';
+export type { StrictCssClass, DefaultStrictStyles } from './types';