Skip to content

Commit

Permalink
fix: [MDS-324] Tooltip with focus
Browse files Browse the repository at this point in the history
  • Loading branch information
@tkullisaar
tkullisaar authored Feb 1, 2023
1 parent d058f05 commit b161076
Show file tree
Hide file tree
Showing 4 changed files with 50 additions and 73 deletions.
12 changes: 9 additions & 3 deletions lib/moon/design/tooltip.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,19 +3,25 @@ defmodule Moon.Design.Tooltip do

use Moon.StatelessComponent

prop(tabindex, :string, default: "0")
prop(class, :css_class)

slot(default, required: true)
slot(trigger, required: true)

def render(assigns) do
~F"""
<div class="relative inline-block group">
<div class={merge(["relative inline-block group focus:outline-none", @class])} {=@tabindex}>
<div
role="tooltip"
class="hidden group-hover:block pointer-events-none transition-opacity transition-200"
class="hidden group-hover:block group-focus:block transition-opacity duration-200"
>
<#slot />
</div>
<div aria-describedby="tooltip" class="inline-block">
<div
aria-describedby="tooltip"
class="inline-block group-focus:ring-2 group-focus:outline-none rounded-moon-s-sm"
>
<#slot {@trigger} />
</div>
</div>
Expand Down
99 changes: 34 additions & 65 deletions lib/moon/design/tooltip/content.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,80 +29,49 @@ defmodule Moon.Design.Tooltip.Content do
def render(assigns) do
~F"""
<div class={
"absolute left-0 right-0 z-30",
(@position in ~w(bottom-start bottom-center bottom-end) && "bottom-0") || "top-0",
"absolute flex items-center z-30",
"drop-shadow-[0_0_1px_rgba(0,0,0,0.4)]": !@has_no_shadow,
"flex flex-col items-center": !(@position in ~w(left right))
"left-full rtl:flex-row-reverse": @position == "right",
"right-full ltr:flex-row-reverse": @position == "left",
"top-full left-0 right-0 flex-col": String.starts_with?(@position, "bottom"),
"bottom-full left-0 right-0 flex-col-reverse": String.starts_with?(@position, "top")
}>
{#case @position}
{#match "top-" <> align}
<div class="-translate-y-full">
<div class={content_class(@class, @has_no_shadow, align)}>
<#slot />
</div>
<div class="w-full overflow-hidden">
<#slot
{@arrow}
context_put={parent_class: ["mx-auto -translate-y-1/2", @class], has_no_shadow: @has_no_shadow}
>
<div class="w-3 h-3 bg-transparent" />
</#slot>
</div>
</div>
{#match "right"}
<div class="flex items-center translate-x-full">
<div class="p-1 overflow-hidden">
<#slot
{@arrow}
context_put={parent_class: ["-translate-x-1/4", @class], has_no_shadow: @has_no_shadow}
>
<div class="w-3 h-3 bg-transparent" />
</#slot>
</div>
<div class={content_class(@class, @has_no_shadow)}>
<#slot />
</div>
</div>
{#match "bottom-" <> align}
<div class="translate-y-full">
<div class="w-full overflow-hidden">
<#slot
{@arrow}
context_put={parent_class: ["mx-auto translate-y-1/2", @class], has_no_shadow: @has_no_shadow}
>
<div class="w-3 h-3 bg-transparent" />
</#slot>
</div>
<div class={content_class(@class, @has_no_shadow, align)}>
<#slot />
</div>
</div>
{#match "left"}
<div class="absolute -translate-x-full">
<div class="flex items-center top-0 right-0">
<div class={content_class(@class, @has_no_shadow)}>
<#slot />
</div>
<div class="py-1 overflow-hidden">
<#slot
{@arrow}
context_put={parent_class: ["-translate-x-1/2", @class], has_no_shadow: @has_no_shadow}
>
<div class="w-3 h-3 bg-transparent" />
</#slot>
</div>
</div>
</div>
{/case}
<div class={"overflow-hidden", (@position in ~w(right left) && "py-1") || "px-1"}>
<#slot
{@arrow}
context_put={
parent_class: [
@class,
"translate-x-1/2": @position == "right",
"-translate-x-1/2": @position == "left",
"translate-y-1/2": String.starts_with?(@position, "bottom"),
"-translate-y-1/2": String.starts_with?(@position, "top")
],
has_no_shadow: @has_no_shadow
}
>
<div class="w-3 h-3 bg-transparent" />
</#slot>
</div>
<div class={content_class(@class, @has_no_shadow, @position)}>
<#slot />
</div>
</div>
"""
end

defp content_class(class, has_no_shadow, align \\ "center") do
defp content_class(class, has_no_shadow, position) do
align =
case position do
"top-" <> a -> a
"bottom-" <> a -> a
_ -> "center"
end

merge([
"p-3 rounded-moon-s-xs text-moon-12 text-bulma bg-gohan whitespace-nowrap",
(has_no_shadow && "") || "shadow-[0_6px_6px_-6px_rgba(0,0,0,0.16)]",
[
"shadow-[0_6px_6px_-6px_rgba(0,0,0,0.16)]": !has_no_shadow,
"ltr:-translate-x-1/3 rtl:translate-x-1/3": align == "end",
"ltr:translate-x-1/3 rtl:-translate-x-1/3": align == "start"
],
Expand Down
4 changes: 2 additions & 2 deletions lib/moon_web/components/left_menu.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ defmodule MoonWeb.Components.LeftMenu do
<Accordion
is_content_inside={false}
id="left-menu-components-button"
open_by_default={active_page_contains(@active_page, Pages.Design)}
open_by_default={active_page_contains(@active_page, Pages.Design.Button)}
>
<:title>Button</:title>
<:content>
Expand All @@ -84,7 +84,7 @@ defmodule MoonWeb.Components.LeftMenu do
<Accordion
is_content_inside={false}
id="left-menu-components-form"
open_by_default={active_page_contains(@active_page, Pages.Design)}
open_by_default={active_page_contains(@active_page, Pages.Design.Form)}
>
<:title>Form</:title>
<:content>
Expand Down
8 changes: 5 additions & 3 deletions lib/moon_web/pages/design/tooltip_page.ex
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ defmodule MoonWeb.Pages.Design.TooltipPage do
use MoonWeb, :live_view

alias Moon.Design.Tooltip
alias Moon.Components.Button
alias Moon.Design.Button
alias MoonWeb.Components.ExampleAndCode
alias MoonWeb.Components.Page
alias MoonWeb.Components.ComponentPageDescription
Expand Down Expand Up @@ -88,7 +88,7 @@ defmodule MoonWeb.Pages.Design.TooltipPage do
def render(assigns) do
~F"""
<Page {=@theme_name} {=@active_page} {=@breadcrumbs} {=@direction}>
<ComponentPageDescription title="Tooltip" is_aria_support is_rtl_support is_in_progress>
<ComponentPageDescription title="Tooltip" is_aria_support is_rtl_support>
<p>
A means of displaying a description or extra information about an element, usually on hover, but can also be on click or tap.
</p>
Expand Down Expand Up @@ -166,6 +166,7 @@ defmodule MoonWeb.Pages.Design.TooltipPage do
Custom background
</Tooltip.Content>
</Tooltip>
<Tooltip>
<Tooltip.Trigger>
<Button variant="secondary">Hover Me</Button>
Expand All @@ -175,6 +176,7 @@ defmodule MoonWeb.Pages.Design.TooltipPage do
Custom font
</Tooltip.Content>
</Tooltip>
<Tooltip>
<Tooltip.Trigger>
<Button variant="secondary">Hover Me</Button>
Expand All @@ -198,7 +200,7 @@ defmodule MoonWeb.Pages.Design.TooltipPage do
defp tooltip_1_code() do
"""
alias Moon.Design.Tooltip
alias Moon.Components.Button
alias Moon.Design.Button
...
Expand Down

0 comments on commit b161076

Please sign in to comment.