Update nimble-select, nimble-combobox, nimble-text-area, nimble-number-field, and nimble-text-field to support appearance-readonly and full-bleed

Author: mollykreis

packages/blazor-workspace/NimbleBlazor/Components/NimbleCombobox.razor

@@ -12,6 +12,8 @@
         error-text="@ErrorText"
         error-visible="@ErrorVisible"
         required-visible="@RequiredVisible"
+        appearance-readonly="@AppearanceReadOnly"
+        full-bleed="@FullBleed"
         @attributes="AdditionalAttributes">
         @ChildContent
     </nimble-combobox>

packages/blazor-workspace/NimbleBlazor/Components/NimbleCombobox.razor.cs

@@ -63,6 +63,20 @@ public partial class NimbleCombobox : NimbleInputBase<string?>
     [Parameter]
     public bool? RequiredVisible { get; set; }
 
+    /// <summary>
+    /// Gets or set whether or not the combobox should be rendered as
+    /// read only when it is disabled.
+    /// </summary>
+    [Parameter]
+    public bool? AppearanceReadOnly { get; set; }
+
+    /// <summary>
+    /// Gets or set whether or not the start and end margins of the control are removed.
+    /// This only applies when the <see cref="Appearance"/> is <see cref="DropdownAppearance.Frameless"/>.
+    /// </summary>
+    [Parameter]
+    public bool? FullBleed { get; set; }
+
     /// <summary>
     /// Gets or sets the child content to be rendered inside the combobox
     /// </summary>

packages/blazor-workspace/NimbleBlazor/Components/NimbleNumberField.razor

@@ -14,6 +14,8 @@
     error-text="@ErrorText"
     error-visible="@ErrorVisible"
     required-visible="@RequiredVisible"
+    appearance-readonly="@AppearanceReadOnly"
+    full-bleed="@FullBleed"
     @attributes="AdditionalAttributes">
     @ChildContent
 </nimble-number-field>

packages/blazor-workspace/NimbleBlazor/Components/NimbleNumberField.razor.cs

@@ -78,6 +78,20 @@ public partial class NimbleNumberField : NimbleInputBase<double?>
     [Parameter]
     public bool? RequiredVisible { get; set; }
 
+    /// <summary>
+    /// Gets or set whether or not the number field should be rendered as
+    /// read only when it is disabled.
+    /// </summary>
+    [Parameter]
+    public bool? AppearanceReadOnly { get; set; }
+
+    /// <summary>
+    /// Gets or set whether or not the start and end margins of the control are removed.
+    /// This only applies when the <see cref="Appearance"/> is <see cref="NumberFieldAppearance.Frameless"/>.
+    /// </summary>
+    [Parameter]
+    public bool? FullBleed { get; set; }
+
     /// <summary>
     /// Gets or sets the child content to be rendered inside the combobox
     /// </summary>

packages/blazor-workspace/NimbleBlazor/Components/NimbleSelect.razor

@@ -13,6 +13,8 @@
         error-text="@ErrorText"
         error-visible="@ErrorVisible"
         required-visible="@RequiredVisible"
+        appearance-readonly="@AppearanceReadOnly"
+        full-bleed="@FullBleed"
         @attributes="AdditionalAttributes">
         @ChildContent
     </nimble-select>

packages/blazor-workspace/NimbleBlazor/Components/NimbleSelect.razor.cs

@@ -62,6 +62,20 @@ public partial class NimbleSelect : NimbleInputBase<string?>
     [Parameter]
     public bool? RequiredVisible { get; set; }
 
+    /// <summary>
+    /// Gets or set whether or not the select should be rendered as
+    /// read only when it is disabled.
+    /// </summary>
+    [Parameter]
+    public bool? AppearanceReadOnly { get; set; }
+
+    /// <summary>
+    /// Gets or set whether or not the start and end margins of the control are removed.
+    /// This only applies when the <see cref="Appearance"/> is <see cref="DropdownAppearance.Frameless"/>.
+    /// </summary>
+    [Parameter]
+    public bool? FullBleed { get; set; }
+
     /// <summary>
     /// Gets or sets the child content to be rendering inside the <see cref="NimbleSelect"/>.
     /// </summary>

packages/blazor-workspace/NimbleBlazor/Components/NimbleTextArea.razor

