Prefixed CSS classes with bm (#418)

* prefixed CSS classes with bm * Fixed unit tests
Blazored · Aug 15, 2022 · 7f9f7eb · 7f9f7eb
1 parent 29e139e
commit 7f9f7eb
Show file tree

Hide file tree

Showing 5 changed files with 35 additions and 26 deletions.
diff --git a/samples/BlazorWebAssembly/wwwroot/css/app.css b/samples/BlazorWebAssembly/wwwroot/css/app.css
@@ -46,6 +46,15 @@ a, .btn-link {
     margin-right: auto;
 }
 
+.my-custom-modal-class {
+    background-color: #b6effb;
+    width: 90%;
+    margin-top: 64px;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 16px;
+}
+
 #blazor-error-ui {
     background: lightyellow;
     bottom: 0;

diff --git a/src/Blazored.Modal/BlazoredModalInstance.razor b/src/Blazored.Modal/BlazoredModalInstance.razor
@@ -6,25 +6,25 @@
 }
 else
 {
-    <div class="blazored-modal-container @Position @OverlayCustomClass @OverlayAnimationClass"
+    <div class="bm-container @Position @OverlayCustomClass @OverlayAnimationClass"
          @ref="_modalReference" 
          @onclick="HandleBackgroundClick">
 
         <FocusTrap @ref="_focusTrap" IsActive="ActivateFocusTrap">
             <div class="@ModalClass" role="dialog" aria-modal="true" @onclick:stopPropagation="true">
                 @if (!HideHeader)
                 {
-                    <div class="header">
-                        <h3 class="title">@Title</h3>
+                    <div class="bm-header">
+                        <h3 class="bm-title">@Title</h3>
                         @if (!HideCloseButton)
                         {
-                            <button type="button" class="close" aria-label="close" @onclick="() => CancelAsync()" @attributes="@_closeBtnAttributes"> 
+                            <button type="button" class="bm-close" aria-label="close" @onclick="() => CancelAsync()" @attributes="@_closeBtnAttributes"> 
                                 <span>&times;</span>
                             </button>
                         }
                     </div>
                 }
-                <div class="content">
+                <div class="bm-content">
                     <CascadingValue Value="this">
                         @Content
                     </CascadingValue>

diff --git a/src/Blazored.Modal/BlazoredModalInstance.razor.css b/src/Blazored.Modal/BlazoredModalInstance.razor.css
@@ -1,4 +1,4 @@
-.blazored-modal-container {
+.bm-container {
     display: block;
     position: fixed;
     top: 0;
@@ -47,18 +47,18 @@
     margin-right: auto;
 }
 
-.header {
+.bm-header {
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     padding: 0 0 2rem 0;
 }
 
-.title {
+.bm-title {
     margin-bottom: 0;
 }
 
-.close {
+.bm-close {
     padding: 1rem;
     margin: -1rem -1rem -1rem auto;
     background-color: transparent;

diff --git a/tests/Blazored.Modal.Tests/DisplayTests.cs b/tests/Blazored.Modal.Tests/DisplayTests.cs
@@ -28,7 +28,7 @@ public void ModalIsNotVisibleByDefault()
             var cut = RenderComponent<BlazoredModal>(CascadingValue(modalService));
 
             // Assert
-            Assert.Empty(cut.FindAll(".blazored-modal-container"));
+            Assert.Empty(cut.FindAll(".bm-container"));
         }
 
         [Fact]
@@ -57,7 +57,7 @@ public void MultipleModalsAreVisibleWhenShowCalledMultipleTimes()
             modalService.Show<TestComponent>();
 
             // Assert
-            Assert.Equal(2, cut.FindAll(".blazored-modal-container").Count);
+            Assert.Equal(2, cut.FindAll(".bm-container").Count);
         }
 
         [Fact]
@@ -73,13 +73,13 @@ public void ModalHidesWhenCloseCalled()
                 AnimationType = ModalAnimationType.None
             };
             modalService.Show<TestComponent>("", options);
-            Assert.Equal(1, cut.FindAll(".blazored-modal-container").Count);
+            Assert.Equal(1, cut.FindAll(".bm-container").Count);
 
             var closeButton = cut.Find(".test-component__close-button");
             closeButton.Click();
 
             // Assert
-            Assert.Empty(cut.FindAll(".blazored-modal-container"));
+            Assert.Empty(cut.FindAll(".bm-container"));
         }
 
         [Fact]
@@ -95,13 +95,13 @@ public void ModalHidesWhenCancelCalled()
                 AnimationType = ModalAnimationType.None
             };
             modalService.Show<TestComponent>("", options);
-            Assert.Equal(1, cut.FindAll(".blazored-modal-container").Count);
+            Assert.Equal(1, cut.FindAll(".bm-container").Count);
 
-            var closeButton = cut.Find(".close");
+            var closeButton = cut.Find(".bm-close");
             closeButton.Click();
 
             // Assert
-            Assert.Empty(cut.FindAll(".blazored-modal-container"));
+            Assert.Empty(cut.FindAll(".bm-container"));
         }
 
         [Fact]
