fix bugs

cva-design · Jan 9, 2025 · 233a780 · 233a780
1 parent 2c713a7
commit 233a780
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 17 deletions.
diff --git a/packages/ui/src/lib/components/icon-button/icon-button.svelte b/packages/ui/src/lib/components/icon-button/icon-button.svelte
@@ -41,10 +41,12 @@
 >
 	{#if disableTooltip}
 		<slot />
-	{:else}
+	{:else if tooltipContent || $$props['aria-label']}
 		<Tooltip content={tooltipContent ?? $$props['aria-label']}>
 			<slot />
 		</Tooltip>
+	{:else}
+		<slot />
 	{/if}
 </svelte:element>
 
@@ -85,7 +87,7 @@
 				fill: var(--figma-color-icon-disabled);
 				color: var(--figma-color-icon-disabled); // TODO: check if this is correct
 			}
-	}
+		}
 	}
 
 	.fps-IconButton:focus-visible {

diff --git a/packages/ui/src/lib/components/layer-tree/layer-tree-node.svelte b/packages/ui/src/lib/components/layer-tree/layer-tree-node.svelte
@@ -14,6 +14,9 @@
 	export let expandedNodes: Set<string>;
 	export let singleSelect: boolean = false;
 	export let clickable: boolean = true;
+	export let collapsable: boolean = true;
+	export let collapsableRoot: boolean = true;
+	export let isRoot: boolean = false;
 	let selected: boolean = false;
 
 	if (singleSelect) {
@@ -22,6 +25,8 @@
 		});
 	}
 
+	$: showChevron = data.children?.length > 0 && (isRoot ? collapsableRoot : collapsable);
+
 	function toggleExpand(node: LayerTreeData) {
 		if (expandedNodes.has(node.id)) {
 			if (!node.matches && !node.children?.some((child) => child.matches)) {
@@ -57,18 +62,20 @@
 		style:opacity={data.opacity || 1}
 	>
 		{#if data.children?.length > 0}
-			<button
-				class="layerTree--caret"
-				on:click|stopPropagation={() => !data.disabled && toggleExpand(data)}
-				class:expanded={expandedNodes.has(data.id)}
-				class:searching={data.matches || data.children.some((child) => child.matches)}
-			>
-				{#if expandedNodes.has(data.id)}
-					<Icon icon="ChevronDownSvg_16" />
-				{:else}
-					<Icon icon="ChevronRightSvg_16" />
-				{/if}
-			</button>
+			{#if showChevron}
+				<button
+					class="layerTree--caret"
+					on:click|stopPropagation={() => !data.disabled && toggleExpand(data)}
+					class:expanded={expandedNodes.has(data.id)}
+					class:searching={data.matches || data.children.some((child) => child.matches)}
+				>
+					{#if expandedNodes.has(data.id)}
+						<Icon icon="ChevronDownSvg_16" />
+					{:else}
+						<Icon icon="ChevronRightSvg_16" />
+					{/if}
+				</button>
+			{/if}
 		{/if}
 
 		<Layer
@@ -79,14 +86,23 @@
 			{selected}
 			actions={data.actions}
 			disabled={!clickable}
-
 		/>
 	</div>
 
 	{#if expandedNodes.has(data.id) && data.children?.length}
 		<div class="layerTree--children">
 			{#each data.children as child}
-				<svelte:self {expandedNodes} data={child} {singleSelect} {clickable} on:select on:toggle />
+				<svelte:self
+					{expandedNodes}
+					data={child}
+					{singleSelect}
+					{clickable}
+					{collapsable}
+					{collapsableRoot}
+					isRoot={false}
+					on:select
+					on:toggle
+				/>
 			{/each}
 		</div>
 	{/if}
@@ -133,7 +149,7 @@
 		}
 
 		:global(svg) {
-			transform: rotate(-90deg);
+			transform: rotate(0deg);
 			transition: transform 0.2s ease;
 		}
 

diff --git a/packages/ui/src/lib/components/layer-tree/layer-tree.svelte b/packages/ui/src/lib/components/layer-tree/layer-tree.svelte
@@ -31,6 +31,8 @@
 	export let initiallyExpanded: boolean = false;
 	export let singleSelect: boolean = false;
 	export let clickable: boolean = false;
+	export let collapsable: boolean = true;
+	export let collapsableRoot: boolean = true;
 
 	function expandAll(node: LayerTreeData) {
 		expandedNodes.add(node.id);
@@ -105,6 +107,9 @@
 			{expandedNodes}
 			{singleSelect}
 			{clickable}
+			{collapsable}
+			{collapsableRoot}
+			isRoot={true}
 			on:select
 			on:toggle
 		/>