Skip to content

[dev-v5] Add markdown shortcuts [!NOTE], [!TIP] and [!WARNING] #3770

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
May 9, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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`.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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**.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 <a href="/_content/Microsoft.FluentUI.AspNetCore.Components/css/reboot.css" target="_blank">download the file</a> 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

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -87,9 +114,7 @@
.doc-viewer ::deep pre code[source][class*="hljs"] {
display: block;
}

/* Demo Section */

.doc-viewer ::deep .demo-tabs {
min-height: 100px;
}
Expand All @@ -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);
Expand All @@ -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);
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -204,9 +223,7 @@
display: block;
margin-left: 24px;
}

/* Mobile */

@media(max-width: 768px) {

.doc-viewer ::deep .api-table tr {
Expand Down
21 changes: 20 additions & 1 deletion examples/Tools/FluentUI.Demo.DocViewer/Models/Section.cs
Original file line number Diff line number Diff line change
Expand Up @@ -133,7 +133,7 @@ public Task<Section> ReadAsync(string content)
// Text / HTML section
else
{
Value = content;
Value = ReplaceMarkupKeyWord(content);
Type = SectionType.Html;
Arguments = new Dictionary<string, string>();
}
Expand Down Expand Up @@ -173,4 +173,23 @@ private static (string Name, Dictionary<string, string> Arguments) ParseComponen

return (componentName, dict);
}

/// <summary />
private static string ReplaceMarkupKeyWord(string content)
{
const string NOTE_ICON = "<svg viewBox=\"0 0 16 16\"><path d=\"M8 2a6 6 0 1 1 0 12A6 6 0 0 1 8 2Zm0 1a5 5 0 1 0 0 10A5 5 0 0 0 8 3Zm0 7a.75.75 0 1 1 0 1.5.75.75 0 0 1 0-1.5Zm0-5.5a.5.5 0 0 1 .5.41V8.5a.5.5 0 0 1-1 .09V5c0-.28.22-.5.5-.5Z\" /></svg>";
const string WARN_ICON = NOTE_ICON;
const string TIP_ICON = "<svg viewBox=\"0 0 16 16\"><path d=\"M4.5 6.5A3.5 3.5 0 1 1 10.45 9c-.19.19-.36.43-.44.73L9.66 11H6.34l-.35-1.27c-.08-.3-.25-.54-.44-.73A3.49 3.49 0 0 1 4.5 6.5ZM6.6 12h2.8l-.18.63a.5.5 0 0 1-.48.37H7.26a.5.5 0 0 1-.48-.37L6.61 12ZM8 2a4.5 4.5 0 0 0-3.16 7.7c.1.1.16.2.19.3l.79 2.9c.17.65.77 1.1 1.44 1.1h1.48a1.5 1.5 0 0 0 1.44-1.1l.8-2.9c.02-.1.08-.2.18-.3A4.49 4.49 0 0 0 8 2Z\" /></svg>";

content = Regex.Replace(content, @"\[!NOTE\]", $"<span keyword=\"note\">{NOTE_ICON}Note</span>", RegexOptions.IgnoreCase);
content = Regex.Replace(content, @"\[!NOTE_ICON\]", $"<span keyword=\"note\">{NOTE_ICON}</span>", RegexOptions.IgnoreCase);

content = Regex.Replace(content, @"\[!WARNING\]", $"<span keyword=\"warn\">{WARN_ICON}Warning</span>", RegexOptions.IgnoreCase);
content = Regex.Replace(content, @"\[!WARNING_ICON\]", $"<span keyword=\"warn\">{WARN_ICON}</span>", RegexOptions.IgnoreCase);

content = Regex.Replace(content, @"\[!TIP\]", $"<span keyword=\"tip\">{TIP_ICON}Tip</span>", RegexOptions.IgnoreCase);
content = Regex.Replace(content, @"\[!TIP_ICON\]", $"<span keyword=\"tip\">{TIP_ICON}</span>", RegexOptions.IgnoreCase);

return content;
}
}