improved icon button size - #143
Conversation
|
WalkthroughThis change updates the SidePanelComponent by adding a specific CSS class to header action buttons and refines the associated CSS styling. The CSS selector is expanded, color variables are updated, and new style rules are introduced for icon buttons within the side panel actions. Changes
Sequence Diagram(s)sequenceDiagram
participant User
participant SidePanelComponent
participant CSS
User->>SidePanelComponent: Interacts with header action buttons
SidePanelComponent->>CSS: Applies "sidepanel-icon-button" class to buttons
CSS-->>SidePanelComponent: Styles buttons and icons based on new selectors and variables
Estimated code review effort2 (~12 minutes) Possibly related PRs
Suggested reviewers
Poem
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: 1
🧹 Nitpick comments (2)
Src/Innovative.Blazor.Components/Components/SidePanel/SidePanelComponent.razor.css (2)
34-36:::deeptriggers linter errors – silence or scope the ruleThe Biome warning about an “unknown pseudo-element” is a false positive:
::deepis explicitly supported by Blazor CSS-isolation to pierce the generated scope attribute. Consider adding an ignore comment (/* biome-ignore noUnknownPseudoElement */) or linter override for.razor.cssfiles to keep CI green.
61-63: Selector duplication can be reducedBoth the normal and hover state inside
::deepshare the same colour. You can drop the second selector and let the inherited colour handle hover:-.sidepanel-actions ::deep .sidepanel-icon-button .rz-button-box .material-symbols-outlined, -.sidepanel-actions ::deep .sidepanel-icon-button:hover .rz-button-box .material-symbols-outlined { +.sidepanel-actions ::deep .sidepanel-icon-button .rz-button-box .material-symbols-outlined { color: var(--innov-base-50, #fafafa); }Behaviour stays identical while trimming CSS bytes.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (2)
Src/Innovative.Blazor.Components/Components/SidePanel/SidePanelComponent.razor(2 hunks)Src/Innovative.Blazor.Components/Components/SidePanel/SidePanelComponent.razor.css(2 hunks)
🪛 Biome (2.1.2)
Src/Innovative.Blazor.Components/Components/SidePanel/SidePanelComponent.razor.css
[error] 35-35: Unexpected unknown pseudo-elements: deep
See MDN web docs for more details.
Use a known pseudo-elements instead, such as:
(lint/correctness/noUnknownPseudoElement)
[error] 61-61: Unexpected unknown pseudo-elements: deep
See MDN web docs for more details.
Use a known pseudo-elements instead, such as:
(lint/correctness/noUnknownPseudoElement)
[error] 62-62: Unexpected unknown pseudo-elements: deep
See MDN web docs for more details.
Use a known pseudo-elements instead, such as:
(lint/correctness/noUnknownPseudoElement)
🧰 Additional context used
🪛 Biome (2.1.2)
Src/Innovative.Blazor.Components/Components/SidePanel/SidePanelComponent.razor.css
[error] 35-35: Unexpected unknown pseudo-elements: deep
See MDN web docs for more details.
Use a known pseudo-elements instead, such as:
(lint/correctness/noUnknownPseudoElement)
[error] 61-61: Unexpected unknown pseudo-elements: deep
See MDN web docs for more details.
Use a known pseudo-elements instead, such as:
(lint/correctness/noUnknownPseudoElement)
[error] 62-62: Unexpected unknown pseudo-elements: deep
See MDN web docs for more details.
Use a known pseudo-elements instead, such as:
(lint/correctness/noUnknownPseudoElement)
🔇 Additional comments (1)
Src/Innovative.Blazor.Components/Components/SidePanel/SidePanelComponent.razor (1)
21-24: CSS class injection looks correct – double-check Radzen’sclasspassthroughAttaching
class="sidepanel-icon-button"toRadzenButtonrelies on the component forwarding arbitrary attributes to the underlying<button>(Radzen does this viaAdditionalAttributes).
Just make sure you’re on a Radzen version ≥ 4.15 where this behaviour is guaranteed; otherwise the class might never reach the DOM and the new styles won’t apply.
No code changes required – only verification.Also applies to: 28-31, 42-45
| .sidepanel-icon-button .material-symbols-outlined { | ||
| color: var(--rz-text-tertiary-color); | ||
| color: var(--innov-base-600, #675f5f); | ||
| } | ||
|
|
||
| .sidepanel-icon-button:hover .material-symbols-outlined { | ||
| color: var(--rz-text-title-color); | ||
| color: var(--innov-base-900, #0d0c0c); | ||
| } | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
Colour rules may be overridden unexpectedly
You now have two hover-colour rules:
.sidepanel-icon-button:hover .material-symbols-outlined { color: var(--innov-base-900); }.sidepanel-actions ::deep .sidepanel-icon-button:hover .rz-button-box .material-symbols-outlined { color: var(--innov-base-50); }
Inside a RadzenButton, rule 2 wins due to higher specificity, leading to different hover colours for native <button> vs RadzenButton> variants of the same icon button.
If that’s intentional, add an inline comment; if not, unify the colours or raise specificity for rule 1.
🤖 Prompt for AI Agents
In
Src/Innovative.Blazor.Components/Components/SidePanel/SidePanelComponent.razor.css
around lines 53 to 60, there are conflicting hover color rules for
.material-symbols-outlined inside .sidepanel-icon-button, causing inconsistent
hover colors between native buttons and RadzenButton variants due to specificity
differences. To fix this, either add an inline comment explaining the
intentional difference in hover colors or unify the hover color values to be
consistent. Alternatively, increase the specificity of the first hover rule to
match or override the second rule if the color should be the same.
2 participants
Summary by CodeRabbit