Snackbar design and motion improvements (WordPress#53248)

* Adjust units and style * Tweak motion * Remove background-color * Update CHANGELOG.md
naiba4 · Aug 10, 2023 · 744c261 · 744c261
1 parent 1aae9e8
commit 744c261
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 11 deletions.
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -8,6 +8,7 @@
 -   `ProgressBar`: Use the theme system accent for indicator color ([#53347](https://github.com/WordPress/gutenberg/pull/53347)).
 -   `ProgressBar`: Use gray 300 for track color ([#53349](https://github.com/WordPress/gutenberg/pull/53349)).
 -   `Modal`: add `headerActions` prop to render buttons in the header. ([#53328](https://github.com/WordPress/gutenberg/pull/53328)).
+-   `Snackbar`: Snackbar design and motion improvements ([#53248](https://github.com/WordPress/gutenberg/pull/53248))
 
 ### Bug Fix
 

diff --git a/packages/components/src/snackbar/list.tsx b/packages/components/src/snackbar/list.tsx
@@ -29,13 +29,21 @@ const SNACKBAR_VARIANTS = {
 		height: 'auto',
 		opacity: 1,
 		transition: {
-			height: { stiffness: 1000, velocity: -100 },
+			height: { type: 'tween', duration: 0.3, ease: [ 0, 0, 0.2, 1 ] },
+			opacity: {
+				type: 'tween',
+				duration: 0.25,
+				delay: 0.05,
+				ease: [ 0, 0, 0.2, 1 ],
+			},
 		},
 	},
 	exit: {
 		opacity: 0,
 		transition: {
-			duration: 0.5,
+			type: 'tween',
+			duration: 0.1,
+			ease: [ 0, 0, 0.2, 1 ],
 		},
 	},
 };

diff --git a/packages/components/src/snackbar/style.scss b/packages/components/src/snackbar/style.scss
@@ -1,11 +1,12 @@
 .components-snackbar {
 	font-family: $default-font;
 	font-size: $default-font-size;
-	background-color: $gray-900;
+	background: rgba($black, 0.85); // Emulates #1e1e1e closely.
+	backdrop-filter: blur($grid-unit-20) saturate(180%);
 	border-radius: $radius-block-ui;
-	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+	box-shadow: $shadow-popover;
 	color: $white;
-	padding: 16px 24px;
+	padding: $grid-unit-15 ($grid-unit-05 * 5);
 	width: 100%;
 	max-width: 600px;
 	box-sizing: border-box;
@@ -20,17 +21,15 @@
 	}
 
 	&:focus {
-		box-shadow:
-			0 0 0 1px $white,
-			0 0 0 3px $components-color-accent;
+		box-shadow: inset 0 0 0 1px $white, 0 0 0 var(--wp-admin-border-width-focus) $components-color-accent;
 	}
 
 	&.components-snackbar-explicit-dismiss {
 		cursor: default;
 	}
 
 	.components-snackbar__content-with-icon {
-		margin-left: 24px;
+		margin-left: $grid-unit-30;
 	}
 
 	.components-snackbar__icon {
@@ -40,7 +39,7 @@
 	}
 
 	.components-snackbar__dismiss-button {
-		margin-left: 32px;
+		margin-left: $grid-unit-30;
 		cursor: pointer;
 	}
 }
@@ -91,5 +90,5 @@
 
 .components-snackbar-list__notice-container {
 	position: relative;
-	padding-top: 8px;
+	padding-top: $grid-unit-10;
 }