Lifting the resolution of default and user provided style variables to Utilities.

common/changes/@uifabric/experiments/styleUtils_2018-11-29-23-33.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/experiments",
+      "comment": "Lifting the resolution of default and user provided style variables to Utilities.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/experiments",
+  "email": "[email protected]"
+}

packages/experiments/src/components/Button/Button.styles.ts

@@ -1,6 +1,6 @@
 import { IButtonComponent, IButtonStyles, IButtonStyleVariablesTypes, IButtonStates } from './Button.types';
 import { getFocusStyle, getGlobalClassNames, concatStyleSets } from '../../Styling';
-import { processVariables } from '../../utilities/VariableProcessing';
+import { merge } from '../../Utilities';
 
 export const getButtonStyles: IButtonComponent['styles'] = props => {
   const { theme, disabled, expanded, className, circular, primary, styleVariables } = props;
@@ -222,3 +222,12 @@ export const getButtonStyles: IButtonComponent['styles'] = props => {
     }
   );
 };
+
+export type IProcessedVariables<T> = { [P in keyof T]-?: IProcessedVariables<T[P]> };
+
+export function processVariables<T>(partialVariables: T, customVariables?: T): IProcessedVariables<T> {
+  // tslint:disable-next-line:no-any
+  const result = customVariables ? merge({}, partialVariables, customVariables) : partialVariables;
+
+  return result as IProcessedVariables<T>;
+}

packages/experiments/src/components/Toggle/Toggle.styles.ts

@@ -1,5 +1,6 @@
 import { IToggleComponent, IToggleStyles, IToggleStyleVariablesTypes, IToggleStyleVariables, IToggleViewProps } from './Toggle.types';
 import { getFocusStyle, getGlobalClassNames, HighContrastSelector, concatStyleSets } from '../../Styling';
+import { resolveStyleVariables } from '../../utilities/variableProcessing';
 
 const GlobalClassNames = {
   root: 'ms-Toggle',
@@ -214,15 +215,9 @@ export const ToggleStyles: IToggleComponent['styles'] = props => {
   }
 
   function getToggleStyles(userStyleVariables: IToggleStyleVariables): Partial<IToggleStyles> {
-    let toggleVariables: IToggleStyleVariablesTypes;
+    let toggleVariables = getToggleViewStyleVariables(props);
 
-    toggleVariables = getToggleViewStyleVariables(props);
-
-    if (typeof userStyleVariables === 'function') {
-      toggleVariables = { ...toggleVariables, ...userStyleVariables(props) };
-    } else if (userStyleVariables !== undefined) {
-      toggleVariables = { ...toggleVariables, ...userStyleVariables };
-    }
+    toggleVariables = resolveStyleVariables(props, toggleVariables, userStyleVariables);
 
     return getToggleStylesFromState(toggleVariables);
   }

packages/experiments/src/utilities/variableProcessing.ts

@@ -0,0 +1,15 @@
+export type IComponentStyleVariables<TComponentViewProps, TComponentStyleVariablesTypes> =
+  | TComponentStyleVariablesTypes
+  | ((props: TComponentViewProps) => TComponentStyleVariablesTypes)
+  | undefined;
+
+export function resolveStyleVariables<
+  TViewProps,
+  TStyleVariablesTypes,
+  TStyleVariables extends IComponentStyleVariables<TViewProps, TStyleVariablesTypes>
+>(props: TViewProps, ...variableArray: TStyleVariables[]): TStyleVariablesTypes {
+  return Object.assign(
+    {},
+    ...variableArray.map(variables => (typeof variables === 'function' ? (variables as Function)(props) : variables))
+  );
+}