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>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
import Tooltip from "../Tooltip/Tooltip.svelte"
|
||||||
|
import { fade } from "svelte/transition"
|
||||||
|
|
||||||
export let direction = "n"
|
export let direction = "n"
|
||||||
export let name = "Add"
|
export let name = "Add"
|
||||||
export let hidden = false
|
export let hidden = false
|
||||||
|
@ -10,32 +13,52 @@
|
||||||
export let hoverable = false
|
export let hoverable = false
|
||||||
export let disabled = false
|
export let disabled = false
|
||||||
export let color
|
export let color
|
||||||
export let dataCy = null
|
export let tooltip
|
||||||
|
|
||||||
$: rotation = getRotation(direction)
|
$: rotation = getRotation(direction)
|
||||||
|
|
||||||
|
let showTooltip = false
|
||||||
|
|
||||||
const getRotation = direction => {
|
const getRotation = direction => {
|
||||||
return directions.indexOf(direction) * 45
|
return directions.indexOf(direction) * 45
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svg
|
<div
|
||||||
on:click
|
class="icon"
|
||||||
data-cy={dataCy}
|
on:mouseover={() => (showTooltip = true)}
|
||||||
class:hoverable
|
on:focus={() => (showTooltip = true)}
|
||||||
class:disabled
|
on:mouseleave={() => (showTooltip = false)}
|
||||||
class="spectrum-Icon spectrum-Icon--size{size}"
|
on:click={() => (showTooltip = false)}
|
||||||
focusable="false"
|
|
||||||
aria-hidden={hidden}
|
|
||||||
aria-label={name}
|
|
||||||
style={`transform: rotate(${rotation}deg); ${
|
|
||||||
color ? `color: ${color};` : ""
|
|
||||||
}`}
|
|
||||||
>
|
>
|
||||||
<use xlink:href="#spectrum-icon-18-{name}" />
|
<svg
|
||||||
</svg>
|
on:click
|
||||||
|
class:hoverable
|
||||||
|
class:disabled
|
||||||
|
class="spectrum-Icon spectrum-Icon--size{size}"
|
||||||
|
focusable="false"
|
||||||
|
aria-hidden={hidden}
|
||||||
|
aria-label={name}
|
||||||
|
style={`transform: rotate(${rotation}deg); ${
|
||||||
|
color ? `color: ${color};` : ""
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<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>
|
<style>
|
||||||
|
.icon {
|
||||||
|
position: relative;
|
||||||
|
display: grid;
|
||||||
|
place-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
svg.hoverable {
|
svg.hoverable {
|
||||||
pointer-events: all;
|
pointer-events: all;
|
||||||
transition: color var(--spectrum-global-animation-duration-100, 130ms);
|
transition: color var(--spectrum-global-animation-duration-100, 130ms);
|
||||||
|
@ -49,4 +72,15 @@
|
||||||
color: var(--spectrum-global-color-gray-500) !important;
|
color: var(--spectrum-global-color-gray-500) !important;
|
||||||
pointer-events: none !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>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue