## Highlights

First, we recommend folks checkout our latest update on the [Component Lifecycle Process](https://) and our [Component Roadmap](https://github.com/microsoft/fluentui/wiki/Fluent-UI-React-v9-Component-Roadmap) as it's been updated for FY23Q2.

Here's what we'll cover in this post:

1. Added a dedicated shim package for [v8 to v9 migration](https://react.fluentui.dev/?path=/docs/migration-shims-button-actionbuttonshim--default)
2. Released new components **in Stable**: [Dialog](https://react.fluentui.dev/?path=/docs/components-dialog--default) 🎉
3. Added new components **in Preview**: [Table](https://react.fluentui.dev/?path=/docs/preview-components-table--default), [Field](https://react.fluentui.dev/?path=/docs/preview-components-field--default), [AvatarGroup](https://react.fluentui.dev/?path=/docs/preview-components-avatargroup--default), [Persona](https://react.fluentui.dev/?path=/docs/preview-components-persona--default), [Toolbar](https://react.fluentui.dev/?path=/docs/preview-components-persona--default)
4. Check out a Fluent UI React v9 based **Teams App demo** at [Ignite 2022](https://ignite.microsoft.com/en-US/home)

## Migration shims
We know a lot of customers are migrating from Fluent UI React v8 to v9 and we're trying to balance the amount of compatibility shims we build verses building new features in v9.


So we've elevated the [Migration section](https://react.fluentui.dev/?path=/docs/migration-shims-button-actionbuttonshim--default) in documentation to cover some of the common migration shims when moving from v8 to v9.

To set expectations, at this time we don't intend to shim every component in v8 (as we want customers to adopt v9), but we understand the need to having a compatibility layer for time-sensitive feature development.

Let us know if there are common migration issues you've been hitting so that we help smooth out the experience.

## New components in stable
### Dialog
This is our latest component to be promoted to stable!


The [Dialog](url) provides the fundamental building blocks components needed to create a Dialog experience:
- Dialog
- DialogTrigger
- DialogSurface
- DialogTitle
- DialogActions

This allows you to easily compose an experience for specific applications to customize the UX.

It also provides a minimum breakpoint to reposition content within the DialogActions.


Give it a try and let us know what you think!

## New components in preview

> Note: These components are currently under development and are subject to change.

### Table
This component has been a long time coming and we're making great progress.


Leveraging the composition-based principles already in the UI library, the [Table](https://react.fluentui.dev/?path=/docs/preview-components-table--default) component is a way for developers to build a "DataGrid" like experience and compose in the functionality that's only necessary for your application.

We've been experimenting with a hooks base approach that allows you to add things like sorting, filtering, and selection. Meaning, you include can spare a little bit on bundle size by including only the things you want.

Stay tuned, when we're ready, we'll provide a more in-depth post on using the table component in the future!

### Field
This component is the next iteration in supporting form based scenarios.


If you recall my previous post on using [Fluent UI React v9 with Formik and Yup](https://dev.to/paulgildea/fluent-ui-react-v9-with-formik-and-yup-523g), I had to implement my own "ErrorText" component to handle the validation UX.

{% embed https://dev.to/paulgildea/fluent-ui-react-v9-with-formik-and-yup-523g %}

Now with the addition of the [Field](https://react.fluentui.dev/?path=/docs/preview-components-field--default) component, that validation UX is provided straight out of the UI library.

Coming up, an updated post once field hits stable. For more details on the rest of the preview components, head over to: https://react.fluentui.dev

## Fluent UI React v9 at Ignite 2022
This year, I had the opportunity to demo a Teams App leveraging Fluent UI React v9 to [extend it across M365 to Outlook and Office.com](https://learn.microsoft.com/en-us/microsoftteams/platform/m365-apps/extend-m365-teams-personal-tab?tabs=manifest-teams-toolkit).


Be sure to check out the breakout session, [from low code to pro code: building and buying collaborative apps to power an evolving workplace](https://ignite.microsoft.com/en-US/sessions/d5d64b26-a01f-40c9-b259-92cb99a9e16e?source=sessions) to see Fluent UI React v9 in action.

{% embed https://ignite.microsoft.com/en-US/sessions/d5d64b26-a01f-40c9-b259-92cb99a9e16e %}

If you've reached the bottom of this post, thank you! Our team is proud of the work put in this month and we welcome your feedback.

Have questions? Don't hesitate to reach out on:

GitHub: https://github.com/microsoft/fluentui
Docs: https://react.fluentui.dev
Twitter: https://twitter.com/fluentui

Enjoy!