Foundation: Promote Slots Implementation (#7845)

* Promote Slots version of Foundation from experiments to Foundation package.

* Change files.

* Promote create-component slot templates as default.

* PR feedback and other template cleanup.

* Minor cleanup missed in last commit.

common/changes/@uifabric/example-app-base/jg-promote-slots_2019-01-30-01-52.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/example-app-base",
+      "comment": "Changes to support Slots Foundation.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/example-app-base",
+  "email": "[email protected]"
+}

common/changes/@uifabric/experiments/jg-promote-slots_2019-01-30-01-52.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/experiments",
+      "comment": "Remove Slots/Tokens Foundation implementation.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/experiments",
+  "email": "[email protected]"
+}

common/changes/@uifabric/foundation/jg-promote-slots_2019-01-30-01-52.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/foundation",
+      "comment": "Promote Slots and Tokens implementation of Foundation.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/foundation",
+  "email": "[email protected]"
+}

packages/example-app-base/src/components/ExampleCard/ExampleCard.tsx

@@ -53,10 +53,10 @@ const _schemeOptions: IDropdownOption[] = _schemes.map((item: string, index: num
 }));
 
 // tslint:disable-next-line:typedef
-const regionStyles: IExampleCardComponent['styles'] = props => ({
+const regionStyles: IExampleCardComponent['styles'] = (props, theme) => ({
   root: {
-    backgroundColor: props.theme.semanticColors.bodyBackground,
-    color: props.theme.semanticColors.bodyText
+    backgroundColor: theme.semanticColors.bodyBackground,
+    color: theme.semanticColors.bodyText
   }
 });
 

packages/example-app-base/src/components/ExampleCard/ExampleCardComponent.tsx

@@ -1,8 +1,18 @@
-import * as React from 'react';
-import { createStatelessComponent, IStatelessComponent, IStyleableComponentProps } from '@uifabric/foundation';
+/** @jsx withSlots */
+import {
+  createComponent,
+  getSlots,
+  IHTMLSlot,
+  IComponent,
+  IComponentStyles,
+  IStyleableComponentProps,
+  withSlots
+} from '@uifabric/foundation';
 import {
   Customizations,
   CustomizerContext,
+  divProperties,
+  getNativeProps,
   getThemedContext,
   ICustomizerContext,
   IProcessedStyleSet,
@@ -15,20 +25,32 @@ import {
 // This file exists only to create a temporary stateless component for applying styles.
 // TODO: Once Stack (or any other Foundation created layout component) is promoted out of experiments,
 //        we can remove this file AND remove foundation as a dependency of example-app-base.
-export type IExampleCardComponent = IStatelessComponent<IExampleCardComponentProps, IExampleCardComponentStyles>;
-
-export interface IExampleCardComponentProps extends IStyleableComponentProps<IExampleCardComponentProps, IExampleCardComponentStyles> {}
+export type IExampleCardComponent = IComponent<IExampleCardComponentProps, {}, IExampleCardComponentStyles>;
 
-export interface IExampleCardComponentStyles {
-  root: IStyle;
+export interface IExampleCardComponentSlots {
+  root?: IHTMLSlot;
 }
 
+export interface IExampleCardComponentProps
+  extends IExampleCardComponentSlots,
+    IStyleableComponentProps<IExampleCardComponentProps, {}, IExampleCardComponentStyles> {}
+
+export type IExampleCardComponentStyles = IComponentStyles<IExampleCardComponentSlots>;
+
 // tslint:disable-next-line:typedef
 const ExampleCardComponentView: IExampleCardComponent['view'] = props => {
-  return props.children ? <div className={props.classNames.root}>{props.children}</div> : null;
+  if (!props.children) {
+    return null;
+  }
+
+  const Slots = getSlots<IExampleCardComponentProps, IExampleCardComponentSlots>(props, {
+    root: 'div'
+  });
+
+  return <Slots.root {...getNativeProps(props, divProperties)} />;
 };
 
-export const ExampleCardComponent: React.StatelessComponent<IExampleCardComponentProps> = createStatelessComponent({
+export const ExampleCardComponent: React.StatelessComponent<IExampleCardComponentProps> = createComponent({
   displayName: 'ExampleCardComponent',
   styles: undefined,
   view: ExampleCardComponentView

packages/experiments/src/Foundation.ts

@@ -1,7 +1 @@
-export * from './utilities/createComponent';
-export * from './utilities/IComponent';
-export * from './utilities/IHTMLSlots';
-export * from './utilities/ISlots';
-export * from './utilities/slots';
-
-export { ThemeProvider } from '@uifabric/foundation';
+export * from '@uifabric/foundation';

packages/experiments/src/slots/SlotsPage.tsx

@@ -10,7 +10,7 @@ import { SlotsContentExample } from './examples/Slots.Content.Example';
 import { SlotsStyledExample } from './examples/Slots.Styled.Example';
 
 const SlotsExampleCode = require('!raw-loader!@uifabric/experiments/src/slots/examples/Slots.Example.tsx') as string;
-const SlotsAsyncExampleCode = require('!raw-loader!@uifabric/experiments/src/slots/examples/Slots.Example.tsx') as string;
+const SlotsAsyncExampleCode = require('!raw-loader!@uifabric/experiments/src/slots/examples/Slots.Async.Example.tsx') as string;
 const SlotsRootExampleCode = require('!raw-loader!@uifabric/experiments/src/slots/examples/Slots.Root.Example.tsx') as string;
 const SlotsStackExampleCode = require('!raw-loader!@uifabric/experiments/src/slots/examples/Slots.Stack.Example.tsx') as string;
 const SlotsIconExampleCode = require('!raw-loader!@uifabric/experiments/src/slots/examples/Slots.Icon.Example.tsx') as string;

packages/foundation/config/tests.js

@@ -1,5 +1,6 @@
 /** Jest test setup file. */
 
+const { setIconOptions } = require('@uifabric/styling');
 const { configure } = require('enzyme');
 const Adapter = require('enzyme-adapter-react-16');