feat: Extensions to makeStrictStyles (#310)

microsoft · Feb 17, 2025 · c3f7237 · c3f7237
1 parent 418db77
commit c3f7237
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 13 deletions.
diff --git 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/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';
diff --git 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
@@ -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;