fix(toast-notification): match updated spec (#8165)

* fix(toast-notification): update notification icon spacing * fix(toast-notification): update left padding * fix(Notification): remove inline width rule Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Mar 29, 2021 · 76f61a6 · 76f61a6
1 parent 431e5fc
commit 76f61a6
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/packages/components/src/components/notification/_toast-notification.scss b/packages/components/src/components/notification/_toast-notification.scss
@@ -31,7 +31,7 @@
     margin-top: $carbon--spacing-03;
     margin-right: $carbon--spacing-05;
     margin-bottom: $carbon--spacing-03;
-    padding-left: rem(14px);
+    padding-left: $carbon--spacing-05;
     color: $inverse-01;
     box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
 
@@ -133,8 +133,8 @@
 
   .#{$prefix}--toast-notification__icon {
     flex-shrink: 0;
-    margin-top: rem(14px);
-    margin-right: rem(14px);
+    margin-top: $carbon--spacing-05;
+    margin-right: $carbon--spacing-05;
   }
 
   .#{$prefix}--toast-notification__details {

diff --git a/packages/react/src/components/Notification/Notification-story.js b/packages/react/src/components/Notification/Notification-story.js
@@ -61,7 +61,7 @@ export const Toast = () => (
   <ToastNotification
     {...notificationProps()}
     caption={text('Caption (caption)', '00:00:00 AM')}
-    style={{ minWidth: '30rem', marginBottom: '.5rem' }}
+    style={{ marginBottom: '.5rem' }}
   />
 );