Add copy feature to Iconography page (#9333) #11227
Conversation
WalkthroughThe iconography page was updated to support a click-to-copy feature for icon names. UI changes include a new caption and updated heading. Each icon is now clickable, triggering a method that copies its name to the clipboard using JavaScript interop. Styling adjustments were made for cursor feedback and spacing. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant IconographyPage (Blazor)
participant JSRuntime
User->>IconographyPage: Clicks an icon
IconographyPage->>IconographyPage: Handle click event
IconographyPage->>JSRuntime: Invoke CopyToClipboard(iconName)
JSRuntime-->>IconographyPage: Clipboard updated
Estimated code review effort🎯 2 (Simple) | ⏱️ ~8 minutes Assessment against linked issues
Poem
Note ⚡️ Unit Test Generation is now available in beta!Learn more here, or try it out under "Finishing Touches" below. ✨ Finishing Touches
🧪 Generate unit tests
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/IconographyPage.razor.cs (1)
40-43: Consider adding error handling and user feedback.The clipboard copy implementation is functionally correct, but could be enhanced with error handling and user feedback.
Consider this improved implementation:
private async Task CopyToClipboard(string iconName) { - await _js.CopyToClipboard(iconName); + try + { + await _js.CopyToClipboard(iconName); + // Optional: Show success notification + // await _js.InvokeVoidAsync("console.log", $"Copied '{iconName}' to clipboard"); + } + catch (Exception ex) + { + // Handle clipboard access failures gracefully + await _js.InvokeVoidAsync("console.error", $"Failed to copy '{iconName}': {ex.Message}"); + } }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Knowledge Base: Disabled due to Reviews > Disable Knowledge Base setting
📒 Files selected for processing (3)
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/IconographyPage.razor(2 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/IconographyPage.razor.cs(3 hunks)src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/IconographyPage.razor.scss(2 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 and test
🔇 Additional comments (6)
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/IconographyPage.razor (2)
20-23: LGTM! Clear user guidance provided.The heading change and addition of the caption element effectively communicate the new click-to-copy functionality to users. The instruction is clear and well-positioned.
42-42: LGTM! Proper async event handling implementation.The onclick event handler correctly calls the CopyToClipboard method asynchronously, following Blazor best practices for async operations in event handlers.
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/IconographyPage.razor.scss (2)
26-26: LGTM! Appropriate cursor feedback for copy functionality.The cursor change from
helptocopyprovides clear visual indication to users that clicking will copy the icon name, enhancing the user experience.
59-59: LGTM! Consistent spacing adjustment.The margin change from
rem2(50px)to1remprovides more consistent spacing in the layout.src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/IconographyPage.razor.cs (2)
12-12: LGTM! Proper dependency injection pattern.The IJSRuntime injection using the [AutoInject] attribute follows the framework's dependency injection pattern correctly.
42-42: Confirmed: CopyToClipboard Is ImplementedThe
CopyToClipboardextension is defined and wired up to a JavaScript implementation:• Extension method in
src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Extensions/IJSRuntimeExtensions.cs
• Signature:
public static async Task CopyToClipboard(this IJSRuntime jsRuntime, string codeSampleContentForCopy)
• Calls:
await jsRuntime.InvokeVoid("copyToClipboard", codeSampleContentForCopy);• JavaScript interop in
src/Butil/Bit.Butil/Scripts/clipboard.ts
• Usesnavigator.clipboard.readText()andnavigator.clipboard.writeText(text)No further changes needed.
1 participant
closes #9333
Summary by CodeRabbit
New Features
Style