CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-02 21:10:43 +12:00
Code Issues Projects Releases Wiki Activity

Update button tooltip to remove wrapper div and place tooltip inside button element

Browse source
This commit is contained in:
Andrew Kingston 2022-02-15 12:01:50 +00:00
parent 3b69862b56
commit 69bc9bf9fc
1 changed files with 40 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
packages/bbui/src/Button/Button.svelte
View file

@ -17,65 +17,55 @@
let showTooltip = false let showTooltip = false
</script> </script>
<div class:container={!!tooltip}> <button
<button class:spectrum-Button--cta={cta}
class:spectrum-Button--cta={cta} class:spectrum-Button--primary={primary}
class:spectrum-Button--primary={primary} class:spectrum-Button--secondary={secondary}
class:spectrum-Button--secondary={secondary} class:spectrum-Button--warning={warning}
class:spectrum-Button--warning={warning} class:spectrum-Button--overBackground={overBackground}
class:spectrum-Button--overBackground={overBackground} class:spectrum-Button--quiet={quiet}
class:spectrum-Button--quiet={quiet} class:active
class:active class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
class="spectrum-Button spectrum-Button--size{size.toUpperCase()}" {disabled}
{disabled} on:click|preventDefault
on:click|preventDefault on:mouseover={() => (showTooltip = true)}
on:mouseover={() => (showTooltip = true)} on:mouseleave={() => (showTooltip = false)}
on:mouseleave={() => (showTooltip = false)} >
> {#if icon}
{#if icon} <svg
class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
focusable="false"
aria-hidden="true"
aria-label={icon}
>
<use xlink:href="#spectrum-icon-18-{icon}" />
</svg>
{/if}
{#if $$slots}
<span class="spectrum-Button-label"><slot /></span>
{/if}
{#if !disabled && tooltip}
<div class="tooltip-icon">
<svg <svg
class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}" class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
focusable="false" focusable="false"
aria-hidden="true" aria-hidden="true"
aria-label={icon} aria-label="Info"
> >
<use xlink:href="#spectrum-icon-18-{icon}" /> <use xlink:href="#spectrum-icon-18-InfoOutline" />
</svg> </svg>
{/if}
{#if $$slots}
<span class="spectrum-Button-label"><slot /></span>
{/if}
{#if !disabled && tooltip}
<div class="tooltip-icon">
<svg
class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
focusable="false"
aria-hidden="true"
aria-label="Info"
>
<use xlink:href="#spectrum-icon-18-InfoOutline" />
</svg>
</div>
{/if}
</button>
{#if showTooltip && tooltip}
<div class="position">
<div class="tooltip">
<Tooltip textWrapping={true} direction={"bottom"} text={tooltip} />
</div>
</div> </div>
{/if} {/if}
</div> {#if showTooltip && tooltip}
<div class="tooltip">
<Tooltip textWrapping={true} direction={"bottom"} text={tooltip} />
</div>
{/if}
</button>
<style> <style>
button { button {
width: 100%; position: relative;
}
.container {
display: flex;
align-items: center;
flex-direction: column;
} }
.spectrum-Button-label { .spectrum-Button-label {
white-space: nowrap; white-space: nowrap;
@ -93,12 +83,8 @@
width: 160px; width: 160px;
text-align: center; text-align: center;
transform: translateX(-50%); transform: translateX(-50%);
top: -5px; left: 50%;
} top: calc(100% - 3px);
.position {
position: relative;
width: 0;
height: 0;
} }
.tooltip-icon { .tooltip-icon {
padding-left: var(--spacing-m); padding-left: var(--spacing-m);