feat(blazorui): improve BitOtpInput demo #8288 (#8289)

bitfoundation · Aug 12, 2024 · 2e9f74e · 2e9f74e
1 parent 8bad103
commit 2e9f74e
Show file tree

Hide file tree

Showing 3 changed files with 77 additions and 24 deletions.
diff --git a/...ient/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/OtpInput/BitOtpInputDemo.razor b/...ient/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/OtpInput/BitOtpInputDemo.razor
@@ -13,6 +13,8 @@
                ComponentPublicMembers="componentPublicMembers">
     <ComponentExampleBox Title="Basic" RazorCode="@example1RazorCode" Id="example1">
         <ExamplePreview>
+            <div>Basic usage examples of BitOtpInput, including different lengths, disabled state, and autofocus.</div>
+            <br />
             <div class="example-box">
                 <div class="lbl">Basic</div>
                 <BitOtpInput />
@@ -31,6 +33,8 @@
 
     <ComponentExampleBox Title="InputType" RazorCode="@example2RazorCode" Id="example2">
         <ExamplePreview>
+            <div>Set different input types for the OTP input: text, number, and password.</div>
+            <br />
             <div class="example-box">
                 <div class="lbl">Text</div>
                 <BitOtpInput InputType="BitOtpInputType.Text" />
@@ -46,6 +50,8 @@
 
     <ComponentExampleBox Title="Directions" RazorCode="@example3RazorCode" Id="example3">
         <ExamplePreview>
+            <div>Demonstrating various layout directions for BitOtpInput: default, reversed, vertical, and reversed vertical.</div>
+            <br />
             <div class="example-box">
                 <div class="lbl">Default</div>
                 <BitOtpInput />
@@ -64,24 +70,32 @@
 
     <ComponentExampleBox Title="Style & Class" RazorCode="@example4RazorCode" Id="example4">
         <ExamplePreview>
+            <div>Explore styling and class customization for BitOtpInput, including component styles, custom classes, and detailed styles.</div>
+            <br /><br />
             <div class="example-box">
-                <div class="lbl">Component's Style & Class:</div>
-                <BitOtpInput Style="box-shadow:aqua 0 0 0.5rem;max-width:max-content;" />
+                <div>Component's Style & Class:</div><br />
+                <BitOtpInput Style="margin-inline: 1rem; box-shadow: aqua 0 0 0.5rem;" />
                 <br />
                 <BitOtpInput Class="custom-class" />
                 <br />
                 <br />
                 <br />
-                <div class="lbl"><b>Styles</b> & <b>Classes</b>:</div>
-                <BitOtpInput Styles="@(new() { Input = "padding:0.5rem;background-color:goldenrod"})" />
+                <div><b>Styles</b> & <b>Classes</b>:</div><br />
+                <BitOtpInput Styles="@(new() { Root = "margin-inline: 1rem;",
+                                               Input = "border-color: blueviolet;",
+                                               Focused = "box-shadow: blueviolet 0 0 1rem;" })" />
                 <br />
-                <BitOtpInput Classes="@(new() { Input = "custom-input"})" />
+                <BitOtpInput Classes="@(new() { Root = "custom-root",
+                                                Input = "custom-input",
+                                                Focused = "custom-focused" })" />
             </div>
         </ExamplePreview>
     </ComponentExampleBox>
 
     <ComponentExampleBox Title="Binding" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
         <ExamplePreview>
+            <div>Examples of one-way and two-way data binding with BitOtpInput.</div>
+            <br />
             <div class="example-box">
                 <div class="lbl">One-way</div>
                 <BitOtpInput Value="@oneWayValue" />
@@ -96,6 +110,8 @@
 
     <ComponentExampleBox Title="Events" RazorCode="@example6RazorCode" CsharpCode="@example6CsharpCode" Id="example6">
         <ExamplePreview>
+            <div>Handle various events in BitOtpInput, including change, fill, focus, input, keydown, and paste events.</div>
+            <br />
             <div class="example-box">
                 <div class="lbl">OnChange</div>
                 <BitOtpInput OnChange="v => onChangeValue = v" />