@@ -117,12 +117,12 @@ public void ModalHidesWhenReferenceCloseCalled()
                 AnimationType = ModalAnimationType.None
             };
             var modalReferece = modalService.Show<TestComponent>("", options);
-            Assert.Equal(1, cut.FindAll(".blazored-modal-container").Count);
+            Assert.Equal(1, cut.FindAll(".bm-container").Count);
 
             modalReferece.Close();
 
             // Assert
-            Assert.Empty(cut.FindAll(".blazored-modal-container"));
+            Assert.Empty(cut.FindAll(".bm-container"));
         }
     }
 }
diff --git a/tests/Blazored.Modal.Tests/ModalOptionsTests.cs b/tests/Blazored.Modal.Tests/ModalOptionsTests.cs
@@ -29,7 +29,7 @@ public void ModalDisplaysSpecifiedTitle()
             modalService.Show<TestComponent>(testTitle);
 
             // Assert
-            Assert.Equal(testTitle, cut.Find(".title").InnerHtml);
+            Assert.Equal(testTitle, cut.Find(".bm-title").InnerHtml);
         }
 
         [Fact]
@@ -44,7 +44,7 @@ public void ModalDisplaysCorrectPositionClassWhenIsCentered()
             modalService.Show<TestComponent>("", options);
 
             // Assert
-            Assert.NotNull(cut.Find(".blazored-modal-container"));
+            Assert.NotNull(cut.Find(".bm-container"));
         }
 
         [Fact]
@@ -59,7 +59,7 @@ public void ModalDisplaysCorrectPositionClassWhenIsNotCentered()
             modalService.Show<TestComponent>("", options);
 
             // Assert
-            Assert.NotNull(cut.Find(".blazored-modal-container.position-topleft"));
+            Assert.NotNull(cut.Find(".bm-container.position-topleft"));
         }
 
         [Fact]
@@ -79,7 +79,7 @@ public void ModalDisplaysCorrectPositionClassWhenUsingCustomPosition()
             modalService.Show<TestComponent>("", options);
 
             // Assert
-            Assert.NotNull(cut.Find(".blazored-modal-container.my-custom-class"));
+            Assert.NotNull(cut.Find(".bm-container.my-custom-class"));
         }
 
         [Fact]
@@ -109,7 +109,7 @@ public void ModalDisplaysCloseButtonByDefault()
             modalService.Show<TestComponent>();
 
             // Assert
-            Assert.NotNull(cut.Find(".close"));
+            Assert.NotNull(cut.Find(".bm-close"));
         }
 
         [Fact]
@@ -124,7 +124,7 @@ public void ModalDoesNotDisplayCloseButtonWhenSetToFalseInOptions()
             modalService.Show<TestComponent>("", options);
 
             // Assert
-            Assert.Empty(cut.FindAll(".blazored-modal-close"));
+            Assert.Empty(cut.FindAll(".bm-close"));
         }
 
         [Fact]
@@ -138,7 +138,7 @@ public void ModalDisplaysHeaderByDefault()
             modalService.Show<TestComponent>();
 
             // Assert
-            Assert.NotNull(cut.Find(".header"));
+            Assert.NotNull(cut.Find(".bm-header"));
         }
 
         [Fact]
@@ -153,7 +153,7 @@ public void ModalDoesNotDisplayHeaderWhenSetToFalseInOptions()
             modalService.Show<TestComponent>("", options);
 
             // Assert
-            Assert.Empty(cut.FindAll(".blazored-modal-header"));
+            Assert.Empty(cut.FindAll(".bm-header"));
         }
 
         [Fact]