-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Blazor integration for more Nimble components (#517)
# Pull Request ## 🤨 Rationale Partially addresses #508 ## 👩💻 Implementation Newly supported controls: - Switch - Text Area (Multiline Text Field) - Toggle Button, Toggle Icon Button - Icons - A Razor component file is autogenerated for each icon, using a build script similar to the one from nimble-angular Existing control updates: - Checkbox - Add binding for Indeterminate property - Fix 2-way binding support (add JS file necessary to register the custom event used for value changes for controls that use a 'checked' property) ## 🧪 Testing - Update [Blazor example app](https://60e89457a987cf003efc0a5b-zgartaedol.chromatic.com/blazor-client-app/wwwroot/) for newly supported components - Manual testing in Blazor example app - Add basic tests for newly supported components ## ✅ Checklist - [x] I have updated the project documentation to reflect my changes or determined no changes are needed. - Minor updates to Blazor contributing doc - Component table will be updated in followup PR
- Loading branch information
Showing
29 changed files
with
500 additions
and
15 deletions.
There are no files selected for viewing
7 changes: 7 additions & 0 deletions
7
change/@ni-nimble-blazor-f343ecb0-c88b-4d86-ae5d-5a25ef104809.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "type": "minor", | ||
| "comment": "Blazor integration for switch, text area, toggle button, icons. Fix 2-way binding for checkbox.", | ||
| "packageName": "@ni/nimble-blazor", | ||
| "email": "20709258+msmithNI@users.noreply.github.com", | ||
| "dependentChangeType": "patch" | ||
| } |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 2 additions & 2 deletions
4
packages/nimble-blazor/Examples/NimbleBlazor.Demo.Shared/Pages/ComponentsDemo.razor.cs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,9 @@ | ||
| namespace NimbleBlazor.Demo.Shared.Pages | ||
| { | ||
| /// <summary> | ||
| /// The CustomApp Demo. | ||
| /// The components demo page | ||
| /// </summary> | ||
| public partial class CustomApp | ||
| public partial class ComponentsDemo | ||
| { | ||
| } | ||
| } |
6 changes: 5 additions & 1 deletion
6
packages/nimble-blazor/Examples/NimbleBlazor.Demo.Shared/Pages/ComponentsDemo.razor.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -17,4 +17,4 @@ | |
| </ErrorContent> | ||
| </ErrorBoundary> | ||
| </div> | ||
| </NimbleThemeProvider>> | ||
| </NimbleThemeProvider> | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
10 changes: 10 additions & 0 deletions
10
packages/nimble-blazor/NimbleBlazor.Components/Components/NimbleSwitch.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,10 @@ | ||
| @namespace NimbleBlazor.Components | ||
| @inherits NimbleInputBase<bool> | ||
| <nimble-switch disabled="@Disabled" | ||
| current-checked="@BindConverter.FormatValue(CurrentValue)" | ||
| @onnimblecheckedchange="(__value) => CurrentValue = __value.Checked" | ||
| required="@Required" | ||
| readonly="@ReadOnly" | ||
| @attributes="AdditionalAttributes"> | ||
| @ChildContent | ||
| </nimble-switch> |
21 changes: 21 additions & 0 deletions
21
packages/nimble-blazor/NimbleBlazor.Components/Components/NimbleSwitch.razor.cs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| using System.Diagnostics.CodeAnalysis; | ||
| using Microsoft.AspNetCore.Components; | ||
|
|
||
| namespace NimbleBlazor.Components; | ||
|
|
||
| public partial class NimbleSwitch : NimbleInputBase<bool> | ||
| { | ||
| [Parameter] | ||
| public bool? Disabled { get; set; } | ||
|
|
||
| [Parameter] | ||
| public bool? Required { get; set; } | ||
|
|
||
| [Parameter] | ||
| public bool? ReadOnly { get; set; } | ||
|
|
||
| [Parameter] | ||
| public RenderFragment? ChildContent { get; set; } | ||
|
|
||
| protected override bool TryParseValueFromString(string? value, [MaybeNullWhen(false)] out bool result, [NotNullWhen(false)] out string? validationErrorMessage) => throw new NotSupportedException($"This component does not parse string inputs. Bind to the '{nameof(CurrentValue)}' property, not '{nameof(CurrentValueAsString)}'."); | ||
| } |
20 changes: 20 additions & 0 deletions
20
packages/nimble-blazor/NimbleBlazor.Components/Components/NimbleTextArea.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| @namespace NimbleBlazor.Components | ||
| @inherits NimbleInputBase<string?> | ||
| <nimble-text-area autofocus="@AutoFocus" | ||
| appearance="@Appearance.ToAttributeValue()" | ||
| current-value="@BindConverter.FormatValue(CurrentValue)" | ||
| @onchange="@(EventCallback.Factory.CreateBinder<string?>(this, __value => CurrentValueAsString = __value, CurrentValueAsString))" | ||
| size="@Size" | ||
| minlength="@MinLength" | ||
| maxlength="@MaxLength" | ||
| resize="@TextAreaResize.ToAttributeValue()" | ||
| rows="@Rows" | ||
| cols="@Cols" | ||
| spellcheck="@Spellcheck" | ||
| readonly="@ReadOnly" | ||
| disabled="@Disabled" | ||
| required="@Required" | ||
| placeholder="@Placeholder" | ||
| @attributes="AdditionalAttributes"> | ||
| @ChildContent | ||
| </nimble-text-area> |
56 changes: 56 additions & 0 deletions
56
packages/nimble-blazor/NimbleBlazor.Components/Components/NimbleTextArea.razor.cs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,56 @@ | ||
| using System.Diagnostics.CodeAnalysis; | ||
| using Microsoft.AspNetCore.Components; | ||
|
|
||
| namespace NimbleBlazor.Components; | ||
|
|
||
| public partial class NimbleTextArea : NimbleInputBase<string?> | ||
| { | ||
| [Parameter] | ||
| public bool? Disabled { get; set; } | ||
|
|
||
| [Parameter] | ||
| public bool? ReadOnly { get; set; } | ||
|
|
||
| [Parameter] | ||
| public bool? Required { get; set; } | ||
|
|
||
| [Parameter] | ||
| public bool? AutoFocus { get; set; } | ||
|
|
||
| [Parameter] | ||
| public int? Size { get; set; } | ||
|
|
||
| [Parameter] | ||
| public Appearance? Appearance { get; set; } | ||
|
|
||
| [Parameter] | ||
| public TextAreaResize? TextAreaResize { get; set; } | ||
|
|
||
| [Parameter] | ||
| public string? Placeholder { get; set; } | ||
|
|
||
| [Parameter] | ||
| public int? MinLength { get; set; } | ||
|
|
||
| [Parameter] | ||
| public int? MaxLength { get; set; } | ||
|
|
||
| [Parameter] | ||
| public int? Rows { get; set; } | ||
|
|
||
| [Parameter] | ||
| public int? Cols { get; set; } | ||
|
|
||
| [Parameter] | ||
| public bool? Spellcheck { get; set; } | ||
|
|
||
| [Parameter] | ||
| public RenderFragment? ChildContent { get; set; } | ||
|
|
||
| protected override bool TryParseValueFromString(string? value, out string? result, [NotNullWhen(false)] out string? validationErrorMessage) | ||
| { | ||
| result = value; | ||
| validationErrorMessage = null; | ||
| return true; | ||
| } | ||
| } |
12 changes: 12 additions & 0 deletions
12
packages/nimble-blazor/NimbleBlazor.Components/Components/NimbleToggleButton.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| @namespace NimbleBlazor.Components | ||
| @inherits NimbleInputBase<bool> | ||
| <nimble-toggle-button | ||
| current-checked="@BindConverter.FormatValue(CurrentValue)" | ||
| @onnimblecheckedchange="(__value) => CurrentValue = __value.Checked" | ||
| appearance="@Appearance.ToAttributeValue()" | ||
| disabled="@Disabled" | ||
| autofocus="@AutoFocus" | ||
| content-hidden="@ContentHidden" | ||
| @attributes="AdditionalAttributes"> | ||
| @ChildContent | ||
| </nimble-toggle-button> |
24 changes: 24 additions & 0 deletions
24
packages/nimble-blazor/NimbleBlazor.Components/Components/NimbleToggleButton.razor.cs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| using System.Diagnostics.CodeAnalysis; | ||
| using Microsoft.AspNetCore.Components; | ||
|
|
||
| namespace NimbleBlazor.Components; | ||
|
|
||
| public partial class NimbleToggleButton : NimbleInputBase<bool> | ||
| { | ||
| [Parameter] | ||
| public Appearance? Appearance { get; set; } | ||
|
|
||
| [Parameter] | ||
| public bool? Disabled { get; set; } | ||
|
|
||
| [Parameter] | ||
| public bool? ContentHidden { get; set; } | ||
|
|
||
| [Parameter] | ||
| public bool? AutoFocus { get; set; } | ||
|
|
||
| [Parameter] | ||
| public RenderFragment? ChildContent { get; set; } | ||
|
|
||
| protected override bool TryParseValueFromString(string? value, [MaybeNullWhen(false)] out bool result, [NotNullWhen(false)] out string? validationErrorMessage) => throw new NotSupportedException($"This component does not parse string inputs. Bind to the '{nameof(CurrentValue)}' property, not '{nameof(CurrentValueAsString)}'."); | ||
| } |
14 changes: 14 additions & 0 deletions
14
packages/nimble-blazor/NimbleBlazor.Components/NimbleIconBase.cs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| using Microsoft.AspNetCore.Components; | ||
|
|
||
| namespace NimbleBlazor.Components; | ||
|
|
||
| /// <summary> | ||
| /// Base class for Nimble icons. | ||
| /// </summary> | ||
| public abstract class NimbleIconBase : ComponentBase | ||
| { | ||
| /// <summary> | ||
| /// Gets or sets a collection of additional attributes that will be applied to the created element. | ||
| /// </summary> | ||
| [Parameter(CaptureUnmatchedValues = true)] public IReadOnlyDictionary<string, object>? AdditionalAttributes { get; set; } | ||
| } |
16 changes: 16 additions & 0 deletions
16
packages/nimble-blazor/NimbleBlazor.Components/TextAreaResize.cs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| namespace NimbleBlazor.Components; | ||
|
|
||
| public enum TextAreaResize | ||
| { | ||
| None, | ||
| Both, | ||
| Horizontal, | ||
| Vertical | ||
| } | ||
|
|
||
| internal static class TextAreaResizeExtensions | ||
| { | ||
| private static readonly Dictionary<TextAreaResize, string> _textAreaResizeValues = AttributeHelpers.GetEnumNamesAsKebabCaseValues<TextAreaResize>(); | ||
|
|
||
| public static string? ToAttributeValue(this TextAreaResize? value) => value == null ? null : _textAreaResizeValues[value.Value]; | ||
| } |
Oops, something went wrong.