From 2833f718c0ca8b122d83edb4f5712a33e2a6b539 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Sat, 4 Jul 2026 15:16:18 +0200 Subject: [PATCH 1/8] Initial work to add a sticker sheet containg aal components (with a ui) --- .../Cards/FluentAccordionCard.razor | 10 ++ .../Cards/FluentAnchorButtonCard.razor | 17 +++ .../GetStarted/Cards/FluentAppBarCard.razor | 49 ++++++++ .../Cards/FluentAutocompleteCard.razor | 22 ++++ .../GetStarted/Cards/FluentAvatarCard.razor | 6 + .../GetStarted/Cards/FluentBadgeCard.razor | 14 +++ .../GetStarted/Cards/FluentButtonCard.razor | 17 +++ .../GetStarted/Cards/FluentCalendarCard.razor | 1 + .../GetStarted/Cards/FluentCardCard.razor | 5 + .../GetStarted/Cards/FluentCheckboxCard.razor | 13 +++ .../Cards/FluentColorPickerCard.razor | 1 + .../GetStarted/Cards/FluentComboboxCard.razor | 1 + .../Cards/FluentCompoundButtonCard.razor | 1 + .../Cards/FluentCounterBadgeCard.razor | 1 + .../GetStarted/Cards/FluentDataGridCard.razor | 1 + .../Cards/FluentDatePickerCard.razor | 1 + .../GetStarted/Cards/FluentDialogCard.razor | 1 + .../GetStarted/Cards/FluentDividerCard.razor | 12 ++ .../GetStarted/Cards/FluentEmojiCard.razor | 1 + .../GetStarted/Cards/FluentFieldCard.razor | 3 + .../Cards/FluentFormValidationCard.razor | 26 +++++ .../Cards/FluentHighlighterCard.razor | 1 + .../GetStarted/Cards/FluentIconCard.razor | 1 + .../GetStarted/Cards/FluentImageCard.razor | 1 + .../Cards/FluentInputFileCard.razor | 1 + .../GetStarted/Cards/FluentLabelCard.razor | 1 + .../Cards/FluentLabelInfoCard.razor | 1 + .../GetStarted/Cards/FluentLinkCard.razor | 1 + .../GetStarted/Cards/FluentListBaseCard.razor | 1 + .../GetStarted/Cards/FluentListboxCard.razor | 1 + .../Cards/FluentMenuButtonCard.razor | 1 + .../GetStarted/Cards/FluentMenuCard.razor | 1 + .../Cards/FluentMessageBarCard.razor | 1 + .../Cards/FluentMessageBarProviderCard.razor | 1 + .../Cards/FluentMessageBoxCard.razor | 1 + .../Cards/FluentMultiSplitterCard.razor | 1 + .../GetStarted/Cards/FluentNavCard.razor | 1 + .../Cards/FluentNumberInputCard.razor | 1 + .../GetStarted/Cards/FluentOptionCard.razor | 1 + .../GetStarted/Cards/FluentOverflowCard.razor | 1 + .../Cards/FluentOverflowItemCard.razor | 1 + .../GetStarted/Cards/FluentOverlayCard.razor | 1 + .../Cards/FluentPaginatorCard.razor | 1 + .../GetStarted/Cards/FluentPopoverCard.razor | 1 + .../Cards/FluentPresenceBadgeCard.razor | 1 + .../Cards/FluentProgressBarCard.razor | 1 + .../Cards/FluentPullToRefreshCard.razor | 1 + .../Cards/FluentRadioGroupCard.razor | 1 + .../Cards/FluentRatingDisplayCard.razor | 1 + .../GetStarted/Cards/FluentSelectCard.razor | 1 + .../GetStarted/Cards/FluentSkeletonCard.razor | 1 + .../GetStarted/Cards/FluentSliderCard.razor | 1 + .../Cards/FluentSortableListCard.razor | 1 + .../GetStarted/Cards/FluentSpinnerCard.razor | 1 + .../Cards/FluentSplitButtonCard.razor | 1 + .../GetStarted/Cards/FluentSwitchCard.razor | 1 + .../GetStarted/Cards/FluentTabsCard.razor | 1 + .../GetStarted/Cards/FluentTextAreaCard.razor | 1 + .../GetStarted/Cards/FluentTextCard.razor | 1 + .../Cards/FluentTextInputCard.razor | 1 + .../Cards/FluentTimePickerCard.razor | 1 + .../GetStarted/Cards/FluentToastCard.razor | 1 + .../Cards/FluentToggleButtonCard.razor | 1 + .../GetStarted/Cards/FluentTooltipCard.razor | 1 + .../GetStarted/Cards/FluentTreeViewCard.razor | 1 + .../GetStarted/Cards/FluentWizardCard.razor | 1 + .../Documentation/GetStarted/StickerSheet.md | 17 +++ .../GetStarted/StickerSheet.razor | 110 ++++++++++++++++++ .../Demo/FluentUI.Demo.Client/wwwroot/app.css | 92 ++++++++++----- 69 files changed, 440 insertions(+), 27 deletions(-) create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentAccordionCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentAnchorButtonCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentAppBarCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentAutocompleteCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentAvatarCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentBadgeCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentButtonCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCalendarCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCardCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCheckboxCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentColorPickerCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentComboboxCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCompoundButtonCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCounterBadgeCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDataGridCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDatePickerCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDialogCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDividerCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentEmojiCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentFieldCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentFormValidationCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentHighlighterCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentIconCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentImageCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentInputFileCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentLabelCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentLabelInfoCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentLinkCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentListBaseCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentListboxCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMenuButtonCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMenuCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMessageBarCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMessageBarProviderCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMessageBoxCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMultiSplitterCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentNavCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentNumberInputCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOptionCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOverflowCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOverflowItemCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOverlayCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPaginatorCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPopoverCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPresenceBadgeCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentProgressBarCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPullToRefreshCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentRadioGroupCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentRatingDisplayCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSelectCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSkeletonCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSliderCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSortableListCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSpinnerCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSplitButtonCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSwitchCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTabsCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTextAreaCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTextCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTextInputCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTimePickerCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentToastCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentToggleButtonCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTooltipCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTreeViewCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentWizardCard.razor create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/StickerSheet.md create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/StickerSheet.razor diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentAccordionCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentAccordionCard.razor new file mode 100644 index 0000000000..14acb028cb --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentAccordionCard.razor @@ -0,0 +1,10 @@ +
+ + + Accordion panel 1 + + + Accordion panel 2 + + +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentAnchorButtonCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentAnchorButtonCard.razor new file mode 100644 index 0000000000..75516b6e70 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentAnchorButtonCard.razor @@ -0,0 +1,17 @@ +
+ + Default + + + Primary + + + Outline + + + Subtle + + + Transparent + +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentAppBarCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentAppBarCard.razor new file mode 100644 index 0000000000..c74f2937c0 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentAppBarCard.razor @@ -0,0 +1,49 @@ +
+ + + + + + + + +
+ +@code { + private static Icon ResourcesIcon(bool active = false) => + active ? new Icons.Filled.Size24.AppFolder() + : new Icons.Regular.Size24.AppFolder(); + + private static Icon ConsoleLogsIcon(bool active = false) => + active ? new Icons.Filled.Size24.SlideText() + : new Icons.Regular.Size24.SlideText(); + + private static Icon StructuredLogsIcon(bool active = false) => + active ? new Icons.Filled.Size24.SlideTextSparkle() + : new Icons.Regular.Size24.SlideTextSparkle(); + + private static Icon TracesIcon(bool active = false) => + active ? new Icons.Filled.Size24.GanttChart() + : new Icons.Regular.Size24.GanttChart(); + + private static Icon MetricsIcon(bool active = false) => + active ? new Icons.Filled.Size24.ChartMultiple() + : new Icons.Regular.Size24.ChartMultiple(); + private static Icon StickerSheetIcon(bool active = false) => + active ? new Icons.Filled.Size24.Sticker() + : new Icons.Regular.Size24.Sticker(); +} diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentAutocompleteCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentAutocompleteCard.razor new file mode 100644 index 0000000000..4d946c151a --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentAutocompleteCard.razor @@ -0,0 +1,22 @@ +@using static FluentUI.Demo.SampleData.Olympics2024 +
+ + +
+@code +{ + Task OnSearchAsync(OptionsSearchEventArgs e) + { + e.Items = Countries.Where(i => i.Name.StartsWith(e.Text, StringComparison.OrdinalIgnoreCase)) + .OrderBy(i => i.Name); + + return Task.CompletedTask; + } +} diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentAvatarCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentAvatarCard.razor new file mode 100644 index 0000000000..c3a60245e9 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentAvatarCard.razor @@ -0,0 +1,6 @@ +
+ + + + +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentBadgeCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentBadgeCard.razor new file mode 100644 index 0000000000..e9658cce7c --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentBadgeCard.razor @@ -0,0 +1,14 @@ +
+ + Filled + + + Ghost + + + Outline + + + Tint + +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentButtonCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentButtonCard.razor new file mode 100644 index 0000000000..00cd3ed070 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentButtonCard.razor @@ -0,0 +1,17 @@ +
+ + Default + + + Primary + + + Outline + + + Subtle + + + Transparent + +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCalendarCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCalendarCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCalendarCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCardCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCardCard.razor new file mode 100644 index 0000000000..58f8b2625d --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCardCard.razor @@ -0,0 +1,5 @@ +
+ + Hello! This is a card. + +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCheckboxCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCheckboxCard.razor new file mode 100644 index 0000000000..cf6c0e37e9 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCheckboxCard.razor @@ -0,0 +1,13 @@ +
+ + + + +
+ +@code { + bool value1 = true; + bool value2 = true; + bool value3; + bool? value4; +} diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentColorPickerCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentColorPickerCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentColorPickerCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentComboboxCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentComboboxCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentComboboxCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCompoundButtonCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCompoundButtonCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCompoundButtonCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCounterBadgeCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCounterBadgeCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCounterBadgeCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDataGridCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDataGridCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDataGridCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDatePickerCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDatePickerCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDatePickerCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDialogCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDialogCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDialogCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDividerCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDividerCard.razor new file mode 100644 index 0000000000..4c393effe5 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDividerCard.razor @@ -0,0 +1,12 @@ +
+ + + Text + + + Brand + + + Subtle + +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentEmojiCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentEmojiCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentEmojiCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentFieldCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentFieldCard.razor new file mode 100644 index 0000000000..79f3776337 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentFieldCard.razor @@ -0,0 +1,3 @@ +
+ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentFormValidationCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentFormValidationCard.razor new file mode 100644 index 0000000000..85394ae4d4 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentFormValidationCard.razor @@ -0,0 +1,26 @@ +@using System.ComponentModel.DataAnnotations + + + + + + +
+ +
+ + Submit + + + +@code { + private class Model + { + [Required] + [StringLength(10, MinimumLength = 3, ErrorMessage = "Identifier must be between 3 and 10 characters.")] + public string Identifier { get; set; } = string.Empty; + } + + private Model model = new Model(); + +} diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentHighlighterCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentHighlighterCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentHighlighterCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentIconCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentIconCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentIconCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentImageCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentImageCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentImageCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentInputFileCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentInputFileCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentInputFileCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentLabelCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentLabelCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentLabelCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentLabelInfoCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentLabelInfoCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentLabelInfoCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentLinkCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentLinkCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentLinkCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentListBaseCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentListBaseCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentListBaseCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentListboxCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentListboxCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentListboxCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMenuButtonCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMenuButtonCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMenuButtonCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMenuCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMenuCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMenuCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMessageBarCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMessageBarCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMessageBarCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMessageBarProviderCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMessageBarProviderCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMessageBarProviderCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMessageBoxCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMessageBoxCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMessageBoxCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMultiSplitterCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMultiSplitterCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMultiSplitterCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentNavCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentNavCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentNavCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentNumberInputCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentNumberInputCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentNumberInputCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOptionCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOptionCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOptionCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOverflowCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOverflowCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOverflowCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOverflowItemCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOverflowItemCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOverflowItemCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOverlayCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOverlayCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOverlayCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPaginatorCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPaginatorCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPaginatorCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPopoverCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPopoverCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPopoverCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPresenceBadgeCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPresenceBadgeCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPresenceBadgeCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentProgressBarCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentProgressBarCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentProgressBarCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPullToRefreshCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPullToRefreshCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPullToRefreshCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentRadioGroupCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentRadioGroupCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentRadioGroupCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentRatingDisplayCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentRatingDisplayCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentRatingDisplayCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSelectCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSelectCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSelectCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSkeletonCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSkeletonCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSkeletonCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSliderCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSliderCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSliderCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSortableListCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSortableListCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSortableListCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSpinnerCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSpinnerCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSpinnerCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSplitButtonCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSplitButtonCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSplitButtonCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSwitchCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSwitchCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSwitchCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTabsCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTabsCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTabsCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTextAreaCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTextAreaCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTextAreaCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTextCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTextCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTextCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTextInputCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTextInputCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTextInputCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTimePickerCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTimePickerCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTimePickerCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentToastCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentToastCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentToastCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentToggleButtonCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentToggleButtonCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentToggleButtonCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTooltipCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTooltipCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTooltipCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTreeViewCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTreeViewCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTreeViewCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentWizardCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentWizardCard.razor new file mode 100644 index 0000000000..b66cded87b --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentWizardCard.razor @@ -0,0 +1 @@ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/StickerSheet.md b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/StickerSheet.md new file mode 100644 index 0000000000..bf3bff0653 --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/StickerSheet.md @@ -0,0 +1,17 @@ +--- +title: Sticker Sheet +order: 0004 +category: 10|Get Started +route: /sticker-sheet +icon: Sticker +--- + +# Sticker Sheet + +All* the Fluent UI Blazor Components on one page! Overlay components like Dialog and Drawer render a trigger button; click it to open them. + +Many of the components have additional options that can greatly alter the way they look and behave. Use the navigation menu to go to each component's documentation page for more details. + +_* Components that require additional setup or context to function properly or that do not have a simple visual representation are not included in this sticker sheet._ + +{{ StickerSheet sourcecode=false }} diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/StickerSheet.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/StickerSheet.razor new file mode 100644 index 0000000000..b45aa86caa --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/StickerSheet.razor @@ -0,0 +1,110 @@ +@using FluentUI.Demo.Client.Documentation.GetStarted.Cards +
+ @foreach(var card in cards) + { +
+ @card.Title + +
+ } +
+ +@code { + private List cards = new List(); + + protected override void OnInitialized() + { + cards.Add(new StickerCard { Title = "Accordion", Type = typeof(FluentAccordionCard) }); + cards.Add(new StickerCard { Title = "Anchor Button", Type = typeof(FluentAnchorButtonCard) }); + cards.Add(new StickerCard { Title = "App Bar", Type = typeof(FluentAppBarCard) }); + cards.Add(new StickerCard { Title = "Autocomplete", Type = typeof(FluentAutocompleteCard) }); + cards.Add(new StickerCard { Title = "Avatar", Type = typeof(FluentAvatarCard) }); + + cards.Add(new StickerCard { Title = "Badge", Type = typeof(FluentBadgeCard) }); + cards.Add(new StickerCard { Title = "Button", Type = typeof(FluentButtonCard) }); + + cards.Add(new StickerCard { Title = "Calendar", Type = typeof(FluentCalendarCard) }); + cards.Add(new StickerCard { Title = "Card", Type = typeof(FluentCardCard) }); + + cards.Add(new StickerCard { Title = "Checkbox", Type = typeof(FluentCheckboxCard) }); + cards.Add(new StickerCard { Title = "ColorPicker", Type = typeof(FluentColorPickerCard) }); + cards.Add(new StickerCard { Title = "ComboBox", Type = typeof(FluentComboboxCard) }); + cards.Add(new StickerCard { Title = "Compound Button", Type = typeof(FluentCompoundButtonCard) }); + cards.Add(new StickerCard { Title = "Counter Badge", Type = typeof(FluentCounterBadgeCard) }); + + cards.Add(new StickerCard { Title = "Data Grid", Type = typeof(FluentDataGridCard) }); + cards.Add(new StickerCard { Title = "Date Picker", Type = typeof(FluentDatePickerCard) }); + cards.Add(new StickerCard { Title = "Dialog", Type = typeof(FluentDialogCard) }); + cards.Add(new StickerCard { Title = "Divider", Type = typeof(FluentDividerCard) }); + + cards.Add(new StickerCard { Title = "Emoji", Type = typeof(FluentEmojiCard) }); + + cards.Add(new StickerCard { Title = "Field", Type = typeof(FluentFieldCard) }); + + cards.Add(new StickerCard { Title = "Highlighter", Type = typeof(FluentHighlighterCard) }); + + cards.Add(new StickerCard { Title = "Icon", Type = typeof(FluentIconCard) }); + cards.Add(new StickerCard { Title = "Image", Type = typeof(FluentImageCard) }); + cards.Add(new StickerCard { Title = "Input File", Type = typeof(FluentInputFileCard) }); + + cards.Add(new StickerCard { Title = "Label Info", Type = typeof(FluentLabelInfoCard) }); + cards.Add(new StickerCard { Title = "Label", Type = typeof(FluentLabelCard) }); + cards.Add(new StickerCard { Title = "Link", Type = typeof(FluentLinkCard) }); + cards.Add(new StickerCard { Title = "List Base", Type = typeof(FluentListBaseCard) }); + cards.Add(new StickerCard { Title = "Listbox", Type = typeof(FluentListboxCard) }); + + cards.Add(new StickerCard { Title = "Menu Button", Type = typeof(FluentMenuButtonCard) }); + cards.Add(new StickerCard { Title = "Menu", Type = typeof(FluentMenuCard) }); + cards.Add(new StickerCard { Title = "Message Bar Provider", Type = typeof(FluentMessageBarProviderCard) }); + cards.Add(new StickerCard { Title = "Message Bar", Type = typeof(FluentMessageBarCard) }); + cards.Add(new StickerCard { Title = "Message Box", Type = typeof(FluentMessageBoxCard) }); + cards.Add(new StickerCard { Title = "Multi Splitter", Type = typeof(FluentMultiSplitterCard) }); + + cards.Add(new StickerCard { Title = "Nav", Type = typeof(FluentNavCard) }); + cards.Add(new StickerCard { Title = "Number Input", Type = typeof(FluentNumberInputCard) }); + + cards.Add(new StickerCard { Title = "Option", Type = typeof(FluentOptionCard) }); + cards.Add(new StickerCard { Title = "Overflow Item", Type = typeof(FluentOverflowItemCard) }); + cards.Add(new StickerCard { Title = "Overflow", Type = typeof(FluentOverflowCard) }); + cards.Add(new StickerCard { Title = "Overlay", Type = typeof(FluentOverlayCard) }); + + cards.Add(new StickerCard { Title = "Paginator", Type = typeof(FluentPaginatorCard) }); + cards.Add(new StickerCard { Title = "Popover", Type = typeof(FluentPopoverCard) }); + cards.Add(new StickerCard { Title = "Presence Badge", Type = typeof(FluentPresenceBadgeCard) }); + cards.Add(new StickerCard { Title = "Progress Bar", Type = typeof(FluentProgressBarCard) }); + cards.Add(new StickerCard { Title = "Pull To Refresh", Type = typeof(FluentPullToRefreshCard) }); + + cards.Add(new StickerCard { Title = "Radio Group", Type = typeof(FluentRadioGroupCard) }); + cards.Add(new StickerCard { Title = "Rating Display", Type = typeof(FluentRatingDisplayCard) }); + + cards.Add(new StickerCard { Title = "Select", Type = typeof(FluentSelectCard) }); + cards.Add(new StickerCard { Title = "Skeleton", Type = typeof(FluentSkeletonCard) }); + cards.Add(new StickerCard { Title = "Slider", Type = typeof(FluentSliderCard) }); + cards.Add(new StickerCard { Title = "Sortable List", Type = typeof(FluentSortableListCard) }); + cards.Add(new StickerCard { Title = "Spinner", Type = typeof(FluentSpinnerCard) }); + cards.Add(new StickerCard { Title = "Split Button", Type = typeof(FluentSplitButtonCard) }); + cards.Add(new StickerCard { Title = "Switch", Type = typeof(FluentSwitchCard) }); + + cards.Add(new StickerCard { Title = "Tabs", Type = typeof(FluentTabsCard) }); + cards.Add(new StickerCard { Title = "Text Area", Type = typeof(FluentTextAreaCard) }); + cards.Add(new StickerCard { Title = "Text Input", Type = typeof(FluentTextInputCard) }); + cards.Add(new StickerCard { Title = "Text", Type = typeof(FluentTextCard) }); + cards.Add(new StickerCard { Title = "Time Picker", Type = typeof(FluentTimePickerCard) }); + cards.Add(new StickerCard { Title = "Toast", Type = typeof(FluentToastCard) }); + cards.Add(new StickerCard { Title = "Toggle Button", Type = typeof(FluentToggleButtonCard) }); + cards.Add(new StickerCard { Title = "Tooltip", Type = typeof(FluentTooltipCard) }); + cards.Add(new StickerCard { Title = "Tree View", Type = typeof(FluentTreeViewCard) }); + + cards.Add(new StickerCard { Title = "Validation", Type = typeof(FluentFormValidationCard) }); + + cards.Add(new StickerCard { Title = "Wizard", Type = typeof(FluentWizardCard) }); + + } + + + private class StickerCard + { + public string? Title { get; set; } + public Type? Type { get; set; } + } +} diff --git a/examples/Demo/FluentUI.Demo.Client/wwwroot/app.css b/examples/Demo/FluentUI.Demo.Client/wwwroot/app.css index a30d3de7e9..e87ce727d7 100644 --- a/examples/Demo/FluentUI.Demo.Client/wwwroot/app.css +++ b/examples/Demo/FluentUI.Demo.Client/wwwroot/app.css @@ -23,9 +23,9 @@ body { --demo-notification-height: 0px; } -body:has(fluent-message-bar.demo-notification) { - --demo-notification-height: 60px; -} + body:has(fluent-message-bar.demo-notification) { + --demo-notification-height: 60px; + } .demo-notification { height: var(--demo-notification-height); @@ -49,12 +49,12 @@ body:has(fluent-message-bar.demo-notification) { z-index: 1000; } -#blazor-error-ui .dismiss { - cursor: pointer; - position: absolute; - right: 0.75rem; - top: 0.5rem; -} + #blazor-error-ui .dismiss { + cursor: pointer; + position: absolute; + right: 0.75rem; + top: 0.5rem; + } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; @@ -62,9 +62,9 @@ body:has(fluent-message-bar.demo-notification) { color: white; } -.blazor-error-boundary::after { - content: "An error has occurred." -} + .blazor-error-boundary::after { + content: "An error has occurred." + } /* loading-progress */ @@ -76,19 +76,19 @@ body:has(fluent-message-bar.demo-notification) { margin: 20vh auto 1rem auto; } -.loading-progress circle { - fill: none; - stroke: #e0e0e0; - stroke-width: 0.6rem; - transform-origin: 50% 50%; - transform: rotate(-90deg); -} + .loading-progress circle { + fill: none; + stroke: #e0e0e0; + stroke-width: 0.6rem; + transform-origin: 50% 50%; + transform: rotate(-90deg); + } -.loading-progress circle:last-child { - stroke: #1b6ec2; - stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; - transition: stroke-dasharray 0.05s ease-in-out; -} + .loading-progress circle:last-child { + stroke: #1b6ec2; + stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; + transition: stroke-dasharray 0.05s ease-in-out; + } .loading-progress-text { position: absolute; @@ -97,6 +97,44 @@ body:has(fluent-message-bar.demo-notification) { inset: calc(20vh + 3.25rem) 0 auto 0.2rem; } -.loading-progress-text:after { - content: var(--blazor-load-percentage-text, "Loading"); -} \ No newline at end of file + .loading-progress-text:after { + content: var(--blazor-load-percentage-text, "Loading"); + } + +.sticker-sheet-root { + background: var(--colorNeutralBackground2); + color: var(--colorNeutralForeground1); + padding: var(--spacingVerticalXL) var(--spacingHorizontalXL); + border-radius: var(--borderRadiusXLarge); +} + +.sticker-sheet { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(370px, 1fr)); + gap: var(--spacingHorizontalL); + padding: var(--spacingVerticalS) 0 var(--spacingVerticalXXXL); +} + +.sticker-card { + border: var(--strokeWidthThin) solid var(--colorNeutralStroke2); + border-radius: var(--borderRadiusXLarge); + padding: var(--spacingVerticalL) var(--spacingHorizontalL); + background: var(--colorNeutralBackground1); + display: inline-flex; + flex-direction: column; + gap: var(--spacingVerticalM); +} + +.sticker-row { + display: flex; + flex-wrap: wrap; + gap: var(--spacingHorizontalM); + align-items: center; +} + +.sticker-col { + display: flex; + flex-direction: column; + gap: var(--spacingVerticalM); + align-items: stretch; +} From 5b099183be4700c1734bb0b4771ec4c6b583eeee Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Sat, 4 Jul 2026 16:48:51 +0200 Subject: [PATCH 2/8] Add a messag to empty cards --- .../Documentation/GetStarted/Cards/FluentCalendarCard.razor | 2 +- .../GetStarted/Cards/FluentColorPickerCard.razor | 2 +- .../Documentation/GetStarted/Cards/FluentComboboxCard.razor | 2 +- .../GetStarted/Cards/FluentCompoundButtonCard.razor | 2 +- .../GetStarted/Cards/FluentCounterBadgeCard.razor | 2 +- .../Documentation/GetStarted/Cards/FluentDataGridCard.razor | 2 +- .../Documentation/GetStarted/Cards/FluentDatePickerCard.razor | 2 +- .../Documentation/GetStarted/Cards/FluentDialogCard.razor | 2 +- .../Documentation/GetStarted/Cards/FluentEmojiCard.razor | 2 +- .../GetStarted/Cards/FluentHighlighterCard.razor | 2 +- .../Documentation/GetStarted/Cards/FluentIconCard.razor | 2 +- .../Documentation/GetStarted/Cards/FluentImageCard.razor | 2 +- .../Documentation/GetStarted/Cards/FluentInputFileCard.razor | 2 +- .../Documentation/GetStarted/Cards/FluentLabelCard.razor | 2 +- .../Documentation/GetStarted/Cards/FluentLabelInfoCard.razor | 2 +- .../Documentation/GetStarted/Cards/FluentLinkCard.razor | 2 +- .../Documentation/GetStarted/Cards/FluentListBaseCard.razor | 2 +- .../Documentation/GetStarted/Cards/FluentListboxCard.razor | 2 +- .../Documentation/GetStarted/Cards/FluentMenuButtonCard.razor | 2 +- .../Documentation/GetStarted/Cards/FluentMenuCard.razor | 2 +- .../Documentation/GetStarted/Cards/FluentMessageBarCard.razor | 2 +- .../GetStarted/Cards/FluentMessageBarProviderCard.razor | 2 +- .../Documentation/GetStarted/Cards/FluentMessageBoxCard.razor | 2 +- .../GetStarted/Cards/FluentMultiSplitterCard.razor | 2 +- .../Documentation/GetStarted/Cards/FluentNavCard.razor | 2 +- .../GetStarted/Cards/FluentNumberInputCard.razor | 2 +- .../Documentation/GetStarted/Cards/FluentOptionCard.razor | 2 +- .../Documentation/GetStarted/Cards/FluentOverflowCard.razor | 2 +- .../GetStarted/Cards/FluentOverflowItemCard.razor | 2 +- .../Documentation/GetStarted/Cards/FluentOverlayCard.razor | 2 +- .../Documentation/GetStarted/Cards/FluentPaginatorCard.razor | 2 +- .../Documentation/GetStarted/Cards/FluentPopoverCard.razor | 2 +- .../GetStarted/Cards/FluentPresenceBadgeCard.razor | 2 +- .../GetStarted/Cards/FluentProgressBarCard.razor | 2 +- .../GetStarted/Cards/FluentPullToRefreshCard.razor | 2 +- .../Documentation/GetStarted/Cards/FluentRadioGroupCard.razor | 2 +- .../GetStarted/Cards/FluentRatingDisplayCard.razor | 2 +- .../Documentation/GetStarted/Cards/FluentSelectCard.razor | 2 +- .../Documentation/GetStarted/Cards/FluentSkeletonCard.razor | 2 +- .../Documentation/GetStarted/Cards/FluentSliderCard.razor | 2 +- .../GetStarted/Cards/FluentSortableListCard.razor | 2 +- .../Documentation/GetStarted/Cards/FluentSpinnerCard.razor | 2 +- .../GetStarted/Cards/FluentSplitButtonCard.razor | 2 +- .../Documentation/GetStarted/Cards/FluentSwitchCard.razor | 2 +- .../Documentation/GetStarted/Cards/FluentTabsCard.razor | 2 +- .../Documentation/GetStarted/Cards/FluentTextAreaCard.razor | 2 +- .../Documentation/GetStarted/Cards/FluentTextCard.razor | 2 +- .../Documentation/GetStarted/Cards/FluentTextInputCard.razor | 2 +- .../Documentation/GetStarted/Cards/FluentTimePickerCard.razor | 2 +- .../Documentation/GetStarted/Cards/FluentToastCard.razor | 2 +- .../GetStarted/Cards/FluentToggleButtonCard.razor | 2 +- .../Documentation/GetStarted/Cards/FluentTooltipCard.razor | 2 +- .../Documentation/GetStarted/Cards/FluentTreeViewCard.razor | 2 +- .../Documentation/GetStarted/Cards/FluentWizardCard.razor | 2 +- .../Documentation/GetStarted/StickerSheet.razor | 4 ++-- 55 files changed, 56 insertions(+), 56 deletions(-) diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCalendarCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCalendarCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCalendarCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCalendarCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentColorPickerCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentColorPickerCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentColorPickerCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentColorPickerCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentComboboxCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentComboboxCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentComboboxCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentComboboxCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCompoundButtonCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCompoundButtonCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCompoundButtonCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCompoundButtonCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCounterBadgeCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCounterBadgeCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCounterBadgeCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCounterBadgeCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDataGridCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDataGridCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDataGridCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDataGridCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDatePickerCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDatePickerCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDatePickerCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDatePickerCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDialogCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDialogCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDialogCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDialogCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentEmojiCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentEmojiCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentEmojiCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentEmojiCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentHighlighterCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentHighlighterCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentHighlighterCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentHighlighterCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentIconCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentIconCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentIconCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentIconCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentImageCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentImageCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentImageCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentImageCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentInputFileCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentInputFileCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentInputFileCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentInputFileCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentLabelCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentLabelCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentLabelCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentLabelCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentLabelInfoCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentLabelInfoCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentLabelInfoCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentLabelInfoCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentLinkCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentLinkCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentLinkCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentLinkCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentListBaseCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentListBaseCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentListBaseCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentListBaseCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentListboxCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentListboxCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentListboxCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentListboxCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMenuButtonCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMenuButtonCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMenuButtonCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMenuButtonCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMenuCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMenuCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMenuCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMenuCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMessageBarCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMessageBarCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMessageBarCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMessageBarCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMessageBarProviderCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMessageBarProviderCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMessageBarProviderCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMessageBarProviderCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMessageBoxCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMessageBoxCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMessageBoxCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMessageBoxCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMultiSplitterCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMultiSplitterCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMultiSplitterCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentMultiSplitterCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentNavCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentNavCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentNavCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentNavCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentNumberInputCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentNumberInputCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentNumberInputCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentNumberInputCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOptionCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOptionCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOptionCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOptionCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOverflowCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOverflowCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOverflowCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOverflowCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOverflowItemCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOverflowItemCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOverflowItemCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOverflowItemCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOverlayCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOverlayCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOverlayCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentOverlayCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPaginatorCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPaginatorCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPaginatorCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPaginatorCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPopoverCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPopoverCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPopoverCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPopoverCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPresenceBadgeCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPresenceBadgeCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPresenceBadgeCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPresenceBadgeCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentProgressBarCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentProgressBarCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentProgressBarCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentProgressBarCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPullToRefreshCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPullToRefreshCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPullToRefreshCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentPullToRefreshCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentRadioGroupCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentRadioGroupCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentRadioGroupCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentRadioGroupCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentRatingDisplayCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentRatingDisplayCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentRatingDisplayCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentRatingDisplayCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSelectCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSelectCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSelectCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSelectCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSkeletonCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSkeletonCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSkeletonCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSkeletonCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSliderCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSliderCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSliderCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSliderCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSortableListCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSortableListCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSortableListCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSortableListCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSpinnerCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSpinnerCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSpinnerCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSpinnerCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSplitButtonCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSplitButtonCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSplitButtonCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSplitButtonCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSwitchCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSwitchCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSwitchCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentSwitchCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTabsCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTabsCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTabsCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTabsCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTextAreaCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTextAreaCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTextAreaCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTextAreaCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTextCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTextCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTextCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTextCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTextInputCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTextInputCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTextInputCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTextInputCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTimePickerCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTimePickerCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTimePickerCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTimePickerCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentToastCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentToastCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentToastCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentToastCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentToggleButtonCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentToggleButtonCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentToggleButtonCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentToggleButtonCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTooltipCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTooltipCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTooltipCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTooltipCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTreeViewCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTreeViewCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTreeViewCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentTreeViewCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentWizardCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentWizardCard.razor index b66cded87b..5744feb637 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentWizardCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentWizardCard.razor @@ -1 +1 @@ -
+
This card will show a component soon!
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/StickerSheet.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/StickerSheet.razor index b45aa86caa..1a2e08954b 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/StickerSheet.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/StickerSheet.razor @@ -104,7 +104,7 @@ private class StickerCard { - public string? Title { get; set; } - public Type? Type { get; set; } + public required string Title { get; set; } + public required Type Type { get; set; } } } From 855782f37717adfb794992b87f727ed16af10c25 Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Sat, 4 Jul 2026 17:05:01 +0200 Subject: [PATCH 3/8] Add root div (with background color to make the cards stand out more --- .../GetStarted/StickerSheet.razor | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/StickerSheet.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/StickerSheet.razor index 1a2e08954b..ac12d30109 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/StickerSheet.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/StickerSheet.razor @@ -1,12 +1,14 @@ @using FluentUI.Demo.Client.Documentation.GetStarted.Cards -
- @foreach(var card in cards) - { -
- @card.Title - -
- } +
+
+ @foreach (var card in cards) + { +
+ @card.Title + +
+ } +
@code { From 9658a0f0a3f61309106c7b100cd8faf22e0442ec Mon Sep 17 00:00:00 2001 From: Vincent Baaij Date: Sat, 4 Jul 2026 18:10:31 +0200 Subject: [PATCH 4/8] Get more cards done --- .../GetStarted/Cards/DialogForCard.razor | 29 +++++++++++++++++++ .../GetStarted/Cards/FluentCalendarCard.razor | 24 ++++++++++++++- .../Cards/FluentColorPickerCard.razor | 6 +++- .../GetStarted/Cards/FluentComboboxCard.razor | 13 ++++++++- .../Cards/FluentCompoundButtonCard.razor | 11 ++++++- .../Cards/FluentCounterBadgeCard.razor | 7 ++++- .../GetStarted/Cards/FluentDataGridCard.razor | 22 +++++++++++++- .../Cards/FluentDatePickerCard.razor | 8 ++++- .../GetStarted/Cards/FluentDialogCard.razor | 25 +++++++++++++++- .../GetStarted/Cards/FluentEmojiCard.razor | 5 +++- .../Cards/FluentHighlighterCard.razor | 12 +++++++- .../GetStarted/Cards/FluentIconCard.razor | 5 +++- .../GetStarted/Cards/FluentImageCard.razor | 4 ++- 13 files changed, 159 insertions(+), 12 deletions(-) create mode 100644 examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/DialogForCard.razor diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/DialogForCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/DialogForCard.razor new file mode 100644 index 0000000000..eddb670a3a --- /dev/null +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/DialogForCard.razor @@ -0,0 +1,29 @@ + + + + Dialog + + + + This is the body content of the dialog. + + + + Close + + + + +@code +{ + [CascadingParameter] + public required IDialogInstance Dialog { get; set; } + + [Inject] + public required IDialogService DialogService { get; set; } + + private async Task btnOK_Click() + { + await Dialog.CloseAsync(DialogResult.Ok("Yes")); + } +} diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCalendarCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCalendarCard.razor index 5744feb637..e862d5ca04 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCalendarCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCalendarCard.razor @@ -1 +1,23 @@ -
This card will show a component soon!
+
+ +
+ +@code { + + private static readonly DateTime Today = DateTime.Today; + private static readonly DateTime StartOfMonth = new DateTime(Today.Year, Today.Month, 1); + + private DateTime SelectedDay = Today; + private DateTime PickerDay = StartOfMonth; + private DateTime SelectedMonth = Today; + private DateTime PickerMonth = StartOfMonth; + private DateTime SelectedYear = Today; + private DateTime PickerYear = StartOfMonth; + + private bool DisabledDay(DateTime date) => date.Day == 3 || date.Day == 8 || date.Day == 20; + private bool DisableMonth(DateTime date) => date.Month == 3 || date.Month == 8; + private bool DisableYear(DateTime date) => date.Year == 2026 || date.Year == 2027; +} diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentColorPickerCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentColorPickerCard.razor index 5744feb637..1e2295aad0 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentColorPickerCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentColorPickerCard.razor @@ -1 +1,5 @@ -
This card will show a component soon!
+
+ +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentComboboxCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentComboboxCard.razor index 5744feb637..3e07121d76 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentComboboxCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentComboboxCard.razor @@ -1 +1,12 @@ -
This card will show a component soon!
+
+ +
+ +@code { + IEnumerable Countries = SampleData.Olympics2024.Countries; +} diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCompoundButtonCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCompoundButtonCard.razor index 5744feb637..2730e30997 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCompoundButtonCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCompoundButtonCard.razor @@ -1 +1,10 @@ -
This card will show a component soon!
+
+ + Description content + + + Description content + + + +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCounterBadgeCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCounterBadgeCard.razor index 5744feb637..6102dfebd6 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCounterBadgeCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentCounterBadgeCard.razor @@ -1 +1,6 @@ -
This card will show a component soon!
+
+ + + + +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDataGridCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDataGridCard.razor index 5744feb637..3c8f61219d 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDataGridCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDataGridCard.razor @@ -1 +1,21 @@ -
This card will show a component soon!
+
+ + + + + + +@code { + PaginationState pagination = new PaginationState() { ItemsPerPage = 2 }; + + record Person(int PersonId, string Name, DateOnly BirthDate); + + IQueryable people = new[] + { + new Person(10895, "Jean Martin", new DateOnly(1985, 3, 16)), + new Person(10944, "António Langa", new DateOnly(1991, 12, 1)), + new Person(11203, "Julie Smith", new DateOnly(1958, 10, 10)), + }.AsQueryable(); + +} +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDatePickerCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDatePickerCard.razor index 5744feb637..b1f2cfe07e 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDatePickerCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDatePickerCard.razor @@ -1 +1,7 @@ -
This card will show a component soon!
+
+ +
+ +@code{ + private DateTime SelectedValue { get; set; } = DateTime.Today.AddDays(-2); +} diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDialogCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDialogCard.razor index 5744feb637..a8794ecf3c 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDialogCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentDialogCard.razor @@ -1 +1,24 @@ -
This card will show a component soon!
+@inject IDialogService DialogService +
+ + Open Dialog + +
+ +@code +{ + + private async Task OpenDialogAsync() + { + var result = await DialogService.ShowDialogAsync(options => + { + options.Modal = true; + options.Size = DialogSize.Small; + + }); + + + } +} + diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentEmojiCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentEmojiCard.razor index 5744feb637..1e32d33afc 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentEmojiCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentEmojiCard.razor @@ -1 +1,4 @@ -
This card will show a component soon!
+
+ + +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentHighlighterCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentHighlighterCard.razor index 5744feb637..62c978d467 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentHighlighterCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentHighlighterCard.razor @@ -1 +1,11 @@ -
This card will show a component soon!
+
+ +
+ +@code +{ + static string Text = SampleData.Text.GenerateLoremIpsum(1,50); + string Highlight = "Lorem"; +} diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentIconCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentIconCard.razor index 5744feb637..e0549f8bcc 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentIconCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentIconCard.razor @@ -1 +1,4 @@ -
This card will show a component soon!
+
+ + +
diff --git a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentImageCard.razor b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentImageCard.razor index 5744feb637..471547dec8 100644 --- a/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentImageCard.razor +++ b/examples/Demo/FluentUI.Demo.Client/Documentation/GetStarted/Cards/FluentImageCard.razor @@ -1 +1,3 @@ -
This card will show a component soon!
+
+ +
From 37d3fd281b17e9ae467e408f6bb4c7608d81b1f4 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 8 Jul 2026 15:04:27 +0000 Subject: [PATCH 5/8] Initial plan for Debounce_Default flaky test fix --- .../obj\\Release/\\package.g.props" | 29 +++++++++++++++++++ src/Core.Scripts/src/BuildConstants.ts | 2 +- 2 files changed, 30 insertions(+), 1 deletion(-) create mode 100644 "src/Core.Scripts/obj\\Release/\\package.g.props" diff --git "a/src/Core.Scripts/obj\\Release/\\package.g.props" "b/src/Core.Scripts/obj\\Release/\\package.g.props" new file mode 100644 index 0000000000..8fc2b71cdc --- /dev/null +++ "b/src/Core.Scripts/obj\\Release/\\package.g.props" @@ -0,0 +1,29 @@ + + + + true + microsoft.fluentui.aspnetcore.components.assets + src/index.ts + dist/Microsoft.FluentUI.AspNetCore.Components.lib.module.js + ../Core/Components/**/*.css + dist/Microsoft.FluentUI.AspNetCore.Components.bundle.scp.css + node ./esbuild.config.mjs + rimraf ./dist + [] + + ISC + module + ^1.15.9 + 8.62.1 + 8.62.1 + 0.28.1 + 0.0.1 + 10.6.0 + ^13.0.6 + ^7.6.1 + 6.1.3 + 6.5.0 + 5.9.3 + ^3.0.0 + + \ No newline at end of file diff --git a/src/Core.Scripts/src/BuildConstants.ts b/src/Core.Scripts/src/BuildConstants.ts index d6b245f501..fc4fcee9f8 100644 --- a/src/Core.Scripts/src/BuildConstants.ts +++ b/src/Core.Scripts/src/BuildConstants.ts @@ -1,2 +1,2 @@ // This file is generated by a tool. Do not change! -export const BUILD_MODE = 'Debug'; +export const BUILD_MODE = 'Release'; From 580ad0b3dd991c802a7ad46b7869f0a65bc22a82 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 8 Jul 2026 15:07:33 +0000 Subject: [PATCH 6/8] fix: Debounce.RunAsync silently swallows external cancellations Changed catch (TaskCanceledException) to catch (OperationCanceledException) when (!cancellationToken.IsCancellationRequested) so that only internal debounce timer resets are silently ignored, while external CancellationToken cancellations (e.g. test timeouts, caller-driven cancellation) correctly propagate to the caller. Also replaced the reassignment of the `cancellationToken` parameter with a separate `internalToken` variable to preserve the original external token for use in the exception filter. Removed the outdated <remarks> stating that exceptions are swallowed. --- src/Core/Utilities/Debounce.cs | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/src/Core/Utilities/Debounce.cs b/src/Core/Utilities/Debounce.cs index 66b5575883..ff7f359a25 100644 --- a/src/Core/Utilities/Debounce.cs +++ b/src/Core/Utilities/Debounce.cs @@ -45,9 +45,6 @@ public class Debounce : IDisposable /// Debounce the execution of asynchronous tasks. /// Ensures that a function is invoked only once within a specified interval, even if multiple invocations are requested. /// - /// - /// This implementation will swallow any exceptions that is thrown by the invoked task. - /// /// The interval in milliseconds to wait before invoking the action. /// The function that returns a Task to be invoked asynchronously. /// An optional CancellationToken. @@ -64,9 +61,6 @@ public Task RunAsync(int milliseconds, Func action, CancellationToken canc /// Debounce the execution of asynchronous tasks. /// Ensures that a function is invoked only once within a specified interval, even if multiple invocations are requested. /// - /// - /// This implementation will swallow any exceptions that is thrown by the invoked task. - /// /// The interval in milliseconds to wait before invoking the action. /// The function that returns a Task to be invoked asynchronously. /// An optional CancellationToken. @@ -85,17 +79,17 @@ public async Task RunAsync(int milliseconds, Func actio // Create a new cancellation token source linked with provided token _cancellationTokenSource = CancellationTokenSource.CreateLinkedTokenSource(cancellationToken); - cancellationToken = _cancellationTokenSource.Token; + var internalToken = _cancellationTokenSource.Token; try { - await Task.Delay(milliseconds, cancellationToken); - await action.Invoke(cancellationToken); + await Task.Delay(milliseconds, internalToken); + await action.Invoke(internalToken); _isCompleted = true; } - catch (TaskCanceledException) + catch (OperationCanceledException) when (!cancellationToken.IsCancellationRequested) { - // If the task was canceled, ignore it + // If the task was canceled internally by the debounce (a new RunAsync call reset the timer), ignore it } } From f17c236ee28479fd7f3566c2ac2fbbbaf79e1319 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Wed, 8 Jul 2026 15:09:39 +0000 Subject: [PATCH 7/8] fix: use explicit two-condition exception filter in Debounce.RunAsync Refine the OperationCanceledException filter to explicitly check both conditions: internalToken.IsCancellationRequested (the debounce timer was reset by a new RunAsync call) AND !cancellationToken.IsCancellationRequested (the external token was NOT cancelled). This makes the intent clear and guards against edge cases where the exception could have a different origin. --- src/Core/Utilities/Debounce.cs | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/Core/Utilities/Debounce.cs b/src/Core/Utilities/Debounce.cs index ff7f359a25..20dfc82e26 100644 --- a/src/Core/Utilities/Debounce.cs +++ b/src/Core/Utilities/Debounce.cs @@ -87,9 +87,10 @@ public async Task RunAsync(int milliseconds, Func actio await action.Invoke(internalToken); _isCompleted = true; } - catch (OperationCanceledException) when (!cancellationToken.IsCancellationRequested) + catch (OperationCanceledException) when (internalToken.IsCancellationRequested && !cancellationToken.IsCancellationRequested) { - // If the task was canceled internally by the debounce (a new RunAsync call reset the timer), ignore it + // If the task was canceled internally by the debounce (a new RunAsync call reset the timer), ignore it. + // External cancellations (cancellationToken was cancelled by the caller) are propagated. } } From 8e6ee0609c610b400281c950827a27ea6f49cc78 Mon Sep 17 00:00:00 2001 From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com> Date: Thu, 9 Jul 2026 06:21:19 +0000 Subject: [PATCH 8/8] revert: restore branch content to 1b33a28 without force-push --- .../obj\\Release/\\package.g.props" | 29 ------------------- src/Core.Scripts/src/BuildConstants.ts | 2 +- src/Core/Utilities/Debounce.cs | 17 +++++++---- 3 files changed, 12 insertions(+), 36 deletions(-) delete mode 100644 "src/Core.Scripts/obj\\Release/\\package.g.props" diff --git "a/src/Core.Scripts/obj\\Release/\\package.g.props" "b/src/Core.Scripts/obj\\Release/\\package.g.props" deleted file mode 100644 index 8fc2b71cdc..0000000000 --- "a/src/Core.Scripts/obj\\Release/\\package.g.props" +++ /dev/null @@ -1,29 +0,0 @@ - - - - true - microsoft.fluentui.aspnetcore.components.assets - src/index.ts - dist/Microsoft.FluentUI.AspNetCore.Components.lib.module.js - ../Core/Components/**/*.css - dist/Microsoft.FluentUI.AspNetCore.Components.bundle.scp.css - node ./esbuild.config.mjs - rimraf ./dist - [] - - ISC - module - ^1.15.9 - 8.62.1 - 8.62.1 - 0.28.1 - 0.0.1 - 10.6.0 - ^13.0.6 - ^7.6.1 - 6.1.3 - 6.5.0 - 5.9.3 - ^3.0.0 - - \ No newline at end of file diff --git a/src/Core.Scripts/src/BuildConstants.ts b/src/Core.Scripts/src/BuildConstants.ts index fc4fcee9f8..d6b245f501 100644 --- a/src/Core.Scripts/src/BuildConstants.ts +++ b/src/Core.Scripts/src/BuildConstants.ts @@ -1,2 +1,2 @@ // This file is generated by a tool. Do not change! -export const BUILD_MODE = 'Release'; +export const BUILD_MODE = 'Debug'; diff --git a/src/Core/Utilities/Debounce.cs b/src/Core/Utilities/Debounce.cs index 20dfc82e26..66b5575883 100644 --- a/src/Core/Utilities/Debounce.cs +++ b/src/Core/Utilities/Debounce.cs @@ -45,6 +45,9 @@ public class Debounce : IDisposable /// Debounce the execution of asynchronous tasks. /// Ensures that a function is invoked only once within a specified interval, even if multiple invocations are requested. /// + /// + /// This implementation will swallow any exceptions that is thrown by the invoked task. + /// /// The interval in milliseconds to wait before invoking the action. /// The function that returns a Task to be invoked asynchronously. /// An optional CancellationToken. @@ -61,6 +64,9 @@ public Task RunAsync(int milliseconds, Func action, CancellationToken canc /// Debounce the execution of asynchronous tasks. /// Ensures that a function is invoked only once within a specified interval, even if multiple invocations are requested. /// + /// + /// This implementation will swallow any exceptions that is thrown by the invoked task. + /// /// The interval in milliseconds to wait before invoking the action. /// The function that returns a Task to be invoked asynchronously. /// An optional CancellationToken. @@ -79,18 +85,17 @@ public async Task RunAsync(int milliseconds, Func actio // Create a new cancellation token source linked with provided token _cancellationTokenSource = CancellationTokenSource.CreateLinkedTokenSource(cancellationToken); - var internalToken = _cancellationTokenSource.Token; + cancellationToken = _cancellationTokenSource.Token; try { - await Task.Delay(milliseconds, internalToken); - await action.Invoke(internalToken); + await Task.Delay(milliseconds, cancellationToken); + await action.Invoke(cancellationToken); _isCompleted = true; } - catch (OperationCanceledException) when (internalToken.IsCancellationRequested && !cancellationToken.IsCancellationRequested) + catch (TaskCanceledException) { - // If the task was canceled internally by the debounce (a new RunAsync call reset the timer), ignore it. - // External cancellations (cancellationToken was cancelled by the caller) are propagated. + // If the task was canceled, ignore it } }