@@ -135,6 +151,8 @@
 
     <ComponentExampleBox Title="Validation" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
         <ExamplePreview>
+            <div>Use data annotations to validate the OTP input component in a form submission scenario.</div>
+            <br />
             <div class="example-box">
                 @if (formIsValidSubmit is false)
                 {
@@ -161,7 +179,9 @@
 
     <ComponentExampleBox Title="RTL" RazorCode="@example8RazorCode" Id="example8">
         <ExamplePreview>
-            <div class="example-box">
+            <div>Use the BitOtpInput component in a right-to-left (RTL).</div>
+            <br />
+            <div dir="rtl" class="example-box">
                 <div class="lbl">Default</div>
                 <BitOtpInput Dir="BitDir.Rtl" />
                 <br />

diff --git a/...t/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/OtpInput/BitOtpInputDemo.razor.cs b/...t/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/OtpInput/BitOtpInputDemo.razor.cs
@@ -228,23 +228,45 @@ private void HandleInvalidSubmit()
     private readonly string example4RazorCode = @"
 <style>
     .custom-class {
-        padding: 1rem;
-        max-width: max-content;
-        background-color: lightskyblue;
+        gap: 1rem;
+        margin-inline: 1rem;
+    }
+
+    .custom-class input {
+        border-radius: 0;
+        border-width: 0 0 1px 0;
+        border-color: lightseagreen;
+    }
+
+
+    .custom-root {
+        margin-inline: 1rem;
     }
 
     .custom-input {
         border-radius: 50%;
-        border: 1px solid red;
+        border: 1px solid tomato;
+    }
+
+    .custom-focused {
+        border-color: red;
         box-shadow: tomato 0 0 1rem;
     }
 </style>
 
-<BitOtpInput Style=""box-shadow:aqua 0 0 0.5rem;max-width:max-content;"" />
+
+<BitOtpInput Style=""margin-inline: 1rem; box-shadow: aqua 0 0 0.5rem;"" />
+
 <BitOtpInput Class=""custom-class"" />
 
-<BitOtpInput Styles=""@(new() { Input = ""padding:0.5rem;background-color:goldenrod""})"" />
-<BitOtpInput Classes=""@(new() { Input = ""custom-input""})"" />";
+
+<BitOtpInput Styles=""@(new() { Root = ""margin-inline: 1rem;"",
+                               Input = ""border-color: blueviolet;"",
+                               Focused = ""box-shadow: blueviolet 0 0 1rem;"" })"" />
+
+<BitOtpInput Classes=""@(new() { Root = ""custom-root"",
+                                Input = ""custom-input"",
+                                Focused = ""custom-focused"" })"" />";
 
     private readonly string example5RazorCode = @"
 <BitOtpInput Value=""@oneWayValue"" />

diff --git a/...Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/OtpInput/BitOtpInputDemo.razor.scss b/...Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/OtpInput/BitOtpInputDemo.razor.scss
@@ -1,27 +1,38 @@
-.example-box {
+@import '../../../../Styles/abstracts/_bit-css-variables.scss';
+
+.example-box {
     display: flex;
-    max-width: max-content;
+    align-items: flex-start;
     flex-flow: column nowrap;
-
-    .lbl {
-        margin-bottom: 0.25rem;
-    }
 }
 
 ::deep {
     .custom-class {
-        padding: 1rem;
-        max-width: max-content;
-        background-color: lightskyblue;
+        gap: 1rem;
+        margin-inline: 1rem;
+    }
+
+    .custom-class input {
+        border-radius: 0;
+        border-width: 0 0 1px 0;
+        border-color: lightseagreen;
+    }
+
+    .custom-root {
+        margin-inline: 1rem;
     }
 
     .custom-input {
         border-radius: 50%;
-        border: 1px solid red;
+        border: 1px solid tomato;
+    }
+
+    .custom-focused {
+        border-color: red;
         box-shadow: tomato 0 0 1rem;
     }
 
     .validation-message {
-        color: red;
+        color: $bit-color-error;
     }
 }