WIP: checkbox, layer and layer-tree

cva-design · Nov 26, 2024 · df08cd2 · df08cd2
1 parent ad80ef6
commit df08cd2
Show file tree

Hide file tree

Showing 15 changed files with 432 additions and 415 deletions.
diff --git a/packages/ui/src/lib/components/index.ts b/packages/ui/src/lib/components/index.ts
@@ -47,7 +47,7 @@ export * from './text/index.ts';
 export * from './textarea/index.ts';
 export * from './tooltip/index.ts';
 export * from './tree/index.ts';
-export * from '../next/layer-tree/index.ts';
+// export * from '../next/layer-tree/index.ts';
 //@endindex
 
 //@index(['*/index.svelte'], (f, {pascalCase}) => `export { default as ${pascalCase(f.path.split('/').at(-2))} } from '${f.path}${f.ext}';`)

diff --git a/packages/ui/src/lib/components/radio/radio.svelte b/packages/ui/src/lib/components/radio/radio.svelte
@@ -16,7 +16,7 @@
 	}
 </script>
 
-<div class={className}>
+<div class={`fp-RadioRoot ${className}`}>
 	<input
 		type="radio"
 		{value}
@@ -43,21 +43,21 @@ div {
   position: relative;
 }
 
-input {
+.fp-RadioRoot {
   opacity: 0;
   width: 10px;
   height: 10px;
   margin: 0;
   padding: 0;
   flex-shrink: 0;
 }
-input:checked + label:after {
+.fp-RadioRoot:checked + label:after {
   background-color: var(--figma-color-icon);
 }
-input:disabled + label {
+.fp-RadioRoot:disabled + label {
   opacity: 0.3;
 }
-input:checked:disabled + label:before {
+.fp-RadioRoot:checked:disabled + label:before {
   border: 1px solid var(--figma-color-icon);
 }
 

diff --git a/packages/ui/src/lib/components/tree/types.ts b/packages/ui/src/lib/components/tree/types.ts
@@ -1,4 +1,4 @@
-import type { Layer } from '../layer';
+import type { Layer } from '../../next/layer';
 
 export interface ITreeNode {
   id: string;

diff --git a/packages/ui/src/lib/next/checkbox/assets/checkmark-indeterminate.svelte b/packages/ui/src/lib/next/checkbox/assets/checkmark-indeterminate.svelte
@@ -1,8 +1,18 @@
+<script lang="ts">
+  export let className = '';
+</script>
+
 <svg
-	xmlns="http://www.w3.org/2000/svg"
-	viewBox="0 0 16 16"
-	class="fps-Icon fps-size-4 fps-CheckboxIndeterminate"
-	fill="none"
+  class="fp-CheckboxIndeterminate {className}"
+  width="16"
+  height="16"
+  viewBox="0 0 16 16"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
 >
-	<path fill="var(--color-icon)" d="M4 8a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1Z"></path>
+  <path
+    d="M4 8a1 1 0 0 1 1-1h6a1 1 0 1 1 0 2H5a1 1 0 0 1-1-1z"
+    fill="currentColor"
+  />
 </svg>
+
diff --git a/packages/ui/src/lib/next/checkbox/assets/checkmark.svelte b/packages/ui/src/lib/next/checkbox/assets/checkmark.svelte
@@ -1,13 +1,18 @@
+<script lang="ts">
+  export let className = '';
+</script>
+
 <svg
-	xmlns="http://www.w3.org/2000/svg"
-	viewBox="0 0 16 16"
-	class="fps-Icon fps-size-4 fps-CheckboxCheckmark"
-	fill="none"
+  class="fp-CheckboxCheckmark {className}"
+  width="16"
+  height="16"
+  viewBox="0 0 16 16"
+  fill="none"
+  xmlns="http://www.w3.org/2000/svg"
 >
-	<path
-		fill="var(--color-icon)"
-		fill-rule="evenodd"
-		clip-rule="evenodd"
-		d="M11.777 4.08399C11.8873 4.1575 11.9639 4.27178 11.99 4.40172C12.016 4.53167 11.9894 4.66665 11.916 4.77699L7.91602 10.777C7.87506 10.8387 7.82091 10.8905 7.75748 10.9287C7.69405 10.9669 7.62294 10.9905 7.54926 10.9979C7.47559 11.0053 7.40119 10.9962 7.33146 10.9713C7.26172 10.9464 7.19839 10.9063 7.14602 10.854L4.14602 7.85399C4.09953 7.80751 4.06266 7.75232 4.0375 7.69158C4.01234 7.63084 3.99939 7.56574 3.99939 7.49999C3.99939 7.43425 4.01234 7.36915 4.0375 7.30841C4.06266 7.24767 4.09953 7.19248 4.14602 7.14599C4.19251 7.09951 4.2477 7.06263 4.30844 7.03747C4.36918 7.01231 4.43428 6.99936 4.50002 6.99936C4.56577 6.99936 4.63087 7.01231 4.6916 7.03747C4.75234 7.06263 4.80753 7.09951 4.85402 7.14599L7.42202 9.71599L11.084 4.22299C11.1575 4.11271 11.2718 4.03612 11.4018 4.01006C11.5317 3.98399 11.6667 4.01059 11.777 4.08399Z"
-	></path>
+  <path
+    d="M12.207 4.793a1 1 0 0 1 0 1.414l-5 5a1 1 0 0 1-1.414 0l-2-2a1 1 0 0 1 1.414-1.414L6.5 9.086l4.293-4.293a1 1 0 0 1 1.414 0z"
+    fill="currentColor"
+  />
 </svg>
+
diff --git a/packages/ui/src/lib/next/checkbox/checkbox.svelte b/packages/ui/src/lib/next/checkbox/checkbox.svelte
@@ -41,46 +41,55 @@
 	const descriptionId = `checkbox-description-${id ?? ''}`;
 </script>
 
-<div class="fps-CheckboxRoot {className}" use:root {...$root}>
+<div class="fp-CheckboxRoot {className}" use:root {...$root}>
 	<input
 		{...$$restProps}
-		class="fps-CheckboxInput"
+		class="fp-CheckboxInput fp-CheckboxHiddenInput"
 		use:input
 		{...$input}
 		aria-labelledby={labelId}
 		aria-describedby={descriptionId}
 	/>
-	<span class="fps-CheckboxIndicator" aria-hidden="true">
-		{#if $isIndeterminate}
-			<CheckmarkIndeterminateIcon />
-		{:else if $isChecked}
-			<CheckmarkIcon />
-		{/if}
-	</span>
+	<div class="fp-CheckboxCustomInput" aria-hidden="true">
+		<span class="fp-CheckboxIndicator">
+			{#if $isIndeterminate}
+				<CheckmarkIndeterminateIcon />
+			{:else if $isChecked}
+				<CheckmarkIcon />
+			{/if}
+		</span>
+	</div>
 
 	{#if label}
-		<label class="fps-Text fps-CheckboxLabel" for={id} aria-hidden="true" id={labelId}>
+		<label class="fp-Text fp-CheckboxLabel" for={id} aria-hidden="true" id={labelId}>
 			{label}
 		</label>
 	{/if}
 	{#if $$slots.description}
-		<span class="fps-CheckboxDescription" id={descriptionId}>
+		<span class="fp-CheckboxDescription" id={descriptionId}>
 			<slot name="description" />
 		</span>
 	{/if}
 </div>
 
 <style lang="scss">
-	.fps-CheckboxRoot {
+	.fp-CheckboxRoot {
 		position: relative;
 		display: grid;
 		grid-template-columns: var(--space-4) auto;
 		min-height: 24px;
 		gap: var(--space-1) var(--space-2);
 	}
 
-	.fps-CheckboxInput {
-		all: unset;
+	.fp-CheckboxHiddenInput {
+		position: absolute;
+		opacity: 0;
+		pointer-events: none;
+		margin: 0;
+		transform: translateX(-100%);
+	}
+
+	.fp-CheckboxCustomInput {
 		box-sizing: border-box;
 		display: block;
 		width: var(--space-4);
@@ -90,68 +99,79 @@
 		border: 1px solid var(--figma-color-border-strong);
 		border-radius: var(--radius-medium);
 		flex-shrink: 0;
+		position: relative;
+	}
 
-		&:focus-visible {
-			outline-offset: -1px;
-			outline: 1px solid var(--figma-color-border-selected);
-		}
+	:global(.fp-CheckboxHiddenInput:focus-visible) ~ .fp-CheckboxCustomInput {
+		outline-offset: -1px;
+		outline: 1px solid var(--figma-color-border-selected);
+	}
 
-		&:focus-visible:checked {
-			outline-offset: 0;
-			outline: 1px solid var(--figma-color-border-selected-strong);
-			border-color: var(--figma-color-icon-onbrand);
-		}
+	:global(.fp-CheckboxHiddenInput:focus-visible:checked) ~ .fp-CheckboxCustomInput {
+		outline-offset: 0;
+		outline: 1px solid var(--figma-color-border-selected-strong);
+		border-color: var(--figma-color-icon-onbrand);
+	}
 
-		&:checked {
-			background-color: var(--figma-color-bg-brand);
-			border-color: transparent;
-		}
+	:global(.fp-CheckboxHiddenInput:checked) ~ .fp-CheckboxCustomInput {
+		background-color: var(--figma-color-bg-brand);
+		border-color: transparent;
+	}
 
-		&:disabled {
-			border-color: var(--figma-color-border-disabled-strong);
-		}
+	:global(.fp-CheckboxHiddenInput:disabled) ~ .fp-CheckboxCustomInput {
+		border-color: var(--figma-color-border-disabled-strong);
+	}
 
-		&:disabled:checked {
-			border-color: transparent;
-			background-color: var(--figma-color-border-disabled-strong);
-		}
+	:global(.fp-CheckboxHiddenInput:disabled:checked) ~ .fp-CheckboxCustomInput {
+		border-color: transparent;
+		background-color: var(--figma-color-border-disabled-strong);
 	}
 
-	.fps-CheckboxIndicator {
+	.fp-CheckboxIndicator {
 		display: block;
 		pointer-events: none;
 		position: absolute;
-		top: var(--space-1);
-	}
-
-	.fps-CheckboxCheckmark,
-	.fps-CheckboxIndeterminate {
-		display: none;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		// Make sure SVG icons are hidden by default
+		:global(svg) {
+			display: none;
+		}
 	}
 
-	.fps-CheckboxInput:checked ~ .fps-CheckboxIndicator .fps-CheckboxCheckmark {
+	// Show checkmark when checked
+	:global(.fp-CheckboxHiddenInput:checked) ~ .fp-CheckboxCustomInput .fp-CheckboxIndicator :global(svg) {
 		--color-icon: var(--figma-color-icon-onbrand);
 		display: block;
 	}
 
-	.fps-CheckboxInput:indeterminate ~ .fps-CheckboxIndicator .fps-CheckboxIndeterminate {
-		--color-icon: var(--figma-color-icon);
+	// Show indeterminate icon when in indeterminate state
+	:global(.fp-CheckboxHiddenInput:indeterminate) ~ .fp-CheckboxCustomInput .fp-CheckboxIndicator :global(svg) {
+		--color-icon: var(--figma-color-icon-onbrand);
 		display: block;
 	}
 
-	.fps-CheckboxInput:disabled:indeterminate ~ .fps-CheckboxIndicator .fps-CheckboxIndeterminate {
+	// Style for disabled state
+	:global(.fp-CheckboxHiddenInput:disabled:checked) ~ .fp-CheckboxCustomInput .fp-CheckboxIndicator :global(svg),
+	:global(.fp-CheckboxHiddenInput:disabled:indeterminate) ~ .fp-CheckboxCustomInput .fp-CheckboxIndicator :global(svg) {
 		--color-icon: var(--figma-color-icon-disabled);
 	}
 
-	.fps-CheckboxLabel {
+	.fp-CheckboxLabel {
 		margin-top: var(--space-1);
 	}
 
-	.fps-CheckboxInput:disabled ~ .fps-CheckboxLabel {
+	.fp-CheckboxInput:disabled ~ .fp-CheckboxLabel {
 		color: var(--figma-color-text-disabled);
 	}
 
-	.fps-CheckboxDescription {
+	.fp-CheckboxDescription {
 		color: var(--figma-color-text-secondary);
 		grid-area: 2 / 2;
 	}

diff --git a/packages/ui/src/lib/next/checkbox/index.ts b/packages/ui/src/lib/next/checkbox/index.ts
@@ -1,5 +1,5 @@
 //@index(['./[^\.]+.svelte'], (f, {pascalCase}) => `export { default as ${pascalCase(f.path)} } from '${f.path}${f.ext}';`)
 export { default as Checkbox } from './checkbox.svelte';
-export { default as MeltCheckbox } from './melt-checkbox.svelte';
-export { default as OldCheckbox } from './old-checkbox.svelte';
+// export { default as MeltCheckbox } from './melt-checkbox.svelte';
+// export { default as OldCheckbox } from './old-checkbox.svelte';
 //@endindex