Stack: Promoting stack from experiments package to OUFR package.

apps/fabric-website-resources/src/AppDefinition.tsx

@@ -216,6 +216,12 @@ export const AppDefinition: IAppDefinition = {
           name: 'GroupedList',
           url: '#examples/groupedlist'
         },
+        {
+          component: require<any>('./components/pages/HorizontalStackPage').HorizontalStackPage,
+          key: 'HorizontalStack',
+          name: 'HorizontalStack',
+          url: '#/examples/horizontalstack'
+        },
         {
           component: require<any>('./components/pages/HoverCardPage').HoverCardPage,
           key: 'HoverCard',
@@ -413,6 +419,12 @@ export const AppDefinition: IAppDefinition = {
           key: 'Tooltip',
           name: 'Tooltip',
           url: '#/examples/Tooltip'
+        },
+        {
+          component: require<any>('./components/pages/VerticalStackPage').VerticalStackPage,
+          key: 'VerticalStack',
+          name: 'VerticalStack',
+          url: '#/examples/verticalstack'
         }
       ],
       name: 'Basic components'

apps/fabric-website-resources/src/components/pages/HorizontalStackPage.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { DemoPage } from '../DemoPage';
+
+import { HorizontalStackPageProps } from 'office-ui-fabric-react/lib/components/Stack/HorizontalStack/HorizontalStack.doc';
+
+export const HorizontalStackPage = (props: { isHeaderVisible: boolean }) => <DemoPage {...{ ...HorizontalStackPageProps, ...props }} />;

apps/fabric-website-resources/src/components/pages/VerticalStackPage.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import { DemoPage } from '../DemoPage';
+
+import { VerticalStackPageProps } from 'office-ui-fabric-react/lib/components/Stack/VerticalStack/VerticalStack.doc';
+
+export const VerticalStackPage = (props: { isHeaderVisible: boolean }) => <DemoPage {...{ ...VerticalStackPageProps, ...props }} />;

common/changes/@uifabric/experiments/stackPromotion_2018-11-27-01-47.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/experiments",
+      "comment": "Stack: Promoting from experiments to OUFR package.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/experiments",
+  "email": "[email protected]"
+}

common/changes/office-ui-fabric-react/stackPromotion_2018-11-27-01-47.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Stack: Promoting from experiments to OUFR package.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}

packages/experiments/src/components/Button/Button.view.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { IButtonComponent, IButtonViewProps } from './Button.types';
 import { Text } from '../../Text';
-import { HorizontalStack } from '../../Stack';
+import { HorizontalStack } from 'office-ui-fabric-react/lib/Stack';
 import { Icon, IIconProps } from 'office-ui-fabric-react';
 import { getNativeProps, buttonProperties } from '../../Utilities';
 

packages/experiments/src/components/Button/examples/Button.Example.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { Button } from '../index';
-import { HorizontalStack, Text, VerticalStack } from '@uifabric/experiments';
+import { HorizontalStack, VerticalStack } from 'office-ui-fabric-react/lib/Stack';
+import { Text } from '@uifabric/experiments';
 import { ContextualMenu, IContextualMenuProps, Icon, CommandBar } from 'office-ui-fabric-react';
 
 const menuItems = [{ key: 'a', name: 'Item a' }, { key: 'b', name: 'Item b' }];

packages/experiments/src/components/CollapsibleSection/examples/CollapsibleSection.Controlled.Example.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { FocusZone } from 'office-ui-fabric-react/lib/FocusZone';
 import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
+import { HorizontalStack } from 'office-ui-fabric-react/lib/Stack';
 import { CollapsibleSection } from '@uifabric/experiments/lib/CollapsibleSection';
-import { HorizontalStack } from '@uifabric/experiments/lib/Stack';
 
 export interface ICollapsibleSectionControlledExampleState {
   collapsed: boolean;

packages/experiments/src/components/Text/examples/Text.Ramp.Example.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Text, VerticalStack } from '@uifabric/experiments';
+import { VerticalStack } from 'office-ui-fabric-react/lib/Stack';
+import { Text } from '@uifabric/experiments';
 import { IFontVariants, IFontSizes, IFontWeights, IFontFamilies, IStyle } from '@uifabric/experiments/lib/Styling';
 import { ISemanticTextColors, IPalette } from '@uifabric/experiments/lib/Styling';
 import { createStatelessComponent, IStyleableComponentProps, IStatelessComponent } from '@uifabric/experiments/lib/Foundation';

packages/experiments/src/demo/AppDefinition.tsx

@@ -52,12 +52,6 @@ export const AppDefinition: IAppDefinition = {
           name: 'FileTypeIcon',
           url: '#/examples/filetypeicon'
         },
-        {
-          component: require<any>('../components/Stack/HorizontalStack/HorizontalStackPage').HorizontalStackPage,
-          key: 'HorizontalStack',
-          name: 'HorizontalStack',
-          url: '#/examples/horizontalstack'
-        },
         {
           component: require<any>('../components/LayoutGroup/LayoutGroupPage').LayoutGroupPage,
           key: 'LayoutGroup',
@@ -112,12 +106,6 @@ export const AppDefinition: IAppDefinition = {
           name: 'Shimmer',
           url: '#/examples/shimmer'
         },
-        {
-          component: require<any>('../components/Stack/VerticalStack/VerticalStackPage').VerticalStackPage,
-          key: 'VerticalStack',
-          name: 'VerticalStack',
-          url: '#/examples/verticalstack'
-        },
         {
           component: require<any>('../components/VirtualizedList/VirtualizedListPage').VirtualizedListPage,
           key: 'VirtualizedList',

packages/experiments/src/index.ts

@@ -7,7 +7,6 @@ export * from './LayoutGroup';
 export * from './Shimmer';
 export * from './Sidebar';
 export * from './Signals';
-export * from './Stack';
 export * from './StaticList';
 export * from './Text';
 export * from './Tile';

packages/experiments/src/theming/examples/Themes.tsx

@@ -1,5 +1,5 @@
 import { getNeutralVariant, getSoftVariant, getStrongVariant } from '@uifabric/variants';
-import { IHorizontalStackComponent } from '@uifabric/experiments/lib/Stack';
+import { IHorizontalStackComponent } from 'office-ui-fabric-react/lib/Stack';
 
 import { createTheme, IPalette, ITheme, getTheme } from 'office-ui-fabric-react/lib/Styling';
 

packages/experiments/src/theming/examples/Theming.Schemes.Example.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 
 import { CommandBar, Customizer, Toggle } from 'office-ui-fabric-react';
+import { HorizontalStack, VerticalStack } from 'office-ui-fabric-react/lib/Stack';
 import { farItems, items, overflowItems } from 'office-ui-fabric-react/lib/components/CommandBar/examples/data';
-import { HorizontalStack, Text, VerticalStack } from '@uifabric/experiments';
+import { Text } from '@uifabric/experiments';
 
 // tslint:disable:max-line-length
 import { CollapsibleSectionRecursiveExample } from '@uifabric/experiments/lib/components/CollapsibleSection/examples/CollapsibleSection.Recursive.Example';

packages/office-ui-fabric-react/package.json

@@ -61,6 +61,7 @@
   },
   "dependencies": {
     "@microsoft/load-themed-styles": "^1.7.13",
+    "@uifabric/foundation": ">=0.5.7 <1.0.0",
     "@uifabric/icons": ">=6.3.0 <7.0.0",
     "@uifabric/merge-styles": ">=6.15.0 <7.0.0",
     "@uifabric/set-version": ">=1.1.3 <2.0.0",