feat(blazorui): add missing ReadOnly parameter to InputBase #7893 (#7902

)

src/BlazorUI/Bit.BlazorUI.Tests/Components/Inputs/Rating/BitRatingTests.cs

@@ -37,11 +37,11 @@ public void BitRatingShouldTakeCorrectVisualAndEnabledStyle(bool isEnabled)
     }
 
     [TestMethod]
-    public void BitRatingShouldRespectIsReadonly()
+    public void BitRatingShouldRespectReadOnly()
     {
         var component = RenderComponent<BitRating>(parameters =>
         {
-            parameters.Add(p => p.IsReadOnly, true);
+            parameters.Add(p => p.ReadOnly, true);
             parameters.Add(p => p.AllowZeroStars, true);
         });
 
@@ -157,13 +157,13 @@ public void BitRatingShouldTakeCustomIcon()
         DataRow(10, 4, false, true, 1),
         DataRow(10, 0, true, false, 1)
     ]
-    public void BitRatingShouldRespectClickIndex(int max, int clickedIndex, bool isEnabled, bool isReadonly, int expectedResult)
+    public void BitRatingShouldRespectClickIndex(int max, int clickedIndex, bool isEnabled, bool readOnly, int expectedResult)
     {
         var component = RenderComponent<BitRating>(parameters =>
         {
             parameters.Add(p => p.Max, max);
             parameters.Add(p => p.IsEnabled, isEnabled);
-            parameters.Add(p => p.IsReadOnly, isReadonly);
+            parameters.Add(p => p.ReadOnly, readOnly);
         });
 
         var bitRatingButtons = component.FindAll(".bit-rtg-btn");
@@ -183,8 +183,8 @@ public void BitRatingShouldRespectClickIndex(int max, int clickedIndex, bool isE
         Assert.AreEqual(bitRatingButtons.Count(), max);
 
         //TODO: bypassed - BUnit 2-way bound parameters issue
-        Assert.AreEqual((!isEnabled || isReadonly) ? 1 : clickedIndex, filledBitRatingIconCount);
-        Assert.AreEqual((!isEnabled || isReadonly) ? max - 1 : max - clickedIndex, unselectedBitRatingIconCount);
+        Assert.AreEqual((!isEnabled || readOnly) ? 1 : clickedIndex, filledBitRatingIconCount);
+        Assert.AreEqual((!isEnabled || readOnly) ? max - 1 : max - clickedIndex, unselectedBitRatingIconCount);
     }
 
     [DataTestMethod, DataRow("Detailed label")]

src/BlazorUI/Bit.BlazorUI.Tests/Components/Inputs/TextField/BitTextFieldTests.cs

@@ -76,14 +76,14 @@ public void BitTextFieldLabel(string label)
         DataRow(15, false, "this is placeholder", true),
         DataRow(15, false, "this is placeholder", false),
     ]
