feat(notification): add info icon to notification (#5203)

carbon-design-system · Jan 29, 2020 · 189c1c3 · 189c1c3
1 parent da75777
commit 189c1c3
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 48 deletions.
diff --git a/packages/components/src/components/notification/_inline-notification.scss b/packages/components/src/components/notification/_inline-notification.scss
@@ -132,10 +132,6 @@
     }
   }
 
-  .#{$prefix}--inline-notification--info .bx--inline-notification__icon {
-    display: none;
-  }
-
   .#{$prefix}--inline-notification--warning {
     @include notification--experimental($inverse-support-03, $inverse-02);
   }

diff --git a/packages/components/src/components/notification/_toast-notification.scss b/packages/components/src/components/notification/_toast-notification.scss
@@ -26,7 +26,7 @@
     display: flex;
     width: rem(288px);
     height: auto;
-    padding-left: $carbon--spacing-05;
+    padding-left: rem(14px);
     color: $inverse-01;
     margin-top: $carbon--spacing-03;
     margin-bottom: $carbon--spacing-03;
@@ -122,8 +122,8 @@
 
   .#{$prefix}--toast-notification__icon {
     flex-shrink: 0;
-    margin-right: $carbon--spacing-05;
-    margin-top: $carbon--spacing-04;
+    margin-right: rem(14px);
+    margin-top: rem(14px);
   }
 
   .#{$prefix}--toast-notification__details {

diff --git a/packages/components/src/components/notification/notification.hbs b/packages/components/src/components/notification/notification.hbs
@@ -1,53 +1,61 @@
-<!-- 
+<!--
   Copyright IBM Corp. 2016, 2018
 
   This source code is licensed under the Apache-2.0 license found in the
   LICENSE file in the root directory of this source tree.
 -->
 
 {{#each items}}
-  <div data-notification class="{{@root.prefix}}--{{../variant}}-notification {{@root.prefix}}--{{../variant}}-notification--{{type}}{{#if ../lowContrast}} {{@root.prefix}}--{{../variant}}-notification--low-contrast{{/if}}" role="alert">
-    {{#is ../variant "toast"}}
-      {{#is type "error"}}
-        {{ carbon-icon 'ErrorFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}
-      {{/is}}
-      {{#is type "success"}}
-        {{ carbon-icon 'CheckmarkFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}
-      {{/is}}
-      {{#is type "warning"}}
-        {{ carbon-icon 'WarningFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}
-      {{/is}}
+<div data-notification
+  class="{{@root.prefix}}--{{../variant}}-notification {{@root.prefix}}--{{../variant}}-notification--{{type}}{{#if ../lowContrast}} {{@root.prefix}}--{{../variant}}-notification--low-contrast{{/if}}"
+  role="alert">
+  {{#is ../variant "toast"}}
+  {{#is type "error"}}
+  {{ carbon-icon 'ErrorFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}
+  {{/is}}
+  {{#is type "success"}}
+  {{ carbon-icon 'CheckmarkFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}
+  {{/is}}
+  {{#is type "warning"}}
+  {{ carbon-icon 'WarningFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}
+  {{/is}}
+  {{#is type "info"}}
+  {{ carbon-icon 'InformationFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}
+  {{/is}}
+  {{/is}}
+  <div class="{{@root.prefix}}--{{../variant}}-notification__details">
+    {{#is ../variant "inline"}}
+    {{#is type "error"}}
+    {{ carbon-icon 'ErrorFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}
+    {{/is}}
+    {{#is type "info"}}
+    {{ carbon-icon 'InformationFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}
+    {{/is}}
+    {{#is type "success"}}
+    {{ carbon-icon 'CheckmarkFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}
     {{/is}}
-    <div class="{{@root.prefix}}--{{../variant}}-notification__details">
-      {{#is ../variant "inline"}}
-        {{#is type "error"}}
-          {{ carbon-icon 'ErrorFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}
-        {{/is}}
-        {{#is type "info"}}
-          {{ carbon-icon 'InformationFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}
-        {{/is}}
-        {{#is type "success"}}
-          {{ carbon-icon 'CheckmarkFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}
-        {{/is}}
-        {{#is type "warning"}}
-          {{ carbon-icon 'WarningFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}
-        {{/is}}
-        <div class="{{@root.prefix}}--{{../variant}}-notification__text-wrapper">
-          <p class="{{@root.prefix}}--{{../variant}}-notification__title">{{title}}</p>
-          <p class="{{@root.prefix}}--{{../variant}}-notification__subtitle">{{subtitle}}</p>
-        </div>
-      {{/is}}
-      {{#is ../variant "toast"}}
-        <h3 class="{{@root.prefix}}--{{../variant}}-notification__title">{{title}}</h3>
-        <p class="{{@root.prefix}}--{{../variant}}-notification__subtitle">{{subtitle}}</p>
-        <p class="{{@root.prefix}}--{{../variant}}-notification__caption">{{timestamp}}</p>
-      {{/is}}
+    {{#is type "warning"}}
+    {{ carbon-icon 'WarningFilled20' class=(add @root.prefix (add '--' (add ../variant '-notification__icon'))) }}
+    {{/is}}
+    <div class="{{@root.prefix}}--{{../variant}}-notification__text-wrapper">
+      <p class="{{@root.prefix}}--{{../variant}}-notification__title">{{title}}</p>
+      <p class="{{@root.prefix}}--{{../variant}}-notification__subtitle">{{subtitle}}</p>
     </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 'Close20' class=(add @root.prefix (add '--' (add ../variant '-notification__close-icon'))) }}
-    </button>
+    {{#is ../variant "toast"}}
+    <h3 class="{{@root.prefix}}--{{../variant}}-notification__title">{{title}}</h3>
+    <p class="{{@root.prefix}}--{{../variant}}-notification__subtitle">{{subtitle}}</p>
+    <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 'Close20' class=(add @root.prefix (add '--' (add ../variant '-notification__close-icon'))) }}
+  </button>
+</div>
 {{/each}}
diff --git a/packages/react/src/components/Notification/Notification.js b/packages/react/src/components/Notification/Notification.js
@@ -14,6 +14,7 @@ import {
   ErrorFilled20,
   CheckmarkFilled20,
   WarningFilled20,
+  InformationFilled20,
 } from '@carbon/icons-react';
 
 import Button from '../Button';
@@ -212,6 +213,7 @@ const iconTypes = {
   error: ErrorFilled20,
   success: CheckmarkFilled20,
   warning: WarningFilled20,
+  info: InformationFilled20,
 };
 
 function NotificationIcon({ iconDescription, kind, notificationType }) {