From 765099541ab75d7c6ffc6e7539ec9a13e1346b9e Mon Sep 17 00:00:00 2001 From: Simon Ziegler Date: Sat, 4 Dec 2021 15:55:59 +0000 Subject: [PATCH] Fix Tooltips (#585) * Paginator, Menu and MenuSurface updates * Update release notes * Remove debugging text * Clarify Action names * Fix tooltip markup to material v12 * Release Notes * Further release notes updates * Release notes * Tooltip page markup improvement --- Material.Blazor.Website/Pages/Tooltip.razor | 16 +++++-------- Material.Blazor.Website/Styles/app.scss | 8 +++---- .../Tooltip/InternalTooltipAnchor.razor | 2 +- .../Components/Tooltip/MBTooltip.razor | 24 +++++-------------- .../Components/Tooltip/MBTooltip.razor.cs | 3 ++- Material.Blazor/Model/MBEnumerations.cs | 5 ++-- articles/ReleaseNotes.md | 9 +++---- articles/Tooltip.md | 5 +--- 8 files changed, 28 insertions(+), 44 deletions(-) diff --git a/Material.Blazor.Website/Pages/Tooltip.razor b/Material.Blazor.Website/Pages/Tooltip.razor index 92dbc7d15..c5a1fb06d 100644 --- a/Material.Blazor.Website/Pages/Tooltip.razor +++ b/Material.Blazor.Website/Pages/Tooltip.razor @@ -55,26 +55,22 @@

- + - Tooltip applied with TooltipType="MBTooltipType.Span" using the whole paragraph as the target. + Tooltip applied using the whole paragraph as the target. - < - MBTooltip TooltipType="MBTooltipType. - Span"> + Centred on the paragraph

- + -

Tooltip applied with TooltipType="MBTooltipType.Div" using the whole div as the target.

+

Tooltip applied using the whole div as the target.

 - < - MBTooltip TooltipType="MBTooltipType. - Div"> + Centred on the div
diff --git a/Material.Blazor.Website/Styles/app.scss b/Material.Blazor.Website/Styles/app.scss index f56645b6f..aa45fb2e2 100644 --- a/Material.Blazor.Website/Styles/app.scss +++ b/Material.Blazor.Website/Styles/app.scss @@ -161,7 +161,7 @@ /* Dynamic link underlining */ - a:not(.mdc-deprecated-list-item) { + a:not(.mdc-deprecated-list-item):not(.mb-tooltip-anchor) { position: relative; box-shadow: inset 0 -2px 0 theme.$secondary; display: inline-flex; @@ -171,13 +171,13 @@ transition: 0.15s ease; } - a:not(.mdc-deprecated-list-item):hover { + a:not(.mdc-deprecated-list-item):not(.mb-tooltip-anchor):hover { box-shadow: none; color: theme.$on-secondary; text-decoration: none; } - a:not(.mdc-deprecated-list-item)::after { + a:not(.mdc-deprecated-list-item):not(.mb-tooltip-anchor)::after { content: ""; background: theme.$secondary; position: absolute; @@ -189,7 +189,7 @@ transition: 0.15s ease; } - a:not(.mdc-deprecated-list-item):hover:after { + a:not(.mdc-deprecated-list-item):not(.mb-tooltip-anchor):hover:after { height: 100%; } diff --git a/Material.Blazor/Components/Tooltip/InternalTooltipAnchor.razor b/Material.Blazor/Components/Tooltip/InternalTooltipAnchor.razor index ded8f6965..7ea995be2 100644 --- a/Material.Blazor/Components/Tooltip/InternalTooltipAnchor.razor +++ b/Material.Blazor/Components/Tooltip/InternalTooltipAnchor.razor @@ -17,7 +17,7 @@ role="tooltip" aria-hidden="true" style="z-index: 1000;"> -
+
@if (tooltip.RenderFragmentContent == null) { @tooltip.MarkupStringContent; diff --git a/Material.Blazor/Components/Tooltip/MBTooltip.razor b/Material.Blazor/Components/Tooltip/MBTooltip.razor index d19b78968..1d594756e 100644 --- a/Material.Blazor/Components/Tooltip/MBTooltip.razor +++ b/Material.Blazor/Components/Tooltip/MBTooltip.razor @@ -3,21 +3,9 @@ @inherits ComponentBase -@if (TooltipType == MBTooltipType.Span) -{ - - @if (Target != null) - { - @Target - } - -} -else -{ -
- @if (Target != null) - { - @Target - } -
-} \ No newline at end of file + + @if (Target != null) + { + @Target + } + diff --git a/Material.Blazor/Components/Tooltip/MBTooltip.razor.cs b/Material.Blazor/Components/Tooltip/MBTooltip.razor.cs index 0d7143725..a46d20f18 100644 --- a/Material.Blazor/Components/Tooltip/MBTooltip.razor.cs +++ b/Material.Blazor/Components/Tooltip/MBTooltip.razor.cs @@ -25,8 +25,9 @@ public partial class MBTooltip : ComponentBase, IDisposable /// - /// The tooltip's content. + /// OBSOLETE TO BE REMOVED IN VERSION 3.0.0. The tooltip type. /// + [Obsolete] [Parameter] public MBTooltipType TooltipType { get; set; } = MBTooltipType.Span; diff --git a/Material.Blazor/Model/MBEnumerations.cs b/Material.Blazor/Model/MBEnumerations.cs index 338129dc7..4260d6bd1 100644 --- a/Material.Blazor/Model/MBEnumerations.cs +++ b/Material.Blazor/Model/MBEnumerations.cs @@ -777,9 +777,10 @@ public enum MBToastPosition /// - /// Determines the density of a component + /// OBSOLETE - TO BE REMOVED IN VERSION 3.0.0. Determines the density of a component. /// Defaults to /// + [Obsolete] public enum MBTooltipType { /// @@ -788,7 +789,7 @@ public enum MBTooltipType Span, /// - /// Uses a <div> element for a tooltip - the default. + /// Uses a <div> element for a tooltip. /// Div } diff --git a/articles/ReleaseNotes.md b/articles/ReleaseNotes.md index d768d0e66..d70aa7ed1 100644 --- a/articles/ReleaseNotes.md +++ b/articles/ReleaseNotes.md @@ -22,14 +22,15 @@ Released 2021-??-??
-#### [2.0.1](https://github.com/Material-Blazor/Material.Blazor) +#### [2.0.1](https://github.com/Material-Blazor/Material.Blazor/tree/2.0.1) Released 2021-12-04 -- Fixes bug in MBPaginator where menu for number of items per pages doesn't open +- Fixes bug in MBPaginator where menu for number of items per pages doesn't open. +- Updates tooltip markup to be Material Components Web 12, fixing a bug where tooltips failed to close when the anchor loses hover state.
-#### [2.0.0](https://github.com/Material-Blazor/Material.Blazor) +#### [2.0.0](https://github.com/Material-Blazor/Material.Blazor/tree/2.0.0) Released 2021-11-10 **Updates** @@ -50,7 +51,7 @@ Released 2021-11-10
-#### [2.0.0-rc.1](https://github.com/Material-Blazor/Material.Blazor/tree/2.0.0-preview.9) +#### [2.0.0-rc.1](https://github.com/Material-Blazor/Material.Blazor/tree/2.0.0-rc.1) 2021-10-29 **Updates** diff --git a/articles/Tooltip.md b/articles/Tooltip.md index ed8f96656..2a82fe3e9 100644 --- a/articles/Tooltip.md +++ b/articles/Tooltip.md @@ -21,7 +21,7 @@ The [MBTooltip](xref:C.MBTooltip) component gives you flexible tooltips that tak in your page and Content for the tooltip's content, e.g.: ```html - + This is the target span to be displayed in your razor page. @@ -30,6 +30,3 @@ in your page and Content for the tooltip's content, e.g.: ``` - -This tooltip surrounds your `` with either a span or div depending on whether the `TooltipType` is `MBTooltipType.Span` or -`MBTooltipType.Div` respectively. \ No newline at end of file