-    public void BitTextFieldShouldTakeBaseParameters(int maxLength, bool isMultiline, string placeholder, bool isReadOnly)
+    public void BitTextFieldShouldTakeBaseParameters(int maxLength, bool isMultiline, string placeholder, bool readOnly)
     {
         var component = RenderComponent<BitTextField>(parameters =>
         {
             parameters.Add(p => p.MaxLength, maxLength);
             parameters.Add(p => p.IsMultiline, isMultiline);
             parameters.Add(p => p.Placeholder, placeholder);
-            parameters.Add(p => p.IsReadOnly, isReadOnly);
+            parameters.Add(p => p.ReadOnly, readOnly);
         });
 
         var bitTextField = component.Find(".bit-txt-inp");
@@ -94,7 +94,7 @@ public void BitTextFieldShouldTakeBaseParameters(int maxLength, bool isMultiline
         Assert.IsTrue(bitTextField.HasAttribute("placeholder"));
         Assert.AreEqual(bitTextField.GetAttribute("placeholder"), placeholder);
 
-        Assert.AreEqual(isReadOnly, bitTextField.HasAttribute("readonly"));
+        Assert.AreEqual(readOnly, bitTextField.HasAttribute("readonly"));
     }
 
     [DataTestMethod, DataRow("Emoji2")]

src/BlazorUI/Bit.BlazorUI.Tests/Components/Inputs/TextField/BitTextFieldValidationTest.razor

@@ -5,7 +5,7 @@
                   IsMultiline="IsMultiline"
                   Type="Type"
                   Placeholder="@Placeholder"
-                  IsReadOnly="IsReadOnly"
+                  ReadOnly="ReadOnly"
                   IsRequired="IsRequired"
                   IsEnabled="IsEnabled"
                   IconName="@IconName"
@@ -39,7 +39,7 @@
     [Parameter] public string IconName { get; set; }
     [Parameter] public bool IsMultiline { get; set; }
     [Parameter] public bool IsEnabled { get; set; } = true;
-    [Parameter] public bool IsReadOnly { get; set; }
+    [Parameter] public bool ReadOnly { get; set; }
     [Parameter] public bool IsRequired { get; set; }
     [Parameter] public string Placeholder { get; set; }
     [Parameter] public bool CanRevealPassword { get; set; }

src/BlazorUI/Bit.BlazorUI/Components/Inputs/BitInputBase.cs

@@ -14,6 +14,7 @@ public abstract class BitInputBase<TValue> : BitComponentBase, IDisposable
     protected bool IsDisposed;
     protected bool ValueHasBeenSet;
 
+    private bool readOnly;
     private TValue? value;
     private bool? valueInvalid;
 
@@ -62,6 +63,23 @@ protected BitInputBase()
     /// </summary>
     [Parameter] public EventCallback<TValue?> OnChange { get; set; }
 
+    /// <summary>
+    /// Makes the input read-only.
+    /// </summary>
+    [Parameter]
+    public bool ReadOnly
+    {
+        get => readOnly;
+        set
+        {
+            if (readOnly == value) return;
+
+            readOnly = value;
+
+            ClassBuilder.Reset();
+        }
+    }
+
     /// <summary>
     /// Gets or sets the value of the input. This should be used with two-way binding.
     /// </summary>
@@ -150,6 +168,11 @@ public override Task SetParametersAsync(ParameterView parameters)
                     parametersDictionary.Remove(parameter.Key);
                     break;
 
+                case nameof(ReadOnly):
+                    ReadOnly = (bool)parameter.Value;
+                    parametersDictionary.Remove(parameter.Key);
+                    break;
+
                 case nameof(Value):
                     ValueHasBeenSet = true;
                     Value = (TValue?)parameter.Value;

src/BlazorUI/Bit.BlazorUI/Components/Inputs/BitTextInputBase.cs

@@ -65,7 +65,7 @@ public override Task SetParametersAsync(ParameterView parameters)
     /// <param name="e"></param>
     protected virtual async Task HandleOnStringValueChangeAsync(ChangeEventArgs e)
     {
-        if (IsEnabled is false) return;
+        if (IsEnabled is false || ReadOnly) return;
 
         await SetCurrentValueAsStringAsync(e.Value?.ToString());
     }
@@ -76,7 +76,7 @@ protected virtual async Task HandleOnStringValueChangeAsync(ChangeEventArgs e)
     /// <param name="e"></param>
     protected virtual async Task HandleOnStringValueInputAsync(ChangeEventArgs e)
     {
-        if (IsEnabled is false) return;
+        if (IsEnabled is false || ReadOnly) return;
 
         if (Immediate is false) return;
 

src/BlazorUI/Bit.BlazorUI/Components/Inputs/NumberField/BitNumberField.razor

@@ -70,6 +70,7 @@
                autocomplete="off"
                min="@_internalMin"
                max="@_internalMax"
+               readonly="@ReadOnly"
                required="@Required"
                step="@_internalStep"
                style="@Styles?.Input"

src/BlazorUI/Bit.BlazorUI/Components/Inputs/Rating/BitRating.razor

@@ -7,8 +7,8 @@
      style="@StyleBuilder.Value"
      dir="@Dir?.ToString().ToLower()"
      aria-label="@AriaLabel"
-     aria-readonly="@IsReadOnly"
-     role=@(IsReadOnly ? null : "radiogroup")>
+     aria-readonly="@ReadOnly"
+     role=@(ReadOnly ? null : "radiogroup")>
 
     @for (int item = 1; item <= Max; item++)
     {
@@ -19,11 +19,11 @@
                 type="button"
                 role="radio"
                 style="@Styles?.Button"
-                aria-hidden="@IsReadOnly"
+                aria-hidden="@ReadOnly"
                 class="bit-rtg-btn @Classes?.Button"
                 aria-checked="@(index == CurrentValue)"
                 data-is-current="@(index == CurrentValue)"
-                disabled=@(IsEnabled is false || IsReadOnly)
+                disabled=@(IsEnabled is false || ReadOnly)
                 tabindex=@(index == CurrentValue ? "0" : "-1")>
 
             @if (AriaLabelFormat.HasValue())
@@ -50,6 +50,7 @@
            max="@Max"
            name="@Name"
            type="number"
+           readonly="@ReadOnly"
            class="bit-input-hidden"
            value="@CurrentValueAsString"
            min="@(AllowZeroStars ? 0 : 1)" />

src/BlazorUI/Bit.BlazorUI/Components/Inputs/Rating/BitRating.razor.cs

@@ -4,9 +4,6 @@ namespace Bit.BlazorUI;
 
 public partial class BitRating
 {
-    private bool isReadOnly;
-
-
     /// <summary>
     /// Allow the initial rating value be 0. Note that a value of 0 still won't be selectable by mouse or keyboard.
     /// </summary>
@@ -35,22 +32,6 @@ public partial class BitRating
     /// </summary>
     [Parameter] public Func<double, double, string>? GetAriaLabel { get; set; }
 
-    /// <summary>
-    /// A flag to mark rating control as readOnly.
-    /// </summary>
-    [Parameter]
-    public bool IsReadOnly
-    {
-        get => isReadOnly;
-        set
-        {
-            if (isReadOnly == value) return;
-
-            isReadOnly = value;
-            ClassBuilder.Reset();
-        }
-    }
-
     /// <summary>
     /// Maximum rating. Must be >= Min (0 if AllowZeroStars is true, 1 otherwise).
     /// </summary>
@@ -93,13 +74,13 @@ protected override void RegisterCssClasses()
     {
         ClassBuilder.Register(() => Classes?.Root);
 
-        ClassBuilder.Register(() => IsReadOnly ? $"{RootElementClass}-rdl" : string.Empty);
+        ClassBuilder.Register(() => ReadOnly ? "bit-rtg-rdl" : string.Empty);
 
         ClassBuilder.Register(() => Size switch
         {
-            BitRatingSize.Small => $"{RootElementClass}-sm",
-            BitRatingSize.Medium => $"{RootElementClass}-md",
-            BitRatingSize.Large => $"{RootElementClass}-lg",
+            BitRatingSize.Small => "bit-rtg-sm",
+            BitRatingSize.Medium => "bit-rtg-md",
+            BitRatingSize.Large => "bit-rtg-lg",
             _ => string.Empty
         });
     }
@@ -137,7 +118,7 @@ private double GetPercentage(int index)
 
     private async Task HandleOnClick(int index)
     {
-        if (IsEnabled is false || IsReadOnly is true) return;
+        if (IsEnabled is false || ReadOnly) return;
         if (ValueHasBeenSet && ValueChanged.HasDelegate is false) return;
         if (index > Max || index < (AllowZeroStars ? 0 : 1)) return;
 

src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor

@@ -51,8 +51,8 @@
                           rows="@Rows"
                           name="@Name"
                           id="@_inputId"
-                          readonly=@IsReadOnly
-                          required=@IsRequired
+                          readonly="@ReadOnly"
+                          required="@IsRequired"
                           style="@Styles?.Input"
                           autofocus="@AutoFocus"
                           maxlength="@MaxLength"
@@ -78,8 +78,8 @@
                        name="@Name"
                        id="@_inputId"
                        type="@_inputType"
-                       readonly=@IsReadOnly
-                       required=@IsRequired
+                       readonly="@ReadOnly"
+                       required="@IsRequired"
                        style="@Styles?.Input"
                        autofocus="@AutoFocus"
                        maxlength="@MaxLength"

src/BlazorUI/Bit.BlazorUI/Components/Inputs/TextField/BitTextField.razor.cs

@@ -6,7 +6,6 @@ public partial class BitTextField : BitTextInputBase<string?>
 {
     private bool hasBorder = true;
     private bool isMultiline;
-    private bool isReadOnly;
     private bool isRequired;
     private bool isUnderlined;
     private bool isResizable = true;
@@ -87,22 +86,6 @@ public bool IsMultiline
         }
     }
 
-    /// <summary>
-    /// If true, the text field is readonly.
-    /// </summary>
-    [Parameter]
-    public bool IsReadOnly
-    {
-        get => isReadOnly;
-        set
-        {
-            if (isReadOnly == value) return;
-
-            isReadOnly = value;
-            ClassBuilder.Reset();
-        }
-    }
-
     /// <summary>
     /// Whether the associated input is required or not, add an asterisk "*" to its label.
     /// </summary>

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Components/ComponentDemo.razor.cs

@@ -190,6 +190,13 @@ public partial class ComponentDemo
             Description = "Callback for when the input value changes.",
         },
         new()
+        {
+            Name = "ReadOnly",
+            Type = "bool",
+            DefaultValue = "false",
+            Description = "Makes the input read-only.",
+        },
+        new()
         {
             Name = "Value",
             Type = "TValue?",

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Rating/BitRatingDemo.razor

@@ -23,7 +23,7 @@
                 <br />
 
                 <div>ReadOnly:</div>
-                <BitRating IsReadOnly="true" DefaultValue="3.5" />
+                <BitRating ReadOnly DefaultValue="3.5" />
             </div>
         </ExamplePreview>
     </ComponentExampleBox>

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/Rating/BitRatingDemo.razor.cs

@@ -42,13 +42,6 @@ public partial class BitRatingDemo
             Description = "Optional callback to set the aria-label for rating control in readOnly mode. Also used as a fallback aria-label if ariaLabel prop is not provided.",
         },
         new()
-        {
-            Name = "IsReadOnly",
-            Type = "bool",
-            DefaultValue = "false",
-            Description = "A flag to mark rating control as readOnly.",
-        },
-        new()
         {
             Name = "Max",
             Type = "int",
@@ -197,7 +190,7 @@ private void HandleInvalidSubmit()
 
 <BitRating IsEnabled=""false"" DefaultValue=""2"" />
 
-<BitRating IsReadOnly=""true"" DefaultValue=""3.5"" />";
+<BitRating ReadOnly DefaultValue=""3.5"" />";
 
     private readonly string example2RazorCode = @"
 Visible: [ <BitRating Visibility=""""BitVisibility.Visible"""" /> ]

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TextField/BitTextFieldDemo.razor

@@ -19,7 +19,7 @@
                 <br />
                 <BitTextField Label="Disabled" IsEnabled="false" />
                 <br />
-                <BitTextField Label="ReadOnly" IsReadOnly="true" />
+                <BitTextField Label="ReadOnly" ReadOnly DefaultValue="This is ReadOnly" />
                 <br />
                 <BitTextField Label="Description" Description="This is Description" />
                 <br />

src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Pages/Components/Inputs/TextField/BitTextFieldDemo.razor.cs

@@ -70,13 +70,6 @@ public partial class BitTextFieldDemo
             Description = "Whether or not the text field is a Multiline text field.",
         },
         new()
-        {
-            Name = "IsReadOnly",
-            Type = "bool",
-            DefaultValue = "false",
-            Description = "If true, the text field is readonly.",
-        },
-        new()
         {
             Name = "IsRequired",
             Type = "bool",
@@ -465,7 +458,7 @@ private void HandleInvalidSubmit()
 <BitTextField Label=""Basic"" />
 <BitTextField Label=""Placeholder"" Placeholder=""Enter a text..."" />
 <BitTextField Label=""Disabled"" IsEnabled=""false"" />
-<BitTextField Label=""ReadOnly"" IsReadOnly=""true"" />
+<BitTextField Label=""ReadOnly"" ReadOnly DefaultValue=""This is ReadOnly"" />
 <BitTextField Label=""Description"" Description=""This is Description"" />
 <BitTextField Label=""IsRequired"" IsRequired=""true"" />
 <BitTextField Label=""MaxLength: 5"" MaxLength=""5"" />