feat(chip): dense style

src/Chip.js

@@ -18,6 +18,7 @@ import { Remove } from './Chip/Remove.js'
  */
 const Chip = ({
     selected,
+    dense,
     disabled,
     dragging,
     overflow,
@@ -36,6 +37,7 @@ const Chip = ({
         }}
         className={cx(className, {
             selected,
+            dense,
             disabled,
             dragging,
         })}
@@ -60,6 +62,12 @@ const Chip = ({
                 color: ${colors.grey900};
             }
 
+            .dense {
+                height: 24px;
+                font-size: 13px;
+                line-height: 15px;
+            }
+
             span:hover {
                 background-color: ${colors.grey300};
             }
@@ -110,6 +118,7 @@ Chip.defaultProps = {
  * @prop {function} [onClick]
  * @prop {function} [onRemove]
  * @prop {boolean} [selected]
+ * @prop {boolean} [dense]
  * @prop {boolean} [disabled]
  * @prop {boolean} [dragging]
  * @prop {boolean} [overflow]
@@ -119,6 +128,7 @@ Chip.propTypes = {
     children: propTypes.string,
     className: propTypes.string,
     dataTest: propTypes.string,
+    dense: propTypes.bool,
     disabled: propTypes.bool,
     dragging: propTypes.bool,
     icon: propTypes.element,

src/__demo__/Chip.stories.js

@@ -42,6 +42,14 @@ storiesOf('Chip', module)
         </Chip>
     ))
 
+    .add('Dense', () => <Chip dense>I am dense</Chip>)
+
+    .add('Dense removeable', () => (
+        <Chip dense onRemove={onRemove}>
+            Removeable and dense
+        </Chip>
+    ))
+
 const Globe = () => (
     <svg role="img" viewBox="0 0 24 24" height="100px" width="100px">
         <title>LGTM icon</title>