fix(Collapse): handle accordion mode by collapsing other items when one is expanded

[ArgoZhang]

Link issues

fixes #5439

Summary By Copilot

This pull request includes several changes to the Collapse component in the BootstrapBlazor library. The most important changes involve renaming a property, modifying the click behavior for accordion mode, and updating related unit tests.

Changes to Collapse component:

• Renamed the Children property to Items in Collapse.razor and Collapse.razor.cs for consistency and clarity. [1] [2] [3]
• Updated the click behavior in OnClickItem method to handle accordion mode by collapsing other items when one is expanded.

Code formatting improvements:

• Improved readability by reformatting the div element attributes in Collapse.razor.

Unit tests:

• Modified the Accordion_Ok test method to be asynchronous and to test the click behavior for multiple buttons. [1] [2]

Regression?

• Yes
• No

[If yes, specify the version the behavior has regressed from]

[是否影响老版本]

Risk

• High
• Medium
• Low

[Justify the selection above]

Verification

• Manual (required)
• Automated

Packaging changes reviewed?

• Yes
• No
• N/A

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• Merge the latest code from the main branch

Summary by Sourcery

Improves the functionality and consistency of the Collapse and ListView components. The Collapse component now handles accordion mode by collapsing other items when one is expanded. The ListView component's Pageable property is renamed to IsPagination, and pagination handling is updated.

Bug Fixes:

• Fixes an issue where the Collapse component did not properly handle accordion mode, preventing other items from collapsing when one was expanded.
• Fixes issue bug(Collapse): Glitching accordion #5439

Enhancements:

• Renames the Children property of the Collapse component to Items for consistency.
• Renames the Pageable property of the ListView component to IsPagination and marks Pageable as obsolete.
• Updates the ListView component to use IsPagination instead of Pageable in the markup.
• Updates the GetHeaderClassString method to remove unnecessary class additions in the Collapse component.
• Updates the OnPageLinkClick and QueryAsync methods to handle pagination triggers in the ListView component.

Summary by Sourcery

Improves the functionality of the Collapse component to handle accordion mode by collapsing other items when one is expanded. Also, renames the Children property to Items for consistency.

Bug Fixes:

• Fixes an issue where the Collapse component did not properly handle accordion mode, preventing other items from collapsing when one was expanded. Fixes issue bug(Collapse): Glitching accordion #5439

Enhancements:

• Renames the Children property of the Collapse component to Items for consistency.
• Updates the GetHeaderClassString method to remove unnecessary class additions in the Collapse component.
• Updates the click behavior in OnClickItem method to handle accordion mode by collapsing other items when one is expanded.
• Updates the click behavior in OnClickItem method to handle accordion mode by collapsing other items when one is expanded

Tests:

• Updates the Accordion_Ok test method to be asynchronous and to test the click behavior for multiple buttons.

[sourcery-ai]

Reviewer's Guide by Sourcery

This pull request addresses issue #5439 by implementing the accordion mode functionality for the Collapse component. The Children property was renamed to Items for clarity. The click behavior was updated to collapse other items when one is expanded in accordion mode. Unit tests were also updated to reflect these changes.

No diagrams generated as the changes look simple and do not need a visual representation.

File-Level Changes

Change	Details	Files
Renamed the Children property to Items for better consistency and clarity.	Renamed Children to Items in Collapse.razor.cs. Updated the Collapse.razor file to use Items instead of Children.	src/BootstrapBlazor/Components/Collapse/Collapse.razor.cs src/BootstrapBlazor/Components/Collapse/Collapse.razor
Implemented accordion mode functionality to collapse other items when one is expanded.	Added logic in the OnClickItem method to collapse other items when accordion mode is enabled and an item is expanded. Modified the OnClickItem method to set the clicked item's collapsed state.	src/BootstrapBlazor/Components/Collapse/Collapse.razor.cs
Updated unit tests to reflect the new accordion behavior.	Modified the Accordion_Ok test method to be asynchronous. Updated the Accordion_Ok test method to test the click behavior for multiple buttons.	test/UnitTest/Components/CollapseTest.cs
Improved code readability by reformatting the div element attributes.	Reformatted the div element attributes in Collapse.razor.	src/BootstrapBlazor/Components/Collapse/Collapse.razor
Removed unnecessary class additions in the GetHeaderClassString method.	Removed collapsed class addition in the GetHeaderClassString method in Collapse.razor.cs.	src/BootstrapBlazor/Components/Collapse/Collapse.razor.cs

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#5439	Fix the glitching behavior of the accordion when collapsing panels back and forth.	✅

Possibly linked issues

• bug(Collapse): Glitching accordion #5439: The PR fixes the issue by ensuring only one accordion item is expanded at a time, addressing the glitching behavior.
• bug(Collapse): Glitching accordion #5439: The PR fixes the issue by ensuring that only one item is expanded at a time in accordion mode.

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!
• Generate a plan of action for an issue: Comment @sourcery-ai plan on
  an issue to generate a plan of action for it.

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

We encountered an error and are unable to review this PR. We have been notified and are working to fix it.

You can try again by commenting this pull request with @sourcery-ai review, or contact us for help.

[codecov]

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (929214d) to head (e4a9a6d).
Report is 1 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff            @@
##              main     #5514   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          649       649           
  Lines        29566     29572    +6     
  Branches      4165      4167    +2     
=========================================
+ Hits         29566     29572    +6     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[ArgoZhang]

@sourcery-ai review

[sourcery-ai]

Hey @ArgoZhang - I've reviewed your changes - here's some feedback:

Overall Comments:

• The change to make the Accordion_Ok test method asynchronous is good, as UI interactions are typically asynchronous.
• Consider adding a check in OnClickItem to avoid collapsing items when IsAccordion is true and the clicked item is already expanded.

Here's what I looked at during the review

• 🟡 General issues: 1 issue found
• 🟢 Security: all looks good
• 🟡 Testing: 1 issue found
• 🟢 Complexity: all looks good
• 🟢 Documentation: all looks good

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[ArgoZhang]

@sourcery-ai review

[sourcery-ai]

Hey @ArgoZhang - I've reviewed your changes - here's some feedback:

Overall Comments:

• The property rename from Children to Items improves clarity.
• Consider adding a check to avoid unnecessary iterations in OnClickItem if IsAccordion is false.

Here's what I looked at during the review

• 🟢 General issues: all looks good
• 🟢 Security: all looks good
• 🟡 Testing: 2 issues found
• 🟢 Complexity: all looks good
• 🟢 Documentation: all looks good

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}