@@ -18,6 +18,7 @@
     required="@Required"
     placeholder="@Placeholder"
     required-visible="@RequiredVisible"
+    appearance-readonly="@AppearanceReadOnly"
     @attributes="AdditionalAttributes">
     @ChildContent
 </nimble-text-area>

packages/blazor-workspace/NimbleBlazor/Components/NimbleTextArea.razor.cs

@@ -95,6 +95,13 @@ public partial class NimbleTextArea : NimbleInputBase<string?>
     [Parameter]
     public bool? RequiredVisible { get; set; }
 
+    /// <summary>
+    /// Gets or set whether or not the text area should be rendered as
+    /// read only when it is disabled.
+    /// </summary>
+    [Parameter]
+    public bool? AppearanceReadOnly { get; set; }
+
     /// <summary>
     /// Gets or sets the child content of the control
     /// </summary>

packages/blazor-workspace/NimbleBlazor/Components/NimbleTextField.razor

@@ -18,6 +18,7 @@
     error-visible="@ErrorVisible"
     full-bleed="@FullBleed"
     required-visible="@RequiredVisible"
+    appearance-readonly="@AppearanceReadOnly"
     @attributes="AdditionalAttributes">
     @ChildContent
 </nimble-text-field>

packages/blazor-workspace/NimbleBlazor/Components/NimbleTextField.razor.cs

@@ -59,6 +59,13 @@ public partial class NimbleTextField : NimbleInputBase<string?>
     [Parameter]
     public bool? RequiredVisible { get; set; }
 
+    /// <summary>
+    /// Gets or set whether or not the text field should be rendered as
+    /// read only when it is disabled.
+    /// </summary>
+    [Parameter]
+    public bool? AppearanceReadOnly { get; set; }
+
     [Parameter]
     public RenderFragment? ChildContent { get; set; }
 

packages/blazor-workspace/NimbleBlazor/DropdownAppearance.cs

@@ -4,7 +4,8 @@ public enum DropdownAppearance
 {
     Underline,
     Outline,
-    Block
+    Block,
+    Frameless
 }
 
 internal static class DropdownAppearanceExtensions

packages/blazor-workspace/NimbleBlazor/NumberFieldAppearance.cs

@@ -4,7 +4,8 @@ public enum NumberFieldAppearance
 {
     Underline,
     Outline,
-    Block
+    Block,
+    Frameless
 }
 
 internal static class NumberFieldAppearanceExtensions

packages/blazor-workspace/Tests/NimbleBlazor.Tests/Unit/Components/NimbleComboboxTests.cs

