Rename @uifabric/foundation to @fluentui/foundation-legacy (#15595)

.github/CODEOWNERS

@@ -63,7 +63,7 @@ packages/date-time-utilities @lorejoh12 @evlevy @pompomon
 packages/eslint-plugin/ @ecraig12345
 packages/example-app-base/ @ecraig12345
 packages/file-type-icons/  @KatherineThayerMicrosoft @jahnp @bigbadcapers
-packages/foundation/ @dzearing @khmakoto
+packages/foundation-legacy/ @dzearing @khmakoto
 # packages/icons/
 # packages/jest-serializer-merge-styles/
 packages/merge-styles/ @dzearing

apps/theming-designer/package.json

@@ -24,7 +24,7 @@
     "@fluentui/react": "^7.142.0",
     "@uifabric/merge-styles": "^7.19.1",
     "@uifabric/example-app-base": "^7.15.18",
-    "@uifabric/foundation": "^7.9.9",
+    "@fluentui/foundation-legacy": "^7.9.9",
     "@uifabric/variants": "^7.2.21",
     "@uifabric/set-version": "^7.0.23",
     "@uifabric/icons": "^7.5.8",

apps/theming-designer/src/components/ThemingDesigner.tsx

@@ -19,7 +19,7 @@ import { Samples } from './Samples/index';
 import { Stack, IStackProps } from '@fluentui/react/lib/Stack';
 import { ThemeDesignerColorPicker } from './ThemeDesignerColorPicker';
 import { Text } from '@fluentui/react';
-import { ThemeProvider } from '@uifabric/foundation';
+import { ThemeProvider } from '@fluentui/foundation-legacy';
 import { MainPanelWidth } from '../shared/MainPanelStyles';
 
 export interface IThemingDesignerState {

change/@fluentui-foundation-legacy-2020-10-19-14-55-55-xgao-rename-legacy-packages.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "rename @uifabric/foundation to @fluentui/foundation-legacy",
+  "packageName": "@fluentui/foundation-legacy",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-10-19T21:55:45.961Z"
+}

change/@fluentui-react-cards-2020-10-19-14-55-55-xgao-rename-legacy-packages.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "rename @uifabric/foundation to @fluentui/foundation-legacy",
+  "packageName": "@fluentui/react-cards",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-10-19T21:55:51.947Z"
+}

change/@fluentui-react-experiments-2020-10-19-14-55-55-xgao-rename-legacy-packages.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "rename @uifabric/foundation to @fluentui/foundation-legacy",
+  "packageName": "@fluentui/react-experiments",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-10-19T21:55:52.928Z"
+}

change/@fluentui-react-internal-2020-10-19-14-55-55-xgao-rename-legacy-packages.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "rename @uifabric/foundation to @fluentui/foundation-legacy",
+  "packageName": "@fluentui/react-internal",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-10-19T21:55:53.882Z"
+}

change/@uifabric-example-app-base-2020-10-19-14-55-55-xgao-rename-legacy-packages.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "rename @uifabric/foundation to @fluentui/foundation-legacy.",
+  "packageName": "@uifabric/example-app-base",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-10-19T21:55:41.555Z"
+}

change/@uifabric-foundation-2020-10-15-02-05-19-dep-fixes.json

