feat(Tooltip): Add Tooltip.rich

Use rich tooltip by setting Tooltip.rich true
silinternational · Mar 25, 2024 · 2540751 · 2540751
1 parent 6f23623
commit 2540751
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 6 deletions.
diff --git a/components/mdc/Tooltip/Tooltip.svelte b/components/mdc/Tooltip/Tooltip.svelte
@@ -9,6 +9,8 @@ export let tooltipID
 export let positionX = undefined
 /** @type {string} can be one of: "above" or "below" */
 export let positionY = undefined
+/** @type {boolean} whether to show a rich tooltip */
+export let rich = false
 
 let element = {}
 let mdcToolTip = {}
@@ -35,8 +37,20 @@ onMount(() => {
 })
 </script>
 
-<div bind:this={element} id={tooltipID} class="mdc-tooltip" role="tooltip" aria-hidden="true">
-  <div class="mdc-tooltip__surface mdc-tooltip__surface-animation {$$props.class || ''}">
-    <slot />
+{#if rich}
+  <div bind:this={element} id={tooltipID} class="mdc-tooltip mdc-tooltip--rich" aria-hidden="true" role="tooltip">
+    <div class="mdc-tooltip__surface mdc-tooltip__surface-animation {$$props.class || ''}">
+      <p class="mdc-tooltip__content">
+        <slot />
+      </p>
+    </div>
   </div>
-</div>
+{:else}
+  <div bind:this={element} id={tooltipID} class="mdc-tooltip" role="tooltip" aria-hidden="true">
+    <div class="mdc-tooltip__surface mdc-tooltip__surface-animation {$$props.class || ''}">
+      <span class="mdc-tooltip__label">
+        <slot />
+      </span>
+    </div>
+  </div>
+{/if}
diff --git a/components/mdc/Tooltip/Wrapper.svelte b/components/mdc/Tooltip/Wrapper.svelte
@@ -1,8 +1,10 @@
 <script>
 /** @type {string} The id of the element that describes the tooltip. */
 export let ariaDescribedBy
+/** @type {string} If the tooltip is rich set this to rich as well */
+export let rich = false
 </script>
 
-<div class={$$props.class || ''} aria-describedby={ariaDescribedBy}>
+<div class={(rich ? 'mdc-tooltip-wrapper--rich' : '') + ($$props.class || '')} aria-describedby={ariaDescribedBy}>
   <slot />
 </div>
diff --git a/index.d.ts b/index.d.ts
@@ -306,13 +306,15 @@ declare module '@silintl/ui-components' {
     tooltipID?: string
     positionX?: 'start' | 'center' | 'end'
     positionY?: 'above' | 'below'
+    rich?: boolean
     class?: string
   }
   export class Tooltip extends SvelteComponentTyped<TooltipProps> {}
 
   export namespace Tooltip {
     interface TooltipWrapperProps {
       ariaDescribedBy?: string
+      rich?: boolean
       class?: string
     }
     export class Wrapper extends SvelteComponentTyped<TooltipWrapperProps> {}

diff --git a/stories/Tooltip.stories.svelte b/stories/Tooltip.stories.svelte
@@ -13,7 +13,7 @@ const args = {
 
 <Template let:args>
   <div class="flex justify-center my-4">
-    <Tooltip.Wrapper ariaDescribedBy={args.tooltipID}>wrapper slot</Tooltip.Wrapper>
+    <Tooltip.Wrapper rich={args.rich} ariaDescribedBy={args.tooltipID}>wrapper slot</Tooltip.Wrapper>
   </div>
 
   <Tooltip {...args}>Tooltip main slot here</Tooltip>
@@ -22,3 +22,5 @@ const args = {
 <Story name="Default" {args} />
 
 <Story name="Position" args={copyAndModifyArgs(args, { positionX: 'start', positionY: 'above' })} />
+
+<Story name="Rich" args={copyAndModifyArgs(args, { rich: true })} />