diff --git a/src/components/Button/Button.Skeleton.svelte b/src/components/Button/Button.Skeleton.svelte index cd34db4b..51f727d4 100644 --- a/src/components/Button/Button.Skeleton.svelte +++ b/src/components/Button/Button.Skeleton.svelte @@ -6,8 +6,6 @@ export let style = undefined; import { cx } from '../../lib'; - - const _class = cx('--skeleton', '--btn', small && '--btn--sm', className); {#if href} diff --git a/src/components/Tile/ExpandableTile.svelte b/src/components/Tile/ExpandableTile.svelte index 166f9c18..b259e503 100644 --- a/src/components/Tile/ExpandableTile.svelte +++ b/src/components/Tile/ExpandableTile.svelte @@ -11,7 +11,7 @@ export let light = false; export let style = undefined; - import { tick, onMount } from 'svelte'; + import { tick } from 'svelte'; import ChevronDown16 from 'carbon-icons-svelte/lib/ChevronDown16'; import { cx, css } from '../../lib'; @@ -19,20 +19,23 @@ let tileContent = undefined; let aboveTheFold = undefined; - onMount(() => { - const tileStyle = window.getComputedStyle(tile, null); - tileMaxHeight = aboveTheFold.getBoundingClientRect().height; - tilePadding = - parseInt(tileStyle.getPropertyValue('padding-top'), 10) + - parseInt(tileStyle.getPropertyValue('padding-bottom'), 10); - }); - async function setHeight() { await tick(); tileMaxHeight = expanded ? tileContent.getBoundingClientRect().height : aboveTheFold.getBoundingClientRect().height; } + + $: { + if (tile) { + const style = window.getComputedStyle(tile); + + tileMaxHeight = aboveTheFold.getBoundingClientRect().height; + tilePadding = + parseInt(style.getPropertyValue('padding-top'), 10) + + parseInt(style.getPropertyValue('padding-bottom'), 10); + } + }
{ - if (key === ' ' || key === 'Enter') { + on:keypress={event => { + if (event.key === ' ' || event.key === 'Enter') { + event.preventDefault(); expanded = !expanded; setHeight(); }