@@ -1,7 +1,7 @@
 {
   "type": "none",
   "comment": "Use webpack config helper and update npmignore",
-  "packageName": "@uifabric/foundation",
+  "packageName": "@fluentui/foundation-legacy",
   "email": "[email protected]",
   "dependentChangeType": "none",
   "date": "2020-10-15T08:59:18.081Z"

change/@uifabric-foundation-2020-10-16-15-41-44-rename-styling.json

@@ -1,7 +1,7 @@
 {
   "type": "patch",
   "comment": "Rename @uifabric/styling to @fluentui/style-utilities",
-  "packageName": "@uifabric/foundation",
+  "packageName": "@fluentui/foundation-legacy",
   "email": "[email protected]",
   "dependentChangeType": "patch",
   "date": "2020-10-16T22:41:13.875Z"

change/@uifabric-tsx-editor-2020-10-19-14-55-55-xgao-rename-legacy-packages.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "rename @uifabric/foundation to @fluentui/foundation-legacy",
+  "packageName": "@uifabric/tsx-editor",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-10-19T21:55:55.006Z"
+}

packages/example-app-base/package.json

@@ -46,7 +46,7 @@
     "@fluentui/theme": "^1.2.1",
     "@microsoft/load-themed-styles": "^1.10.26",
     "@uifabric/example-data": "^7.1.5",
-    "@uifabric/foundation": "^7.9.9",
+    "@fluentui/foundation-legacy": "^7.9.9",
     "@uifabric/react-hooks": "^7.13.5",
     "@uifabric/set-version": "^7.0.23",
     "@uifabric/tsx-editor": "^0.13.18",

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

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { CommandButton } from '@fluentui/react/lib/compat/Button';
 import { Dropdown, IDropdownOption } from '@fluentui/react/lib/Dropdown';
-import { ThemeProvider } from '@uifabric/foundation';
+import { ThemeProvider } from '@fluentui/foundation-legacy';
 import {
   styled,
   Customizer,

packages/foundation-legacy/README.md

@@ -0,0 +1,12 @@
+# @fluentui/foundation-legacy
+
+**Foundation for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
+([formerly Office UI Fabric React](https://developer.microsoft.com/en-us/office/blogs/ui-fabric-is-evolving-into-fluent-ui/))
+
+This library is deprecated and Fluent UI React components are no longer built on top of the patterns and utilities from this package.
+
+To import the foundation:
+
+```js
+import { createStatelessComponent, createComponent } from '@fluentui/foundation-legacy';
+```

packages/foundation/etc/foundation.api.md → packages/foundation-legacy/etc/foundation-legacy.api.md

@@ -1,4 +1,4 @@
-## API Report File for "@uifabric/foundation"
+## API Report File for "@fluentui/foundation-legacy"
 
 > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
 

packages/foundation/package.json → packages/foundation-legacy/package.json

@@ -1,7 +1,7 @@
 {
-  "name": "@uifabric/foundation",
+  "name": "@fluentui/foundation-legacy",
   "version": "7.9.9",
-  "description": "Foundation library for building Fabric components.",
+  "description": "Legacy utilities for building Fluent UI React components.",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",

packages/foundation/src/version.ts → packages/foundation-legacy/src/version.ts

@@ -1,4 +1,4 @@
 // Do not modify this file; it is generated as part of publish.
 // The checked in version is a placeholder only and will not be updated.
 import { setVersion } from '@uifabric/set-version';
-setVersion('@uifabric/foundation', '0.0.0');
+setVersion('@fluentui/foundation-legacy', '0.0.0');

packages/foundation/webpack.config.js → packages/foundation-legacy/webpack.config.js

@@ -1,5 +1,5 @@
 const resources = require('../../scripts/webpack/webpack-resources');
 
 module.exports = resources.createBundleConfig({
-  output: 'FabricFoundation',
+  output: 'FluentUIFoundationLegacy',
 });

packages/react-cards/etc/react-cards.api.md

@@ -5,17 +5,17 @@
 ```ts
 
 import { IBaseProps } from '@fluentui/react/lib/Utilities';
-import { IComponent } from '@uifabric/foundation';
-import { IComponentStyles } from '@uifabric/foundation';
-import { ISlotProp } from '@uifabric/foundation';
+import { IComponent } from '@fluentui/foundation-legacy';
+import { IComponentStyles } from '@fluentui/foundation-legacy';
+import { ISlotProp } from '@fluentui/foundation-legacy';
 import { IStackItemProps } from '@fluentui/react/lib/Stack';
 import { IStackItemSlots } from '@fluentui/react/lib/Stack';
 import { IStackItemTokens } from '@fluentui/react/lib/Stack';
 import { IStackProps } from '@fluentui/react/lib/Stack';
 import { IStackSlot } from '@fluentui/react/lib/Stack';
 import { IStackSlots } from '@fluentui/react/lib/Stack';
 import { IStackTokens } from '@fluentui/react/lib/Stack';
-import { IStyleableComponentProps } from '@uifabric/foundation';
+import { IStyleableComponentProps } from '@fluentui/foundation-legacy';
 import * as React from 'react';
 
 // @public (undocumented)

packages/react-cards/package.json

@@ -52,7 +52,7 @@
     "@fluentui/react-theme-provider": "^0.14.2",
     "@fluentui/theme": "^1.2.1",
     "@microsoft/load-themed-styles": "^1.10.26",
-    "@uifabric/foundation": "^7.9.9",
+    "@fluentui/foundation-legacy": "^7.9.9",
     "@uifabric/react-hooks": "^7.13.5",
     "@uifabric/set-version": "^7.0.23",
     "@uifabric/utilities": "^7.32.3",

packages/react-cards/src/components/Card/Card.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createComponent } from '@uifabric/foundation';
+import { createComponent } from '@fluentui/foundation-legacy';
 import { CardView } from './Card.view';
 import { CardStyles as styles, CardTokens as tokens } from './Card.styles';
 import { ICardProps } from './Card.types';

packages/react-cards/src/components/Card/Card.types.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { IStackSlot, IStackTokens } from '@fluentui/react/lib/Stack';
 import { IBaseProps } from '@fluentui/react/lib/Utilities';
-import { IComponent, IComponentStyles, IStyleableComponentProps } from '@uifabric/foundation';
+import { IComponent, IComponentStyles, IStyleableComponentProps } from '@fluentui/foundation-legacy';
 
 /**
  * {@docCategory Card}

packages/react-cards/src/components/Card/Card.view.tsx

@@ -1,6 +1,6 @@
 /** @jsx withSlots */
 import * as React from 'react';
-import { withSlots, getSlots } from '@uifabric/foundation';
+import { withSlots, getSlots } from '@fluentui/foundation-legacy';
 import { Stack, IStackComponent } from '@fluentui/react/lib/Stack';
 import { getNativeProps, htmlElementProperties, warn, KeyCodes } from '@fluentui/react/lib/Utilities';
 

packages/react-cards/src/components/Card/CardItem/CardItem.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createComponent } from '@uifabric/foundation';
+import { createComponent } from '@fluentui/foundation-legacy';
 import { CardItemStyles as styles, CardItemTokens as tokens } from './CardItem.styles';
 import { ICardItemProps } from './CardItem.types';
 import { CardItemView } from './CardItem.view';

packages/react-cards/src/components/Card/CardItem/CardItem.types.ts

@@ -1,4 +1,4 @@
-import { IComponent, IComponentStyles, ISlotProp, IStyleableComponentProps } from '@uifabric/foundation';
+import { IComponent, IComponentStyles, ISlotProp, IStyleableComponentProps } from '@fluentui/foundation-legacy';
 import { IStackItemProps, IStackItemSlots, IStackItemTokens } from '@fluentui/react/lib/Stack';
 import { IBaseProps } from '@fluentui/react/lib/Utilities';
 

packages/react-cards/src/components/Card/CardItem/CardItem.view.tsx

@@ -1,5 +1,5 @@
 /** @jsx withSlots */
-import { withSlots, getSlots } from '@uifabric/foundation';
+import { withSlots, getSlots } from '@fluentui/foundation-legacy';
 import { Stack } from '@fluentui/react/lib/Stack';
 import { ICardItemComponent, ICardItemProps, ICardItemSlots } from './CardItem.types';
 

packages/react-cards/src/components/Card/CardSection/CardSection.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { createComponent } from '@uifabric/foundation';
+import { createComponent } from '@fluentui/foundation-legacy';
 import { CardSectionStyles as styles, CardSectionTokens as tokens } from './CardSection.styles';
 import { ICardSectionProps } from './CardSection.types';
 import { CardSectionView } from './CardSection.view';

packages/react-cards/src/components/Card/CardSection/CardSection.types.ts

@@ -1,4 +1,4 @@
-import { IComponent, IComponentStyles, ISlotProp, IStyleableComponentProps } from '@uifabric/foundation';
+import { IComponent, IComponentStyles, ISlotProp, IStyleableComponentProps } from '@fluentui/foundation-legacy';
 import { IStackProps, IStackSlots, IStackTokens } from '@fluentui/react/lib/Stack';
 import { IBaseProps } from '@fluentui/react/lib/Utilities';
 

packages/react-cards/src/components/Card/CardSection/CardSection.view.tsx

@@ -1,6 +1,6 @@
 /** @jsx withSlots */
 import * as React from 'react';
-import { withSlots, getSlots } from '@uifabric/foundation';
+import { withSlots, getSlots } from '@fluentui/foundation-legacy';
 import { Stack } from '@fluentui/react/lib/Stack';
 import { ICardSectionComponent, ICardSectionProps, ICardSectionSlots } from './CardSection.types';
 

packages/react-examples/package.json

@@ -72,7 +72,7 @@
     "@uifabric/example-data": "^7.1.5",
     "@fluentui/react-experiments": "^7.33.1",
     "@uifabric/file-type-icons": "^7.6.9",
-    "@uifabric/foundation": "^7.9.9",
+    "@fluentui/foundation-legacy": "^7.9.9",
     "@uifabric/icons": "^7.5.8",
     "@uifabric/merge-styles": "^7.19.1",
     "@fluentui/react-cards": "^0.113.3",

packages/react-examples/src/react-experiments/Slots/Slots.Async.Example.tsx

@@ -5,7 +5,7 @@ import {
   ICollapsibleSectionTitleStylesReturnType,
 } from '@fluentui/react-experiments';
 import { ITextProps, Label, Spinner } from '@fluentui/react';
-import { ISlotRender, IHTMLSlot } from '@uifabric/foundation';
+import { ISlotRender, IHTMLSlot } from '@fluentui/foundation-legacy';
 
 // Mock async data container component
 interface IAsyncDataProps {

packages/react-examples/src/react-experiments/Slots/Slots.Recomposition.Example.tsx

@@ -1,9 +1,9 @@
 /** @jsx withSlots */
 import * as React from 'react';
 import { Button, IButtonComponent, IButtonProps, IButtonStyles, IButtonTokens } from '@fluentui/react-experiments';
-import { withSlots } from '@uifabric/foundation';
+import { withSlots } from '@fluentui/foundation-legacy';
 // Temporary import file to experiment with next version of foundation.
-import { composed } from '@uifabric/foundation/lib/next/composed';
+import { composed } from '@fluentui/foundation-legacy/lib/next/composed';
 import { buttonProperties, getNativeProps } from '@uifabric/utilities';
 import { Spinner, Stack, IStackProps } from '@fluentui/react';
 

packages/react-examples/src/react-experiments/Theming/Theming.Schemes.Custom.Example.tsx

@@ -23,7 +23,7 @@ import { DefaultButton, PrimaryButton } from '@fluentui/react/lib/compat/Button'
 
 import { CollapsibleSectionRecursiveExample } from '@fluentui/react-examples/lib/react-experiments/CollapsibleSection/CollapsibleSection.Recursive.Example';
 
-import { ThemeProvider } from '@uifabric/foundation';
+import { ThemeProvider } from '@fluentui/foundation-legacy';
 
 const regionStyles: IStackComponent['styles'] = (props, theme): IStackStylesReturnType => ({
   root: {

packages/react-examples/src/react-experiments/Theming/Theming.Schemes.Variant.Example.tsx

@@ -22,7 +22,7 @@ import { getNeutralVariant, getSoftVariant, getStrongVariant } from '@uifabric/v
 
 import { CollapsibleSectionRecursiveExample } from '@fluentui/react-examples/lib/react-experiments/CollapsibleSection/CollapsibleSection.Recursive.Example';
 
-import { ThemeProvider } from '@uifabric/foundation';
+import { ThemeProvider } from '@fluentui/foundation-legacy';
 
 const regionStyles: IStackComponent['styles'] = (props, theme): IStackStylesReturnType => ({
   root: {

packages/react-experiments/package.json

@@ -57,7 +57,7 @@
     "@fluentui/theme": "^1.2.1",
     "@microsoft/load-themed-styles": "^1.10.26",
     "@uifabric/example-data": "^7.1.5",
-    "@uifabric/foundation": "^7.9.9",
+    "@fluentui/foundation-legacy": "^7.9.9",
     "@uifabric/icons": "^7.5.8",
     "@uifabric/merge-styles": "^7.19.1",
     "@uifabric/react-hooks": "^7.13.5",

packages/react-experiments/src/Foundation.ts

@@ -1 +1 @@
-export * from '@uifabric/foundation';
+export * from '@fluentui/foundation-legacy';

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

@@ -1,6 +1,6 @@
 /** @jsx withSlots */
 import * as React from 'react';
-import { createComponent, withSlots, getSlots } from '@uifabric/foundation';
+import { createComponent, withSlots, getSlots } from '@fluentui/foundation-legacy';
 import { CollapsibleSection, ICollapsibleSectionProps } from '../../CollapsibleSection';
 import { IAccordionComponent, IAccordionProps, IAccordionSlots } from './Accordion.types';
 import { styles } from './Accordion.styles';

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

@@ -1,5 +1,5 @@
 import { IStyle } from '../../Styling';
-import { IComponent, IHTMLSlot, IStyleableComponentProps } from '@uifabric/foundation';
+import { IComponent, IHTMLSlot, IStyleableComponentProps } from '@fluentui/foundation-legacy';
 
 export type IAccordionComponent = IComponent<IAccordionProps, IAccordionTokens, IAccordionStyles>;
 

packages/react-experiments/src/components/Button/Actionable/Actionable.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 // Temporary import file to experiment with next version of foundation.
-import { composed } from '@uifabric/foundation/lib/next/composed';
+import { composed } from '@fluentui/foundation-legacy/lib/next/composed';
 import { ActionableStyles as styles, ActionableTokens as tokens } from './Actionable.styles';
 import { IActionableProps } from './Actionable.types';
 import { useActionableState as state } from './Actionable.state';

packages/react-experiments/src/components/Button/Actionable/Actionable.types.ts

@@ -1,14 +1,14 @@
 import * as React from 'react';
 // Temporary import file to experiment with next version of foundation.
-import { IComponent } from '@uifabric/foundation/lib/next/IComponent';
+import { IComponent } from '@fluentui/foundation-legacy/lib/next/IComponent';
 import { IFontWeight, IKeytipProps } from '@fluentui/react';
 import {
   IComponentStyles,
   IHTMLElementSlot,
   ISlotProp,
   ISlottableProps,
   IStyleableComponentProps,
-} from '@uifabric/foundation';
+} from '@fluentui/foundation-legacy';
 import { IBaseProps } from '../../../Utilities';
 
 /**

packages/react-experiments/src/components/Button/Actionable/Actionable.view.tsx

@@ -1,7 +1,7 @@
 /** @jsx withSlots */
 import * as React from 'react';
 import { KeytipData } from '@fluentui/react';
-import { withSlots } from '@uifabric/foundation';
+import { withSlots } from '@fluentui/foundation-legacy';
 import { getNativeProps, anchorProperties, buttonProperties } from '../../../Utilities';
 
 import { IActionableComponent, IActionableViewProps } from './Actionable.types';

packages/react-experiments/src/components/Button/Button.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 // Temporary import file to experiment with next version of foundation.
-import { composed } from '@uifabric/foundation/lib/next/composed';
+import { composed } from '@fluentui/foundation-legacy/lib/next/composed';
 import { useButtonState as state } from './Button.state';
 import { ButtonStyles as styles, ButtonTokens as tokens } from './Button.styles';
 import { IButtonProps } from './Button.types';

packages/react-experiments/src/components/Button/Button.types.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 // Temporary import file to experiment with next version of foundation.
-import { IComponent } from '@uifabric/foundation/lib/next/IComponent';
+import { IComponent } from '@fluentui/foundation-legacy/lib/next/IComponent';
 import { IRawFontStyle, IRawStyleBase } from '@uifabric/merge-styles/lib/IRawStyleBase';
 import { ITextSlot } from '@fluentui/react';
-import { IComponentStyles, ISlottableProps, ISlotProp, IStyleableComponentProps } from '@uifabric/foundation';
+import { IComponentStyles, ISlottableProps, ISlotProp, IStyleableComponentProps } from '@fluentui/foundation-legacy';
 import { IFontIconSlot } from '../../utilities/factoryComponents.types';
 import { IBaseProps } from '../../Utilities';
 import {