diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Dialog/FluentDialog.md b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Dialog/FluentDialog.md index 89f27f0cd4..5cbb5ee659 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Dialog/FluentDialog.md +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Dialog/FluentDialog.md @@ -72,7 +72,7 @@ It is then retrieved in the `DialogResult` like in the example below. } ``` -> **Note:** +> [!NOTE] > 1. The `FluentDialogBody` component is required to display the dialog window correctly. > 2. ⚠️ If you override the `OnInitializedAsync` method, **you must call** the `base.OnInitializedAsync()` method, > in addition to your personalized code. diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Dialog/FluentDrawer.md b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Dialog/FluentDrawer.md index 674ea0e0fd..86d9fe5b10 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Dialog/FluentDrawer.md +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Dialog/FluentDrawer.md @@ -23,7 +23,8 @@ Once the user closes the dialog window, the `ShowDrawerAsync` method returns a ` 👉 See the [Dialog](/Dialog) documentation for more information. -> **Note:** The `ShowDrawerAsync` method is identical to the `ShowDialogAsync` method. +> [!NOTE] +> The `ShowDrawerAsync` method is identical to the `ShowDialogAsync` method. > With the exception of the **default value** of the `options.Alignment` property, which is `DialogAlignment.End`. > And the resulting HTML code is slightly different, using a `fluent-drawer` instead of a `fluent-dialog`. > The visual rendering and animation of opening and closing is also different. diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Field/FluentField.md b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Field/FluentField.md index 73374c145b..4c73305b66 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Field/FluentField.md +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Field/FluentField.md @@ -64,7 +64,7 @@ the default text and icon (or add an icon in the case of `MessageState = null`). {{ FieldStatesExample }} -⚠️ **Note** that the `MessageCondition` attribute must be set to +[!NOTE] that the `MessageCondition` attribute must be set to `(i) => true` or identical to `FluentFieldCondition.Always`. This enables the message to be displayed, which is not the case by default. diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Layout/FluentLayout.md b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Layout/FluentLayout.md index 202baae858..7cb2fe6efe 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Layout/FluentLayout.md +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Layout/FluentLayout.md @@ -42,7 +42,7 @@ using the [@container](https://developer.mozilla.org/en-US/docs/Web/CSS/@contain Each time the breakpoint is reached, the layout will be updated to reflect the new layout, and the event `OnBreakpointEnter` will be triggered. -**💡 Note**: The `FluentLayout` component can be used with a Blazor static web app or a Blazor interactive app. +[!TIP] The `FluentLayout` component can be used with a Blazor static web app or a Blazor interactive app. The hamburger menu is available in all modes, but the event `OnBreakpointEnter` and the `MenuDeferredLoading` parameter are only available in "interactive mode". ## Sticky Panels diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Tabs/FluentTabs.md b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Tabs/FluentTabs.md index 6682ae9b44..027ac6259c 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Tabs/FluentTabs.md +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/Components/Tabs/FluentTabs.md @@ -13,7 +13,7 @@ and require less scrolling. For navigation beyond closely related categories, use a [FluentLink](/link) instead. To initiate an action, use a [FluentButton](/button) instead. -> **note**: For the moment, there are no 'scrolling' functions when the number of tabs is too large +> [!NOTE] For the moment, there are no 'scrolling' functions when the number of tabs is too large > in relation to the size of the container or screen. ## Default diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Localization.md b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Localization.md index b03dd6b3c8..6d1c1d0ae4 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Localization.md +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Localization.md @@ -44,8 +44,7 @@ Here's a step-by-step guide: } ``` - > **Note:** - > + > [!NOTE] > The list of keys can be found in the `Core\Microsoft.FluentUI.AspNetCore.Components\Localization\LanguageResource.resx` file. > Or you can use a constant from the `Microsoft.FluentUI.AspNetCore.Components.Localization.LanguageResource` class. > Example: `Localization.LanguageResource.MessageBox_ButtonOk`. diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Migration/CopilotInstructionsContent.md b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Migration/CopilotInstructionsContent.md index 766ae677d2..4ae5f2679b 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Migration/CopilotInstructionsContent.md +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Migration/CopilotInstructionsContent.md @@ -12,8 +12,7 @@ Example benefits: - Migrate complete file following new namespacing and new parameters - Renaming old names from v3-v4 to v5 -> ⚠️ Note -> +> [!NOTE] > - This feature is currently in public preview and is subject to change. > - Custom instructions are currently only supported for **Copilot Chat** in **VS Code** and **Visual Studio**. diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Migration/MigrationFluentProgressRing.md b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Migration/MigrationFluentProgressRing.md index 3636f072e2..9b365cc725 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Migration/MigrationFluentProgressRing.md +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Migration/MigrationFluentProgressRing.md @@ -7,7 +7,7 @@ hidden: true The component itself has been renamed from `FluentProgressRing` to `FluentSpinner` to be coherent with the Web Components and React naming conventions. -> **Note:** The new component `FluentSpinner` cannot be paused. It must always be spinning. +> [!NOTE] The new component `FluentSpinner` cannot be paused. It must always be spinning. > So, the `Paused`, `Min`, `Max`, `Value` properties has been removed. ### New properties diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Styles.md b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Styles.md index 88ce32c352..dd8d581aa4 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Styles.md +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Styles.md @@ -54,7 +54,7 @@ If you are creating a site by using our [Templates package](https://www.fluentui this is already set up for you. You can download the file to see what's inside. -> **Note**: It is entirely possible to build a site **without using Reboot** but you will have to do more styling yourself. +> [!NOTE] It is entirely possible to build a site **without using Reboot** but you will have to do more styling yourself. ## Approach diff --git a/examples/Tools/FluentUI.Demo.DocViewer/Components/MarkdownViewer.razor.css b/examples/Tools/FluentUI.Demo.DocViewer/Components/MarkdownViewer.razor.css index e76cd8d8e2..ea9d8431fa 100644 --- a/examples/Tools/FluentUI.Demo.DocViewer/Components/MarkdownViewer.razor.css +++ b/examples/Tools/FluentUI.Demo.DocViewer/Components/MarkdownViewer.razor.css @@ -50,8 +50,35 @@ border-left: 6px solid var(--colorBrandBackground); } - /* Code */ + /* Keywords */ + .doc-viewer ::deep span[keyword] { + font-weight: 600; + display: flex; + align-items: center; + column-gap: 4px; + } + + .doc-viewer ::deep blockquote:has(span[keyword="note"]) { + background-color: var(--colorBrandBackground2); + border-left: 6px solid var(--colorBrandBackground); + } + + .doc-viewer ::deep blockquote:has(span[keyword="tip"]) { + background-color: var(--colorPaletteDarkGreenBackground2); + border-left: 6px solid var(--colorPaletteDarkGreenBorderActive); + } + + .doc-viewer ::deep blockquote:has(span[keyword="warn"]) { + background-color: var(--colorPaletteGoldBackground2); + border-left: 6px solid var(--colorPaletteGoldBorderActive); + } + .doc-viewer ::deep span[keyword] svg { + fill: var(--colorNeutralForeground1); + width: 20px; + height: 20px; + } + /* Code */ .doc-viewer ::deep code { font-weight: 500; background-color: var(--colorNeutralBackground5); @@ -87,9 +114,7 @@ .doc-viewer ::deep pre code[source][class*="hljs"] { display: block; } - /* Demo Section */ - .doc-viewer ::deep .demo-tabs { min-height: 100px; } @@ -100,9 +125,7 @@ padding: 16px 16px; margin: 8px 0px; } - /* API Summary */ - .doc-viewer ::deep .api-summary { background-color: var(--colorNeutralBackground4); max-width: calc(100vw - 32px); @@ -112,9 +135,7 @@ .doc-viewer ::deep .api-summary * { margin: 0px; } - /* API table */ - .doc-viewer ::deep .api-table { width: 100%; max-width: calc(100vw - 32px); @@ -170,7 +191,6 @@ width: 20px; height: 20px; } - /* No Columns, for Methods view (same styles as Mobile */ .doc-viewer ::deep .api-table[no-col] tr { display: flex; @@ -179,8 +199,7 @@ margin-bottom: 10px; } - .doc-viewer ::deep .api-table[no-col] td, - .doc-viewer ::deep .api-table[no-col] th { + .doc-viewer ::deep .api-table[no-col] td, .doc-viewer ::deep .api-table[no-col] th { display: none; flex-wrap: wrap; white-space: normal; @@ -204,9 +223,7 @@ display: block; margin-left: 24px; } - /* Mobile */ - @media(max-width: 768px) { .doc-viewer ::deep .api-table tr { diff --git a/examples/Tools/FluentUI.Demo.DocViewer/Models/Section.cs b/examples/Tools/FluentUI.Demo.DocViewer/Models/Section.cs index a7b8d33291..1f97adb2c8 100644 --- a/examples/Tools/FluentUI.Demo.DocViewer/Models/Section.cs +++ b/examples/Tools/FluentUI.Demo.DocViewer/Models/Section.cs @@ -133,7 +133,7 @@ public Task
ReadAsync(string content) // Text / HTML section else { - Value = content; + Value = ReplaceMarkupKeyWord(content); Type = SectionType.Html; Arguments = new Dictionary(); } @@ -173,4 +173,23 @@ private static (string Name, Dictionary Arguments) ParseComponen return (componentName, dict); } + + /// + private static string ReplaceMarkupKeyWord(string content) + { + const string NOTE_ICON = ""; + const string WARN_ICON = NOTE_ICON; + const string TIP_ICON = ""; + + content = Regex.Replace(content, @"\[!NOTE\]", $"{NOTE_ICON}Note", RegexOptions.IgnoreCase); + content = Regex.Replace(content, @"\[!NOTE_ICON\]", $"{NOTE_ICON}", RegexOptions.IgnoreCase); + + content = Regex.Replace(content, @"\[!WARNING\]", $"{WARN_ICON}Warning", RegexOptions.IgnoreCase); + content = Regex.Replace(content, @"\[!WARNING_ICON\]", $"{WARN_ICON}", RegexOptions.IgnoreCase); + + content = Regex.Replace(content, @"\[!TIP\]", $"{TIP_ICON}Tip", RegexOptions.IgnoreCase); + content = Regex.Replace(content, @"\[!TIP_ICON\]", $"{TIP_ICON}", RegexOptions.IgnoreCase); + + return content; + } }