search

dotnetcore / BootstrapBlazor

Bootstrap Blazor is an enterprise-level UI component library based on Bootstrap and Blazor.
https://www.blazor.zone
Apache License 2.0
2.68k stars 302 forks source link

refactor(TreeView): redesign TreeView dom structure #4696

Closed ArgoZhang closed 3 days ago

ArgoZhang commented 3 days ago

redesign TreeView dom structure

Summary of the changes (Less than 80 chars)

简单描述你更改了什么, 不超过80个字符；如果有关联 Issue 请在下方填写相关编号

Description

fixes #4695

Regression?

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

[是否影响老版本]

Risk

[Justify the selection above]

Verification

Packaging changes reviewed?

☑️ Self Check before Merge

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

Summary by Sourcery

Redesign the TreeView component's DOM structure to enhance its layout and styling, and update the corresponding unit tests to reflect these changes.

Enhancements:

Tests:

sourcery-ai[bot] commented 3 days ago

Reviewer's Guide by Sourcery

This PR redesigns the TreeView component's DOM structure by flattening the nested ul/li hierarchy into a simpler div-based layout. The changes improve the component's structure while maintaining existing functionality through updated selectors and styling.

Updated class diagram for TreeView component

classDiagram
    class TreeView {
        +bool IsDisabled
        +bool CanExpandWhenDisabled
        +List~TreeViewItem~ Rows
        +RenderFragment~TreeViewItem~ RenderTreeRow
        +string? GetContentClassString(TreeViewItem item)
        +bool CanTriggerClickNode(TreeViewItem item)
        +Task OnClick(TreeViewItem item)
    }
    class TreeViewItem {
        +bool IsDisabled
        +bool HasChildren
        +List~TreeViewItem~ Items
        +TreeViewItem Parent
    }
    TreeView o-- TreeViewItem
    note for TreeView "Redesigned DOM structure with div-based layout"

Updated class diagram for CSS changes in TreeView

classDiagram
    class TreeViewCSS {
        +--bb-tree-padding
        +--bb-tree-margin
        +--bb-tree-padding-left
        +--bb-tree-item-margin
        +--bb-tree-icon-width
        +--bb-tree-check-margin
        +--bb-tree-disabled-opacity
        +--bb-tree-item-active-color
        +--bb-tree-item-active-bg
        +--bb-tree-item-hover-bg
    }
    note for TreeViewCSS "Updated CSS variables and structure for TreeView"

File-Level Changes

Change Details Files
Simplified DOM structure by removing nested ul/li elements
  • Replaced nested ul/li hierarchy with flat div structure
  • Updated CSS classes and selectors to work with new structure
  • Moved level-based indentation to CSS variable --bb-tree-view-level
  • Renamed CSS variable from --bb-tree-ul-padding-left to --bb-tree-padding-left
 src/BootstrapBlazor/Components/TreeView/TreeView.razor
src/BootstrapBlazor/Components/TreeView/TreeView.razor.scss
src/BootstrapBlazor/wwwroot/scss/theme/bootstrapblazor.scss
Improved test structure and assertions
  • Updated element selectors to match new DOM structure
  • Converted synchronous tests to async where needed
  • Added more specific assertions for component states
  • Improved test readability with better variable names
 test/UnitTest/Components/TreeViewTest.cs
test/UnitTest/Components/SelectTreeTest.cs
Enhanced component behavior and state management
  • Improved disabled state handling logic
  • Updated node expansion logic to consider HasChildren property
  • Refactored click handling and node toggling logic
  • Added preventDefault to checkbox click events
 src/BootstrapBlazor/Components/TreeView/TreeView.razor.cs
src/BootstrapBlazor/Components/Checkbox/Checkbox.razor.js
src/BootstrapBlazor/Misc/ExpandableNodeCache.cs

Assessment against linked issues

Issue Objective Addressed Explanation
#4695 Redesign TreeView DOM structure to improve organization and maintainability ✅

Possibly linked issues

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. - **Generate a pull request title:** Write `@sourcery-ai` anywhere in the pull request title to generate a 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. You can also use this command to specify where the summary should be inserted. #### Customizing Your Experience Access your [dashboard](https://app.sourcery.ai) 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](mailto:support@sourcery.ai) for questions or feedback. - Visit our [documentation](https://docs.sourcery.ai) for detailed guides and information. - Keep in touch with the Sourcery team by following us on [X/Twitter](https://x.com/SourceryAI), [LinkedIn](https://www.linkedin.com/company/sourcery-ai/) or [GitHub](https://github.com/sourcery-ai).
codecov[bot] commented 3 days ago

Codecov Report

All modified and coverable lines are covered by tests :white_check_mark:

Project coverage is 100.00%. Comparing base (4673c39) to head (661b584). Report is 1 commits behind head on main.

Additional details and impacted files ```diff @@ Coverage Diff @@ ## main #4696 +/- ## ========================================= Coverage 100.00% 100.00% ========================================= Files 620 620 Lines 27388 27378 -10 Branches 3926 3923 -3 ========================================= - Hits 27388 27378 -10 ```

:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.

🚨 Try these New Features: