Update spectrum tabs, add tooltip to icon, add size option to tabs

packages/bbui/package.json

@@ -70,7 +70,7 @@
     "@spectrum-css/stepper": "^3.0.3",
     "@spectrum-css/switch": "^1.0.2",
     "@spectrum-css/table": "^3.0.1",
-    "@spectrum-css/tabs": "^3.0.1",
+    "@spectrum-css/tabs": "^3.2.12",
     "@spectrum-css/tags": "^3.0.2",
     "@spectrum-css/textfield": "^3.0.1",
     "@spectrum-css/toast": "^3.0.1",

packages/bbui/src/Icon/Icon.svelte

@@ -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,30 +13,50 @@
   export let hoverable = false
   export let disabled = false
   export let color
+  export let tooltip
 
   $: rotation = getRotation(direction)
 
+  let showTooltip = false
+
   const getRotation = direction => {
     return directions.indexOf(direction) * 45
   }
 </script>
 
-<svg
+<div
-  on:click
+  on:mouseover={() => (showTooltip = true)}
-  class:hoverable
+  on:focus={() => (showTooltip = true)}
-  class:disabled
+  on:mouseleave={() => (showTooltip = false)}
-  class="spectrum-Icon spectrum-Icon--size{size}"
-  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={true} direction={"bottom"} text={tooltip} />
+    </div>
+  {/if}
+</div>
 
 <style>
+  div {
+    position: relative;
+    display: grid;
+    place-items: center;
+  }
+
   svg.hoverable {
     pointer-events: all;
     transition: color var(--spectrum-global-animation-duration-100, 130ms);
@@ -47,4 +70,13 @@
     color: var(--spectrum-global-color-gray-500) !important;
     pointer-events: none !important;
   }
+
+  .tooltip {
+    position: absolute;
+    pointer-events: none;
+    left: 50%;
+    top: 100%;
+    white-space: nowrap;
+    transform: translateX(-50%);
+  }
 </style>

packages/bbui/src/Tabs/Tab.svelte

@@ -63,4 +63,10 @@
   .emphasized {
     color: var(--spectrum-global-color-blue-600);
   }
+  .spectrum-Tabs-item {
+    color: var(--spectrum-global-color-gray-600);
+  }
+  .spectrum-Tabs-item.is-selected {
+    color: var(--spectrum-global-color-gray-900);
+  }
 </style>

packages/bbui/src/Tabs/Tabs.svelte

@@ -10,8 +10,7 @@
   export let noHorizPadding = false
   export let quiet = false
   export let emphasized = false
-  // overlay content from the tab bar onto tabs e.g. for a dropdown
+  export let size = "M"
-  export let onTop = false
 
   let thisSelected = undefined
 
@@ -74,20 +73,18 @@
 
 <div
   bind:this={container}
-  class:quiet
+  class:spectrum-Tabs--quiet={quiet}
   class:noHorizPadding
-  class="selected-border spectrum-Tabs {quiet &&
+  class:spectrum-Tabs--vertical={vertical}
-    'spectrum-Tabs--quiet'} spectrum-Tabs--{vertical
+  class:spectrum-Tabs--horizontal={!vertical}
-    ? 'vertical'
+  class="spectrum-Tabs spectrum-Tabs--size{size}"
-    : 'horizontal'}"
-  class:onTop
 >
   <slot />
   {#if $tab.info}
     <div
-      class="spectrum-Tabs-selectionIndicator indicator-transition"
+      class="spectrum-Tabs-selectionIndicator"
-      style="{emphasized &&
+      class:emphasized
-        'background-color: var(--spectrum-global-color-blue-400)'}; width: {width}; height: {height}; left: {left}; top: {top};"
+      style="width: {width}; height: {height}; left: {left}; top: {top};"
     />
   {/if}
 </div>
@@ -98,26 +95,29 @@
 />
 
 <style>
-  .quiet {
+  .spectrum-Tabs--quiet {
     border-bottom: none !important;
   }
   .onTop {
-    z-index: 20;
   }
   .spectrum-Tabs {
     padding-left: var(--spacing-xl);
     padding-right: var(--spacing-xl);
     position: relative;
-    border-bottom: var(--border-light);
+    z-index: 20;
+    border-bottom-color: var(--spectrum-global-color-gray-200);
   }
   .spectrum-Tabs-content {
     margin-top: var(--spectrum-global-dimension-static-size-150);
   }
-  .indicator-transition {
+  .spectrum-Tabs-selectionIndicator {
     transition: all 200ms;
+    background-color: var(--spectrum-global-color-gray-900);
+  }
+  .spectrum-Tabs-selectionIndicator.emphasized {
+    background-color: var(--spectrum-global-color-blue-400);
   }
   .spectrum-Tabs--horizontal .spectrum-Tabs-selectionIndicator {
-    bottom: 0 !important;
   }
   .noHorizPadding {
     padding: 0;

packages/bbui/src/Tooltip/Tooltip.svelte

@@ -8,7 +8,7 @@
 
 <!-- Showing / Hiding a text wrapped tooltip should be handled outside the component -->
 {#if textWrapping}
-  <span class="spectrum-Tooltip spectrum-Tooltip--{direction} is-open">
+  <span class="spectrum-Tooltip spectrum-Tooltip--{direction} is-open tooltip">
     <span class="spectrum-Tooltip-label">{text}</span>
     <span class="spectrum-Tooltip-tip" />
   </span>
@@ -22,3 +22,9 @@
     </div>
   </span>
 {/if}
+
+<style>
+  .tooltip {
+    pointer-events: none;
+  }
+</style>