Accordion: strip all usage of Collapse (#5890)

* Strips the logic between accordion and collapse. * rm collapse from AffiliatesPage.razor and Faq.razor * Style providers for collapse - removing accordion booleans * rm usage of collapseHeader from tailwind Button.cs * Formating * rm collapsed from button * Format * Comments * Remove CollapseVisible from tailwind Button.cs * Update release notes and docs for support of Collapse in Accordion --------- Co-authored-by: Mladen Macanovic <[email protected]>
Megabit · Dec 17, 2024 · febf259 · febf259
1 parent 1011386
commit febf259
Show file tree

Hide file tree

Showing 20 changed files with 139 additions and 312 deletions.
diff --git a/Documentation/Blazorise.Docs/Components/Commercial/Faq.razor b/Documentation/Blazorise.Docs/Components/Commercial/Faq.razor
@@ -10,16 +10,16 @@
     {
         var index = faqInfos.IndexOf( faqInfo ) + 1;
 
-        <Collapse @key="@faqInfo" Visible="@faqInfo.Visible">
-            <CollapseHeader Padding="Padding.Is1.OnY">
+        <AccordionItem @key="@faqInfo" Visible="@faqInfo.Visible">
+            <AccordionHeader Padding="Padding.Is1.OnY">
                 <Heading Size="HeadingSize.Is5" TextAlignment="TextAlignment.Start" Style="text-decoration: " Margin="Margin.Is0.OnY">
                     <AccordionToggle Clicked="@(()=>faqInfo.Visible = !faqInfo.Visible)">@($"{index}. {faqInfo.Title}")</AccordionToggle>
                 </Heading>
-            </CollapseHeader>
-            <CollapseBody TextAlignment="TextAlignment.Start">
+            </AccordionHeader>
+            <AccordionBody TextAlignment="TextAlignment.Start">
                 @faqInfo.Body
-            </CollapseBody>
-        </Collapse>
+            </AccordionBody>
+        </AccordionItem>
     }
 </Accordion>
 @code {

diff --git a/Documentation/Blazorise.Docs/Pages/Commercial/AffiliatesPage.razor b/Documentation/Blazorise.Docs/Pages/Commercial/AffiliatesPage.razor
@@ -152,97 +152,97 @@
                 Frequently Asked Questions
             </Heading>
             <Accordion>
-                <Collapse>
-                    <CollapseHeader>
+                <AccordionItem>
+                    <AccordionHeader>
                         <Heading Size="HeadingSize.Is5" TextAlignment="TextAlignment.Start" Margin="Margin.Is0.OnY">
                             <AccordionToggle>What is Blazorise?</AccordionToggle>
                         </Heading>
-                    </CollapseHeader>
-                    <CollapseBody TextAlignment="TextAlignment.Start">
+                    </AccordionHeader>
+                    <AccordionBody TextAlignment="TextAlignment.Start">
                         Blazorise is a component library for Blazor, a web framework for building interactive web applications using C# instead of JavaScript. Blazorise provides a set of reusable UI components, such as buttons, forms, and modals, that you can use to build responsive and mobile-friendly web applications.
-                    </CollapseBody>
-                </Collapse>
+                    </AccordionBody>
+                </AccordionItem>
 
-                <Collapse>
-                    <CollapseHeader>
+                <AccordionItem>
+                    <AccordionHeader>
                         <Heading Size="HeadingSize.Is5" TextAlignment="TextAlignment.Start" Margin="Margin.Is0.OnY">
                             <AccordionToggle>How are referrals tracked?</AccordionToggle>
                         </Heading>
-                    </CollapseHeader>
-                    <CollapseBody TextAlignment="TextAlignment.Start">
+                    </AccordionHeader>
+                    <AccordionBody TextAlignment="TextAlignment.Start">
                         <Paragraph>
                             a. After signing up, you will receive a personalized referral link that you can use right away. Our affiliate tracking software tracks conversions through your link.
                         </Paragraph>
                         <Paragraph>
                             b. To track all of your referrals, we use cookies that last 90 days.
                         </Paragraph>
-                    </CollapseBody>
-                </Collapse>
+                    </AccordionBody>
+                </AccordionItem>
 
-                <Collapse>
-                    <CollapseHeader>
+                <AccordionItem>
+                    <AccordionHeader>
                         <Heading Size="HeadingSize.Is5" TextAlignment="TextAlignment.Start" Margin="Margin.Is0.OnY">
                             <AccordionToggle>Can I run ads as an Affiliate?</AccordionToggle>
                         </Heading>
-                    </CollapseHeader>
-                    <CollapseBody TextAlignment="TextAlignment.Start">
+                    </AccordionHeader>
+                    <AccordionBody TextAlignment="TextAlignment.Start">
                         <Paragraph>
                             a. <Strong>You can NOT run ads for branded keywords</Strong> such as Blazorise, blazorise, or any variations thereof, including misspellings.
                         </Paragraph>
                         <Paragraph>
                             b. You can run ads for anything that’s not branded, but the user should be directed to the Blazorise website first. We track all our paid traffic and any affiliates that violate our terms and conditions <Strong>will be removed from our program</Strong>.
                         </Paragraph>
-                    </CollapseBody>
-                </Collapse>
+                    </AccordionBody>
+                </AccordionItem>
 
-                <Collapse>
-                    <CollapseHeader>
+                <AccordionItem>
+                    <AccordionHeader>
                         <Heading Size="HeadingSize.Is5" TextAlignment="TextAlignment.Start" Margin="Margin.Is0.OnY">
                             <AccordionToggle>When will I get paid?</AccordionToggle>
                         </Heading>
-                    </CollapseHeader>
-                    <CollapseBody TextAlignment="TextAlignment.Start">
+                    </AccordionHeader>
+                    <AccordionBody TextAlignment="TextAlignment.Start">
                         We pay commissions around the 20 of each month for verified sales from the previous month.
-                    </CollapseBody>
-                </Collapse>
+                    </AccordionBody>
+                </AccordionItem>
 
-                <Collapse>
-                    <CollapseHeader>
+                <AccordionItem>
+                    <AccordionHeader>
                         <Heading Size="HeadingSize.Is5" TextAlignment="TextAlignment.Start" Margin="Margin.Is0.OnY">
                             <AccordionToggle>How do I get paid?</AccordionToggle>
                         </Heading>
-                    </CollapseHeader>
-                    <CollapseBody TextAlignment="TextAlignment.Start">
+                    </AccordionHeader>
+                    <AccordionBody TextAlignment="TextAlignment.Start">
                         We make regular payouts via PayPal or Wise. If you have any questions, feel free to email us at <Anchor To="mailto:[email protected]" Target="Target.Blank" Title="Mail to commercial" rel="noreferrer noopener">commercial@blazorise.com</Anchor>.
-                    </CollapseBody>
-                </Collapse>
+                    </AccordionBody>
+                </AccordionItem>
 
-                <Collapse>
-                    <CollapseHeader>
+                <AccordionItem>
+                    <AccordionHeader>
                         <Heading Size="HeadingSize.Is5" TextAlignment="TextAlignment.Start" Margin="Margin.Is0.OnY">
                             <AccordionToggle>Is there a minimum payment threshold?</AccordionToggle>
                         </Heading>
-                    </CollapseHeader>
-                    <CollapseBody TextAlignment="TextAlignment.Start">
+                    </AccordionHeader>
+                    <AccordionBody TextAlignment="TextAlignment.Start">
                         <Paragraph>
                             a. The minimum payment threshold for all payment methods is €100.
                         </Paragraph>
                         <Paragraph>
                             b. If you have any questions, feel free to email us at <Anchor To="mailto:[email protected]" Target="Target.Blank" Title="Mail to commercial" rel="noreferrer noopener">commercial@blazorise.com</Anchor>.
                         </Paragraph>
-                    </CollapseBody>
-                </Collapse>
+                    </AccordionBody>
+                </AccordionItem>
 
-                <Collapse>
-                    <CollapseHeader>
+                <AccordionItem>
+                    <AccordionHeader>
                         <Heading Size="HeadingSize.Is5" TextAlignment="TextAlignment.Start" Margin="Margin.Is0.OnY">
                             <AccordionToggle>Have more questions?</AccordionToggle>
                         </Heading>
-                    </CollapseHeader>
-                    <CollapseBody TextAlignment="TextAlignment.Start">
+                    </AccordionHeader>
+                    <AccordionBody TextAlignment="TextAlignment.Start">
                         Send an email to <Anchor To="mailto:[email protected]" Target="Target.Blank" Title="Mail to commercial" rel="noreferrer noopener">commercial@blazorise.com</Anchor>, and we will assist you.
-                    </CollapseBody>
-                </Collapse>
+                    </AccordionBody>
+                </AccordionItem>
             </Accordion>
         </Column>
     </Row>

diff --git a/Documentation/Blazorise.Docs/Pages/Docs/Components/Accordions/AccordionPage.razor b/Documentation/Blazorise.Docs/Pages/Docs/Components/Accordions/AccordionPage.razor
@@ -79,15 +79,15 @@
 <Paragraph>
     <Alert Color="Color.Warning" Visible>
         <AlertMessage>
-            Please note the changes starting from 1.5 versions:
+            Please note the changes starting from version 2.0:
         </AlertMessage>
         <AlertDescription>
             <UnorderedList>
                 <UnorderedListItem>
-                    <Strong>Button is obsolete:</Strong> Placing a regular <Link To="docs/components/button">Button</Link> component inside of Accordion is no longer recommended and should be replaced with new <Code Tag>AccordionToggle</Code> component.
+                    <Strong>Support removed in version 2.0:</Strong> Placing a regular <Link To="docs/components/button">Button</Link> component inside of Accordion is no longer supported as of version 2.0. It should be replaced with the new <Code Tag>AccordionToggle</Code> component.
                 </UnorderedListItem>
                 <UnorderedListItem>
-                    <Strong>Collapse is obsolete:</Strong> Placing a regular <Code Tag>Collapse</Code> component inside of Accordion is no longer recommended and should be replaced with the new <Code Tag>AccordionHeader</Code>, and <Code Tag>AccordionBody</Code>, <Code Tag>AccordionItem</Code> components.
+                    <Strong>Support removed in version 2.0:</Strong> Placing a regular <Code Tag>Collapse</Code> component inside of Accordion is no longer supported as of version 2.0. It should be replaced with the new <Code Tag>AccordionHeader</Code>, <Code Tag>AccordionBody</Code>, and <Code Tag>AccordionItem</Code> components.
                 </UnorderedListItem>
             </UnorderedList>
         </AlertDescription>

diff --git a/Documentation/Blazorise.Docs/Pages/News/2025-05-01-release-notes-200.razor b/Documentation/Blazorise.Docs/Pages/News/2025-05-01-release-notes-200.razor
@@ -65,10 +65,13 @@
     <OrderedList>
         <OrderedListItem>
             <Paragraph>
+                Support for using <Code Tag>Collapse</Code> inside an <Code Tag>Accordion</Code> has been removed.
             </Paragraph>
             <UnorderedList>
                 <UnorderedListItem>
                     <Paragraph>
+                        Since version 1.5, placing a <Code Tag>Collapse</Code> inside an <Code Tag>Accordion</Code> is not recommended.
+                        Accordion now works as expected only with accordion components such as <Code Tag>AccordionItem</Code>, <Code Tag>AccordionBody</Code> and <Code Tag>AccordionHeader</Code>.
                     </Paragraph>
                 </UnorderedListItem>
             </UnorderedList>

diff --git a/Source/Blazorise.AntDesign/Providers/AntDesignClassProvider.cs b/Source/Blazorise.AntDesign/Providers/AntDesignClassProvider.cs
@@ -752,17 +752,17 @@ public override string BarToggler( BarMode mode, BarTogglerMode togglerMode ) =>
 
     #region Collapse
 
-    public override string Collapse( bool accordion ) => "ant-collapse-item";
+    public override string Collapse() => "ant-collapse-item";
 
-    public override string CollapseActive( bool accordion, bool active ) => active ? "ant-collapse-item-active" : null;
+    public override string CollapseActive( bool active ) => active ? "ant-collapse-item-active" : null;
 
-    public override string CollapseHeader( bool accordion ) => "ant-collapse-header";
+    public override string CollapseHeader() => "ant-collapse-header";
 
-    public override string CollapseBody( bool accordion ) => "ant-collapse-content";
+    public override string CollapseBody() => "ant-collapse-content";
 
-    public override string CollapseBodyActive( bool accordion, bool active ) => active ? "ant-collapse-content-active" : "ant-collapse-content-inactive";
+    public override string CollapseBodyActive( bool active ) => active ? "ant-collapse-content-active" : "ant-collapse-content-inactive";
 
-    public override string CollapseBodyContent( bool accordion, bool firstInAccordion, bool lastInAccordion ) => "ant-collapse-content-box";
+    public override string CollapseBodyContent() => "ant-collapse-content-box";
 
     #endregion
 

diff --git a/Source/Blazorise.Bootstrap/Providers/BootstrapClassProvider.cs b/Source/Blazorise.Bootstrap/Providers/BootstrapClassProvider.cs
@@ -771,17 +771,17 @@ public override string BarDropdownToggleDisabled( BarMode mode, bool isBarDropDo
 
     #region Collapse
 
-    public override string Collapse( bool accordion ) => "card";
+    public override string Collapse() => "card";
 
-    public override string CollapseActive( bool accordion, bool active ) => null;
+    public override string CollapseActive( bool active ) => null;
 
-    public override string CollapseHeader( bool accordion ) => "card-header";
+    public override string CollapseHeader() => "card-header";
 
-    public override string CollapseBody( bool accordion ) => "collapse";
+    public override string CollapseBody() => "collapse";
 
-    public override string CollapseBodyActive( bool accordion, bool active ) => active ? Show() : null;
+    public override string CollapseBodyActive( bool active ) => active ? Show() : null;
 
-    public override string CollapseBodyContent( bool accordion, bool firstInAccordion, bool lastInAccordion ) => "card-body";
+    public override string CollapseBodyContent() => "card-body";
 
     #endregion
 

diff --git a/Source/Blazorise.Bootstrap5/Components/Button.cs b/Source/Blazorise.Bootstrap5/Components/Button.cs
@@ -1,6 +1,5 @@
 #region Using directives
 using Blazorise.Extensions;
-using Blazorise.Utilities;
 using Microsoft.AspNetCore.Components;
 using Microsoft.AspNetCore.Components.Rendering;
 using Microsoft.AspNetCore.Components.Web;
@@ -10,28 +9,8 @@ namespace Blazorise.Bootstrap5.Components;
 
 public class Button : Blazorise.Button
 {
-    #region Members
-
-    bool collapseVisible;
-
-    #endregion
-
     #region Methods
 
-    protected override void BuildClasses( ClassBuilder builder )
-    {
-        if ( ParentCollapseHeader?.ParentCollapse != null )
-        {
-            if ( ParentCollapseHeader.ParentCollapse.InsideAccordion )
-                builder.Append( "accordion-button" );
-
-            if ( !CollapseVisible )
-                builder.Append( "collapsed" );
-        }
-
-        base.BuildClasses( builder );
-    }
-
     protected override void BuildRenderTree( RenderTreeBuilder builder )
     {
         builder
@@ -59,11 +38,6 @@ protected override void BuildRenderTree( RenderTreeBuilder builder )
             }
         }
 
-        if ( ParentCollapseHeader?.ParentCollapse != null )
-        {
-            builder.AriaExpanded( ParentCollapseHeader.ParentCollapse.Visible.ToString().ToLowerInvariant() );
-        }
-
         builder.OnClick( this, EventCallback.Factory.Create<MouseEventArgs>( this, ClickHandler ) );
         builder.OnClickPreventDefault( Type == ButtonType.Link && To != null && To.StartsWith( "#" ) );
 
@@ -98,28 +72,4 @@ protected override RenderFragment ProvideDefaultLoadingTemplate()
     }
 
     #endregion
-
-    #region Properties
-
-    /// <summary>
-    /// Gets or sets the content visibility.
-    /// </summary>
-    [CascadingParameter( Name = "CollapseVisible" )]
-    public bool CollapseVisible
-    {
-        get => collapseVisible;
-        set
-        {
-            collapseVisible = value;
-
-            DirtyClasses();
-        }
-    }
-
-    /// <summary>
-    /// Gets or sets the cascaded parent collapse header component.
-    /// </summary>
-    [CascadingParameter] protected CollapseHeader ParentCollapseHeader { get; set; }
-
-    #endregion
 }
diff --git a/Source/Blazorise.Bootstrap5/Providers/Bootstrap5ClassProvider.cs b/Source/Blazorise.Bootstrap5/Providers/Bootstrap5ClassProvider.cs
@@ -766,17 +766,17 @@ public override string BarDropdownToggleDisabled( BarMode mode, bool isBarDropDo
 
     #region Collapse
 
-    public override string Collapse( bool accordion ) => accordion ? "accordion-item" : "card";
+    public override string Collapse() => "card";
 
-    public override string CollapseActive( bool accordion, bool active ) => null;
+    public override string CollapseActive( bool active ) => null;
 
-    public override string CollapseHeader( bool accordion ) => accordion ? "accordion-header" : "card-header";
+    public override string CollapseHeader() => "card-header";
 
-    public override string CollapseBody( bool accordion ) => accordion ? "accordion-collapse collapse" : "collapse";
+    public override string CollapseBody() => "collapse";
 
-    public override string CollapseBodyActive( bool accordion, bool active ) => active ? Show() : null;
+    public override string CollapseBodyActive( bool active ) => active ? Show() : null;
 
-    public override string CollapseBodyContent( bool accordion, bool firstInAccordion, bool lastInAccordion ) => accordion ? "accordion-body" : "card-body";
+    public override string CollapseBodyContent() => "card-body";
 
     #endregion
 

diff --git a/Source/Blazorise.Bulma/Providers/BulmaClassProvider.cs b/Source/Blazorise.Bulma/Providers/BulmaClassProvider.cs
@@ -735,7 +735,6 @@ public override string BarDropdownToggleDisabled( BarMode mode, bool isBarDropDo
 
     public override string BarLabel( BarMode mode ) => "b-bar-label";
 
-
     #endregion
 
     #region Accordion
@@ -762,17 +761,17 @@ public override string BarDropdownToggleDisabled( BarMode mode, bool isBarDropDo
 
     #region Collapse
 
-    public override string Collapse( bool accordion ) => "card";
+    public override string Collapse() => "card";
 
-    public override string CollapseActive( bool accordion, bool active ) => null;
+    public override string CollapseActive( bool active ) => null;
 
-    public override string CollapseHeader( bool accordion ) => "card-header";
+    public override string CollapseHeader() => "card-header";
 
-    public override string CollapseBody( bool accordion ) => "collapse";
+    public override string CollapseBody() => "collapse";
 
-    public override string CollapseBodyActive( bool accordion, bool active ) => active ? Show() : null;
+    public override string CollapseBodyActive( bool active ) => active ? Show() : null;
 
-    public override string CollapseBodyContent( bool accordion, bool firstInAccordion, bool lastInAccordion ) => "card-content";
+    public override string CollapseBodyContent() => "card-content";
 
     #endregion
 
@@ -822,7 +821,7 @@ public override string Column( bool grid, ColumnWidth columnWidth, Breakpoint br
     }
 
     public override string Column( bool grid, IEnumerable<ColumnDefinition> columnDefinitions )
-       => string.Join( ' ', columnDefinitions.Select( x => Column( grid, x.ColumnWidth, x.Breakpoint, x.Offset ) ) );
+        => string.Join( ' ', columnDefinitions.Select( x => Column( grid, x.ColumnWidth, x.Breakpoint, x.Offset ) ) );
 
     #endregion