feat(blazorui): add Size parameter to BitTag #8183 (#8200)

bitfoundation · Aug 3, 2024 · 6423811 · 6423811
1 parent 2814416
commit 6423811
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 9 deletions.
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.razor.cs
@@ -8,7 +8,7 @@ public partial class BitTag : BitComponentBase
     [Parameter] public RenderFragment? ChildContent { get; set; }
 
     /// <summary>
-    /// Custom CSS classes for different parts of the BitTag.
+    /// Custom CSS classes for different parts of the tag.
     /// </summary>
     [Parameter] public BitTagClassStyles? Classes { get; set; }
 
@@ -34,7 +34,13 @@ public partial class BitTag : BitComponentBase
     [Parameter] public EventCallback<MouseEventArgs> OnDismiss { get; set; }
 
     /// <summary>
-    /// Custom CSS styles for different parts of the BitTag.
+    /// The size of the tag.
+    /// </summary>
+    [Parameter, ResetClassBuilder]
+    public BitSize? Size { get; set; }
+
+    /// <summary>
+    /// Custom CSS styles for different parts of the tag.
     /// </summary>
     [Parameter] public BitTagClassStyles? Styles { get; set; }
 
@@ -70,6 +76,14 @@ protected override void RegisterCssClasses()
             _ => "bit-tag-pri"
         });
 
+        ClassBuilder.Register(() => Size switch
+        {
+            BitSize.Small => "bit-tag-sm",
+            BitSize.Medium => "bit-tag-md",
+            BitSize.Large => "bit-tag-lg",
+            _ => "bit-tag-md"
+        });
+
         ClassBuilder.Register(() => Variant switch
         {
             BitVariant.Fill => "bit-tag-fil",

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.scss b/src/BlazorUI/Bit.BlazorUI/Components/Notifications/Tag/BitTag.scss
@@ -5,13 +5,13 @@
     overflow: hidden;
     align-items: center;
     display: inline-flex;
-    font-size: spacing(1.75);
     font-family: $tg-font-family;
     font-weight: $tg-font-weight;
     border-style: $shp-border-style;
     border-width: $shp-border-width;
     border-radius: $shp-border-radius;
-    padding: spacing(0.75) spacing(1.5);
+    font-size: var(--bit-tag-fontsize);
+    padding: var(--bit-tag-padding);
 
     &.bit-dis {
         cursor: default;
@@ -104,3 +104,18 @@
     --bit-tag-clr: #{$clr-err};
     --bit-tag-clr-txt: #{$clr-err-text};
 }
+
+.bit-tag-sm {
+    --bit-tag-fontsize: #{spacing(1.5)};
+    --bit-tag-padding: #{spacing(0.5)} #{spacing(1)};
+}
+
+.bit-tag-md {
+    --bit-tag-fontsize: #{spacing(1.75)};
+    --bit-tag-padding: #{spacing(0.75)} #{spacing(1.5)};
+}
+
+.bit-tag-lg {
+    --bit-tag-fontsize: #{spacing(2)};
+    --bit-tag-padding: #{spacing(1)} #{spacing(2)};
+}
diff --git a/.../Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor b/.../Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor
@@ -83,7 +83,25 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="Template" RazorCode="@example6RazorCode" Id="example6">
+    <ComponentExampleBox Title="Size" RazorCode="@example6RazorCode" Id="example6">
+        <ExamplePreview>
+            <div>Offering a range of specialized color variants, providing visual cues for specific actions or states within your application.</div>
+            <br />
+            <BitTag Text="Small" IconName="@BitIconName.Calendar" Size="BitSize.Small" Variant="BitVariant.Fill" />&nbsp;
+            <BitTag Text="Small" IconName="@BitIconName.Calendar" Size="BitSize.Small" Variant="BitVariant.Outline" />&nbsp;
+            <BitTag Text="Small" IconName="@BitIconName.Calendar" Size="BitSize.Small" Variant="BitVariant.Text" />
+            <br /><br />
+            <BitTag Text="Medium" IconName="@BitIconName.Calendar" Size="BitSize.Medium" Variant="BitVariant.Fill" />&nbsp;
+            <BitTag Text="Medium" IconName="@BitIconName.Calendar" Size="BitSize.Medium" Variant="BitVariant.Outline" />&nbsp;
+            <BitTag Text="Medium" IconName="@BitIconName.Calendar" Size="BitSize.Medium" Variant="BitVariant.Text" />
+            <br /><br />
+            <BitTag Text="Large" IconName="@BitIconName.Calendar" Size="BitSize.Large" Variant="BitVariant.Fill" />&nbsp;
+            <BitTag Text="Large" IconName="@BitIconName.Calendar" Size="BitSize.Large" Variant="BitVariant.Outline" />&nbsp;
+            <BitTag Text="Large" IconName="@BitIconName.Calendar" Size="BitSize.Large" Variant="BitVariant.Text" />
+        </ExamplePreview>
+    </ComponentExampleBox>
+
+    <ComponentExampleBox Title="Template" RazorCode="@example7RazorCode" Id="example7">
         <ExamplePreview>
             <BitTag>
                 <BitStack Horizontal Gap="0.5rem" Style="padding-inline: 0.5rem;">
@@ -94,7 +112,7 @@
         </ExamplePreview>
     </ComponentExampleBox>
 
-    <ComponentExampleBox Title="Style & Class" RazorCode="@example7RazorCode" Id="example7">
+    <ComponentExampleBox Title="Style & Class" RazorCode="@example8RazorCode" Id="example8">
         <ExamplePreview>
             <div>Empower customization by overriding default styles and classes, allowing tailored design modifications to suit specific UI requirements.</div>
             <br />

diff --git a/...ient/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.cs b/...ient/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Notifications/Tag/BitTagDemo.razor.cs
@@ -16,7 +16,7 @@ public partial class BitTagDemo
             Name = "Classes",
             Type = "BitTagClassStyles?",
             DefaultValue = "null",
-            Description = "Custom CSS classes for different parts of the BitTag.",
+            Description = "Custom CSS classes for different parts of the tag.",
             LinkType = LinkType.Link,
             Href = "#tag-class-styles"
         },
@@ -51,11 +51,20 @@ public partial class BitTagDemo
             Description = "Dismiss button click event, if set the dismiss icon will show up."
         },
         new()
