feat(Light): support flash function when set IsFlat to true (#5083)

* feat: add is-flat-flash style

* doc: 更新文档

* test: 更新单元测试

Author: ArgoZhang

src/BootstrapBlazor.Server/Components/Samples/Lights.razor

@@ -94,13 +94,13 @@
             <Light Color="Color.Warning" IsFlat="true"></Light>
         </div>
         <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
-            <Light Color="Color.Primary" IsFlat="true"></Light>
+            <Light Color="Color.Primary" IsFlat="true" IsFlash="true"></Light>
         </div>
         <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
-            <Light Color="Color.Secondary" IsFlat="true"></Light>
+            <Light Color="Color.Secondary" IsFlat="true" IsFlash="true"></Light>
         </div>
         <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
-            <Light Color="Color.Dark" IsFlat="true"></Light>
+            <Light Color="Color.Dark" IsFlat="true" IsFlash="true"></Light>
         </div>
     </div>
     <div class="row g-3 light-sm">

src/BootstrapBlazor.Server/Locales/en-US.json

@@ -485,12 +485,14 @@
     "LightsNormalTitle": "common usage",
     "LightsNormalIntro": "for status indication",
     "LightsFlashingTitle": "flicker",
-    "LightsFlashingIntro": "Flash the light by setting the property <code>IsFlash</code>",
+    "LightsFlashingIntro": "Flash the light by setting the parameter <code>IsFlash</code>",
     "LightsColorTitle": "discoloration",
-    "LightsColorIntro": "Color the light by setting the value of the property <code>Color</code>",
+    "LightsColorIntro": "Color the light by setting the value of the parameter <code>Color</code>",
     "LightsTooltipTextTitle": "prompt text",
     "LightsTooltipTextIntro": "By setting the value of the attribute <code>TooltipText</code> to make the <code>tooltip</code> text prompt when the mouse hovers over the indicator light",
-    "TooltipText": "I am prompt text message"
+    "TooltipText": "I am prompt text message",
+    "LightsFlatTitle": "Flat",
+    "LightsFlatIntro": "Make the indicator light flat by setting the parameter <code>IsFlat</code>"
   },
   "BootstrapBlazor.Server.Components.Samples.Charts.Index": {
     "Chart": "Chart",

src/BootstrapBlazor.Server/Locales/zh-CN.json

@@ -490,7 +490,9 @@
     "LightsColorIntro": "通过设置属性 <code>Color</code> 值使指示灯进行变色",
     "LightsTooltipTextTitle": "提示文字",
     "LightsTooltipTextIntro": "通过设置属性 <code>TooltipText</code> 值使鼠标悬浮指示灯上时提示 <code>tooltip</code> 文字",
-    "TooltipText": "我是提示文字信息"
+    "TooltipText": "我是提示文字信息",
+    "LightsFlatTitle": "扁平化",
+    "LightsFlatIntro": "通过设置属性 <code>IsFlat</code> 使指示灯扁平化"
   },
   "BootstrapBlazor.Server.Components.Samples.Charts.Index": {
     "Chart": "Chart 图表",

src/BootstrapBlazor/Components/Light/Light.razor.cs

@@ -16,6 +16,7 @@ public partial class Light
     protected string? ClassString => CssBuilder.Default("light")
         .AddClass("is-flat", IsFlat)
         .AddClass("flash", IsFlash && !IsFlat)
+        .AddClass("is-flat-flash", IsFlash && IsFlat)
         .AddClass($"light-{Color.ToDescriptionString()}", Color != Color.None)
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();

src/BootstrapBlazor/Components/Light/Light.razor.scss

@@ -76,6 +76,9 @@
             height: 100%;
             border-radius: 50%;
             border: 1px solid var(--bb-light-bg);
+        }
+
+        &.is-flat-flash:after {
             animation: light-flat 1.2s infinite ease-in-out;
         }
     }
@@ -196,7 +199,7 @@
 @include animation(light-danger, #e17777, #892726);
 @include animation(light-success, #5cb85c, #116811);
 @include animation(light-info, #5bc0de, #1d7792);
-@include animation(light-light-warning, #ffc107, #cc9f18);
+@include animation(light-warning, #ffc107, #cc9f18);
 @include animation(light-primary, #007bff, #0f5fb5);
 @include animation(light-secondary, #6c757d, #4b5054);
 @include animation(light-dark, #6061e2, #3232a0);

test/UnitTest/Components/LightTest.cs

@@ -11,14 +11,16 @@ public class LightTest : BootstrapBlazorTestBase
     public void IsFlash_Ok()
     {
         var cut = Context.RenderComponent<Light>(builder => builder.Add(s => s.IsFlash, true));
-        Assert.Contains("flash", cut.Markup);
+        Assert.Contains("light flash", cut.Markup);
+        Assert.DoesNotContain("is-flash-flat", cut.Markup);
 
         cut.SetParametersAndRender(pb =>
         {
             pb.Add(a => a.IsFlat, true);
         });
-        Assert.DoesNotContain("flash", cut.Markup);
+        Assert.DoesNotContain("light flash", cut.Markup);
         Assert.Contains("is-flat", cut.Markup);
+        Assert.Contains("is-flat-flash", cut.Markup);
     }
 
     [Fact]