From 23a0de3f2a75efbc93d8d7b0d95652c6fa5cb15a Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Tue, 31 Dec 2019 15:19:47 -0800
Subject: [PATCH] fix(expandable-tile): use css to ensure max-height value

---
 src/components/Tile/ExpandableTile.svelte     | 13 ++++++-------
 src/components/TooltipIcon/TooltipIcon.svelte |  4 ++--
 2 files changed, 8 insertions(+), 9 deletions(-)

diff --git a/src/components/Tile/ExpandableTile.svelte b/src/components/Tile/ExpandableTile.svelte
index f8a936da..83f4941b 100644
--- a/src/components/Tile/ExpandableTile.svelte
+++ b/src/components/Tile/ExpandableTile.svelte
@@ -3,17 +3,17 @@
   export { className as class };
   export let expanded = false;
   export let id = Math.random();
+  export let light = false;
+  export let style = undefined;
+  export let tabindex = '0';
   export let tileCollapsedIconText = 'Interact to expand Tile';
   export let tileExpandedIconText = 'Interact to collapse Tile';
   export let tileMaxHeight = 0;
   export let tilePadding = 0;
-  export let tabindex = '0';
-  export let light = false;
-  export let style = undefined;
 
   import { onMount, afterUpdate } from 'svelte';
   import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16';
-  import { cx } from '../../lib';
+  import { cx, css } from '../../lib';
 
   let tile = undefined;
   let tileContent = undefined;
@@ -37,8 +37,8 @@
 
 <div
   bind:this={tile}
-  style={expanded ? undefined : `max-height: ${tileMaxHeight + tilePadding}px`}
   class={cx('--tile', '--tile--expandable', expanded && '--tile--is-expanded', light && '--tile--light', className)}
+  style={expanded ? undefined : css([style, `max-height: ${tileMaxHeight + tilePadding}px`])}
   on:click
   on:click={() => {
     expanded = !expanded;
@@ -54,8 +54,7 @@
   on:mouseenter
   on:mouseleave
   {tabindex}
-  {id}
-  {style}>
+  {id}>
   <div bind:this={tileContent}>
     <div bind:this={aboveTheFold} class={cx('--tile-content')}>
       <slot name="above" />
diff --git a/src/components/TooltipIcon/TooltipIcon.svelte b/src/components/TooltipIcon/TooltipIcon.svelte
index f3920d90..c1c8f7d5 100644
--- a/src/components/TooltipIcon/TooltipIcon.svelte
+++ b/src/components/TooltipIcon/TooltipIcon.svelte
@@ -1,11 +1,11 @@
 <script>
   let className = undefined;
   export { className as class };
-  export let direction = 'bottom';
   export let align = 'center';
+  export let direction = 'bottom';
   export let id = Math.random();
-  export let tooltipText = '';
   export let style = undefined;
+  export let tooltipText = '';
 
   import { cx } from '../../lib';
 </script>