Add tooltip prop to icon component
This commit is contained in:
parent
9ece75082f
commit
47bdc9e60b
1 changed files with 49 additions and 15 deletions
|
@ -3,6 +3,9 @@
|
|||
</script>
|
||||
|
||||
<script>
|
||||
import Tooltip from "../Tooltip/Tooltip.svelte"
|
||||
import { fade } from "svelte/transition"
|
||||
|
||||
export let direction = "n"
|
||||
export let name = "Add"
|
||||
export let hidden = false
|
||||
|
@ -10,18 +13,26 @@
|
|||
export let hoverable = false
|
||||
export let disabled = false
|
||||
export let color
|
||||
export let dataCy = null
|
||||
export let tooltip
|
||||
|
||||
$: rotation = getRotation(direction)
|
||||
|
||||
let showTooltip = false
|
||||
|
||||
const getRotation = direction => {
|
||||
return directions.indexOf(direction) * 45
|
||||
}
|
||||
</script>
|
||||
|
||||
<svg
|
||||
<div
|
||||
class="icon"
|
||||
on:mouseover={() => (showTooltip = true)}
|
||||
on:focus={() => (showTooltip = true)}
|
||||
on:mouseleave={() => (showTooltip = false)}
|
||||
on:click={() => (showTooltip = false)}
|
||||
>
|
||||
<svg
|
||||
on:click
|
||||
data-cy={dataCy}
|
||||
class:hoverable
|
||||
class:disabled
|
||||
class="spectrum-Icon spectrum-Icon--size{size}"
|
||||
|
@ -31,11 +42,23 @@
|
|||
style={`transform: rotate(${rotation}deg); ${
|
||||
color ? `color: ${color};` : ""
|
||||
}`}
|
||||
>
|
||||
<use xlink:href="#spectrum-icon-18-{name}" />
|
||||
</svg>
|
||||
>
|
||||
<use style="pointer-events: none;" xlink:href="#spectrum-icon-18-{name}" />
|
||||
</svg>
|
||||
{#if tooltip && showTooltip}
|
||||
<div class="tooltip" in:fade={{ duration: 130, delay: 250 }}>
|
||||
<Tooltip textWrapping direction={"bottom"} text={tooltip} />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.icon {
|
||||
position: relative;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
}
|
||||
|
||||
svg.hoverable {
|
||||
pointer-events: all;
|
||||
transition: color var(--spectrum-global-animation-duration-100, 130ms);
|
||||
|
@ -49,4 +72,15 @@
|
|||
color: var(--spectrum-global-color-gray-500) !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
.tooltip {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
left: 50%;
|
||||
top: calc(100% + 4px);
|
||||
width: 100vw;
|
||||
max-width: 150px;
|
||||
transform: translateX(-50%);
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in a new issue