#1080 Fix modal custom icon #1092
Conversation
There was a problem hiding this comment.
Pull Request Overview
This PR adjusts the modal close button to allow a fully custom icon by stripping Bootstrap’s built-in close‐button styling and replacing the wrapper <div> with a real <button>. Key changes include:
- Added a scoped CSS class to unset Bootstrap’s close-button variables.
- Swapped the
<div>wrapper for a<button>with the new CSS class applied. - Updated the test page to demonstrate the new
CloseButtonIconusage.
Reviewed Changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| HxModal.razor.css | Introduces .btn-close-custom-icon to clear Bootstrap defaults |
| HxModal.razor | Replaces <div> with <button> and adds the custom-icon class |
| BlazorAppTest/Pages/HxModalTest.razor | Adds a Title and custom CloseButtonIcon to the demo modal |
Comments suppressed due to low confidence (1)
BlazorAppTest/Pages/HxModalTest.razor:17
- Consider adding an automated test to verify that setting
CloseButtonIconrenders the expected custom icon and CSS class in the modal header.
<HxModal @ref="mySecondModal" Title="A very balanced close icon" CloseButtonIcon="BootstrapIcon.YinYang">
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
| @@ -27,7 +27,9 @@ | |||
| } | |||
| else | |||
| { | |||
| <div role="button" data-bs-dismiss="modal" aria-label="Close"><HxIcon Icon="CloseButtonIconEffective"/></div> | |||
| <button type="button" class="btn-close btn-close-custom-icon center d-flex align-items-center" data-bs-dismiss="modal" aria-label="Close"> | |||
There was a problem hiding this comment.
@Xopabyteh the "center" css class is suspicious to me. What is it suppose to do?
There was a problem hiding this comment.
Intellisense artifact, sorry :D
| @@ -0,0 +1,10 @@ | |||
| /* Remove custom bootstrap styling to preserve custom icon style */ | |||
| .btn-close-custom-icon { | |||
There was a problem hiding this comment.
@Xopabyteh lets call it hx-modal-custom-close-btn and only set --bs-btn-close-bg: unset; and remove the rest. It is very likely that you wanna set some of the vars your own and so I would leave the potential unset on you.
Solves #1080
Bootstrap applies a lot of custom styling along with layout, so it is kinda hacky to get rid of it. (Also because the close button is a custom concept, different from Bootstrap Icons.)
Perhaps the best solution, due to bootstraps decision on this, is to change the $btn-close-bg variable or to use a custom header and avoid reimplementing the close button (as in the current API & this PR)