Skip to content

Commit

Permalink
Tooltip Blazor Integration (#664)
Browse files Browse the repository at this point in the history
# 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.
  • Loading branch information
aidendk authored Aug 10, 2022
1 parent 97976e4 commit ab33209
Show file tree
Hide file tree
Showing 7 changed files with 64 additions and 1 deletion.
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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: |
Original file line number Diff line number Diff line change
@@ -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"
}
1 change: 1 addition & 0 deletions packages/nimble-blazor/CodeAnalysisDictionary.xml
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
<Word>lang</Word>
<Word>frameless</Word>
<Word>Dropdown</Word>
<Word>Tooltip</Word>
<Word>Getter</Word>
</Recognized>
<DiscreteExceptions>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -184,6 +184,19 @@
<NimbleButton slot="end" Appearance="ButtonAppearance.Outline">Last Button</NimbleButton>
</NimbleToolbar>
</div>
<div class="sub-container">
<div class="container-label">Tooltip</div>
<NimbleButton id="default-anchor">Default</NimbleButton>
<NimbleTooltip Anchor="default-anchor">Tooltip label</NimbleTooltip>
<NimbleButton id="fail-anchor">Fail</NimbleButton>
<NimbleTooltip Anchor="fail-anchor" class="fail">Tooltip label</NimbleTooltip>
<NimbleButton id="information-anchor">Information</NimbleButton>
<NimbleTooltip Anchor="information-anchor" class="information">Tooltip label</NimbleTooltip>
<NimbleButton id="fail-icon-anchor">Fail Icon</NimbleButton>
<NimbleTooltip Anchor="fail-icon-anchor" class="fail icon-visible">Tooltip label</NimbleTooltip>
<NimbleButton id="information-icon-anchor">Information Icon</NimbleButton>
<NimbleTooltip Anchor="information-icon-anchor" class="information icon-visible">Tooltip label</NimbleTooltip>
</div>
<div class="sub-container">
<div class="container-label">Tree View</div>
<NimbleTreeView>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
@namespace NimbleBlazor
<nimble-tooltip anchor="@Anchor" delay="@Delay" @attributes="AdditionalAttributes">@ChildContent</nimble-tooltip>
Original file line number Diff line number Diff line change
@@ -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<string, object>? AdditionalAttributes { get; set; }
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
using Bunit;
using Xunit;

namespace NimbleBlazor.Tests.Unit.Components;

/// <summary>
/// Tests for <see cref="NimbleTooltip"/>.
/// </summary>
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<NimbleTooltip>();

Assert.Contains(expectedMarkup, tooltip.Markup);
}
}

0 comments on commit ab33209

Please sign in to comment.