Add more v9 information to README and to northstar docs (#25332)

jurokapsiar · Juraj Kapsiar · khmakoto · web-flow · commit e76134a2e323 · 2022-10-24T12:23:25.000+02:00
* Add more v9 information to README and to northstar docs

* fix

* Update packages/fluentui/README.md

Co-authored-by: Makoto Morimoto &lt;Humberto.Morimoto@microsoft.com&gt;

* feedback

* doctoc

Co-authored-by: Juraj Kapsiar &lt;jukapsia@microsoft.com&gt;
Co-authored-by: Makoto Morimoto &lt;Humberto.Morimoto@microsoft.com&gt;
diff --git a/README.md b/README.md
@@ -6,33 +6,33 @@
 
 Fluent UI web represents a collection of utilities, React components, and web components for building web applications.
 
-This repo is home to 3 separate projects today. Mixing components between projects is not currently supported. The goal of these projects is to dedupe functionality and enable interoperability over time. For now, choose the project that best suits your needs.
+This repo is home to 3 separate projects today. Combining Fluent UI React v9 components with Fluent UI React v8 or v0 components is possible and allows gradual migration to Fluent UI v9.
 
 The following table will help you navigate the 3 projects and understand their differences.
 
 <!-- prettier-ignore-start -->
-|   | React | React Northstar | Web Components |
+|   | React Components (v9) | React (v8) | Web Components |
 |---| ----- | --------------- | -------------- |
-| **Overview**    | Mature, refreshing with new concepts from react-northstar. | Newer, has concepts we're iterating on. | Web Component implementation of Fluent UI. |
-| **Used By**     | Office| Teams | Edge |
-| **Read Me**     | [README.md](/packages/react/README.md) | [README.md](/packages/fluentui/README.md) | [README.md](/packages/web-components/README.md) |
-| **Changelog** | [CHANGELOG.md](/packages/react/CHANGELOG.md) | [CHANGELOG.md](/packages/fluentui/CHANGELOG.md) | [CHANGELOG.md](/packages/web-components/CHANGELOG.md) |
-| **Repo**        | [./packages/react](/packages/react) | [./packages/fluentui/react-northstar](/packages/fluentui/react-northstar) | [./packages/web-components](/packages/web-components) |
-| **Quick Start** | [Quick Start](https://developer.microsoft.com/en-us/fluentui#/get-started/web) | [Quick Start](https://fluentsite.z22.web.core.windows.net/quick-start) | [See README.md](https://github.com/microsoft/fluentui/tree/master/packages/web-components/README.md) |
-| **Docs**        | [aka.ms/fluentui-react](https://aka.ms/fluentui-react) | [aka.ms/fluentui-react-northstar](https://aka.ms/fluentui-react-northstar) | [aka.ms/fluentui-web-components](https://aka.ms/fluentui-web-components) |
-| **NPM**         | `@fluentui/react` | `@fluentui/react-northstar` | `@fluentui/web-components` |
-| **Version**     | [![npm version](https://img.shields.io/npm/v/@fluentui/react?style=flat-square)](https://www.npmjs.com/package/@fluentui/react) | [![npm version](https://img.shields.io/npm/v/@fluentui/react-northstar?style=flat-square)](https://www.npmjs.com/package/@fluentui/react-northstar) | [![npm version](https://img.shields.io/npm/v/@fluentui/web-components?style=flat-square)](https://www.npmjs.com/package/@fluentui/web-components) |
-| **Issues**      | [![Fluent UI React GitHub Issues](https://img.shields.io/github/issues/microsoft/fluentui/Fluent%20UI%20react%20(v8)?label=issues&style=flat-square)](https://github.com/microsoft/fluentui/issues?q=is%3Aissue+is%3Aopen+label%3A%22Fluent+UI+react+(v8)%22) | [![Fluent UI React Northstar GitHub Issues](https://img.shields.io/github/issues/microsoft/fluentui/Fluent%20UI%20react-northstar?label=issues&style=flat-square)](https://github.com/microsoft/fluentui/issues?q=is%3Aissue+is%3Aopen+label%3A%22Fluent+UI+react-northstar%22) | [![Fluent UI Web Components GitHub Issues](https://img.shields.io/github/issues/microsoft/fluentui/web-components?label=issues&style=flat-square)](https://github.com/microsoft/fluentui/issues?q=is%3Aissue+is%3Aopen+label%3A%22web-components%22) |
+| **Overview**    | New, future-proof and forward looking | Mature | Web Component implementation of Fluent UI. |
+| **Used By**     | Microsoft 365 | Office | Edge |
+| **Read Me**     | [README.md](/packages/react-components/react-components/README.md) | [README.md](/packages/react/README.md)| [README.md](/packages/web-components/README.md) |
+| **Changelog** | [CHANGELOG.md](/packages/react-components/react-components/CHANGELOG.md) | [CHANGELOG.md](/packages/react/CHANGELOG.md) | [CHANGELOG.md](/packages/web-components/CHANGELOG.md) |
+| **Repo**        | [packages/react-components](/packages/react-components/react-components/CHANGELOG.md) | [./packages/react](/packages/react) | [./packages/web-components](/packages/web-components) |
+| **Quick Start** | [Quick Start](https://react.fluentui.dev/?path=/docs/concepts-developer-quick-start--page) | [Quick Start](https://developer.microsoft.com/en-us/fluentui#/get-started/web) | [See README.md](https://github.com/microsoft/fluentui/tree/master/packages/web-components/README.md) |
+| **Docs**        | [https://react.fluentui.dev/](https://react.fluentui.dev/) | [aka.ms/fluentui-react](https://aka.ms/fluentui-react) | [aka.ms/fluentui-web-components](https://aka.ms/fluentui-web-components) |
+| **NPM**         | `@fluentui/react-components` | `@fluentui/react`| `@fluentui/web-components` |
+| **Version**     | [![npm version](https://img.shields.io/npm/v/@fluentui/react-components?style=flat-square)](https://www.npmjs.com/package/@fluentui/react-components) | [![npm version](https://img.shields.io/npm/v/@fluentui/react?style=flat-square)](https://www.npmjs.com/package/@fluentui/react) | [![npm version](https://img.shields.io/npm/v/@fluentui/web-components?style=flat-square)](https://www.npmjs.com/package/@fluentui/web-components) |
+| **Issues**      | [![Fluent UI React Components GitHub Issues](https://img.shields.io/github/issues/microsoft/fluentui/Fluent%20UI%20react-components?label=issues&style=flat-square)](https://github.com/microsoft/fluentui/issues?q=is%3Aissue+is%3Aopen+label%3A%22Fluent+UI+react-components+%28v9%29%22) | [![Fluent UI React GitHub Issues](https://img.shields.io/github/issues/microsoft/fluentui/Fluent%20UI%20react%20(v8)?label=issues&style=flat-square)](https://github.com/microsoft/fluentui/issues?q=is%3Aissue+is%3Aopen+label%3A%22Fluent+UI+react+(v8)%22) | [![Fluent UI Web Components GitHub Issues](https://img.shields.io/github/issues/microsoft/fluentui/web-components?label=issues&style=flat-square)](https://github.com/microsoft/fluentui/issues?q=is%3Aissue+is%3Aopen+label%3A%22web-components%22) |
 <!-- prettier-ignore-end -->
 
-> Why are there two React versions? See the [FAQ on Fabric and Stardust](https://github.com/microsoft/fluentui/wiki/FAQ---Fabric-and-Stardust-to-Fluent-UI).
+> Why are there two React versions? Fluent UI v8 is still widely used. We encourage you to migrate to Fluent UI v9. See the [Migration overview](https://react.fluentui.dev/?path=/docs/concepts-migration-overview--page).
 
 ## FluentUI Insights
 
 [Fluent UI Insights](https://docs.microsoft.com/en-us/shows/fluent-ui-insights?utm_source=github) is a series that describes the design and decisions behind the Fluent UI design system.
 
-|                                                                                                            EP01: Positioning                                                                                                             |                                                                                                          EP02: Styling                                                                                                           |                                                                              EP03: Griffel                                                                               |
-| :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
+|                                                                                                             EP01: Positioning                                                                                                             |                                                                                                           EP02: Styling                                                                                                           |                                                                                                           EP03: Griffel                                                                                                           |
+| :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
 | <a href="https://learn.microsoft.com/en-us/shows/fluent-ui-insights/fluent-ui-insights-positioning?utm_source=github" target="_blank"><img src="ghdocs/medias/fluentui-ep01-preview.gif" alt="Watch EP01: Positioning" width="240" /></a> | <a href="https://learn.microsoft.com/en-us/shows/fluent-ui-insights/fluent-ui-insights-styling?utm_source=github" target="_blank"><img src="ghdocs/medias/fluentui-ep02-preview.gif" alt="Watch EP02: Styling" width="240" /></a> | <a href="https://learn.microsoft.com/en-us/shows/fluent-ui-insights/fluent-ui-insights-griffel?utm_source=github" target="_blank"><img src="ghdocs/medias/fluentui-ep03-preview.gif" alt="Watch EP03: Griffel" width="240" /></a> |
 
 ## Licenses
@@ -53,6 +53,10 @@ The `office-ui-fabric-react` repo is now this repo (`fluentui` in the Microsoft
 
 We have a lot in store for Fluent UI - [Read our announcement here.](https://developer.microsoft.com/en-us/office/blogs/ui-fabric-is-evolving-into-fluent-ui/)
 
+## Looking for Fluent UI React Northstar?
+
+Fluent UI React Northstar has been superseded by Fluent UI React Components v9. For more details about Fluent UI React Northstar, see its [README.md](/packages/fluentui/README.md).
+
 ---
 
 This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
diff --git a/packages/fluentui/README.md b/packages/fluentui/README.md
@@ -1,6 +1,14 @@
 # Fluent UI - React Northstar ([docs](https://aka.ms/fluent-ui))
 
-This is the new home for `@fluentui/react-northstar` and related packages which were migrated from the [`microsoft/fluent-ui-react` repo][1].
+[![npm version](https://img.shields.io/npm/v/@fluentui/react-northstar?style=flat-square)](https://www.npmjs.com/package/@fluentui/react-northstar)
+
+This is the home for `@fluentui/react-northstar` and related packages which were migrated from the [`microsoft/fluent-ui-react` repo][1].
+
+**Status**
+
+Fluent UI React Northstar has been superseded by Fluent UI React Components v9. For more details about migration to Fluent UI React Components v9, see [Migration documentation][5].
+
+**Versioning**
 
 > Since the `@fluentui/react-northstar` packages are on version 0.x, note that:
 >
@@ -16,8 +24,8 @@ This is the new home for `@fluentui/react-northstar` and related packages which
 - [Issues](#issues)
 - [Documentation and usage examples](#documentation-and-usage-examples)
 - [FAQs](#faqs)
-  - [Why the move?](#why-the-move)
-  - [Why the separate folder?](#why-the-separate-folder)
+  - [What is the future of Fluent UI React Northstar?](#what-is-the-future-of-fluent-ui-react-northstar)
+  - [How can we migrate to Fluent UI React Components v9?](#how-can-we-migrate-to-fluent-ui-react-components-v9)
   - [What's happening with Teams support?](#whats-happening-with-teams-support)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
@@ -29,25 +37,28 @@ See [CONTRIBUTING.md](CONTRIBUTING.md) for a step-by-step setup and development
 ## Issues
 
 If you need to [file an issue][3], please note in the title or description that it refers to `@fluentui/react-northstar`.
+List of [active issues][4]
 
 ## Documentation and usage examples
 
 See the doc site at https://aka.ms/fluent-ui.
 
 ## FAQs
 
-### Why the move?
+### What is the future of Fluent UI React Northstar?
 
-We're in the process of converging UI projects at Microsoft under the "Fluent UI" banner to simplify the dev story. In the process, we're making performance improvements and enabling greater interoperability of these components across more places and platforms at Microsoft.
+The future of `@fluentui/react-northstar` is called `@fluentui/react-components`. It builds on top of many base principles that were present in Northstar, streamlines the API and brings significantly improved performance.
 
-### Why the separate folder?
+### How can we migrate to Fluent UI React Components v9?
 
-These packages remain in a separate folder while we work on converging the build systems and certain other details, but they will eventually move directly under `packages` (or `apps`) next to the other packages.
+Please see the [Migration documentation][5].
 
 ### What's happening with Teams support?
 
-`@fluentui/react-northstar v0.x.x` (formerly `@fluentui/react v0.x.x`) has been the official set of components for Teams. This is still the case and no support is being dropped.
+`@fluentui/react-northstar v0.x.x` (formerly `@fluentui/react v0.x.x`) has been the official set of components for Teams. This is still the case and no support is being dropped. New features will only be added to Fluent UI React Components v9.
 
 [1]: https://github.com/microsoft/fluent-ui-react
 [2]: https://github.com/microsoft/fluentui/blob/master/packages/fluentui/CHANGELOG.md
 [3]: https://github.com/microsoft/fluentui/issues/new/choose
+[4]: https://github.com/microsoft/fluentui/issues?q=is%3Aissue+is%3Aopen+label%3A%22Fluent+UI+react-northstar+%28v0%29%22
+[5]: https://react.fluentui.dev/?path=/docs/concepts-migration-overview--page
diff --git a/packages/fluentui/docs/src/views/Introduction.tsx b/packages/fluentui/docs/src/views/Introduction.tsx
@@ -34,9 +34,11 @@ const Introduction = () => (
       Fluent UI provides extensible vanilla JavaScript solutions to component state, styling, and accessibility. These
       powerful features are exposed behind simple APIs based on natural language.
     </p>
+
+    <h3>Status</h3>
     <p>
-      Fluent UI React is being built as an exemplar of the Fluent UI design language, component specifications, and
-      utilities.
+      Fluent UI React Northstar has been superseded by{' '}
+      <Link to="https://react.fluentui.dev/">Fluent UI React Components v9</Link>.
     </p>
 
     <h3>Learn</h3>
@@ -48,11 +50,6 @@ const Introduction = () => (
     <p>
       If you want to get going right away, see the <NavLink to="quick-start">Quick Start</NavLink> guide.
     </p>
-
-    <h3>Fluent UI React V9</h3>
-    <p>
-      This is our latest and more performant library, <Link to="https://react.fluentui.dev/">link to docs</Link>.
-    </p>
   </div>
 );
 
