fix(Chip): added class identifiers

N00nDay · Oct 4, 2023 · 853b690 · 853b690
1 parent 3c81765
commit 853b690
Show file tree

Hide file tree

Showing 5 changed files with 11 additions and 9 deletions.
diff --git a/src/lib/components/chip/Avatar.svelte b/src/lib/components/chip/Avatar.svelte
@@ -20,10 +20,11 @@
 
 	const size: 'xs' | 'sm' | 'md' | 'lg' | 'xl' = getContext('chip-size');
 
-	const srcClass = 'inline-block absolute';
-	const srcContainerClass = 'inline-block relative align-middle flex items-center justify-center';
+	const srcClass = 'inline-block absolute stwui-chip-avatar';
+	const srcContainerClass =
+		'inline-block relative align-middle flex items-center justify-center stwui-chip-avatar-wrapper';
 	const initialClass =
-		'inline-flex items-center justify-center align-middle bg-default text-default-content flex items-center justify-center';
+		'inline-flex items-center justify-center align-middle bg-default text-default-content flex items-center justify-center stwui-chip-avatar';
 	const xsClass = 'h-6 w-6 p-0.5';
 	const smClass = 'h-8 w-8 p-0.5';
 	const mdClass = 'h-10 w-10 p-0.5';

diff --git a/src/lib/components/chip/Chip.svelte b/src/lib/components/chip/Chip.svelte
@@ -13,7 +13,7 @@
 	const defaultClass =
 		'inline-flex items-center pr-3 text-sm font-medium border border-border rounded-full';
 
-	const defaultTypeClass = ' bg-default text-default-content';
+	const defaultTypeClass = ' bg-default text-default-content stwi-chip';
 	const infoTypeClass = ' bg-info text-info-content';
 	const successTypeClass = ' bg-success text-success-content';
 	const warnTypeClass = ' bg-warn text-warn-content';

diff --git a/src/lib/components/chip/Close.svelte b/src/lib/components/chip/Close.svelte
@@ -12,7 +12,7 @@
 	const type: 'info' | 'success' | 'warn' | 'error' | 'default' = getContext('chip-type');
 
 	const defaultClass =
-		'flex-shrink-0 ml-2 h-8 w-8 rounded-full inline-flex items-center justify-center outline-none focus:outline-none hover:bg-default text-default-content hover:bg-background hover:bg-opacity-50 hover:text-content';
+		'flex-shrink-0 ml-2 h-8 w-8 rounded-full inline-flex items-center justify-center outline-none focus:outline-none text-default-content hover:bg-background hover:bg-opacity-50 hover:text-content stwui-chip-close';
 	const defaultType = 'text-default-content';
 	const infoType = 'text-info-content';
 	const successType = 'text-success-content';

diff --git a/src/lib/components/chip/Label.svelte b/src/lib/components/chip/Label.svelte
@@ -6,7 +6,7 @@
 	import { exclude } from '../../utils/exclude';
 	const forwardEvents = forwardEventsBuilder(get_current_component());
 
-	const defaultClass = 'pl-2';
+	const defaultClass = 'pl-2 stwui-chip-label';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 

diff --git a/src/lib/components/chip/Placeholder.svelte b/src/lib/components/chip/Placeholder.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { fade } from 'svelte/transition';
-	import { getContext } from 'svelte/internal';
+	import { getContext } from 'svelte';
 	import { twMerge } from 'tailwind-merge';
 	import Icon from '../icon/Icon.svelte';
 	import { account } from '../../icons';
@@ -17,11 +17,12 @@
 	const placeholder: boolean = getContext('chip-avatar-placeholder');
 
 	const defaultClass =
-		'absolute text-default-content flex items-center justify-center overflow-hidden bg-default inset-[0.2rem] bg-background';
+		'absolute text-default-content flex items-center justify-center overflow-hidden bg-default inset-[0.2rem] bg-background stwui-chip-placeholder';
 	const circleClass = 'rounded-full';
 	const roundedClass = 'rounded-md';
 
-	const defaultIconContainerClass = 'absolute text-default-content h-full w-full';
+	const defaultIconContainerClass =
+		'absolute text-default-content h-full w-full stwui-chip-icon-wrapper';
 	const xsContainerClass = 'bottom-[-0.1rem] left-[-0.2rem]';
 	const smContainerClass = 'bottom-[-0.2rem] left-[-0.2rem]';
 	const mdContainerClass = 'bottom-[-0.3rem] left-[-0.2rem]';