@budibase/bbui 1.0.220-alpha.2 → 1.0.221

package/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 onTop = false
+  export let size = "M"
 
   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 &&
-    'spectrum-Tabs--quiet'} spectrum-Tabs--{vertical
-    ? 'vertical'
-    : 'horizontal'}"
-  class:onTop
+  class:spectrum-Tabs--vertical={vertical}
+  class:spectrum-Tabs--horizontal={!vertical}
+  class="spectrum-Tabs spectrum-Tabs--size{size}"
 >
   <slot />
   {#if $tab.info}
     <div
-      class="spectrum-Tabs-selectionIndicator indicator-transition"
-      style="{emphasized &&
-        'background-color: var(--spectrum-global-color-blue-400)'}; width: {width}; height: {height}; left: {left}; top: {top};"
+      class="spectrum-Tabs-selectionIndicator"
+      class:emphasized
+      style="width: {width}; height: {height}; left: {left}; top: {top};"
     />
   {/if}
 </div>
@@ -98,26 +95,26 @@
 />
 
 <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: 1px solid var(--spectrum-global-color-gray-300);
+    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;

package/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>

package/src/index.js

@@ -64,6 +64,9 @@ export { default as BannerDisplay } from "./Banner/BannerDisplay.svelte"
 export { default as MarkdownEditor } from "./Markdown/MarkdownEditor.svelte"
 export { default as MarkdownViewer } from "./Markdown/MarkdownViewer.svelte"
 export { default as RichTextField } from "./Form/RichTextField.svelte"
+export { default as IconSideNav } from "./IconSideNav/IconSideNav.svelte"
+export { default as IconSideNavItem } from "./IconSideNav/IconSideNavItem.svelte"
+export { default as Slider } from "./Form/Slider.svelte"
 
 // Renderers
 export { default as BoldRenderer } from "./Table/BoldRenderer.svelte"