Chip - Replace fonticon with inline SVG, tweak size and position

react-toolbox · Apr 5, 2016 · 703ed27 · 703ed27
1 parent ae8b22a
commit 703ed27
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 16 deletions.
diff --git a/components/chip/Chip.jsx b/components/chip/Chip.jsx
@@ -1,7 +1,6 @@
 import React, {PropTypes} from 'react';
-import FontIcon from '../font_icon';
-import style from './style';
 import ClassNames from 'classnames';
+import style from './style';
 
 const Chip = ({children, className, deletable, onDeleteClick, ...other}) => {
   let hasAvatar = false;
@@ -21,7 +20,9 @@ const Chip = ({children, className, deletable, onDeleteClick, ...other}) => {
       {
         deletable ? (
           <span className={style.delete} onClick={onDeleteClick}>
-            <FontIcon value="close" />
+            <svg viewBox="0 0 40 40" className={style.deleteIcon}>
+              <path className={style.deleteX} d="M 12,12 L 28,28 M 28,12 L 12,28" />
+            </svg>
           </span>
         ) : null
       }

diff --git a/components/chip/_config.scss b/components/chip/_config.scss
@@ -12,7 +12,6 @@ $chip-font-size: $font-size-small !default;
 $chip-remove-size: 2.4 * $unit !default;
 $chip-remove-margin: 0.4 * $unit !default;
 $chip-remove-line-height: 3.0 * $unit !default;
-$chip-remove-font-size: 1.6 * $unit !default;
 $chip-remove-background: $palette-grey-400 !default;
 $chip-remove-background-hover: $palette-grey-500 !default;
 $chip-remove-color: $color-white !default;
diff --git a/components/chip/style.scss b/components/chip/style.scss
@@ -30,27 +30,33 @@
 }
 
 .deletable {
-  padding-right: 0;
+  padding-right: $chip-remove-size + 2 * $chip-remove-margin;
 }
 
 .delete {
-  background: $chip-remove-background;
-  border-radius: $chip-remove-size;
-  color: $chip-remove-color;
   cursor: pointer;
   display: inline-block;
   height: $chip-remove-size;
-  line-height: $chip-remove-line-height;
-  margin: 0 $chip-remove-margin;
-  text-align: center;
+  margin: $chip-remove-margin;
+  padding: $chip-remove-margin;
+  position: absolute;
   vertical-align: middle;
   width: $chip-remove-size;
+}
 
-  > [data-react-toolbox="font-icon"] {
-    font-size: $chip-remove-font-size;
-  }
+.delete:hover .deleteIcon {
+  background: $chip-remove-background-hover;
+}
+
+.deleteIcon {
+  background: $chip-remove-background;
+  border-radius: $chip-remove-size;
+  vertical-align: top;
 
-  &:hover {
-    background: $chip-remove-background-hover;
+  .deleteX {
+    fill: transparent;
+    stroke-linecap: round;
+    stroke-width: 3;
+    stroke: $chip-remove-color;
   }
 }