-
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.
## 🤨 Rationale Blazor support for anchor tabs component ## 👩💻 Implementation - Adds components NimbleAnchorTabs and NimbleAnchorTab - A few tests - Add to example app - Update README ## 🧪 Testing Ran tests and exercised example app. ## ✅ Checklist - [x] I have updated the project documentation to reflect my changes or determined no changes are needed.
- Loading branch information
Showing
9 changed files
with
170 additions
and
5 deletions.
There are no files selected for viewing
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
7 changes: 7 additions & 0 deletions
7
change/@ni-nimble-blazor-7ee25a1b-7b0f-4aa5-afe8-afa7bed38547.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": "Support for anchor tabs", | ||
| "packageName": "@ni/nimble-blazor", | ||
| "email": "[email protected]", | ||
| "dependentChangeType": "patch" | ||
| } |
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
6 changes: 6 additions & 0 deletions
6
packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTab.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,6 @@ | ||
| @namespace NimbleBlazor | ||
| <nimble-anchor-tab | ||
| disabled="@Disabled" | ||
| @attributes="AdditionalAttributes"> | ||
| @ChildContent | ||
| </nimble-anchor-tab> |
27 changes: 27 additions & 0 deletions
27
packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTab.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,27 @@ | ||
| using Microsoft.AspNetCore.Components; | ||
|
|
||
| namespace NimbleBlazor; | ||
|
|
||
| /// <summary> | ||
| /// A link styled as a tab | ||
| /// </summary> | ||
| public partial class NimbleAnchorTab : ComponentBase | ||
| { | ||
| /// <summary> | ||
| /// The child content of the element. | ||
| /// </summary> | ||
| [Parameter] | ||
| public RenderFragment? ChildContent { get; set; } | ||
|
|
||
| /// <summary> | ||
| /// Whether the tab is disabled (not selectable) | ||
| /// </summary> | ||
| [Parameter] | ||
| public bool? Disabled { get; set; } | ||
|
|
||
| /// <summary> | ||
| /// Any additional attributes that did not match known properties. | ||
| /// </summary> | ||
| [Parameter(CaptureUnmatchedValues = true)] | ||
| public IDictionary<string, object>? AdditionalAttributes { get; set; } | ||
| } |
6 changes: 6 additions & 0 deletions
6
packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTabs.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,6 @@ | ||
| @namespace NimbleBlazor | ||
| <nimble-anchor-tabs | ||
| activeid="@BindConverter.FormatValue(ActiveId)" | ||
| @attributes="AdditionalAttributes"> | ||
| @ChildContent | ||
| </nimble-anchor-tabs> |
27 changes: 27 additions & 0 deletions
27
packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTabs.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,27 @@ | ||
| using Microsoft.AspNetCore.Components; | ||
|
|
||
| namespace NimbleBlazor; | ||
|
|
||
| /// <summary> | ||
| /// A sequence of links styled as tabs. | ||
| /// </summary> | ||
| public partial class NimbleAnchorTabs : ComponentBase | ||
| { | ||
| /// <summary> | ||
| /// The child content of the element. | ||
| /// </summary> | ||
| [Parameter] | ||
| public RenderFragment? ChildContent { get; set; } | ||
|
|
||
| /// <summary> | ||
| /// The id of the contained NimbleAnchorTab that is marked as active. | ||
| /// </summary> | ||
| [Parameter] | ||
| public string? ActiveId { get; set; } | ||
|
|
||
| /// <summary> | ||
| /// Any additional attributes that did not match known properties. | ||
| /// </summary> | ||
| [Parameter(CaptureUnmatchedValues = true)] | ||
| public IDictionary<string, object>? AdditionalAttributes { get; set; } | ||
| } |
69 changes: 69 additions & 0 deletions
69
packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleAnchorTabsTests.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,69 @@ | ||
| using System.Linq; | ||
| using AngleSharp.Dom; | ||
| using Bunit; | ||
| using Xunit; | ||
|
|
||
| namespace NimbleBlazor.Tests.Unit.Components; | ||
|
|
||
| /// <summary> | ||
| /// Tests for <see cref="NimbleAnchorTabs"/> | ||
| /// </summary> | ||
| public class NimbleAnchorTabsTests | ||
| { | ||
| [Fact] | ||
| public void NimbleAnchorTabsRendered_HasTabsMarkup() | ||
| { | ||
| var context = new TestContext(); | ||
| context.JSInterop.Mode = JSRuntimeMode.Loose; | ||
| var expectedMarkup = "nimble-anchor-tabs"; | ||
| var tabs = context.RenderComponent<NimbleAnchorTabs>(); | ||
|
|
||
| Assert.Contains(expectedMarkup, tabs.Markup); | ||
| } | ||
|
|
||
| [Fact] | ||
| public void NimbleAnchorTabsWithChildContent_HasChildMarkup() | ||
| { | ||
| var tabs = RenderTabsWithContent(); | ||
| var expectedChildrenNames = new[] { "nimble-anchor-tab", "nimble-anchor-tab", "nimble-tabs-toolbar" }; | ||
|
|
||
| var actualChildNodeNames = tabs.Nodes.First().ChildNodes.OfType<IElement>().Select(node => node.LocalName).ToArray(); | ||
| Assert.Equal(expectedChildrenNames, actualChildNodeNames); | ||
| } | ||
|
|
||
| [Fact] | ||
| public void NimbleAnchorTabsWithChildContent_HasActiveIdMarkup() | ||
| { | ||
| var tabs = RenderTabsWithContent(); | ||
|
|
||
| Assert.Contains("activeid", tabs.Markup); | ||
| } | ||
|
|
||
| [Fact] | ||
| public void NimbleAnchorTabsWithChildContent_HasDisabledMarkup() | ||
| { | ||
| var tabs = RenderTabsWithContent(); | ||
|
|
||
| Assert.Contains("disabled", tabs.Markup); | ||
| } | ||
|
|
||
| private IRenderedComponent<NimbleAnchorTabs> RenderTabsWithContent() | ||
| { | ||
| var context = new TestContext(); | ||
| context.JSInterop.Mode = JSRuntimeMode.Loose; | ||
| return context.RenderComponent<NimbleAnchorTabs>(AddChildContentToTabs); | ||
| } | ||
|
|
||
| private void AddChildContentToTabs(ComponentParameterCollectionBuilder<NimbleAnchorTabs> parameters) | ||
| { | ||
| parameters.Add(x => x.ActiveId, "tab1"); | ||
| parameters.AddChildContent<NimbleAnchorTab>(); | ||
| parameters.AddChildContent<NimbleAnchorTab>(SetTabDisabled); | ||
| parameters.AddChildContent<NimbleTabsToolbar>(); | ||
| } | ||
|
|
||
| private void SetTabDisabled(ComponentParameterCollectionBuilder<NimbleAnchorTab> parameters) | ||
| { | ||
| parameters.Add(x => x.Disabled, true); | ||
| } | ||
| } |