add Size parameter to BitOtpInput #8564

bitfoundation · Sep 9, 2024 · 37822a2 · 37822a2
1 parent 7307a14
commit 37822a2
Show file tree

Hide file tree

Showing 5 changed files with 281 additions and 204 deletions.
diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/OtpInput/BitOtpInput.razor.cs b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/OtpInput/BitOtpInput.razor.cs
@@ -71,6 +71,11 @@ public partial class BitOtpInput : BitInputBase<string?>, IDisposable
     /// </summary>
     [Parameter] public bool Reversed { get; set; }
 
+    /// <summary>
+    /// The size of the inputs.
+    /// </summary>
+    [Parameter, ResetClassBuilder] public BitSize? Size { get; set; }
+
     /// <summary>
     /// Custom CSS styles for different parts of the BitOtpInput.
     /// </summary>
@@ -123,6 +128,14 @@ protected override void RegisterCssClasses()
 
         ClassBuilder.Register(() => Reversed ? "bit-otp-rvs" : string.Empty);
 
+        ClassBuilder.Register(() => Size switch
+        {
+            BitSize.Small => "bit-otp-sm",
+            BitSize.Medium => "bit-otp-md",
+            BitSize.Large => "bit-otp-lg",
+            _ => "bit-otp-md"
+        });
+
         ClassBuilder.Register(() => Vertical ? "bit-otp-vrt" : string.Empty);
     }
 

diff --git a/src/BlazorUI/Bit.BlazorUI/Components/Inputs/OtpInput/BitOtpInput.scss b/src/BlazorUI/Bit.BlazorUI/Components/Inputs/OtpInput/BitOtpInput.scss
@@ -7,11 +7,12 @@
     box-shadow: none;
     font-weight: 400;
     gap: spacing(1.25);
+    width: fit-content;
     position: relative;
     flex-direction: row;
     box-sizing: border-box;
-    font-size: spacing(1.75);
     font-family: $tg-font-family;
+    font-size: var(--bit-otp-fontsize);
 
     &.bit-dis {
         .bit-otp-inp {
@@ -31,16 +32,16 @@
 .bit-otp-inp {
     display: flex;
     cursor: pointer;
+    font-size: inherit;
     text-align: center;
     align-items: center;
-    width: spacing(3.75);
-    height: spacing(3.75);
     box-sizing: border-box;
     justify-content: center;
-    font-size: spacing(1.75);
     -moz-appearance: textfield;
-    border-radius: $shp-border-radius;
+    width: var(--bit-otp-size);
+    height: var(--bit-otp-size);
     background-color: $clr-bg-pri;
+    border-radius: $shp-border-radius;
     border: $shp-border-width $shp-border-style $clr-brd-pri;
 
     &::-webkit-inner-spin-button,
@@ -65,3 +66,19 @@
 .bit-otp-vrt.bit-otp-rvs {
     flex-direction: column-reverse;
 }
+
+
+.bit-otp-sm {
+    --bit-otp-size: #{spacing(3.0)};
+    --bit-otp-fontsize: #{spacing(1.5)};
+}
+
+.bit-otp-md {
+    --bit-otp-size: #{spacing(3.75)};
+    --bit-otp-fontsize: #{spacing(1.75)};
+}
+
+.bit-otp-lg {
+    --bit-otp-size: #{spacing(4.5)};
+    --bit-otp-fontsize: #{spacing(2.0)};
+}