[Docs] Add icon preview in API documentation (#2284)

* Add icon preview
microsoft · Jun 28, 2024 · 53f826d · 53f826d
1 parent 7af7584
commit 53f826d
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 4 deletions.
diff --git a/examples/Demo/Shared/Components/ApiDocumentation.razor b/examples/Demo/Shared/Components/ApiDocumentation.razor
@@ -35,7 +35,6 @@
                     @* Display list of Enumerations (if available) *@
                     @if (context.EnumValues.Length > 0)
                     {
-
                         var id = Identifier.NewId();
                         <span id="@id">
                             <FluentIcon Value="@(new Icons.Regular.Size20.Info())" Style="margin-left: 10px; vertical-align: top;" Color="@Color.Accent" />
@@ -46,10 +45,29 @@
                                 @item <br />
                             }
                         </FluentTooltip>
+                    }
+                </TemplateColumn>
 
+                <TemplateColumn Title="Default">
+                    @if (context.Icon != null)
+                    {
+                        var id = Identifier.NewId();
+                        <FluentStack Orientation="Orientation.Horizontal" HorizontalGap="0">
+                            <div>Preview:</div>
+                            <FluentIcon Id="@id" Value="@context.Icon" Width="20px" />
+                            <FluentTooltip Anchor="@id" Position="TooltipPosition.Right">
+                                @context.Default
+                            </FluentTooltip>
+                        </FluentStack>
+                    }
+                    else
+                    {
+                        <div>
+                            @context.Default
+                        </div>
                     }
                 </TemplateColumn>
-                <PropertyColumn Property="@(c => c.Default)" />
+
                 <TemplateColumn Title="Description">
                     <div style="white-space: break-spaces">
                         @(new MarkupString(context.Description))

diff --git a/examples/Demo/Shared/Components/ApiDocumentation.razor.cs b/examples/Demo/Shared/Components/ApiDocumentation.razor.cs
@@ -18,6 +18,7 @@ private class MemberDescription
         public string? Default { get; set; } = null;
         public string Description { get; set; } = "";
         public bool IsParameter { get; set; }
+        public Icon? Icon { get; set; }
     }
 
     private IEnumerable<MemberDescription>? _allMembers = null;
@@ -110,16 +111,18 @@ private IEnumerable<MemberDescription> GetMembers(MemberTypes type)
                             // Parameters/properties
                             if (!isEvent)
                             {
+                                Icon? icon = null;
                                 var defaultVaue = "";
                                 if (propertyInfo.PropertyType.IsValueType || propertyInfo.PropertyType == typeof(string))
                                 {
                                     defaultVaue = obj?.GetType().GetProperty(propertyInfo.Name)?.GetValue(obj)?.ToString();
                                 }
                                 else if (propertyInfo.PropertyType == typeof(Icon))
                                 {
-                                    if (obj?.GetType().GetProperty(propertyInfo.Name)?.GetValue(obj) is Icon icon)
+                                    if (obj?.GetType().GetProperty(propertyInfo.Name)?.GetValue(obj) is Icon value)
                                     {
-                                        defaultVaue = $"{icon.Variant}.{icon.Size}.{icon.Name}";
+                                        icon = value;
+                                        defaultVaue = $"{value.Variant}.{value.Size}.{value.Name}";
                                     }
                                 }
 
@@ -132,6 +135,7 @@ private IEnumerable<MemberDescription> GetMembers(MemberTypes type)
                                     Default = defaultVaue,
                                     Description = CodeComments.GetSummary(Component.Name + "." + propertyInfo.Name) ?? CodeComments.GetSummary(Component.BaseType?.Name + "." + propertyInfo.Name),
                                     IsParameter = isParameter,
+                                    Icon = icon
                                 });
                             }