fix(notification): change box-shadow to border (#4299)

This change also makes inline notification's text color non-themeable for now, given the background color is non-themeable and making it themeable requires themeable component-specific token (or new global theme tokens). This stop-gap approach may be enough for short team because IIRC low-contrast notifications is there for a backword-compatibility reason.
carbon-design-system · Oct 22, 2019 · 150cd2b · 150cd2b
1 parent 1afc402
commit 150cd2b
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 8 deletions.
diff --git a/packages/components/src/components/notification/_inline-notification.scss b/packages/components/src/components/notification/_inline-notification.scss
@@ -26,6 +26,7 @@
 
     display: flex;
     justify-content: space-between;
+    position: relative;
     height: auto;
     min-height: rem(48px);
     min-width: rem(288px);
@@ -48,8 +49,21 @@
   }
 
   .#{$prefix}--inline-notification--low-contrast {
-    color: $text-01;
-    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.2);
+    // Stop-gap to ensure color contrast (vs. fixed background color) until we have component-specific theme tokens
+    color: map-get($carbon--theme--white, 'text-01');
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      filter: opacity(0.4);
+      border-style: solid;
+      border-width: 1px 1px 1px 0;
+    }
   }
 
   .#{$prefix}--inline-notification--error {
@@ -61,6 +75,10 @@
       $support-01,
       $notification-error-background-color
     );
+
+    &:before {
+      border-color: $support-01;
+    }
   }
 
   .#{$prefix}--inline-notification--success {
@@ -72,6 +90,10 @@
       $support-02,
       $notification-success-background-color
     );
+
+    &:before {
+      border-color: $support-02;
+    }
   }
 
   .#{$prefix}--inline-notification--info {
@@ -83,6 +105,10 @@
       $support-04,
       $notification-info-background-color
     );
+
+    &:before {
+      border-color: $support-04;
+    }
   }
 
   .#{$prefix}--inline-notification--info .bx--inline-notification__icon {
@@ -98,6 +124,10 @@
       $support-03,
       $notification-warning-background-color
     );
+
+    &:before {
+      border-color: $support-03;
+    }
   }
 
   .#{$prefix}--inline-notification--warning
@@ -179,11 +209,11 @@
   .#{$prefix}--inline-notification--low-contrast {
     .#{$prefix}--inline-notification__close-button
       .#{$prefix}--inline-notification__close-icon {
-      fill: $ui-05;
+      fill: map-get($carbon--theme--white, 'text-01');
     }
 
     .#{$prefix}--inline-notification__action-button {
-      color: $link-01;
+      color: $carbon--blue-60;
 
       &:active {
         color: $carbon--blue-80;

diff --git a/packages/components/src/components/notification/_toast-notification.scss b/packages/components/src/components/notification/_toast-notification.scss
@@ -44,7 +44,8 @@
   }
 
   .#{$prefix}--toast-notification--low-contrast {
-    color: $text-01;
+    // Stop-gap to ensure color contrast (vs. fixed background color) until we have component-specific theme tokens
+    color: map-get($carbon--theme--white, 'text-01');
   }
 
   .#{$prefix}--toast-notification--error {
@@ -135,7 +136,7 @@
   .#{$prefix}--toast-notification--low-contrast
     .#{$prefix}--toast-notification__close-button
     .#{$prefix}--toast-notification__close-icon {
-    fill: $ui-05;
+    fill: map-get($carbon--theme--white, 'text-01');
   }
 
   .#{$prefix}--toast-notification__title {
@@ -157,7 +158,8 @@
 
   .#{$prefix}--toast-notification--low-contrast
     .#{$prefix}--toast-notification__subtitle {
-    color: $text-01;
+    // Stop-gap to ensure color contrast (vs. fixed background color) until we have component-specific theme tokens
+    color: map-get($carbon--theme--white, 'text-01');
   }
 
   .#{$prefix}--toast-notification__caption {
@@ -169,7 +171,8 @@
 
   .#{$prefix}--toast-notification--low-contrast
     .#{$prefix}--toast-notification__caption {
-    color: $text-01;
+    // Stop-gap to ensure color contrast (vs. fixed background color) until we have component-specific theme tokens
+    color: map-get($carbon--theme--white, 'text-01');
   }
 }
 

diff --git a/packages/components/src/components/notification/notification.hbs b/packages/components/src/components/notification/notification.hbs
@@ -43,6 +43,9 @@
         <p class="{{@root.prefix}}--{{../variant}}-notification__caption">{{timestamp}}</p>
       {{/is}}
     </div>
+    {{#is ../variant "inline"}}
+      <button tabindex="0" class="{{@root.prefix}}--inline-notification__action-button {{@root.prefix}}--btn {{@root.prefix}}--btn--sm {{@root.prefix}}--btn--ghost" type="button">Action</button>
+    {{/is}}
     <button data-notification-btn class="{{@root.prefix}}--{{../variant}}-notification__close-button" type="button" aria-label="close">
       {{ carbon-icon 'Close16' class=(add @root.prefix (add '--' (add ../variant '-notification__close-icon'))) }}
     </button>