feat(FileIcon): add Size parameter (#5263)

* feat: 增加 Size 参数

* doc: 增加文档

* doc: 增加本地化资源

* test: 增加单元测试

Author: ArgoZhang

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

@@ -118,4 +118,37 @@
     </div>
 </DemoBlock>
 
+<DemoBlock Title="@Localizer["SizeTitle"]" Introduction="@Localizer["SizeIntro"]" Name="Size">
+    <div class="row row-cols-auto g-2">
+        <div class="col">
+            <FileIcon Extension=".xlsx" IconColor="Color.Success" Size="Size.ExtraSmall">
+            </FileIcon>
+        </div>
+        <div class="col ms-3">
+            <FileIcon Extension=".xlsx" IconColor="Color.Success" Size="Size.Small">
+            </FileIcon>
+        </div>
+        <div class="col ms-3">
+            <FileIcon Extension=".xlsx" IconColor="Color.Success" Size="Size.None">
+            </FileIcon>
+        </div>
+        <div class="col ms-3">
+            <FileIcon Extension=".xlsx" IconColor="Color.Success" Size="Size.Medium">
+            </FileIcon>
+        </div>
+        <div class="col ms-3">
+            <FileIcon Extension=".xlsx" IconColor="Color.Success" Size="Size.Large">
+            </FileIcon>
+        </div>
+        <div class="col ms-3">
+            <FileIcon Extension=".xlsx" IconColor="Color.Success" Size="Size.ExtraLarge">
+            </FileIcon>
+        </div>
+        <div class="col ms-3">
+            <FileIcon Extension=".xlsx" IconColor="Color.Success" Size="Size.ExtraExtraLarge">
+            </FileIcon>
+        </div>
+    </div>
+</DemoBlock>
+
 <AttributeTable Items="@GetAttributes()" />

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

@@ -5961,7 +5961,9 @@
     "CustomCssIntro": "Set <code>class</code> parameter set the style for the file icon component",
     "ExtensionAttr": "The extension of file",
     "IconColorAttr": "The backgound color for badge of extension",
-    "BackgroundTemplateAttr": "The template for custom the backgroup file"
+    "BackgroundTemplateAttr": "The template for custom the backgroup file",
+    "SizeTitle": "Size",
+    "SizeIntro":"Set the icon size by setting <code>Size</code>"
   },
   "BootstrapBlazor.Server.Components.Samples.PdfReaders": {
     "Title": "PDF Reader",

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

@@ -5961,7 +5961,9 @@
     "CustomCssIntro": "通过设置 <code>class</code> 自定义样式调整图标大小",
     "ExtensionAttr": "文件扩展名",
     "IconColorAttr": "扩展名标签背景色",
-    "BackgroundTemplateAttr": "自定义背景图模板"
+    "BackgroundTemplateAttr": "自定义背景图模板",
+    "SizeTitle": "大小",
+    "SizeIntro": "通过设置 <code>Size</code> 设置图标大小"
   },
   "BootstrapBlazor.Server.Components.Samples.PdfReaders": {
     "Title": "PDF Reader PDF阅读器",

src/BootstrapBlazor/Components/FileIcon/FileIcon.razor.cs

@@ -11,6 +11,7 @@ namespace BootstrapBlazor.Components;
 public partial class FileIcon
 {
     private string? ClassString => CssBuilder.Default("file-icon")
+        .AddClass($"file-icon-{Size.ToDescriptionString()}", Size != Size.None)
         .AddClassFromAttributes(AdditionalAttributes)
         .Build();
 
@@ -22,9 +23,7 @@ public partial class FileIcon
     /// 获得/设置 文件类型扩展名 
     /// </summary>
     [Parameter]
-#if NET6_0_OR_GREATER
     [EditorRequired]
-#endif
     public string? Extension { get; set; }
 
     /// <summary>
@@ -38,4 +37,10 @@ public partial class FileIcon
     /// </summary>
     [Parameter]
     public Color IconColor { get; set; } = Color.Primary;
+
+    /// <summary>
+    /// 获得/设置 图标大小 默认 Color.None
+    /// </summary>
+    [Parameter]
+    public Size Size { get; set; }
 }

src/BootstrapBlazor/Components/FileIcon/FileIcon.razor.scss

@@ -4,13 +4,14 @@
     --bb-file-icon-padding-left: #{$bb-file-icon-padding-left};
     --bb-file-icon-badge-bottom: #{$bb-file-icon-badge-bottom};
     --bb-file-icon-path-fill-color: #{$bb-file-icon-path-fill-color};
+    --bb-file-icon-size: 1;
     padding-left: var(--bb-file-icon-padding-left);
     display: inline-block;
     position: relative;
 
     .icon-svg {
-        width: var(--bb-file-icon-width);
-        height: var(--bb-file-icon-height);
+        width: calc(var(--bb-file-icon-width) * var(--bb-file-icon-size));
+        height: calc(var(--bb-file-icon-height) * var(--bb-file-icon-size));
 
         path {
             fill: var(--bb-file-icon-path-fill-color);
@@ -21,5 +22,30 @@
         position: absolute;
         bottom: var(--bb-file-icon-badge-bottom);
         left: 0;
+        font-size: calc(var(--bs-badge-font-size) * var(--bb-file-icon-size));
+    }
+
+    &.file-icon-xs {
+        --bb-file-icon-size: 0.5;
+    }
+
+    &.file-icon-sm {
+        --bb-file-icon-size: 0.75;
+    }
+
+    &.file-icon-md {
+        --bb-file-icon-size: 1.25;
+    }
+
+    &.file-icon-lg {
+        --bb-file-icon-size: 1.5;
+    }
+
+    &.file-icon-xl {
+        --bb-file-icon-size: 1.75;
+    }
+
+    &.file-icon-xxl {
+        --bb-file-icon-size: 2;
     }
 }

test/UnitTest/Components/FileIconTest.cs

@@ -39,4 +39,33 @@ public void BackgroundTemplate_Ok()
         });
         cut.Contains("test-content");
     }
+
+    [Theory]
+    [InlineData(Size.ExtraSmall)]
+    [InlineData(Size.Small)]
+    [InlineData(Size.Medium)]
+    [InlineData(Size.Large)]
+    [InlineData(Size.ExtraLarge)]
+    [InlineData(Size.ExtraExtraLarge)]
+    public void Size_Ok(Size size)
+    {
+        var cut = Context.RenderComponent<FileIcon>(pb =>
+        {
+            pb.Add(a => a.Extension, ".xlsx");
+            pb.Add(a => a.Size, size);
+        });
+        cut.Contains($"file-icon file-icon-{size.ToDescriptionString()}");
+    }
+
+    [Fact]
+    public void Size_None()
+    {
+        var cut = Context.RenderComponent<FileIcon>(pb =>
+        {
+            pb.Add(a => a.Extension, ".xlsx");
+            pb.Add(a => a.Size, Size.None);
+        });
+        cut.Contains("file-icon");
+        cut.DoesNotContain("file-icon-none");
+    }
 }