Merge branch 'develop' into 7077-clean-console

public-ui · Dec 19, 2024 · 393e868 · 393e868
2 parents 726d6d9 + e8e7fd5
commit 393e868
Show file tree

Hide file tree

Showing 9 changed files with 25 additions and 24 deletions.
diff --git a/packages/components/src/components/toaster/shadow.tsx b/packages/components/src/components/toaster/shadow.tsx
@@ -118,7 +118,7 @@ export class KolToastContainer implements ToasterAPI {
 				{this.state._toastStates.length > 1 && (
 					<KolButtonTag
 						_label={translate('kol-toast-close-all')}
-						class="close-all"
+						class="kol-toast-container__button-close-all"
 						_on={{
 							onClick: () => {
 								void this.closeAll();

diff --git a/packages/components/src/components/toaster/style.scss b/packages/components/src/components/toaster/style.scss
@@ -13,7 +13,9 @@
 		z-index: 200;
 	}
 
-	.close-all {
-		align-self: flex-end;
+	.kol-toast-container {
+		&__close-all {
+			align-self: flex-end;
+		}
 	}
 }
diff --git a/packages/components/src/functional-components/ToastItem/ToastItem.tsx b/packages/components/src/functional-components/ToastItem/ToastItem.tsx
@@ -15,9 +15,9 @@ const ToastItemFc: FC<ToastItemProps> = ({ status, toast, onClose, ...other }) =
 	const { type, label, description, variant, alertVariant } = toast;
 
 	return (
-		<div class={clsx('toast', status)}>
+		<div class={clsx('kol-toast-item', `kol-toast-item--${status}`)}>
 			<KolAlertFc
-				class="alert"
+				class="kol-toast-item__alert"
 				alert={true}
 				label={label}
 				level={0}

diff --git a/...components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap b/...components/src/functional-components/ToastItem/tests/__snapshots__/snapshot.test.tsx.snap
@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ToastItemFc should render with basic props and status 1`] = `
-<div class="settled toast">
-  <div class="alert kol-alert kol-alert--card kol-alert--hasCloser kol-alert--info" role="alert">
+<div class="kol-toast-item kol-toast-item--settled">
+  <div class="kol-alert kol-alert--card kol-alert--hasCloser kol-alert--info kol-toast-item__alert" role="alert">
     <div class="kol-alert__container">
       <kol-icon _icons="codicon codicon-info" _label="kol-info" class="kol-alert__heading-icon"></kol-icon>
       <div class="kol-alert__container-content">

diff --git a/packages/components/src/functional-components/ToastItem/tests/snapshot.test.tsx b/packages/components/src/functional-components/ToastItem/tests/snapshot.test.tsx
@@ -26,7 +26,7 @@ describe('ToastItemFc', () => {
 		for (const status of statuses) {
 			const page = await renderFunctionalComponentToSpecPage(() => <ToastItemFc toast={basicToast} onClose={mockOnClose} status={status} />);
 
-			expect(page.root?.classList.contains(status)).toBeTruthy();
+			expect(page.root?.classList.contains(`kol-toast-item--${status}`)).toBeTruthy();
 		}
 	});
 });
diff --git a/packages/themes/default/src/components/toast-container.scss b/packages/themes/default/src/components/toast-container.scss
@@ -2,15 +2,15 @@
 @import '../mixins/alert-wc';
 
 @layer kol-theme-component {
+	@include kol-alert-theme;
+
 	:host {
 		top: rem(16);
 		right: rem(16);
 		width: rem(440);
 	}
 
-	.toast {
+	.kol-toast-item {
 		margin-top: rem(16);
 	}
-
-	@include kol-alert-theme;
 }
diff --git a/packages/themes/ecl/src/ecl-ec/components/toast-container.scss b/packages/themes/ecl/src/ecl-ec/components/toast-container.scss
@@ -9,15 +9,14 @@
 		max-width: 100%;
 	}
 
-	.toast {
+	.kol-toast-item {
+		@include kol-alert-theme;
 		display: block;
 		background-color: #fff;
 		margin-top: rem(16);
 
-		@include kol-alert-theme;
-	}
-
-	.alert {
-		display: block;
+		&__alert {
+			display: block;
+		}
 	}
 }
diff --git a/packages/themes/ecl/src/ecl-eu/components/toast-container.scss b/packages/themes/ecl/src/ecl-eu/components/toast-container.scss
@@ -9,12 +9,16 @@
 		max-width: 100%;
 	}
 
-	.toast {
+	.kol-toast-item {
+		@include kol-alert-theme;
+
 		display: block;
 		background-color: #fff;
 		margin-top: rem(16);
 
-		@include kol-alert-theme;
+		&__alert {
+			display: block;
+		}
 
 		.heading {
 			width: 100%;
@@ -24,8 +28,4 @@
 			}
 		}
 	}
-
-	.alert {
-		display: block;
-	}
 }
diff --git a/packages/themes/itzbund/src/components/toast-container.scss b/packages/themes/itzbund/src/components/toast-container.scss
@@ -10,7 +10,7 @@
 		transform: translateX(-50%);
 	}
 
-	.toast {
+	.kol-toast-item {
 		background-color: #fff;
 		margin-top: rem(16);