fix(icons): Update data table v2 & card icons (#826)

* fix(icons): Update data table v2 & card icons * fix: Fix toolbar search icon from being cut off
carbon-design-system · Jun 4, 2018 · 26ef469 · 26ef469
1 parent 248c34e
commit 26ef469
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 31 deletions.
diff --git a/src/components/card/card.hbs b/src/components/card/card.hbs
@@ -58,15 +58,10 @@
     </div>
     <div class="bx--card-footer__app-actions">
       <button class="bx--app-actions__button" id="restart-app" aria-label="restart-app">
-        <svg class="bx--app-actions__button--icon" width="12" height="16" viewBox="0 0 12 16" fill-rule="evenodd">
-          <path d="M6 8l1.3 1.3 1.9-1.9L10.6 6 12 4.7 7.3 0 6 1.2l2.6 2.4H6.1h-.2c-1.7 0-3.3.8-4.4 2C.5 6.7 0 8.1 0 9.6c0 3.3 2.7 6 6 6 1.6 0 3-.6 4-1.6l-1.4-1.4c-.7.6-1.6 1-2.6 1-2.2 0-4-1.8-4-4s1.8-4 4-4H8.8l-.6.6L6 8z"></path>
-        </svg>
+        <svg class="bx--app-actions__button--icon" fill-rule="evenodd" height="16" name="restart" role="img" viewBox="0 0 13 16" width="13" aria-label="Restart App" alt="Restart App"><title>Restart App</title><path d="M10.948 3L8.542.727 9.23 0 13 3.564 9.228 7.108l-.685-.729L11.075 4H6.5A5.5 5.5 0 1 0 12 9.5h1A6.5 6.5 0 1 1 6.5 3h4.448z"></path></svg>
       </button>
       <button class="bx--app-actions__button" id="load-app" aria-label="load-app">
-        <svg class="bx--app-actions__button--icon" width="16" height="16" viewBox="-3 5 16 16" fill-rule="evenodd">
-          <path d="M7.5 12l3.6-3.6V11H13V5H7.1v2h2.5l-3.5 3.5z"></path>
-          <path d="M11 19H-1V9h5V5h-7v16h16v-7h-2z"></path>
-        </svg>
+        <svg class="bx--app-actions__button--icon" fill-rule="evenodd" height="16" name="launch" role="img" viewBox="0 0 16 16" width="16" aria-label="Go To App" alt="Go To App"><title>Go To App</title><path d="M14.293 1H10.5V0H16v5.5h-1V1.707L9.697 7.01l-.707-.707L14.293 1z"></path><path d="M14.293 1H10.5V0H16v5.5h-1V1.707L9.697 7.01l-.707-.707L14.293 1z"></path><path d="M13 9h1v6a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h6.995v1H1v12h12V9z"></path></svg>
       </button>
     </div>
   </div>

diff --git a/src/components/data-table-v2/data-table-v2--pagination.hbs b/src/components/data-table-v2/data-table-v2--pagination.hbs
@@ -50,29 +50,20 @@
 
     <div class="bx--toolbar-content">
       <button class="bx--toolbar-action">
-        <svg class="bx--toolbar-action__icon" width="16" height="16" viewBox="-1 2 16 16">
-          <path d="M8 9V2H6.1v7L3.5 6.5 2 8l5 5 5-5-1.5-1.5L8 9z" />
-          <path d="M13 12v3H1v-3h-2v6h16v-6h-2z" />
-        </svg>
+        <svg class="bx--toolbar-action__icon" fill-rule="evenodd" height="16" name="download" role="img" viewBox="0 0 14 16" width="14" aria-label="Download" alt="Download"><title>Download</title><path d="M7.506 11.03l4.137-4.376.727.687-5.363 5.672-5.367-5.67.726-.687 4.14 4.374V0h1v11.03z"></path><path d="M13 15v-2h1v2a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-2h1v2h12z"></path></svg>
       </button>
 
       <button class="bx--toolbar-action">
-        <svg class="bx--toolbar-action__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-          <path d="M2.032 10.924l7.99-7.99 2.97 2.97-7.99 7.99zM11.046 2.014l1.98-1.98 2.97 2.97-1.98 1.98zM0 16l3-1-2-2z"></path>
-        </svg>
+        <svg class="bx--toolbar-action__icon" fill-rule="evenodd" height="16" name="edit" role="img" viewBox="0 0 16 16" width="16" aria-label="Edit" alt="Edit"><title>Edit</title><path d="M7.926 3.38L1.002 9.72V12h2.304l6.926-6.316L7.926 3.38zm.738-.675l2.308 2.304 1.451-1.324-2.308-2.309-1.451 1.329zM.002 9.28L9.439.639a1 1 0 0 1 1.383.03l2.309 2.309a1 1 0 0 1-.034 1.446L3.694 13H.002V9.28zM0 16.013v-1h16v1z"></path></svg>
       </button>
 
       <button class="bx--toolbar-action">
-        <svg class="bx--toolbar-action__icon" width="16" height="16" viewBox="-1 2 16 16">
-          <path d="M13.1 10c0-.3 0-.6-.1-1l2-1.7-1.7-2.7-2.3.8c-.6-.5-1.2-.9-1.9-1.1L8.6 2H5.4l-.5 2.2c-.7.3-1.4.7-1.9 1.2L.7 4.6-1 7.3.9 9c0 .3-.1.6-.1 1s0 .6.1 1L-1 12.7l1.7 2.7 2.3-.8c.6.5 1.2.9 1.9 1.1l.5 2.3h3.2l.5-2.2c.7-.3 1.3-.6 1.9-1.1l2.3.8 1.7-2.7-1.9-1.8v-1zM7 12c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"
-          />
-        </svg>
+        <svg class="bx--toolbar-action__icon" fill-rule="evenodd" height="16" name="settings" role="img" viewBox="0 0 15 16" width="15" aria-label="Settings" alt="Settings"><title>Settings</title><path d="M7.53 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z"></path><path d="M6.268 2.636l-.313.093c-.662.198-1.28.52-1.822.946l-.255.2-1.427-.754-1.214 1.735 1.186 1.073-.104.31a5.493 5.493 0 0 0-.198 2.759l.05.274L1 10.33l1.214 1.734 1.06-.56.262.275a5.5 5.5 0 0 0 2.42 1.491l.312.093L6.472 15H8.59l.204-1.636.313-.093a5.494 5.494 0 0 0 2.21-1.28l.26-.248 1.09.576 1.214-1.734-1.08-.977.071-.29a5.514 5.514 0 0 0-.073-2.905l-.091-.302 1.15-1.041-1.214-1.734-1.3.687-.257-.22a5.487 5.487 0 0 0-1.98-1.074l-.313-.093L8.59 1H6.472l-.204 1.636zM5.48.876A1 1 0 0 1 6.472 0H8.59a1 1 0 0 1 .992.876l.124.997a6.486 6.486 0 0 1 1.761.954l.71-.375a1 1 0 0 1 1.286.31l1.215 1.734a1 1 0 0 1-.149 1.316l-.688.622a6.514 6.514 0 0 1 .067 2.828l.644.581a1 1 0 0 1 .148 1.316l-1.214 1.734a1 1 0 0 1-1.287.31l-.464-.245c-.6.508-1.286.905-2.029 1.169l-.124.997A1 1 0 0 1 8.59 16H6.472a1 1 0 0 1-.992-.876l-.125-.997a6.499 6.499 0 0 1-2.274-1.389l-.399.211a1 1 0 0 1-1.287-.31L.181 10.904A1 1 0 0 1 .329 9.59l.764-.69a6.553 6.553 0 0 1 .18-2.662l-.707-.64a1 1 0 0 1-.148-1.315l1.214-1.734a1 1 0 0 1 1.287-.31l.86.454a6.482 6.482 0 0 1 1.576-.819L5.48.876z"></path></svg>
       </button>
 
       <button class="bx--btn bx--btn--sm bx--btn--primary">Add new</button>
     </div>
 
-
   </section>
   <table class="bx--data-table-v2">
     <thead>

diff --git a/src/components/data-table-v2/data-table-v2.hbs b/src/components/data-table-v2/data-table-v2.hbs
@@ -51,23 +51,15 @@
 
     <div class="bx--toolbar-content">
       <button class="bx--toolbar-action">
-        <svg class="bx--toolbar-action__icon" width="16" height="16" viewBox="-1 2 16 16">
-          <path d="M8 9V2H6.1v7L3.5 6.5 2 8l5 5 5-5-1.5-1.5L8 9z" />
-          <path d="M13 12v3H1v-3h-2v6h16v-6h-2z" />
-        </svg>
+        <svg class="bx--toolbar-action__icon" fill-rule="evenodd" height="16" name="download" role="img" viewBox="0 0 14 16" width="14" aria-label="Download" alt="Download"><title>Download</title><path d="M7.506 11.03l4.137-4.376.727.687-5.363 5.672-5.367-5.67.726-.687 4.14 4.374V0h1v11.03z"></path><path d="M13 15v-2h1v2a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1v-2h1v2h12z"></path></svg>
       </button>
 
       <button class="bx--toolbar-action">
-        <svg class="bx--toolbar-action__icon" width="16" height="16" viewBox="0 0 16 16" fill-rule="evenodd">
-          <path d="M2.032 10.924l7.99-7.99 2.97 2.97-7.99 7.99zM11.046 2.014l1.98-1.98 2.97 2.97-1.98 1.98zM0 16l3-1-2-2z"></path>
-        </svg>
+        <svg class="bx--toolbar-action__icon" fill-rule="evenodd" height="16" name="edit" role="img" viewBox="0 0 16 16" width="16" aria-label="Edit" alt="Edit"><title>Edit</title><path d="M7.926 3.38L1.002 9.72V12h2.304l6.926-6.316L7.926 3.38zm.738-.675l2.308 2.304 1.451-1.324-2.308-2.309-1.451 1.329zM.002 9.28L9.439.639a1 1 0 0 1 1.383.03l2.309 2.309a1 1 0 0 1-.034 1.446L3.694 13H.002V9.28zM0 16.013v-1h16v1z"></path></svg>
       </button>
 
       <button class="bx--toolbar-action">
-        <svg class="bx--toolbar-action__icon" width="16" height="16" viewBox="-1 2 16 16">
-          <path d="M13.1 10c0-.3 0-.6-.1-1l2-1.7-1.7-2.7-2.3.8c-.6-.5-1.2-.9-1.9-1.1L8.6 2H5.4l-.5 2.2c-.7.3-1.4.7-1.9 1.2L.7 4.6-1 7.3.9 9c0 .3-.1.6-.1 1s0 .6.1 1L-1 12.7l1.7 2.7 2.3-.8c.6.5 1.2.9 1.9 1.1l.5 2.3h3.2l.5-2.2c.7-.3 1.3-.6 1.9-1.1l2.3.8 1.7-2.7-1.9-1.8v-1zM7 12c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"
-          />
-        </svg>
+        <svg class="bx--toolbar-action__icon" fill-rule="evenodd" height="16" name="settings" role="img" viewBox="0 0 15 16" width="15" aria-label="Settings" alt="Settings"><title>Settings</title><path d="M7.53 10.5a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5zm0 1a3.5 3.5 0 1 1 0-7 3.5 3.5 0 0 1 0 7z"></path><path d="M6.268 2.636l-.313.093c-.662.198-1.28.52-1.822.946l-.255.2-1.427-.754-1.214 1.735 1.186 1.073-.104.31a5.493 5.493 0 0 0-.198 2.759l.05.274L1 10.33l1.214 1.734 1.06-.56.262.275a5.5 5.5 0 0 0 2.42 1.491l.312.093L6.472 15H8.59l.204-1.636.313-.093a5.494 5.494 0 0 0 2.21-1.28l.26-.248 1.09.576 1.214-1.734-1.08-.977.071-.29a5.514 5.514 0 0 0-.073-2.905l-.091-.302 1.15-1.041-1.214-1.734-1.3.687-.257-.22a5.487 5.487 0 0 0-1.98-1.074l-.313-.093L8.59 1H6.472l-.204 1.636zM5.48.876A1 1 0 0 1 6.472 0H8.59a1 1 0 0 1 .992.876l.124.997a6.486 6.486 0 0 1 1.761.954l.71-.375a1 1 0 0 1 1.286.31l1.215 1.734a1 1 0 0 1-.149 1.316l-.688.622a6.514 6.514 0 0 1 .067 2.828l.644.581a1 1 0 0 1 .148 1.316l-1.214 1.734a1 1 0 0 1-1.287.31l-.464-.245c-.6.508-1.286.905-2.029 1.169l-.124.997A1 1 0 0 1 8.59 16H6.472a1 1 0 0 1-.992-.876l-.125-.997a6.499 6.499 0 0 1-2.274-1.389l-.399.211a1 1 0 0 1-1.287-.31L.181 10.904A1 1 0 0 1 .329 9.59l.764-.69a6.553 6.553 0 0 1 .18-2.662l-.707-.64a1 1 0 0 1-.148-1.315l1.214-1.734a1 1 0 0 1 1.287-.31l.86.454a6.482 6.482 0 0 1 1.576-.819L5.48.876z"></path></svg>
       </button>
 
       <button class="bx--btn bx--btn--sm bx--btn--primary">Add new</button>

diff --git a/src/components/toolbar/_toolbar.scss b/src/components/toolbar/_toolbar.scss
@@ -41,7 +41,7 @@ $css--helpers: true;
 
     .#{$prefix}--search-magnifier {
       fill: $text-02;
-      transform: scale(1.3);
+      transform: scale(1.15);
       transition: all 175ms $carbon--standard-easing;
       top: rem(8px);
       left: rem(6px);