Skip to content
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

fix: [MDS-324] Tooltip v2 #521

Merged
merged 8 commits into from
Feb 1, 2023
Merged

fix: [MDS-324] Tooltip v2 #521

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
0fbb2f4
tooltip pael testing
tkullisaar Jan 18, 2023
c4ce871
focus border still to be improved
tkullisaar Jan 19, 2023
ed9be3d
focus to be fixed
tkullisaar Jan 19, 2023
0e6634e
tabindex attr and class for parametrization
phgrey Jan 25, 2023
cb29e71
rtl is working!
phgrey Jan 28, 2023
48180da
refactoring
phgrey Jan 28, 2023
fcac4c1
left menu fix
phgrey Jan 28, 2023
ae5d4cc
rounded-corners ring
phgrey Jan 31, 2023
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
12 changes: 9 additions & 3 deletions lib/moon/design/tooltip.ex
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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