From ab3320969c08460b6449bffa74e76a07d4d3277a Mon Sep 17 00:00:00 2001 From: aidendk <103057880+aidendk@users.noreply.github.com> Date: Wed, 10 Aug 2022 18:26:54 -0500 Subject: [PATCH] Tooltip Blazor Integration (#664) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Pull Request ## ๐Ÿคจ Rationale Adds Blazor support for nimble-tooltip #309 ## ๐Ÿ‘ฉโ€๐Ÿ’ป Implementation Implemented Blazor support for tooltip states `default`, `fail`, `information`, `fail icon`, and `information icon`. Each tooltip is anchored to their own nimble-button in the example app. ## ๐Ÿงช Testing Ran unit tests and the example app successfully. ## โœ… Checklist - [X] I have updated the project documentation to reflect my changes or determined no changes are needed. --- README.md | 2 +- ...-11eb6102-5ca6-444a-ab23-30353c9b14bb.json | 7 ++++++ .../nimble-blazor/CodeAnalysisDictionary.xml | 1 + .../Demo.Shared/Pages/ComponentsDemo.razor | 13 +++++++++++ .../Components/NimbleTooltip.razor | 2 ++ .../Components/NimbleTooltip.razor.cs | 18 +++++++++++++++ .../Unit/Components/NimbleTooltipTests.cs | 22 +++++++++++++++++++ 7 files changed, 64 insertions(+), 1 deletion(-) create mode 100644 change/@ni-nimble-blazor-11eb6102-5ca6-444a-ab23-30353c9b14bb.json create mode 100644 packages/nimble-blazor/NimbleBlazor/Components/NimbleTooltip.razor create mode 100644 packages/nimble-blazor/NimbleBlazor/Components/NimbleTooltip.razor.cs create mode 100644 packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleTooltipTests.cs diff --git a/README.md b/README.md index 62c8cf991a..d59a9bab75 100644 --- a/README.md +++ b/README.md @@ -103,5 +103,5 @@ NOTE: To update the component status: | Text Field - Single | [XD](https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/screen/842889a5-67ba-4350-91c1-55eee48f4fa2/) | | [:white_check_mark: - SB](https://ni.github.io/nimble/storybook/?path=/docs/text-field--text-field) | :white_check_mark: | :white_check_mark: | | Toggle Icon Button | [XD](https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/screen/d022d8af-22f4-4bf2-981c-1dc0c61afece/) | | [:white_check_mark: - SB](https://ni.github.io/nimble/storybook/?path=/story/toggle-button--icon-button) | :white_check_mark: | :white_check_mark: | | Toolbar | | [Issue](https://github.com/ni/nimble/issues/411) | [:white_check_mark: - SB](https://ni.github.io/nimble/storybook/?path=/story/toolbar--toolbar) | :white_check_mark: | :white_check_mark: | -| Tooltip | [XD](https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/screen/044414d7-1714-40f2-9679-2ce2c8202d1c/) | [Issue](https://github.com/ni/nimble/issues/309) | [:arrows_counterclockwise: - SB](https://ni.github.io/nimble/storybook/?path=/docs/tooltip--tooltip) | :white_check_mark: | :o: | +| Tooltip | [XD](https://xd.adobe.com/view/33ffad4a-eb2c-4241-b8c5-ebfff1faf6f6-66ac/screen/044414d7-1714-40f2-9679-2ce2c8202d1c/) | [Issue](https://github.com/ni/nimble/issues/309) | [:arrows_counterclockwise: - SB](https://ni.github.io/nimble/storybook/?path=/story/tooltip--tooltip) | :white_check_mark: | :white_check_mark: | | Tree View | | | [:white_check_mark: - SB](https://ni.github.io/nimble/storybook/?path=/docs/tree-view--tree-view) | :white_check_mark: | :white_check_mark: | diff --git a/change/@ni-nimble-blazor-11eb6102-5ca6-444a-ab23-30353c9b14bb.json b/change/@ni-nimble-blazor-11eb6102-5ca6-444a-ab23-30353c9b14bb.json new file mode 100644 index 0000000000..6c5f05f6b3 --- /dev/null +++ b/change/@ni-nimble-blazor-11eb6102-5ca6-444a-ab23-30353c9b14bb.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "Nimble Tooltip Blazor Integration (#309)", + "packageName": "@ni/nimble-blazor", + "email": "103057880+aidendk@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/nimble-blazor/CodeAnalysisDictionary.xml b/packages/nimble-blazor/CodeAnalysisDictionary.xml index 3aaed6def6..fde1a9e338 100644 --- a/packages/nimble-blazor/CodeAnalysisDictionary.xml +++ b/packages/nimble-blazor/CodeAnalysisDictionary.xml @@ -14,6 +14,7 @@ lang frameless Dropdown + Tooltip Getter diff --git a/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor b/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor index 8658148a18..a4e229616f 100644 --- a/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor +++ b/packages/nimble-blazor/Examples/Demo.Shared/Pages/ComponentsDemo.razor @@ -184,6 +184,19 @@ Last Button +
+
Tooltip
+ Default + Tooltip label + Fail + Tooltip label + Information + Tooltip label + Fail Icon + Tooltip label + Information Icon + Tooltip label +
Tree View
diff --git a/packages/nimble-blazor/NimbleBlazor/Components/NimbleTooltip.razor b/packages/nimble-blazor/NimbleBlazor/Components/NimbleTooltip.razor new file mode 100644 index 0000000000..3eac22f5a9 --- /dev/null +++ b/packages/nimble-blazor/NimbleBlazor/Components/NimbleTooltip.razor @@ -0,0 +1,2 @@ +@namespace NimbleBlazor +@ChildContent \ No newline at end of file diff --git a/packages/nimble-blazor/NimbleBlazor/Components/NimbleTooltip.razor.cs b/packages/nimble-blazor/NimbleBlazor/Components/NimbleTooltip.razor.cs new file mode 100644 index 0000000000..5b2c8f53e5 --- /dev/null +++ b/packages/nimble-blazor/NimbleBlazor/Components/NimbleTooltip.razor.cs @@ -0,0 +1,18 @@ +using Microsoft.AspNetCore.Components; + +namespace NimbleBlazor; + +public partial class NimbleTooltip : ComponentBase +{ + [Parameter] + public string? Anchor { get; set; } + + [Parameter] + public int? Delay { get; set; } + + [Parameter] + public RenderFragment? ChildContent { get; set; } + + [Parameter(CaptureUnmatchedValues = true)] + public IDictionary? AdditionalAttributes { get; set; } +} diff --git a/packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleTooltipTests.cs b/packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleTooltipTests.cs new file mode 100644 index 0000000000..1ce8ad81ab --- /dev/null +++ b/packages/nimble-blazor/Tests/NimbleBlazor.Tests/Unit/Components/NimbleTooltipTests.cs @@ -0,0 +1,22 @@ +using Bunit; +using Xunit; + +namespace NimbleBlazor.Tests.Unit.Components; + +/// +/// Tests for . +/// +public class NimbleTooltipTests +{ + [Fact] + public void NimbleTooltip_Render_HasTooltipMarkup() + { + var context = new TestContext(); + context.JSInterop.Mode = JSRuntimeMode.Loose; + var expectedMarkup = "nimble-tooltip"; + + var tooltip = context.RenderComponent(); + + Assert.Contains(expectedMarkup, tooltip.Markup); + } +}