Skip to content

[Dialog] Prevent tooltip from being shown on load #2856

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vnbaaij merged 5 commits into from
Oct 24, 2024
Merged

[Dialog] Prevent tooltip from being shown on load #2856

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
419e4dd
Set tabindex=0 on the dialog header title to prevent Dismmis tooltip …
vnbaaij Oct 24, 2024
b0a9bd7
Merge branch 'dev' into users/vnbaaij/fix-issue-#2787
vnbaaij Oct 24, 2024
eb2447c
Fix tests
vnbaaij Oct 24, 2024
a739707
Merge branch 'users/vnbaaij/fix-issue-#2787' of https://github.com/mi…
vnbaaij Oct 24, 2024
9e7c965
Merge branch 'dev' into users/vnbaaij/fix-issue-#2787
dvoituron Oct 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/Core/Components/Dialog/FluentDialogHeader.razor
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
Style="@StyleValue"
Class="@ClassValue"
Id="@Id">
<div style="width: 100%;">
<div style="width: 100%;" tabindex="0">
@if (@ChildContent == null && Dialog.Instance?.Parameters?.ShowTitle == true)
{
<FluentLabel Typo="Typography.PaneHeader">@Dialog.Instance?.Parameters?.Title</FluentLabel>
Expand All @@ -24,7 +24,7 @@
<FluentButton Id="dialog_close" Appearance="Appearance.Stealth" OnClick="@(() => Dialog.CancelAsync())" aria-label="@Dialog.Instance?.Parameters?.DismissTitle">
<FluentIcon Value="@(new CoreIcons.Regular.Size20.Dismiss())" Width="20px" Color="Color.Neutral" />
</FluentButton>
<FluentTooltip Anchor="dialog_close" Placement="Placement.Bottom">@Dialog.Instance?.Parameters?.DismissTitle</FluentTooltip>
<FluentTooltip Anchor="dialog_close" Position="@TooltipPosition.Bottom">@Dialog.Instance?.Parameters?.DismissTitle</FluentTooltip>
}
</FluentStack>
}
6 changes: 3 additions & 3 deletions tests/Core/Dialog/FluentDialogServiceTests.FluentDialogService_Default.verified.razor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@

<fluent-dialog id="xxx" class="fluent-dialog-main prevent-scroll" style="position: absolute; z-index: 999; top: 50%; left: 50%; --dialog-width: 500px; --dialog-height: 200px;" modal="true" trap-focus="true" blazor:ondialogdismiss="1" b-dsxskpj5rr="" blazor:elementreference="">
<div class="stack-horizontal fluent-dialog-header" style="justify-content: start; align-items: start; column-gap: 10px; row-gap: 10px; width: 100%;" b-0nr62qx0mz="">
<div style="width: 100%;">
<h4 typo="pane-header" class="fluent-typography" b-1nnnfjehkp="">Sample title</h4>
</div>
<div style="width: 100%;" tabindex="0">
<h4 typo="pane-header" class="fluent-typography" b-1nnnfjehkp="">Sample title</h4>
</div>
<fluent-button type="button" id="xxx" appearance="stealth" blazor:onclick="7" aria-label="Close" b-x1200685t0="" blazor:elementreference="xxx">
<svg style="width: 20px; fill: var(--neutral-foreground-rest);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onkeydown="9" blazor:onclick="10">
<path d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"></path>
Expand Down
6 changes: 3 additions & 3 deletions .../Core/Dialog/FluentDialogServiceTests.FluentDialogService_HeightUnset.verified.razor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@

<fluent-dialog id="xxx" class="fluent-dialog-main prevent-scroll" style="position: absolute; z-index: 999; top: 50%; left: 50%; --dialog-width: 500px; --dialog-height: unset;" modal="true" trap-focus="true" blazor:ondialogdismiss="1" b-dsxskpj5rr="" blazor:elementreference="">
<div class="stack-horizontal fluent-dialog-header" style="justify-content: start; align-items: start; column-gap: 10px; row-gap: 10px; width: 100%;" b-0nr62qx0mz="">
<div style="width: 100%;">
<h4 typo="pane-header" class="fluent-typography" b-1nnnfjehkp="">Sample title</h4>
</div>
<div style="width: 100%;" tabindex="0">
<h4 typo="pane-header" class="fluent-typography" b-1nnnfjehkp="">Sample title</h4>
</div>
<fluent-button type="button" id="xxx" appearance="stealth" blazor:onclick="7" aria-label="Close" b-x1200685t0="" blazor:elementreference="xxx">
<svg style="width: 20px; fill: var(--neutral-foreground-rest);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onkeydown="9" blazor:onclick="10">
<path d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"></path>
Expand Down
2 changes: 1 addition & 1 deletion tests/Core/Dialog/FluentDialogServiceTests.FluentDialog_RenderFragment.verified.razor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@

<fluent-dialog id="xxx" class="fluent-dialog-main prevent-scroll" style="position: absolute; z-index: 999; top: 50%; left: 50%; --dialog-width: 500px; --dialog-height: unset;" modal="true" trap-focus="true" blazor:ondialogdismiss="1" b-dsxskpj5rr="" blazor:elementreference="">
<div class="stack-horizontal fluent-dialog-header" style="justify-content: start; align-items: start; column-gap: 10px; row-gap: 10px; width: 100%;" b-0nr62qx0mz="">
<div style="width: 100%;">
<div style="width: 100%;" tabindex="0">
<h4 typo="pane-header" class="fluent-typography" b-1nnnfjehkp="">Render Fragment Example</h4>
</div>
<fluent-button type="button" id="xxx" appearance="stealth" blazor:onclick="2" aria-label="Close" b-x1200685t0="" blazor:elementreference="xxx">
Expand Down
8 changes: 4 additions & 4 deletions tests/Core/Dialog/FluentDialogTests.FluentDialog_HeaderFooter.verified.razor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@

<fluent-dialog class="fluent-dialog-main prevent-scroll" style="position: absolute; z-index: 999; top: 50%; left: 50%; --dialog-width: 500px; --dialog-height: unset;" modal="true" trap-focus="true" b-dsxskpj5rr="" blazor:elementreference="">
<div class="stack-horizontal fluent-dialog-header" style="justify-content: start; align-items: start; column-gap: 10px; row-gap: 10px; width: 100%;" b-0nr62qx0mz="">
<div style="width: 100%;">
Header content
</div>
<div style="width: 100%;" tabindex="0">
Header content
</div>
<fluent-button type="button" id="xxx" appearance="stealth" blazor:onclick="1" b-x1200685t0="" blazor:elementreference="">
<svg style="width: 20px; fill: var(--neutral-foreground-rest);" focusable="false" viewBox="0 0 20 20" aria-hidden="true" blazor:onkeydown="3" blazor:onclick="4">
<path d="m4.09 4.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L10 9.29l5.15-5.14a.5.5 0 0 1 .63-.06l.07.06c.18.17.2.44.06.63l-.06.07L10.71 10l5.14 5.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L10 10.71l-5.15 5.14a.5.5 0 0 1-.63.06l-.07-.06a.5.5 0 0 1-.06-.63l.06-.07L9.29 10 4.15 4.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"></path>
</svg>
</fluent-button>
<fluent-tooltip anchor="xxx" role="tooltip" delay="300" blazor:ontooltipdismiss="2" placement="Placement.Bottom" blazor:elementreference=""></fluent-tooltip>
<fluent-tooltip anchor="xxx" role="tooltip" delay="300" blazor:ontooltipdismiss="2" position="bottom" blazor:elementreference=""></fluent-tooltip>
</div>
<div class="fluent-dialog-body">
Body content
Expand Down