fix(module: badge): preset color of ribbon (ant-design-blazor#791)

* Fix ribbon syle Text color was same as background color. * Ribbon documentation Added two ribbon examples with color set (preset and custom) * fix : badgeribbon html content Html content must be the same as in the react version * revert changes We don't change less files. They are copied from react version. * revert * tests: fix badgeribbon unit tests Modified expected html to match markup from react version. * Update tests/badge/RibbonTests.cs Co-authored-by: James Yeung <[email protected]>
lhtuling · Nov 17, 2020 · 3e8fd85 · 3e8fd85
1 parent b76e9d6
commit 3e8fd85
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 6 deletions.
diff --git a/components/badge/BadgeRibbon.razor b/components/badge/BadgeRibbon.razor
@@ -7,7 +7,9 @@
         @ChildContent
     }
     <div class="@ClassMapper.Class" style="@_colorStyle">
-        @if (TextTemplate != null)@TextTemplate else @Text
+        <span class="ant-ribbon-text">
+            @if (TextTemplate != null)@TextTemplate else @Text
+        </span>
         <div class="ant-ribbon-corner" style="@_cornerColorStyle" />
     </div>
-</div>
+</div>
diff --git a/site/AntBlazor.Docs/Demos/Components/Badge/demo/Ribbon.razor b/site/AntBlazor.Docs/Demos/Components/Badge/demo/Ribbon.razor
@@ -2,11 +2,19 @@
     <Card Bordered>And raises the spyglass.</Card>
 </BadgeRibbon>
 <br />
+<BadgeRibbon Text="Pushes open the window" Color="orange">
+    <Card Bordered>And raises the spyglass.</Card>
+</BadgeRibbon>
+<br />
+<BadgeRibbon Text="Pushes open the window" Color="#832">
+    <Card Bordered>And raises the spyglass.</Card>
+</BadgeRibbon>
+<br />
 <BadgeRibbon >
     <TextTemplate>
         <Icon Type="windows" Theme="outline" />Pushes open the window
     </TextTemplate>
     <ChildContent>
         <Card Bordered>And raises the spyglass.</Card>
     </ChildContent>
-</BadgeRibbon>
+</BadgeRibbon>
diff --git a/tests/badge/RibbonTests.cs b/tests/badge/RibbonTests.cs
@@ -1,4 +1,4 @@
-using Bunit;
+using Bunit;
 using Microsoft.AspNetCore.Components;
 using Xunit;
 
@@ -13,6 +13,7 @@ public void TestRibbonEmpty()
             cut.MarkupMatches(@"
                 <div class=""ant-ribbon-wrapper""> 
                     <div class=""ant-ribbon ant-ribbon-placement-end"">
+                    <span class=""ant-ribbon-text""></span>
                         <div class=""ant-ribbon-corner""></div>
                     </div>
                 </div>
@@ -32,6 +33,7 @@ public void TestRibbonPlacement()
                 <div class=""ant-ribbon-wrapper""> 
                     <div /> 
                     <div class=""ant-ribbon ant-ribbon-placement-start"">
+                    <span class=""ant-ribbon-text""></span>
                     <div class=""ant-ribbon-corner"">
                         </div>
                     </div>
@@ -48,6 +50,7 @@ public void TestRibbonPlacement()
                 <div class=""ant-ribbon-wrapper""> 
                     <div /> 
                     <div class=""ant-ribbon ant-ribbon-placement-end"">
+                    <span class=""ant-ribbon-text""></span>
                     <div class=""ant-ribbon-corner"">
                         </div>
                     </div>
@@ -68,6 +71,7 @@ public void TestRibbonPresetColor()
                 <div class=""ant-ribbon-wrapper""> 
                     <div /> 
                     <div class=""ant-ribbon ant-ribbon-placement-end ant-ribbon-color-green"">
+                    <span class=""ant-ribbon-text""></span>
                     <div class=""ant-ribbon-corner"">
                         </div>
                     </div>
@@ -91,6 +95,7 @@ public void TestRibbonCustomColor()
                 <div class=""ant-ribbon-wrapper""> 
                     <div /> 
                     <div class=""ant-ribbon ant-ribbon-placement-end"" style=""background: {color}"">
+                    <span class=""ant-ribbon-text""></span>
                     <div class=""ant-ribbon-corner"" style=""color: {color}"">
                         </div>
                     </div>
@@ -112,7 +117,7 @@ public void TestRibbonText()
                 <div class=""ant-ribbon-wrapper""> 
                     <div /> 
                     <div class=""ant-ribbon ant-ribbon-placement-end"">
-                        unicorn
+                    <span class=""ant-ribbon-text"">unicorn</span>
                         <div class=""ant-ribbon-corner"">
                             </div>
                         </div>
@@ -142,7 +147,9 @@ public void TestRibbonRenderFragment()
                 <div class=""ant-ribbon-wrapper""> 
                     <div /> 
                     <div class=""ant-ribbon ant-ribbon-placement-end"">
-                        <span class=""cool"">Hello</span>
+                        <span class=""ant-ribbon-text"">
+                            <span class=""cool"">Hello</span>
+                        </span>
                         <div class=""ant-ribbon-corner"">
                         </div>
                     </div>