@@ -57,6 +57,7 @@ public void ComboboxAutoComplete_AttributeIsSet(AutoComplete value, string expec
     [InlineData(DropdownAppearance.Block, "block")]
     [InlineData(DropdownAppearance.Underline, "underline")]
     [InlineData(DropdownAppearance.Outline, "outline")]
+    [InlineData(DropdownAppearance.Frameless, "frameless")]
     public void ComboboxAppearance_AttributeIsSet(DropdownAppearance value, string expectedAttribute)
     {
         var combobox = RenderWithPropertySet(x => x.Appearance, value);
@@ -97,6 +98,22 @@ public void ComboboxRequiredVisible_AttributeIsSet()
         Assert.Contains("required-visible", combobox.Markup);
     }
 
+    [Fact]
+    public void ComboboxAppearanceReadOnly_AttributeIsSet()
+    {
+        var combobox = RenderWithPropertySet(x => x.AppearanceReadOnly, true);
+
+        Assert.Contains("appearance-readonly", combobox.Markup);
+    }
+
+    [Fact]
+    public void ComboboxFullBleed_AttributeIsSet()
+    {
+        var combobox = RenderWithPropertySet(x => x.FullBleed, true);
+
+        Assert.Contains("full-bleed", combobox.Markup);
+    }
+
     [Fact]
     public void ComboboxWithOption_HasListOptionMarkup()
     {

packages/blazor-workspace/Tests/NimbleBlazor.Tests/Unit/Components/NimbleNumberFieldTests.cs

@@ -53,6 +53,7 @@ public void NimbleNumberField_SupportsAdditionalAttributes()
     [InlineData(NumberFieldAppearance.Outline, "outline")]
     [InlineData(NumberFieldAppearance.Block, "block")]
     [InlineData(NumberFieldAppearance.Underline, "underline")]
+    [InlineData(NumberFieldAppearance.Frameless, "frameless")]
     public void NumberFieldAppearance_AttributeIsSet(NumberFieldAppearance value, string expectedAttribute)
     {
         var numberField = RenderWithPropertySet(x => x.Appearance, value);
@@ -140,6 +141,22 @@ public void NumberFieldRequiredVisible_AttributeIsSet()
         Assert.Contains("required-visible", numberField.Markup);
     }
 
+    [Fact]
+    public void NumberFieldAppearanceReadOnly_AttributeIsSet()
+    {
+        var numberField = RenderWithPropertySet(x => x.AppearanceReadOnly, true);
+
+        Assert.Contains("appearance-readonly", numberField.Markup);
+    }
+
+    [Fact]
+    public void NumberFieldFullBleed_AttributeIsSet()
+    {
+        var numberField = RenderWithPropertySet(x => x.FullBleed, true);
+
+        Assert.Contains("full-bleed", numberField.Markup);
+    }
+
     private IRenderedComponent<NimbleNumberField> RenderWithPropertySet<TProperty>(Expression<Func<NimbleNumberField, TProperty>> propertyGetter, TProperty propertyValue)
     {
         var context = new TestContext();

packages/blazor-workspace/Tests/NimbleBlazor.Tests/Unit/Components/NimbleSelectTests.cs

@@ -78,6 +78,7 @@ public void SelectWithOption_HasListOptionMarkup()
     [InlineData(DropdownAppearance.Outline, "outline")]
     [InlineData(DropdownAppearance.Block, "block")]
     [InlineData(DropdownAppearance.Underline, "underline")]
+    [InlineData(DropdownAppearance.Frameless, "frameless")]
     public void DropdownAppearance_AttributeIsSet(DropdownAppearance value, string expectedAttribute)
     {
         var select = RenderWithPropertySet(x => x.Appearance, value);
@@ -110,6 +111,22 @@ public void SelectClearable_AttributeIsSet()
         Assert.Contains("clearable", select.Markup);
     }
 
+    [Fact]
+    public void SelectAppearanceReadOnly_AttributeIsSet()
+    {
+        var select = RenderWithPropertySet(x => x.AppearanceReadOnly, true);
+
+        Assert.Contains("appearance-readonly", select.Markup);
+    }
+
+    [Fact]
+    public void SelectFullBleed_AttributeIsSet()
+    {
+        var select = RenderWithPropertySet(x => x.FullBleed, true);
+
+        Assert.Contains("full-bleed", select.Markup);
+    }
+
     private IRenderedComponent<NimbleSelect> RenderWithPropertySet<TProperty>(Expression<Func<NimbleSelect, TProperty>> propertyGetter, TProperty propertyValue)
     {
         var context = new TestContext();

packages/blazor-workspace/Tests/NimbleBlazor.Tests/Unit/Components/NimbleTextAreaTests.cs

@@ -77,6 +77,14 @@ public void TextAreaRequiredVisible_AttributeIsSet()
         Assert.Contains("required-visible", textArea.Markup);
     }
 
+    [Fact]
+    public void TextAreaAppearanceReadOnly_AttributeIsSet()
+    {
+        var textArea = RenderWithPropertySet(x => x.AppearanceReadOnly, true);
+
+        Assert.Contains("appearance-readonly", textArea.Markup);
+    }
+
     private IRenderedComponent<NimbleTextArea> RenderNimbleTextArea(TextAreaResize textAreaResize)
     {
         var context = new TestContext();

packages/blazor-workspace/Tests/NimbleBlazor.Tests/Unit/Components/NimbleTextFieldTests.cs

@@ -88,6 +88,14 @@ public void TextFieldRequiredVisible_AttributeIsSet()
         Assert.Contains("required-visible", textField.Markup);
     }
 
+    [Fact]
+    public void TextFieldAppearanceReadOnly_AttributeIsSet()
+    {
+        var textField = RenderWithPropertySet(x => x.AppearanceReadOnly, true);
+
+        Assert.Contains("appearance-readonly", textField.Markup);
+    }
+
     private IRenderedComponent<NimbleTextField> RenderWithPropertySet<TProperty>(Expression<Func<NimbleTextField, TProperty>> propertyGetter, TProperty propertyValue)
     {
         var context = new TestContext();