fix(FilePicker): added class identifiers

N00nDay · Oct 4, 2023 · 7c17ef7 · 7c17ef7
1 parent 29a5421
commit 7c17ef7
Show file tree

Hide file tree

Showing 7 changed files with 9 additions and 8 deletions.
diff --git a/src/lib/components/file-picker/Action.svelte b/src/lib/components/file-picker/Action.svelte
@@ -6,7 +6,7 @@
 	import { exclude } from '../../utils/exclude';
 	const forwardEvents = forwardEventsBuilder(get_current_component());
 
-	const defaultClass = 'mt-6 text-sm';
+	const defaultClass = 'mt-6 text-sm stwui-file-picker-action';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 

diff --git a/src/lib/components/file-picker/Description.svelte b/src/lib/components/file-picker/Description.svelte
@@ -8,7 +8,7 @@
 
 	let disabled: boolean = getContext('filepicker-disabled');
 
-	const defaultClass = 'mt-1 text-xs text-secondary-content';
+	const defaultClass = 'mt-1 text-xs text-secondary-content stwui-file-picker-description';
 	$: finalClass = twMerge(defaultClass, disabled ? 'opacity-30' : false, $$props.class);
 </script>
 

diff --git a/src/lib/components/file-picker/Divider.svelte b/src/lib/components/file-picker/Divider.svelte
@@ -8,7 +8,7 @@
 
 	export let position: 'left' | 'center' | 'right' = 'center';
 
-	const defaultClass = 'relative my-4';
+	const defaultClass = 'relative my-4 stwui-file-picker-divider';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 

diff --git a/src/lib/components/file-picker/FilePicker.svelte b/src/lib/components/file-picker/FilePicker.svelte
@@ -144,7 +144,7 @@
 	}
 
 	const defaultClass =
-		'relative text-center rounded-lg border border-dashed border-2 px-6 pt-5 pb-7 border-border rounded-md bg-surface outline-offset-0';
+		'relative text-center rounded-lg border border-dashed border-2 px-6 pt-5 pb-7 border-border rounded-md bg-surface outline-offset-0 stwui-file-picker';
 
 	const disabledClass = 'border-default cursor-not-allowed bg-default bg-opacity-75';
 	const notDisabledClass =
@@ -185,7 +185,7 @@
 	<input
 		id={name}
 		{name}
-		class="opacity-0 absolute top-0 left-0 pointer-events-none"
+		class="opacity-0 absolute top-0 left-0 pointer-events-none stwui-file-picker-input"
 		bind:this={input}
 		type="file"
 		{multiple}

diff --git a/src/lib/components/file-picker/Icon.svelte b/src/lib/components/file-picker/Icon.svelte
@@ -26,7 +26,7 @@
 		return res[1];
 	}
 
-	const defaultClass = ' flex items-center justify-center';
+	const defaultClass = ' flex items-center justify-center stwui-file-picker-icon';
 	$: finalClass = twMerge(
 		defaultClass,
 		disabled ? 'text-secondary-content opacity-30' : 'text-content',
@@ -57,6 +57,7 @@
 			'stroke'
 		])}
 	>
+		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
 		{@html elements}
 	</svg>
 </span>
diff --git a/src/lib/components/file-picker/Label.svelte b/src/lib/components/file-picker/Label.svelte
@@ -6,7 +6,7 @@
 	import { exclude } from '../../utils/exclude';
 	const forwardEvents = forwardEventsBuilder(get_current_component());
 
-	const defaultClass = 'text-sm px-2 bg-surface text-content';
+	const defaultClass = 'text-sm px-2 bg-surface text-content stwui-file-picker-label';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 

diff --git a/src/lib/components/file-picker/Title.svelte b/src/lib/components/file-picker/Title.svelte
@@ -8,7 +8,7 @@
 
 	let disabled: boolean = getContext('filepicker-disabled');
 
-	const defaultClass = 'mt-1 font-medium text-content';
+	const defaultClass = 'mt-1 font-medium text-content stwui-file-picker-title';
 	$: finalClass = twMerge(defaultClass, disabled ? 'opacity-30' : false, $$props.class);
 </script>