If you're migrating an existing Knockout based blade to a ReactView you'll find that the FluentUI components aren't mapped one to one with the Knockout controls offering.
Given ReactViews allow access to the DOM, we'll only look to provide components which will impact the majority, this is mainly around base functionality and driving consistency efforts. For anything bespoke or unique, extension authors have the freedom to self serve.
Note: We're actively working to provide parity between the React and the Knockout component offerings, some controls don't have full parity yet. In those cases please feel free to [upvote an existing partner request or file a new one][React UserVoice] to help us prioritise investments.
Currently (*) charting is a known parity gap, we're working to provide a common charting solution.
| Knockout Control Name | Knockout Control Namespace | React Component Name |
|---|---|---|
| Accordion | Fx/Controls/Accordion | FluentUI GroupedList |
| AreaChart | Fx/Controls/AreaChart | * No Framework component provided, if charting is needed please see D3 Sample |
| ArmErrorList | Fx/Controls/ArmErrorList | No Framework component provided |
| BarChart | Fx/Controls/BarChart | * No Framework component provided, if charting is needed please see D3 Sample |
| BlobContainerDropDown | Fx/Controls/Storage/BlobContainerDropDown | No Framework component provided |
| Button | Fx/Controls/Button | FluentUI Button |
| CheckBox | Fx/Controls/CheckBox | FluentUI Checkbox |
| ClickableLink | MsPortalFx.ViewModels.ClickableLink | AzurePortal-ReactView BladeLink |
| ComboBox | Fx/Controls/ComboBox | FluentUI ComboBox |
| Console | Fx/Controls/Console | No Framework component provided |
| CopyableLabel | Fx/Controls/CopyableLabel | AzurePortal-ReactView CopyableLabel |
| CustomHtml | Fx/Controls/CustomHtml | This is no longer applicable given ReactViews have DOM access |
| DataGrid | Fx/Controls/DataGrid | FluentUI DetailsList |
| DatePicker | Fx/Controls/DatePicker | FluentUI DatePicker |
| DateTimePicker | Fx/Controls/DateTimePicker | Requires custom configuration using FluentUI TextField and FluentUI DatePicker |
| DateTimeRangePicker | Fx/Controls/DateTimeRangePicker | Requires custom configuration using FluentUI TextField and FluentUI DatePicker |
| DayPicker | Fx/Controls/DayPicker | FluentUI DatePicker |
| Dialog | AzurePortal-ReactView Dialog for dialogs off the blade header, or use FluentUI Dialog | |
| DiffEditor | Fx/Controls/DiffEditor | No Framework component provided. Use react-monaco-editor npm package, see MonacoEditor Sample |
| DocsControl | Fx/Controls/DocsControl | Not applicable |
| Donut | Fx/Controls/Donut | * No Framework component provided, if charting is needed please see D3 Sample |
| DropDown | Fx/Controls/DropDown | FluentUI Dropdown |
| DurationPicker | Fx/Controls/DurationPicker | No specific component is available but this can be achieved using FluentUI TextField, see DurationPicker Sample |
| EditableGrid | Fx/Controls/EditableGrid | FluentUI DetailsList / AzurePortal-ReactView component is in-progress |
| Editor | Fx/Controls/Editor | No Framework component provided. Use react-monaco-editor npm package, see MonacoEditor Sample |
| Essentials | Fx/Controls/Essentials | AzurePortal-ReactView Essentials |
| FileDownload | Fx/Controls/FileDownload | No Framework component provided |
| FileShareDropDown | Fx/Controls/Storage/FileShareDropDown | No Framework component provided |
| FileUpload | Fx/Controls/FileUpload | AzurePortal-ReactView FileUpload |
| FrameControl | Fx/Controls/FrameControl | Not applicable |
| Graph | Fx/Controls/Graph | No Framework component provided |
| Hotspot | Fx/Controls/HotSpot | AzurePortal-ReactView BladeLink |
| InfoBalloon | Fx/Controls/InfoBalloon | No Framework component provided, you can utilise FluentUI Tooltip |
| InfoBox | Fx/Controls/InfoBox | FluentUI MessageBar |
| Legend | Fx/Controls/Legend | * No Framework component provided, if charting is needed please see D3 Sample |
| LineChart | Fx/Controls/LineChart | * No Framework component provided, if charting is needed please see D3 Sample |
| ListView | Fx/Controls/ListView | FluentUI DetailList |
| LocationDropdown | Fx/Controls/LocationDropDown | AzurePortal-ReactView LocationDropdown |
| LogStream | Fx/Controls/LogStream | No Framework component provided |
| Map | Fx/Controls/Map | No Framework component provided |
| Markdown | Fx/Controls/Markdown | No Framework component provided |
| Menu | Fx/Controls/Menu | FluentUI Nav |
| Metrics | Fx/Controls/Metrics | No Framework component provided |
| MonitorChartV2 | Fx/Controls/MonitorChart | No Framework component provided, but we're working with the monitoring team to provide this component |
| MultiLineTextBox | Fx/Controls/MultiLineTextBox | FluentUI TextField |
| NumericTextBox | Fx/Controls/NumericTextBox | FluentUI TextField, with a custom mask |
| OAuthButton | Fx/Controls/OAuthButton | Not applicable |
| OptionsGroup | Fx/Controls/OptionsGroup | FluentUI ChoiceGroup |
| PasswordBox | Fx/Controls/PasswordBox | FluentUI TextField |
| Pill | Fx/Controls/Pill | Custom framework component in-progress |
| PillCollection | Fx/Controls/PillCollection | Custom framework component in-progress |
| PricingControl | Fx/Controls/PricingControl | No Framework component provided |
| ProgressBar | Fx/Controls/ProgressBar | FluentUI ProgressIndicator |
| QuotaGauge | Fx/Controls/QuotaGuage | * No Framework component provided, if charting is needed please see D3 Sample |
| RadioButtons | Fx/Controls/RadioButtons | FluentUI ChoiceGroup |
| RangeSlider | Fx/Controls/RangeSlider | FluentUi Slider |
| Recommendations | Fx/Controls/Recommendations | No Framework component provided |
| ResourceFilter | MsPortalFx.Azure.ResourceFilter | AzurePortal-ReactView SubscriptionFilter |
| ResourceGroupDropdown | Fx/Controls/ResourceGroupDropDown | AzurePortal-ReactView ResourceGroupDropdown |
| ScatterChart | Fx/Controls/ScatterChart | * No Framework component provided, if charting is needed please see D3 Sample |
| SearchBox | Fx/Controls/SearchBox | FluentUI SearchBox |
| Section | Fx/Controls/Section | No Framework component provided |
| SingleValueGauge | Fx/Controls/SingleValueGauge | * No Framework component provided, if charting is needed please see D3 Sample |
| Slider | Fx/Controls/Slider | FluentUi Slider |
| Splitter | Fx/Controls/Splitter | No Framework component provided |
| Status bar | AzurePortal-ReactView StatusBar | |
| StorageAccountDropDown | Fx/Controls/Storage/StorageAccountDropDown | No Framework component provided |
| SubscriptionDropdown | Fx/Controls/SubscriptionDropDown | AzurePortal-ReactView SubscriptionDropdown |
| Summary | Fx/Controls/Summary | AzurePortal-ReactView Summary |
| TabControl | Fx/Controls/TabControl | FluentUI Pivot |
| TagsByResource | Fx/Controls/TagsByResource | AzurePortal-ReactView TagsByResource |
| TextBlock | Fx/Controls/TextBlock | FluentUI Text |
| TextBox | Fx/Controls/TextBox | FluentUI TextField |
| TimePicker | Fx/Controls/TimePicker | No Framework component provided |
| Toggle | Fx/Controls/Toggle | FluentUI Toggle |
| Toolbar | For command bars docked at the top of a view use AzurePortal-ReactView for inline command bars use FluentUI CommandBar. | |
| TreeView | MsPortalFx.ViewModels.Controls.Lists.TreeView | FluentUI Nav |
| TriStateCheckBox | Fx/Controls/TriStateCheckBox | FluentUI Checkbox |
| Video | Fx/Controls/Video | This is no longer applicable given ReactViews have DOM access |