From cdd2f18ad5c04e7af25c143cc3898766312256f1 Mon Sep 17 00:00:00 2001 From: Mert Akinc <7282195+m-akinc@users.noreply.github.com> Date: Thu, 19 Jan 2023 11:09:43 -0600 Subject: [PATCH 1/6] Wrappers and tests --- .../Components/NimbleAnchorTab.razor | 6 +++ .../Components/NimbleAnchorTab.razor.cs | 15 ++++++ .../Components/NimbleAnchorTabs.razor | 6 +++ .../Components/NimbleAnchorTabs.razor.cs | 15 ++++++ .../Unit/Components/NimbleAnchorTabsTestscs | 46 +++++++++++++++++++ 5 files changed, 88 insertions(+) create mode 100644 packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTab.razor create mode 100644 packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTab.razor.cs create mode 100644 packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTabs.razor create mode 100644 packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTabs.razor.cs create mode 100644 packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleAnchorTabsTestscs diff --git a/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTab.razor b/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTab.razor new file mode 100644 index 0000000000..14c1dc2361 --- /dev/null +++ b/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTab.razor @@ -0,0 +1,6 @@ +@namespace NimbleBlazor + + @ChildContent + diff --git a/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTab.razor.cs b/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTab.razor.cs new file mode 100644 index 0000000000..2bc4c78b9c --- /dev/null +++ b/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTab.razor.cs @@ -0,0 +1,15 @@ +using Microsoft.AspNetCore.Components; + +namespace NimbleBlazor; + +public partial class NimbleAnchorTab : ComponentBase +{ + [Parameter] + public RenderFragment? ChildContent { get; set; } + + [Parameter] + public bool? Disabled { get; set; } + + [Parameter(CaptureUnmatchedValues = true)] + public IDictionary? AdditionalAttributes { get; set; } +} diff --git a/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTabs.razor b/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTabs.razor new file mode 100644 index 0000000000..1e284b4227 --- /dev/null +++ b/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTabs.razor @@ -0,0 +1,6 @@ +@namespace NimbleBlazor + + @ChildContent + diff --git a/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTabs.razor.cs b/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTabs.razor.cs new file mode 100644 index 0000000000..f46ca9e7a5 --- /dev/null +++ b/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTabs.razor.cs @@ -0,0 +1,15 @@ +using Microsoft.AspNetCore.Components; + +namespace NimbleBlazor; + +public partial class NimbleAnchorTabs : ComponentBase +{ + [Parameter] + public RenderFragment? ChildContent { get; set; } + + [Parameter] + public string? ActiveId { get; set; } + + [Parameter(CaptureUnmatchedValues = true)] + public IDictionary? AdditionalAttributes { get; set; } +} diff --git a/packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleAnchorTabsTestscs b/packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleAnchorTabsTestscs new file mode 100644 index 0000000000..652d7e2508 --- /dev/null +++ b/packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleAnchorTabsTestscs @@ -0,0 +1,46 @@ +using System.Linq; +using AngleSharp.Dom; +using Bunit; +using Xunit; + +namespace NimbleBlazor.Tests.Unit.Components; + +/// +/// Tests for +/// +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(); + + Assert.Contains(expectedMarkup, tabs.Markup); + } + + [Fact] + public void NimbleAnchorTabsWithChildContent_HasChildMarkup() + { + var tabs = RenderTabsWithContent(); + var expectedChildrenNames = new[] { "nimble-anchor-tab", "nimble-tabs-toolbar" }; + + var actualChildNodeNames = tabs.Nodes.First().ChildNodes.OfType().Select(node => node.LocalName).ToArray(); + Assert.Equal(expectedChildrenNames, actualChildNodeNames); + } + + private IRenderedComponent RenderTabsWithContent() + { + var context = new TestContext(); + context.JSInterop.Mode = JSRuntimeMode.Loose; + return context.RenderComponent(AddChildContentToTabs); + } + + private void AddChildContentToTabs(ComponentParameterCollectionBuilder parameters) + { + parameters.AddChildContent(); + parameters.AddChildContent(); + } +} From 752ae66ab1200bcfe161466a452066e7cef5f8cc Mon Sep 17 00:00:00 2001 From: Mert Akinc <7282195+m-akinc@users.noreply.github.com> Date: Thu, 19 Jan 2023 11:44:01 -0600 Subject: [PATCH 2/6] Add to example app --- .../Demo.Shared/Pages/ComponentsDemo.razor | 22 ++++++++++++++++--- .../Demo.Shared/Pages/ComponentsDemo.razor.cs | 1 + 2 files changed, 20 insertions(+), 3 deletions(-) diff --git a/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor b/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor index 54115da7e0..0122e4689a 100644 --- a/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor +++ b/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor @@ -206,9 +206,9 @@
Tabs
- Tab 1 - Tab 2 - Tab 3 (Disabled) + Tab 1 + Tab 2 + Tab 3 (Disabled) Toolbar Button @@ -228,6 +228,22 @@ Tab 3
+
+
Tabs - Anchor
+ + Tab 1 + Tab 2 + Tab 3 (Disabled) + + Toolbar Button + + + + Tab 1 + Tab 2 + Tab 3 + +
Text Area
Text Area Label diff --git a/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor.cs b/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor.cs index 163d8d534a..b807f00f20 100644 --- a/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor.cs +++ b/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor.cs @@ -11,6 +11,7 @@ public partial class ComponentsDemo { private DrawerLocation _drawerLocation = DrawerLocation.Right; private string? ActiveTabId { get; set; } + private string? ActiveAnchorTabId { get; set; } = "tab-1"; private NimbleDialog? _dialog; private string? DialogClosedReason { get; set; } private NimbleDrawer? _drawer; From c1b773d976ed35a3394fcddbdfa666c88a434808 Mon Sep 17 00:00:00 2001 From: Mert Akinc <7282195+m-akinc@users.noreply.github.com> Date: Thu, 19 Jan 2023 14:46:01 -0600 Subject: [PATCH 3/6] Update README --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 8bea50dfd4..499cd00919 100644 --- a/README.md +++ b/README.md @@ -69,7 +69,7 @@ NOTE: To update the component status: | Accordion | | [Issue](https://github.com/ni/nimble/issues/533) | :o: | :o: | :o: | | Anchor | [XD](https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/screen/bfadf499-caf5-4ca0-9814-e777fbae0d46/) | [Issue](https://github.com/ni/nimble/issues/324) | [:white_check_mark: - SB](https://ni.github.io/nimble/storybook/?path=/docs/anchor--text-anchor) | :white_check_mark: | :white_check_mark: | | Anchor Button | | [Issue](https://github.com/ni/nimble/issues/324) | [:white_check_mark: - SB](https://ni.github.io/nimble/storybook/?path=/docs/anchor-button--outline-anchor-button) | :white_check_mark: | :white_check_mark: | -| Anchor Tabs | [XD](https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/screen/b2aa2c0c-03b7-4571-8e0d-de88baf0814b) | [Issue](https://github.com/ni/nimble/issues/479) | [:white_check_mark: - SB](https://nimble.ni.dev/storybook/?path=/docs/anchor-tabs--tabs) | :o: | :o: | +| Anchor Tabs | [XD](https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/screen/b2aa2c0c-03b7-4571-8e0d-de88baf0814b) | [Issue](https://github.com/ni/nimble/issues/479) | [:white_check_mark: - SB](https://nimble.ni.dev/storybook/?path=/docs/anchor-tabs--tabs) | :white_check_mark: | :white_check_mark: | | Banners | [XD](https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/screen/29c405f7-08ea-48b6-973f-546970b9dbab) | [Issue](https://github.com/ni/nimble/issues/305) | :o: | :o: | :o: | | Breadcrumb | [XD](https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/screen/7b53bb3e-439b-4f13-9d5f-55adc7da8a2e) | | [:white_check_mark: - SB](https://ni.github.io/nimble/storybook/?path=/docs/breadcrumb--standard-breadcrumb) | :white_check_mark: | :white_check_mark: | | Card | | [Issue](https://github.com/ni/nimble/issues/296) | :o: | :o: | :o: | From 1be2d968f523addff52b2d3deefd675492cbefc6 Mon Sep 17 00:00:00 2001 From: Mert Akinc <7282195+m-akinc@users.noreply.github.com> Date: Thu, 19 Jan 2023 14:47:07 -0600 Subject: [PATCH 4/6] Change files --- ...nimble-blazor-7ee25a1b-7b0f-4aa5-afe8-afa7bed38547.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@ni-nimble-blazor-7ee25a1b-7b0f-4aa5-afe8-afa7bed38547.json diff --git a/change/@ni-nimble-blazor-7ee25a1b-7b0f-4aa5-afe8-afa7bed38547.json b/change/@ni-nimble-blazor-7ee25a1b-7b0f-4aa5-afe8-afa7bed38547.json new file mode 100644 index 0000000000..82e0f3781d --- /dev/null +++ b/change/@ni-nimble-blazor-7ee25a1b-7b0f-4aa5-afe8-afa7bed38547.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Support for anchor tabs", + "packageName": "@ni/nimble-blazor", + "email": "7282195+m-akinc@users.noreply.github.com", + "dependentChangeType": "patch" +} From da6dc24cdd31f6bc166cf000bb899beb5c917ec1 Mon Sep 17 00:00:00 2001 From: Mert Akinc <7282195+m-akinc@users.noreply.github.com> Date: Mon, 23 Jan 2023 12:49:01 -0600 Subject: [PATCH 5/6] Fix extension on tests file --- .../{NimbleAnchorTabsTestscs => NimbleAnchorTabsTests.cs} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/{NimbleAnchorTabsTestscs => NimbleAnchorTabsTests.cs} (100%) diff --git a/packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleAnchorTabsTestscs b/packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleAnchorTabsTests.cs similarity index 100% rename from packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleAnchorTabsTestscs rename to packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleAnchorTabsTests.cs From 94970340a2b311680bfc1689dac85be470badb69 Mon Sep 17 00:00:00 2001 From: Mert Akinc <7282195+m-akinc@users.noreply.github.com> Date: Tue, 24 Jan 2023 17:10:51 -0600 Subject: [PATCH 6/6] Address feedback --- .../Demo.Shared/Pages/ComponentsDemo.razor | 24 +++++++++++------- .../Demo.Shared/Pages/ComponentsDemo.razor.cs | 2 +- .../Components/NimbleAnchorTab.razor.cs | 12 +++++++++ .../Components/NimbleAnchorTabs.razor.cs | 12 +++++++++ .../Unit/Components/NimbleAnchorTabsTests.cs | 25 ++++++++++++++++++- 5 files changed, 64 insertions(+), 11 deletions(-) diff --git a/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor b/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor index 0122e4689a..295e6cc0d1 100644 --- a/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor +++ b/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor @@ -222,7 +222,10 @@
Tab 3 content
- + + Tab 1 Tab 2 Tab 3 @@ -230,18 +233,21 @@
Tabs - Anchor
- - Tab 1 - Tab 2 - Tab 3 (Disabled) + + Tab 1 + Tab 2 + Tab 3 (Disabled) Toolbar Button - - Tab 1 - Tab 2 - Tab 3 + + + Tab 1 + Tab 2 + Tab 3
diff --git a/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor.cs b/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor.cs index b807f00f20..dbc343ccc9 100644 --- a/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor.cs +++ b/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor.cs @@ -11,7 +11,7 @@ public partial class ComponentsDemo { private DrawerLocation _drawerLocation = DrawerLocation.Right; private string? ActiveTabId { get; set; } - private string? ActiveAnchorTabId { get; set; } = "tab-1"; + private string? ActiveAnchorTabId { get; set; } = "a-tab-1"; private NimbleDialog? _dialog; private string? DialogClosedReason { get; set; } private NimbleDrawer? _drawer; diff --git a/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTab.razor.cs b/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTab.razor.cs index 2bc4c78b9c..0263107f61 100644 --- a/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTab.razor.cs +++ b/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTab.razor.cs @@ -2,14 +2,26 @@ namespace NimbleBlazor; +/// +/// A link styled as a tab +/// public partial class NimbleAnchorTab : ComponentBase { + /// + /// The child content of the element. + /// [Parameter] public RenderFragment? ChildContent { get; set; } + /// + /// Whether the tab is disabled (not selectable) + /// [Parameter] public bool? Disabled { get; set; } + /// + /// Any additional attributes that did not match known properties. + /// [Parameter(CaptureUnmatchedValues = true)] public IDictionary? AdditionalAttributes { get; set; } } diff --git a/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTabs.razor.cs b/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTabs.razor.cs index f46ca9e7a5..99345c032d 100644 --- a/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTabs.razor.cs +++ b/packages/nimble-blazor/NimbleBlazor/Components/NimbleAnchorTabs.razor.cs @@ -2,14 +2,26 @@ namespace NimbleBlazor; +/// +/// A sequence of links styled as tabs. +/// public partial class NimbleAnchorTabs : ComponentBase { + /// + /// The child content of the element. + /// [Parameter] public RenderFragment? ChildContent { get; set; } + /// + /// The id of the contained NimbleAnchorTab that is marked as active. + /// [Parameter] public string? ActiveId { get; set; } + /// + /// Any additional attributes that did not match known properties. + /// [Parameter(CaptureUnmatchedValues = true)] public IDictionary? AdditionalAttributes { get; set; } } diff --git a/packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleAnchorTabsTests.cs b/packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleAnchorTabsTests.cs index 652d7e2508..b30e0da5bc 100644 --- a/packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleAnchorTabsTests.cs +++ b/packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleAnchorTabsTests.cs @@ -25,12 +25,28 @@ public void NimbleAnchorTabsRendered_HasTabsMarkup() public void NimbleAnchorTabsWithChildContent_HasChildMarkup() { var tabs = RenderTabsWithContent(); - var expectedChildrenNames = new[] { "nimble-anchor-tab", "nimble-tabs-toolbar" }; + var expectedChildrenNames = new[] { "nimble-anchor-tab", "nimble-anchor-tab", "nimble-tabs-toolbar" }; var actualChildNodeNames = tabs.Nodes.First().ChildNodes.OfType().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 RenderTabsWithContent() { var context = new TestContext(); @@ -40,7 +56,14 @@ private IRenderedComponent RenderTabsWithContent() private void AddChildContentToTabs(ComponentParameterCollectionBuilder parameters) { + parameters.Add(x => x.ActiveId, "tab1"); parameters.AddChildContent(); + parameters.AddChildContent(SetTabDisabled); parameters.AddChildContent(); } + + private void SetTabDisabled(ComponentParameterCollectionBuilder parameters) + { + parameters.Add(x => x.Disabled, true); + } }