Improve Iconography page (#11832)

[msynk]

closes #11832

Summary by CodeRabbit

• New Features

  • Added search functionality for browsing icons
  • Icon list now displays in a scrollable pane
  • Click any icon to copy to clipboard

• Improvements

  • Redesigned iconography page layout and styling
  • Icon labels now appear on hover for a cleaner interface

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

The Iconography demo page has been refactored to use a parameter-driven layout with BitParams components, replacing static markup. The new Card-based structure incorporates BitSearchBox, BitIcon, BitStack, and BitScrollablePane for responsive icon rendering with copy-to-clipboard functionality and improved empty-state handling.

Changes

Cohort / File(s)	Change Summary
Iconography Page Refactoring src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/IconographyPage.razor	Replaced static section-based markup with parameter-driven layout inside BitParams container. Restructured content blocks into a Card-based layout using BitSearchBox, BitIcon, BitStack, and BitScrollablePane components. Implemented dynamic icon list rendering with empty-state ("No result") and copy-to-clipboard interaction on icon click. Updated textual references to Bit.BlazorUI.Icons package.
Iconography Styling Updates src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/IconographyPage.razor.scss	Removed SCSS imports and icon-list layout block. Introduced deep-scoped rule for search box max-width constraint (19rem). Reworked icon-box styling with width set to 5rem and padding added (0.5rem). Updated hover behavior to show icon-name only on hover within icon-box context.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20–25 minutes

• Verify the parameter-driven layout implementation and cascading params collection logic in IconographyPage.razor
• Confirm all BitComponent integrations (BitParams, BitCard, BitSearchBox, BitIcon, BitStack, BitScrollablePane) are used correctly
• Review empty-state logic and ensure "No result" message displays properly when filtering yields no icons
• Validate icon item click handlers and copy-to-clipboard functionality
• Check CSS scoping and hover behavior for icon-name visibility in the updated SCSS

Poem

🐰 With BitParams now in play, icons dance a brand new way,
Cards and search-box side by side, where clickable gems hide,
Hover reveals their secret names—a stylish game of claims,
From static stone to dynamic flow, our iconography page does glow! ✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'Improve Iconography page' is clear, concise, and directly summarizes the main change of refactoring/improving the Iconography page component.
Linked Issues check	✅ Passed	The pull request successfully addresses both objectives from issue #11832: implements a new layout for the Iconography page and extensively uses Bit BlazorUI components (BitParams, BitCard, BitSearchBox, BitIcon, BitStack, BitScrollablePane).
Out of Scope Changes check	✅ Passed	All changes are scope-aligned with issue #11832: the RAZOR file refactoring uses BlazorUI components and new layout, and SCSS changes support the new component-based design without introducing unrelated functionality.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 2

🧹 Nitpick comments (2)

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/IconographyPage.razor (2)

57-79: Consider virtualization for large icon lists.

The BitScrollablePane with a foreach loop renders all filtered icons at once. If the icon set is large (hundreds or thousands), this could impact rendering performance and memory usage.

Evaluate whether the BitScrollablePane component supports virtualization, or consider implementing a virtualized list if the icon count is substantial.

---

59-62: Consider adding ARIA live region for search result announcements.

The "No result" message appears dynamically based on search input. Adding an ARIA live region would announce result changes to screen reader users, improving the search experience.

 @if (filteredIcons.Count == 0)
 {
-    <BitText Typography="BitTypography.H6">No result</BitText>
+    <BitText Typography="BitTypography.H6" Role="status" AriaLive="polite">No result</BitText>
 }

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Knowledge base: Disabled due to Reviews -> Disable Knowledge Base setting

📥 Commits

Reviewing files that changed from the base of the PR and between 94c62fa and 06097a0.

📒 Files selected for processing (2)

• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/IconographyPage.razor (1 hunks)
• src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/IconographyPage.razor.scss (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: build Bit.BlazorUI

🔇 Additional comments (3)

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/IconographyPage.razor.scss (1)

1-21: LGTM! Clean styling with proper scoping.

The deep-scoped rules are appropriate for Blazor component styling, and the layout values (5rem width, 0.5rem padding, 19rem max-width) provide a clean, compact icon grid.

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/IconographyPage.razor (2)

47-53: Good search UX with immediate feedback and debouncing.

The BitSearchBox configuration with Immediate="true" and DebounceTime="300" provides responsive search while avoiding excessive filtering calls.

---

3-10: Verify that the code-behind methods are implemented.

The cascading parameters setup looks correct. However, ensure that the following members referenced in the page are implemented:

• filteredIcons collection
• HandleChange method
• HandleClear method
• CopyToClipboard method