[dev-v5] Update documentation (#3330)

microsoft · Feb 11, 2025 · ef3f00d · ef3f00d
1 parent ee91a05
commit ef3f00d
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 35 deletions.
diff --git a/examples/Tools/FluentUI.Demo.DocApiGen/Extensions/DocXmlReaderExtensions.cs b/examples/Tools/FluentUI.Demo.DocApiGen/Extensions/DocXmlReaderExtensions.cs
@@ -48,10 +48,17 @@ public static string GetMemberSummary(this LoxSmoke.DocXml.DocXmlReader docReade
 
     private static string ConvertSeeCref(string input)
     {
-        const string pattern = @"<see(also)* cref=""[\w]:Microsoft\.FluentUI\.AspNetCore\.Components\.([\w.]+)"" />";
+        // Convert FluentUI cref and crefalso
+        const string pattern = @"<see(also)* cref=""[\w]:Microsoft\.FluentUI\.AspNetCore\.Components\.([\w.`]+)"" />";
         const string replacement = "`$2`";
 
-        return Regex.Replace(input, pattern, replacement);
+        var result = Regex.Replace(input, pattern, replacement).Replace("`1", "");
+
+        // Convert External and Microsoft cref
+        const string patternMS = @"<see(also)* cref=""[\w]:([\w.`]+)"" />";
+        const string replacementMS = "[$2](https://learn.microsoft.com/dotnet/api/$2)";
+
+        return Regex.Replace(result, patternMS, replacementMS);
     }
 
     private static string ConvertSeeHref(string input)

diff --git a/examples/Tools/FluentUI.Demo.DocViewer/Components/MarkdownViewer.razor b/examples/Tools/FluentUI.Demo.DocViewer/Components/MarkdownViewer.razor
@@ -113,7 +113,13 @@
                                     @foreach (var item in apiClass.Properties)
                                     {
                                         <tr>
-                                            <td><code>@item.Name</code></td>
+                                            <td>
+                                                <code>@item.Name</code>
+                                                @if (!item.IsInherited)
+                                                {
+                                                    <sup>✨</sup>
+                                                }
+                                            </td>
                                             <td>
                                                 <span>@item.Type</span>
                                                 @if (item.EnumValues.Length > 0)
@@ -160,7 +166,7 @@
                         {
                             <h3>⚒️ Methods</h3>
 
-                            <table class="api-table">
+                            <table class="api-table" no-col>
                                 <thead>
                                     <tr>
                                         <th>Name</th>

diff --git a/examples/Tools/FluentUI.Demo.DocViewer/Components/MarkdownViewer.razor.css b/examples/Tools/FluentUI.Demo.DocViewer/Components/MarkdownViewer.razor.css
@@ -62,30 +62,30 @@
     overflow: auto;
   }
 
-  .doc-viewer ::deep pre code {
-    overflow-x: auto;
-    display: block;
-    padding: 1em;
-    background-color: rgb(243, 243, 243);
-    border: 1px solid silver;
-    font-size: 13px;
-    font-weight: bold;
-    transition: opacity 0.2s ease-in-out;
-    opacity: 0.2;
-  }
-
-    .doc-viewer ::deep pre code[class*="hljs"] {
-      opacity: 1;
+    .doc-viewer ::deep pre code {
+      overflow-x: auto;
+      display: block;
+      padding: 1em;
+      background-color: rgb(243, 243, 243);
+      border: 1px solid silver;
+      font-size: 13px;
+      font-weight: bold;
+      transition: opacity 0.2s ease-in-out;
+      opacity: 0.2;
     }
 
-    .doc-viewer ::deep pre code[source] {
-      display: none;
-    }
+      .doc-viewer ::deep pre code[class*="hljs"] {
+        opacity: 1;
+      }
 
-      .doc-viewer ::deep pre code[source][class*="hljs"] {
-        display: block;
+      .doc-viewer ::deep pre code[source] {
+        display: none;
       }
 
+        .doc-viewer ::deep pre code[source][class*="hljs"] {
+          display: block;
+        }
+
   /* Demo Section */
 
   .doc-viewer ::deep .demo-tabs {
@@ -103,6 +103,7 @@
 
   .doc-viewer ::deep .api-summary {
     background-color: var(--colorNeutralBackground4);
+    max-width: calc(100vw - 32px);
     padding: 8px;
   }
 
@@ -114,9 +115,15 @@
 
   .doc-viewer ::deep .api-table {
     width: 100%;
+    max-width: calc(100vw - 32px);
     border-collapse: collapse;
   }
 
+    .doc-viewer ::deep .api-table[no-col] {
+      width: 100%;
+      border-collapse: collapse;
+    }
+
     .doc-viewer ::deep .api-table th {
       text-align: start;
       text-overflow: ellipsis;
@@ -161,6 +168,41 @@
         width: 20px;
         height: 20px;
       }
+
+    /* No Columns, for Methods view (same styles as Mobile */
+    .doc-viewer ::deep .api-table[no-col] tr {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+      margin-bottom: 10px;
+    }
+
+    .doc-viewer ::deep .api-table[no-col] td,
+    .doc-viewer ::deep .api-table[no-col] th {
+      display: none;
+      flex-wrap: wrap;
+      white-space: normal;
+    }
+
+      .doc-viewer ::deep .api-table[no-col] td:first-child {
+        display: block;
+        flex-grow: 1;
+      }
+
+        .doc-viewer ::deep .api-table[no-col] td:first-child code {
+          font-weight: bold;
+        }
+
+      .doc-viewer ::deep .api-table[no-col] td:nth-child(2) {
+        display: block;
+      }
+
+      .doc-viewer ::deep .api-table[no-col] td:last-child {
+        flex-basis: 100%;
+        display: block;
+        margin-left: 24px;
+      }
+
 /* Mobile */
 
 @media(max-width: 768px) {
@@ -175,6 +217,7 @@
   .doc-viewer ::deep .api-table td,
   .doc-viewer ::deep .api-table th {
     display: none;
+    flex-wrap: wrap;
   }
 
     .doc-viewer ::deep .api-table td:first-child {

diff --git a/examples/Tools/FluentUI.Demo.DocViewer/Extensions/ReflectionExtensions.cs b/examples/Tools/FluentUI.Demo.DocViewer/Extensions/ReflectionExtensions.cs
@@ -75,6 +75,17 @@ public static bool IsNullable(this MemberInfo member)
         };
     }
 
+    /// <summary>
+    /// Checks if the specified member is inherited from a base class or interface.
+    /// </summary>
+    /// <param name="member"></param>
+    /// <param name="type"></param>
+    /// <returns></returns>
+    public static bool IsInherited(this MemberInfo member, Type type)
+    {
+        return member.DeclaringType != type;
+    }
+
     /// <summary>
     /// Convert type to the proper type _name.
     /// Optional <paramref _name="typeNameConverter"/> function can convert type names to strings 

diff --git a/examples/Tools/FluentUI.Demo.DocViewer/Models/ApiClass.cs b/examples/Tools/FluentUI.Demo.DocViewer/Models/ApiClass.cs
@@ -141,21 +141,12 @@ private IEnumerable<ApiClassMember> GetMembers(MemberTypes type)
                             // Parameters/properties
                             if (!isEvent)
                             {
-                                // Icon? icon = null;
                                 var defaultValue = "";
                                 if (propertyInfo.PropertyType.IsValueType || propertyInfo.PropertyType == typeof(string))
                                 {
                                     defaultValue = GetObjectValue(propertyInfo.Name)?.ToString();
                                 }
-                                //else if (propertyInfo.PropertyType == typeof(Icon))
-                                //{
-                                //    if (GetObjectValue(propertyInfo.Name) is Icon value)
-                                //    {
-                                //        icon = value;
-                                //        defaultValue = $"{value.Variant}.{value.Size}.{value.Name}";
-                                //    }
-                                //}
-
+
                                 members.Add(new ApiClassMember()
                                 {
                                     MemberType = MemberTypes.Property,
@@ -165,7 +156,7 @@ private IEnumerable<ApiClassMember> GetMembers(MemberTypes type)
                                     Default = defaultValue,
                                     Description = GetSummary(_component, propertyInfo),
                                     IsParameter = isParameter,
-                                    //Icon = icon
+                                    IsInherited = propertyInfo.IsInherited(_component),
                                 });
                             }
 
@@ -179,6 +170,7 @@ private IEnumerable<ApiClassMember> GetMembers(MemberTypes type)
                                     Name = propertyInfo.Name,
                                     Type = propertyInfo.ToTypeNameString(),
                                     Description = GetSummary(_component, propertyInfo),
+                                    IsInherited = propertyInfo.IsInherited(_component),
                                 });
                             }
                         }
@@ -205,6 +197,7 @@ private IEnumerable<ApiClassMember> GetMembers(MemberTypes type)
                                 Parameters = methodInfo.GetParameters().Select(i => $"{i.ToTypeNameString()} {i.Name}").ToArray(),
                                 Type = methodInfo.ToTypeNameString(),
                                 Description = GetSummary(_component, methodInfo),
+                                IsInherited = methodInfo.IsInherited(_component),
                             });
                         }
                     }

diff --git a/examples/Tools/FluentUI.Demo.DocViewer/Models/ApiClassMember.cs b/examples/Tools/FluentUI.Demo.DocViewer/Models/ApiClassMember.cs
@@ -43,6 +43,11 @@ internal record ApiClassMember
     /// </summary>
     public string Description { get; init; } = string.Empty;
 
+    /// <summary>
+    /// Gets True if the property is inherited from a base class or interface.
+    /// </summary>
+    public bool IsInherited { get; init; }
+
     /// <summary>
     /// Gets true if the property is flagged with [Parameter] attribute
     /// </summary>
@@ -54,6 +59,6 @@ internal record ApiClassMember
     /// <returns></returns>
     public string GetMethodSignature()
     {
-        return $"{Type} {Name}({string.Join(',', Parameters)})";
+        return $"{Type} {Name}({string.Join(", ", Parameters)})";
     }
 }