Enhance FluentAccordionItem with Flexible HeadingContent Parameter

examples/Demo/Shared/Microsoft.FluentUI.AspNetCore.Components.xml

@@ -40,6 +40,11 @@
             Gets or sets the heading of the accordion item.
             </summary>
         </member>
+        <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentAccordionItem.HeadingContent">
+            <summary>
+            Gets or sets the heading content of the accordion item.
+            </summary>
+        </member>
         <member name="P:Microsoft.FluentUI.AspNetCore.Components.FluentAccordionItem.Expanded">
             <summary>
             Expands or collapses the item.

examples/Demo/Shared/Pages/Accordion/Examples/AccordionDefault.razor

@@ -13,6 +13,14 @@
     <FluentAccordionItem Expanded="true" Heading="Panel three">
         Panel three content
     </FluentAccordionItem>
+    <FluentAccordionItem Expanded="true">
+        <HeadingContent>
+            Panel <span style="color:red">Four</span>
+        </HeadingContent>
+        <ChildContent>
+            Panel four content
+        </ChildContent>
+    </FluentAccordionItem>
 </FluentAccordion>
 
 <p>Last changed accordion item: @changed?.Heading</p>

src/Core/Components/Accordion/FluentAccordionItem.razor

@@ -7,6 +7,15 @@
                        heading-level=@HeadingLevel
                        expanded="@Expanded"
                        @attributes="AdditionalAttributes">
-    <span slot="heading">@Heading</span>
+    @if (Heading is not null)
+    {
+        <span slot="heading">@Heading</span>
+    }
+    else
+    {
+        <div slot="heading">
+            @HeadingContent
+        </div>
+    }
     @ChildContent
 </fluent-accordion-item>

src/Core/Components/Accordion/FluentAccordionItem.razor.cs

@@ -14,8 +14,13 @@ public partial class FluentAccordionItem : FluentComponentBase, IDisposable
     /// Gets or sets the heading of the accordion item.
     /// </summary>
     [Parameter]
-    [EditorRequired]
-    public string Heading { get; set; } = string.Empty;
+    public string? Heading { get; set; }
+
+    /// <summary>
+    /// Gets or sets the heading content of the accordion item.
+    /// </summary>
+    [Parameter]
+    public RenderFragment? HeadingContent { get; set; }
 
     /// <summary>
     /// Expands or collapses the item.

tests/Core/Accordion/FluentAccordionItemTests.FluentAccordionItem_WhenAdditionalCSSClass_IsProvided.verified.html

@@ -1,5 +1,5 @@
 <fluent-accordion-item id="xxx"
                        class="additional-class"
                        blazor:elementReference="b4f90bb2-f784-4135-8004-a2e202a9cb74">
-    <span slot="heading"></span>
+    <div slot="heading"></div>
 </fluent-accordion-item>

tests/Core/Accordion/FluentAccordionItemTests.FluentAccordionItem_WhenAdditionalStyle_IsProvided.verified.html

@@ -1,5 +1,5 @@
 <fluent-accordion-item id="xxx"
                        style="background-color: grey"
                        blazor:elementReference="92b4458c-8c7e-4acd-a036-2d942acd8821">
-    <span slot="heading"></span>
+    <div slot="heading"></div>
 </fluent-accordion-item>

tests/Core/Accordion/FluentAccordionItemTests.FluentAccordionItem_WithAnAdditionalAttribute.verified.html

@@ -1,5 +1,5 @@
 <fluent-accordion-item id="xxx"
                        unknown="unknowns-value"
                        blazor:elementReference="ef14ba77-c25d-495f-8185-834bdd9b310b">
-    <span slot="heading"></span>
+    <div slot="heading"></div>
 </fluent-accordion-item>

tests/Core/Accordion/FluentAccordionItemTests.FluentAccordionItem_WithChildContent_IsNull.verified.html

@@ -1,4 +1,4 @@
 <fluent-accordion-item id="xxx"
                        blazor:elementReference="c4b5644a-1120-4210-874f-20084e0ef0f1">
-    <span slot="heading"></span>
+    <div slot="heading"></div>
 </fluent-accordion-item>

tests/Core/Accordion/FluentAccordionItemTests.FluentAccordionItem_WithHeadingContentAndHeading_IsProvidedBoth.verified.html

@@ -0,0 +1,4 @@
+
+<fluent-accordion-item id="xxx" blazor:elementreference="xxx">
+  <span slot="heading">Heading Value First</span>
+</fluent-accordion-item>

tests/Core/Accordion/FluentAccordionItemTests.FluentAccordionItem_WithHeadingContent_IsNull.verified.html

@@ -0,0 +1,3 @@
+<fluent-accordion-item id="xxx" blazor:elementreference="xxx">
+  <div slot="heading"></div>
+</fluent-accordion-item>

