Customizer now uses React 16 context.

apps/fabric-website-resources/webpack.serve.config.js

@@ -15,6 +15,7 @@ module.exports = resources.createServeConfig({
 
   resolve: {
     alias: {
+      'office-ui-fabric-react$': path.resolve(__dirname, '../../packages/office-ui-fabric-react/src'),
       'office-ui-fabric-react/src': path.resolve(__dirname, '../../packages/office-ui-fabric-react/src'),
       'office-ui-fabric-react/lib/codepen': path.resolve(
         __dirname,

apps/todo-app/package.json

@@ -26,4 +26,4 @@
     "typescript": "2.8.4",
     "tslib": "^1.7.1"
   }
-}
+}

common/changes/@uifabric/experiments/customizer-fix_2018-08-20-22-50.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/experiments",
+      "comment": "Adjusting foundation usage, using new React 16 context.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/experiments",
+  "email": "[email protected]"
+}

common/changes/@uifabric/fabric-website-resources/customizer-fix_2018-07-27-01-09.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/fabric-website-resources",
+      "comment": "Updating serve config to respect oufr imports.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/fabric-website-resources",
+  "email": "[email protected]"
+}

common/changes/@uifabric/foundation/customizer-fix_2018-08-20-22-50.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "comment": "Adjusting foundation usage, using new React 16 context.",
+      "packageName": "@uifabric/foundation",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/foundation",
+  "email": "[email protected]"
+}

common/changes/@uifabric/utilities/customizer-fix_2018-07-27-01-09.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/utilities",
+      "comment": "Customizer: moving to use React 16 context.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/utilities",
+  "email": "[email protected]"
+}

common/changes/office-ui-fabric-react/customizer-fix_2018-07-27-01-09.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Check: adjusting shouldComponentUpdate to not ignore theme changes.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}

packages/experiments/src/Foundation.ts

@@ -5,15 +5,14 @@ import {
   IComponentOptions,
   IViewComponentProps,
   IStateComponent,
-  IStyleableComponent,
   IStyleableComponentProps,
   IStylingProviders,
   IThemedComponent,
   IViewComponent
 } from '@uifabric/foundation';
 export { IStateComponentProps } from '@uifabric/foundation';
 import { IProcessedStyleSet, IStyleSet } from './Styling';
-import { Customizations, CustomizableContextTypes, ICustomizations } from './Utilities';
+import { Customizations, CustomizerContext, ICustomizations } from './Utilities';
 
 // Centralize Foundation interaction for use throughout this package. These convenience types provide types
 //  that are global for all of OUFR, such as ITheme and IProcessedStyleSet.
@@ -25,11 +24,12 @@ export type IViewComponentProps<TProps, TStyleSet extends IStyleSet<TStyleSet>>
   TProps,
   IProcessedStyleSet<TStyleSet>
 >;
+
 /**
  * Required properties for styleable components.
  */
-export type IStyleableComponent<TProps, TStyleSet> = IStyleableComponent<TProps, TStyleSet, ITheme>;
 export type IStyleableComponentProps<TProps, TStyleSet> = IStyleableComponentProps<TProps, TStyleSet, ITheme>;
+
 /**
  * Required properties for themed components.
  */
@@ -45,7 +45,7 @@ type IContextCustomization = { customizations: ICustomizations };
 const providers: IStylingProviders<any, any, any, IContextCustomization, ITheme> = {
   mergeStyleSets,
   getCustomizations,
-  CustomizableContextTypes
+  CustomizerContext
 };
 
 /**
@@ -54,7 +54,7 @@ const providers: IStylingProviders<any, any, any, IContextCustomization, ITheme>
  * @param {IComponentOptions} options
  */
 export function createStatelessComponent<
