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 }) {