fixed footer background

Refs: #7036
public-ui · Dec 19, 2024 · 6a92cce · 6a92cce
1 parent 537bfd0
commit 6a92cce
Show file tree

Hide file tree

Showing 9 changed files with 27 additions and 26 deletions.
diff --git a/packages/components/src/components/toaster/shadow.tsx b/packages/components/src/components/toaster/shadow.tsx
@@ -114,7 +114,7 @@ export class KolToastContainer implements ToasterAPI {
 
 	public render(): JSX.Element {
 		return (
-			<Host class="kol-toast">
+			<Host class="kol-toast-container">
 				{this.state._toastStates.length > 1 && (
 					<KolButtonTag
 						_label={translate('kol-toast-close-all')}

diff --git a/packages/components/src/components/toaster/style.scss b/packages/components/src/components/toaster/style.scss
@@ -2,8 +2,9 @@
 @import '../style';
 @import '../@shared/kol-alert-mixin';
 
+@include kol-alert-styles;
+
 @layer kol-component {
-	@include kol-alert-styles;
 	:host {
 		display: flex;
 		flex-direction: column;
@@ -12,7 +13,7 @@
 		z-index: 200;
 	}
 
-	.kol-toast {
+	.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('kol-toast__toast', `kol-toast__toast--${status}`)}>
+		<div class={clsx('kol-toast-item', `kol-toast-item--${status}`)}>
 			<KolAlertFc
-				class="kol-toast__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="kol-toast__toast kol-toast__toast--settled">
-  <div class="kol-alert kol-alert--card kol-alert--hasCloser kol-alert--info kol-toast__alert" 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(`kol-toast__toast--${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
@@ -10,8 +10,8 @@
 		width: rem(440);
 	}
 
-	.kol-toast {
-		&__toast {
+	.kol-toast-container {
+		.kol-toast-item {
 			margin-top: rem(16);
 		}
 	}

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,17 +9,16 @@
 		max-width: 100%;
 	}
 
-	.kol-toast {
-		&__toast {
+	.kol-toast-container {
+		.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,13 +9,17 @@
 		max-width: 100%;
 	}
 
-	.kol-toast {
-		&__toast {
+	.kol-toast-container {
+		.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%;
@@ -25,9 +29,5 @@
 				}
 			}
 		}
-
-		&__alert {
-			display: block;
-		}
 	}
 }
diff --git a/packages/themes/itzbund/src/components/toast-container.scss b/packages/themes/itzbund/src/components/toast-container.scss
@@ -9,8 +9,9 @@
 		left: 50%;
 		transform: translateX(-50%);
 	}
-	.kol-toast {
-		&__toast {
+
+	.kol-toast-container {
+		.kol-toast-item {
 			background-color: #fff;
 			margin-top: rem(16);