-  TComponentProps extends IStyleableComponent<TComponentProps, TStyleSet, ITheme>,
+  TComponentProps extends IStyleableComponentProps<TComponentProps, TStyleSet, ITheme>,
   TStyleSet extends IStyleSet<TStyleSet>,
   TStatics = {}
 >(
@@ -77,7 +77,7 @@ export function createStatelessComponent<
  * @param {IStateComponent} state
  */
 export function createComponent<
-  TComponentProps extends IStyleableComponent<TViewProps, TStyleSet, ITheme>,
+  TComponentProps extends IStyleableComponentProps<TViewProps, TStyleSet, ITheme>,
   TViewProps,
   TStyleSet extends IStyleSet<TStyleSet>,
   TStatics = {}

packages/experiments/src/components/Accordion/Accordion.tsx

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import { createStatelessComponent, IViewComponentProps, IStyleableComponent } from '../../Foundation';
+import { createStatelessComponent, IViewComponentProps, IStyleableComponentProps } from '../../Foundation';
 import { CollapsibleSection, ICollapsibleSectionProps, ICollapsibleSectionStyles } from '../../CollapsibleSection';
 import { IAccordionProps, IAccordionStyles } from './Accordion.types';
 import { styles } from './Accordion.styles';
 
 const AccordionItemType = (<CollapsibleSection /> as React.ReactElement<ICollapsibleSectionProps> &
-  IStyleableComponent<ICollapsibleSectionProps, ICollapsibleSectionStyles>).type;
+  IStyleableComponentProps<ICollapsibleSectionProps, ICollapsibleSectionStyles>).type;
 
 const view = (props: IViewComponentProps<IAccordionProps, IAccordionStyles>) => {
   const { renderAs: RootType = 'div', classNames, collapseItems } = props;

packages/experiments/src/components/Accordion/Accordion.types.ts

@@ -1,7 +1,7 @@
 import { IStyle } from '../../Styling';
-import { IStyleableComponent } from '../../Foundation';
+import { IStyleableComponentProps } from '../../Foundation';
 
-export interface IAccordionProps extends IStyleableComponent<IAccordionProps, IAccordionStyles> {
+export interface IAccordionProps extends IStyleableComponentProps<IAccordionProps, IAccordionStyles> {
   renderAs?: string | React.ReactType<IAccordionProps>;
   className?: string;
 

packages/experiments/src/components/CollapsibleSection/CollapsibleSection.types.ts

@@ -1,12 +1,12 @@
 import * as React from 'react';
 import { IStyle } from 'office-ui-fabric-react';
-import { IStyleableComponent, IStyleableComponentProps, IThemedProps } from '../../Foundation';
+import { IStyleableComponentProps, IThemedProps } from '../../Foundation';
 import { RefObject } from '../../Utilities';
 
 import { ICollapsibleSectionTitleProps } from './CollapsibleSectionTitle.types';
 
 export interface ICollapsibleSectionProps
-  extends IStyleableComponent<ICollapsibleSectionProps, ICollapsibleSectionStyles> {
+  extends IStyleableComponentProps<ICollapsibleSectionProps, ICollapsibleSectionStyles> {
   /**
    * Additional class name to provide on the root element.
    */

packages/experiments/src/components/CollapsibleSection/CollapsibleSectionTitle.types.ts

@@ -1,8 +1,8 @@
 import { IStyle, RefObject } from 'office-ui-fabric-react';
-import { IStyleableComponent, IThemedProps } from '../../Foundation';
+import { IStyleableComponentProps, IThemedProps } from '../../Foundation';
 
 export interface ICollapsibleSectionTitleProps
-  extends IStyleableComponent<ICollapsibleSectionTitleProps, ICollapsibleSectionTitleStyles> {
+  extends IStyleableComponentProps<ICollapsibleSectionTitleProps, ICollapsibleSectionTitleStyles> {
   focusElementRef?: RefObject<HTMLElement>;
   /**
    * Collapsed state of body associated with this component.

packages/experiments/src/components/Stack/Stack.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
-import { createStatelessComponent, IStyleableComponent, IViewComponentProps } from '../../Foundation';
+import { createStatelessComponent, IStyleableComponentProps, IViewComponentProps } from '../../Foundation';
 import StackItem from './StackItem/StackItem';
 import { IStackItemProps, IStackItemStyles } from './StackItem/StackItem.types';
 import { IStackProps, IStackStyles } from './Stack.types';
 import { styles } from './Stack.styles';
 import { mergeStyles } from 'office-ui-fabric-react/lib/Styling';
 
 const StackItemType = (<StackItem /> as React.ReactElement<IStackItemProps> &
-  IStyleableComponent<IStackItemProps, IStackItemStyles>).type;
+  IStyleableComponentProps<IStackItemProps, IStackItemStyles>).type;
 
 const view = (props: IViewComponentProps<IStackProps, IStackStyles>) => {
   const { renderAs: RootType = 'div', classNames, gap, horizontal, shrinkItems } = props;

packages/experiments/src/components/Stack/Stack.types.ts

@@ -1,5 +1,5 @@
 import { IStyle } from '../../Styling';
-import { IStyleableComponent } from '../../Foundation';
+import { IStyleableComponentProps } from '../../Foundation';
 
 export type Alignment =
   | 'start'
@@ -16,7 +16,7 @@ export type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
 // contains the members of IStackProps that are common to both VerticalStack and HorizontalStack
 export type IPartialStackProps = Omit<IStackProps, 'verticalAlignment' | 'horizontalAlignment' | 'horizontal'>;
 
-export interface IStackProps extends IStyleableComponent<IStackProps, IStackStyles> {
+export interface IStackProps extends IStyleableComponentProps<IStackProps, IStackStyles> {
   /**
    * How to render the Stack.
    */

packages/experiments/src/components/Stack/StackItem/StackItem.types.ts

@@ -1,7 +1,7 @@
 import { IStyle } from '../../../Styling';
-import { IStyleableComponent } from '../../../Foundation';
+import { IStyleableComponentProps } from '../../../Foundation';
 
-export interface IStackItemProps extends IStyleableComponent<IStackItemProps, IStackItemStyles> {
+export interface IStackItemProps extends IStyleableComponentProps<IStackItemProps, IStackItemStyles> {
   /**
    * CSS class name used to style the StackItem.
    */

packages/experiments/src/components/Text/Text.types.tsx

@@ -1,5 +1,5 @@
 import { IStyle, IPalette, ISemanticColors } from '../../Styling';
-import { IStyleableComponent } from '../../Foundation';
+import { IStyleableComponentProps } from '../../Foundation';
 import { IFontVariants, IFontFamilies, IFontSizes, IFontWeights } from '../../Styling';
 
 // Styles for the component
@@ -11,7 +11,7 @@ export interface ITextStyles {
 }
 
 // Inputs to the component
-export interface ITextProps extends IStyleableComponent<ITextProps, ITextStyles> {
+export interface ITextProps extends IStyleableComponentProps<ITextProps, ITextStyles> {
   /**
    * Optionaly render the component as another component type or primative.
    */