Migrating Coachmark to main Package, Added a beak component and updated experiment PositioningContainer.

apps/fabric-website/src/components/App/AppState.tsx

@@ -134,6 +134,12 @@ export const AppState: IAppState = {
           component: () => <LoadingComponent title='Checkbox' />,
           getComponent: cb => require.ensure([], (require) => cb(require<any>('../../pages/Components/CheckboxComponentPage').CheckboxComponentPage))
         },
+        {
+          title: 'Coachmark',
+          url: '#/components/coachmark',
+          component: () => <LoadingComponent title='Coachmark' />,
+          getComponent: cb => require.ensure([], (require) => cb(require<any>('../../pages/Components/CoachmarkComponentPage').CoachmarkComponentPage))
+        },
         {
           title: 'ChoiceGroup',
           url: '#/components/choicegroup',

apps/fabric-website/src/pages/Components/CoachmarkComponentPage.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import { CoachmarkPage } from 'office-ui-fabric-react/lib/components/Coachmark/CoachmarkPage';
+import { PageHeader } from '../../components/PageHeader/PageHeader';
+import { ComponentPage } from '../../components/ComponentPage/ComponentPage';
+const pageStyles: any = require('../PageStyles.module.scss');
+
+export class CoachmarkComponentPage extends React.Component<any, any> {
+  public render() {
+    return (
+      <div ref='pageElement' className={ pageStyles.basePage }>
+        <ComponentPage>
+          <PageHeader pageTitle='Coachmark' backgroundColor='#038387'
+            links={
+              [
+                {
+                  'text': 'Overview',
+                  'location': 'Overview'
+                },
+                {
+                  'text': 'Best Practices',
+                  'location': 'BestPractices'
+                },
+                {
+                  'text': 'Variants',
+                  'location': 'Variants'
+                },
+                {
+                  'text': 'Implementation',
+                  'location': 'Implementation'
+                }
+              ]
+            } />
+          <CoachmarkPage isHeaderVisible={ false } />
+        </ComponentPage>
+      </div>
+    );
+  }
+}

common/changes/@uifabric/experiments/component-beak_2018-02-08-13-45.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/experiments",
+      "comment": "Removing Coachmark",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/experiments",
+  "email": "miljo@microsoft.com"
+}

common/changes/@uifabric/utilities/component-beak_2018-02-08-13-45.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/utilities",
+      "comment": "Added a triangle abstraction class",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/utilities",
+  "email": "miljo@microsoft.com"
+}

common/changes/office-ui-fabric-react/component-beak_2018-02-08-13-45.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Migrating Coachmark to main office-ui-fabrc-react package and adding a beak compoentn as well as updating  the experimental component PositioningContainer to reflect some of the latest bits in  Callout",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "miljo@microsoft.com"
+}

packages/experiments/src/demo/AppDefinition.tsx

@@ -10,18 +10,6 @@ export const AppDefinition: IAppDefinition = {
   examplePages: [
     {
       links: [
-        {
-          component: require<any>('../components/PositioningContainer/PositioningContainerPage').PositioningContainerPage,
-          key: 'PositioningContainer',
-          name: 'PositioningContainer',
-          url: '#/examples/PositioningContainer'
-        },
-        {
-          component: require<any>('../components/Coachmark/CoachmarkPage').CoachmarkPage,
-          key: 'Coachmark',
-          name: 'Coachmark',
-          url: '#/examples/coachmark'
-        },
         {
           component: require<any>('../components/CommandBar/CommandBarPage').CommandBarPage,
           key: 'CommandBar',