+        {
+            Name = "Size",
+            Type = "BitSize?",
+            DefaultValue = "null",
+            Description = "The size of the tag.",
+            LinkType = LinkType.Link,
+            Href = "#size-enum",
+        },
+        new()
         {
             Name = "Styles",
             Type = "BitTagClassStyles?",
             DefaultValue = "null",
-            Description = "Custom CSS styles for different parts of the BitTag.",
+            Description = "Custom CSS styles for different parts of the tag.",
             LinkType = LinkType.Link,
             Href = "#tag-class-styles"
         },
@@ -184,6 +193,33 @@ public partial class BitTagDemo
             ]
         },
         new()
+        {
+            Id = "size-enum",
+            Name = "BitSize",
+            Description = "",
+            Items =
+            [
+                new()
+                {
+                    Name= "Small",
+                    Description="The small size.",
+                    Value="0",
+                },
+                new()
+                {
+                    Name= "Medium",
+                    Description="The medium size.",
+                    Value="1",
+                },
+                new()
+                {
+                    Name= "Large",
+                    Description="The large size.",
+                    Value="2",
+                }
+            ]
+        },
+        new()
         {
             Id = "variant-enum",
             Name = "BitVariant",
@@ -275,14 +311,27 @@ public partial class BitTagDemo
 <BitTag Text=""Error"" IconName=""@BitIconName.Calendar"" Color=""BitColor.Error"" Variant=""BitVariant.Text"" />";
 
     private readonly string example6RazorCode = @"
+<BitTag Text=""Small"" IconName=""@BitIconName.Calendar"" Size=""BitSize.Small"" Variant=""BitVariant.Fill"" />
+<BitTag Text=""Small"" IconName=""@BitIconName.Calendar"" Size=""BitSize.Small"" Variant=""BitVariant.Outline"" />
+<BitTag Text=""Small"" IconName=""@BitIconName.Calendar"" Size=""BitSize.Small"" Variant=""BitVariant.Text"" />
+
+<BitTag Text=""Medium"" IconName=""@BitIconName.Calendar"" Size=""BitSize.Medium"" Variant=""BitVariant.Fill"" />
+<BitTag Text=""Medium"" IconName=""@BitIconName.Calendar"" Size=""BitSize.Medium"" Variant=""BitVariant.Outline"" />
+<BitTag Text=""Medium"" IconName=""@BitIconName.Calendar"" Size=""BitSize.Medium"" Variant=""BitVariant.Text"" />
+
+<BitTag Text=""Large"" IconName=""@BitIconName.Calendar"" Size=""BitSize.Large"" Variant=""BitVariant.Fill"" />
+<BitTag Text=""Large"" IconName=""@BitIconName.Calendar"" Size=""BitSize.Large"" Variant=""BitVariant.Outline"" />
+<BitTag Text=""Large"" IconName=""@BitIconName.Calendar"" Size=""BitSize.Large"" Variant=""BitVariant.Text"" />";
+
+    private readonly string example7RazorCode = @"
 <BitTag>
     <BitStack Horizontal Gap=""0.5rem"" Style=""padding-inline: 0.5rem;"">
         <BitLabel>Custom content</BitLabel>
         <BitRollerLoading Size=""32"" />
     </BitStack>
 </BitTag>";
 
-    private readonly string example7RazorCode = @"
+    private readonly string example8RazorCode = @"
 <style>
     .custom-class {
         border-radius: 0.25rem;