tests/Core/Accordion/FluentAccordionItemTests.FluentAccordionItem_WithHeadingContent_IsProvided.verified.html

@@ -0,0 +1,3 @@
+<fluent-accordion-item id="xxx" blazor:elementreference="xxx">
+  <div slot="heading">custom heading content</div>
+</fluent-accordion-item>

tests/Core/Accordion/FluentAccordionItemTests.FluentAccordionItem_WithMultipleAdditionalAttributes.verified.html

@@ -2,5 +2,5 @@
                        unknown1="unknown1s-value"
                        unknown2="unknown2s-value"
                        blazor:elementReference="ffff4adb-6cc3-4fa3-a3d7-a286b9e33dcc">
-    <span slot="heading"></span>
+    <div slot="heading"></div>
 </fluent-accordion-item>

tests/Core/Accordion/FluentAccordionItemTests.FluentAccordionItem_WithProvidedExpanded_Parameter-False.verified.html

@@ -1,4 +1,4 @@
 <fluent-accordion-item id="xxx"
                        blazor:elementReference="595a47d0-7074-4df2-a2d3-691bd3e416ce">
-    <span slot="heading"></span>
+    <div slot="heading"></div>
 </fluent-accordion-item>

tests/Core/Accordion/FluentAccordionItemTests.FluentAccordionItem_WithProvidedExpanded_Parameter-True.verified.html

@@ -1,5 +1,5 @@
 <fluent-accordion-item id="xxx"
                        expanded
                        blazor:elementReference="48e66212-5e81-480e-98ea-40cfc13fa512">
-    <span slot="heading"></span>
+    <div slot="heading"></div>
 </fluent-accordion-item>

tests/Core/Accordion/FluentAccordionItemTests.FluentAccordionItem_WithProvided_Content.verified.html

@@ -1,5 +1,5 @@
 <fluent-accordion-item id="xxx"
                        blazor:elementReference="e692c5f6-2ee3-414c-99f1-6a03ea6c4760">
-    <span slot="heading"></span>
+    <div slot="heading"></div>
     child content
 </fluent-accordion-item>

tests/Core/Accordion/FluentAccordionItemTests.cs

@@ -41,6 +41,24 @@ public void FluentAccordionItem_WithCustomHeaderValue()
         cut.Verify();
     }
 
+    [Fact]
+    public void FluentAccordionItem_WithHeadingContentAndHeading_IsProvidedBoth()
+    {
+        // Arrange & Act
+        var cut = TestContext.RenderComponent<FluentAccordionItem>(parameters =>
+        {
+            parameters.Add(p => p.HeadingContent, context =>
+            {
+                context.AddContent(0, "custom heading content");
+            });
+
+            parameters.Add(p => p.Heading, "Heading Value First");
+        });
+
+        // Assert
+        cut.Verify();
+    }
+
     [Theory]
     [InlineData(true)]
     [InlineData(false)]
@@ -125,4 +143,33 @@ public void FluentAccordionItem_WhenAdditionalStyle_IsProvided()
         // Assert
         cut.Verify();
     }
+
+    [Fact]
+    public void FluentAccordionItem_WithHeadingContent_IsNull()
+    {
+        // Arrange & Act
+        var cut = TestContext.RenderComponent<FluentAccordionItem>(parameters =>
+        {
+            parameters.Add(p => p.HeadingContent, context => { });
+        });
+
+        // Assert
+        cut.Verify();
+    }
+
+    [Fact]
+    public void FluentAccordionItem_WithHeadingContent_IsProvided()
+    {
+        // Arrange & Act
+        var cut = TestContext.RenderComponent<FluentAccordionItem>(parameters =>
+        {
+            parameters.Add(p => p.HeadingContent, context =>
+            {
+                context.AddContent(0, "custom heading content");
+            });
+        });
+
+        // Assert
+        cut.Verify();
+    }
 }

tests/Core/Accordion/FluentAccordionTests.FluentAccordion_WhenExpandedModeIsSingle_AndMultipleItemAreExpanded_ByDefault.verified.html

@@ -4,10 +4,10 @@
     <fluent-accordion-item id="xxx"
                            expanded
                            blazor:elementReference="c03594b8-bc6e-414e-b9c4-e1865de8ca17">
-        <span slot="heading"></span>
+        <div slot="heading"></div>
     </fluent-accordion-item><fluent-accordion-item id="xxx"
                                                    expanded
                                                    blazor:elementReference="5b5873b4-7400-4456-be5f-9720d2b5d145">
-        <span slot="heading"></span>
+        <div slot="heading"></div>
     </fluent-accordion-item>
 </fluent-accordion>