fix(notifications): replace svg with inline-svg (#129)

carbon-design-system · May 25, 2017 · 4423a93 · 4423a93
1 parent 3924de3
commit 4423a93
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 29 deletions.
diff --git a/src/components/notification/inline-notification.html b/src/components/notification/inline-notification.html
@@ -1,71 +1,71 @@
 <!--replace xlink:href with correct svg icon API endpoint-->
 <div data-notification class="bx--inline-notification bx--inline-notification--error" role="alert">
   <div class="bx--inline-notification__details">
-      <svg class="bx--inline-notification__icon" aria-label="close">
-        <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--error--glyph"></use>
-      </svg>
+    <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+      <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM5.1 13.3L3.5 12 11 2.6l1.5 1.2-7.4 9.5z"></path>
+    </svg>
     <div class="bx--inline-notification__text-wrapper">
       <p class="bx--inline-notification__title">Error Notification:</h3>
-      <p class="bx--inline-notification__subtitle">Here is a clear explaination of the warning</p>
+        <p class="bx--inline-notification__subtitle">Here is a clear explaination of the warning</p>
     </div>
   </div>
   <button data-notification-btn class="bx--inline-notification__close-button" type="button">
-    <svg class="bx--inline-notification__close-icon" aria-label="close">
-      <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--close"></use>
+    <svg class="bx--inline-notification__close-icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
+      <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
     </svg>
   </button>
 </div>
 
 <!--replace xlink:href with correct svg icon API endpoint-->
 <div data-notification class="bx--inline-notification bx--inline-notification--info" role="alert">
   <div class="bx--inline-notification__details">
-      <svg class="bx--inline-notification__icon" aria-label="close">
-        <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--info--glyph"></use>
-      </svg>
+    <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+      <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zm0 4c.6 0 1 .4 1 1s-.4 1-1 1-1-.4-1-1 .4-1 1-1zm2 8H6v-1h1V8H6V7h3v4h1v1z"></path>
+    </svg>
     <div class="bx--inline-notification__text-wrapper">
       <p class="bx--inline-notification__title">Info Notification:</h3>
-      <p class="bx--inline-notification__subtitle">Here is a clear explaination of the warning</p>
+        <p class="bx--inline-notification__subtitle">Here is a clear explaination of the warning</p>
     </div>
   </div>
   <button data-notification-btn class="bx--inline-notification__close-button" type="button">
-    <svg class="bx--inline-notification__close-icon" aria-label="close">
-      <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--close"></use>
+    <svg class="bx--inline-notification__close-icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
+      <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
     </svg>
   </button>
 </div>
 
 <!--replace xlink:href with correct svg icon API endpoint-->
 <div data-notification class="bx--inline-notification bx--inline-notification--success" role="alert">
   <div class="bx--inline-notification__details">
-    <svg class="bx--inline-notification__icon" aria-label="close">
-      <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--checkmark--glyph"></use>
+    <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+      <path d="M8 0C3.6 0 0 3.6 0 8s3.6 8 8 8 8-3.6 8-8-3.6-8-8-8zM6.7 11.5L3.4 8.1l1.4-1.4 1.9 1.9 4.1-4.1 1.4 1.4-5.5 5.6z"></path>
     </svg>
     <div class="bx--inline-notification__text-wrapper">
       <p class="bx--inline-notification__title">Success Notification:</p>
       <p class="bx--inline-notification__subtitle">Here is a clear explaination. It drops to next line if the content is long enough</p>
     </div>
   </div>
   <button data-notification-btn class="bx--inline-notification__close-button" type="button">
-    <svg class="bx--inline-notification__close-icon" aria-label="close">
-      <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--close"></use>
+    <svg class="bx--inline-notification__close-icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
+      <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
     </svg>
   </button>
 </div>
 
 <!--replace xlink:href with correct svg icon API endpoint-->
 <div data-notification class="bx--inline-notification bx--inline-notification--warning" role="alert">
   <div class="bx--inline-notification__details">
-    <svg class="bx--inline-notification__icon" aria-label="close">
-      <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--warning--glyph"></use>
+    <svg class="bx--inline-notification__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
+      <path d="M8 1L0 15h16L8 1zm-.8 5h1.5v1.4L8.3 11h-.8l-.4-3.6V6h.1zm.8 8c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z"></path>
     </svg>
     <div class="bx--inline-notification__text-wrapper">
       <p class="bx--inline-notification__title">Warning Notification:</p>
       <p class="bx--inline-notification__subtitle">Here is a clear explaination. It drops to next line if the content is long enough</p>
     </div>
   </div>
   <button data-notification-btn class="bx--inline-notification__close-button" type="button">
-    <svg class="bx--inline-notification__close-icon" aria-label="close">
-      <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--close"></use>
+    <svg class="bx--inline-notification__close-icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
+      <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
     </svg>
   </button>
 </div>
diff --git a/src/components/notification/toast-notification.html b/src/components/notification/toast-notification.html
@@ -2,12 +2,15 @@
 <div data-notification class="bx--toast-notification bx--toast-notification--error" role="alert">
   <div class="bx--toast-notification__details">
     <h3 class="bx--toast-notification__title">Title: 'App Name' is stopped</h3>
-    <p class="bx--toast-notification__subtitle">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, earum molestiae. Voluptates delectus, perferendis amet impedit dolor. Dolores unde fugit autem, error qui velit in molestiae sunt. Doloremque laudantium, est?Subtitle: Your application was stopped. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad amet magnam rem numquam, a iusto ab ducimus omnis quaerat dicta consectetur voluptatem voluptate culpa quo beatae quasi dolores maxime eos!</p>
+    <p class="bx--toast-notification__subtitle">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, earum molestiae. Voluptates delectus, perferendis
+      amet impedit dolor. Dolores unde fugit autem, error qui velit in molestiae sunt. Doloremque laudantium, est?Subtitle:
+      Your application was stopped. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad amet magnam rem numquam,
+      a iusto ab ducimus omnis quaerat dicta consectetur voluptatem voluptate culpa quo beatae quasi dolores maxime eos!</p>
     <p class="bx--toast-notification__caption">Caption: 00/00/00 10:47 AM</p>
   </div>
   <button data-notification-btn class="bx--toast-notification__close-button" type="button">
-    <svg class="bx--toast-notification__icon" aria-label="close">
-      <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--close"></use>
+    <svg class="bx--toast-notification__icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
+      <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
     </svg>
   </button>
 </div>
@@ -19,8 +22,8 @@ <h3 class="bx--toast-notification__title">Title: 'App Name' is stopped</h3>
     <p class="bx--toast-notification__caption">Caption: 00/00/00 10:47 AM</p>
   </div>
   <button data-notification-btn class="bx--toast-notification__close-button" type="button">
-    <svg class="bx--toast-notification__icon" aria-label="close">
-      <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--close"></use>
+    <svg class="bx--toast-notification__icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
+      <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
     </svg>
   </button>
 </div>
@@ -32,8 +35,8 @@ <h3 class="bx--toast-notification__title">Title: 'App Name' is stopped</h3>
     <p class="bx--toast-notification__caption">Caption: 00/00/00 10:47 AM</p>
   </div>
   <button data-notification-btn class="bx--toast-notification__close-button" type="button">
-    <svg class="bx--toast-notification__icon" aria-label="close">
-      <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--close"></use>
+    <svg class="bx--toast-notification__icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
+      <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
     </svg>
   </button>
 </div>
@@ -45,8 +48,8 @@ <h3 class="bx--toast-notification__title">Title: 'App Name' is stopped</h3>
     <p class="bx--toast-notification__caption">Caption: 00/00/00 10:47 AM</p>
   </div>
   <button data-notification-btn class="bx--toast-notification__close-button" type="button">
-    <svg class="bx--toast-notification__icon" aria-label="close">
-      <use xlink:href="/carbon-icons/bluemix-icons.svg#icon--close"></use>
+    <svg class="bx--toast-notification__icon" aria-label="close" width="10" height="10" viewBox="0 0 10 10" fill-rule="evenodd">
+      <path d="M9.8 8.6L8.4 10 5 6.4 1.4 10 0 8.6 3.6 5 .1 1.4 1.5 0 5 3.6 8.6 0 10 1.4 6.4 5z"></path>
     </svg>
   </button>
 </div>