From aefd82805788b9207c9f0590c9c841f5b53d1537 Mon Sep 17 00:00:00 2001
From: Kyle Schiller <kyleschiller@gmail.com>
Date: Thu, 23 May 2019 12:49:00 -0700
Subject: [PATCH] update(Chip): Add new compact and active props (#66)

* add active and compact styles to Chip

* remove redundant button styles

* make active and compact props optional

* lighter on hover, period in type descriptions
---
 packages/core/src/components/Chip.story.tsx | 15 ++++++++
 packages/core/src/components/Chip/index.tsx | 39 ++++++++++++++++++++-
 2 files changed, 53 insertions(+), 1 deletion(-)

diff --git a/packages/core/src/components/Chip.story.tsx b/packages/core/src/components/Chip.story.tsx
index 3581693f7..31b3d16fd 100644
--- a/packages/core/src/components/Chip.story.tsx
+++ b/packages/core/src/components/Chip.story.tsx
@@ -12,6 +12,21 @@ storiesOf('Core/Chip', module)
     inspectComponents: [Chip],
   })
   .add('Simple chip.', () => <Chip>Chip</Chip>)
+  .add('Compact chip.', () => (
+    <>
+      <Spacing right={1} inline>
+        <Chip compact onClick={action('onClick')}>
+          Chip
+        </Chip>
+      </Spacing>
+
+      <Spacing right={0} inline>
+        <Chip compact active onClick={action('onClick')}>
+          Chip
+        </Chip>
+      </Spacing>
+    </>
+  ))
   .add('With an icon.', () => <Chip icon={<IconCloseAlt size="2em" />}>Chip</Chip>)
   .add('With an icon button.', () => (
     <>
diff --git a/packages/core/src/components/Chip/index.tsx b/packages/core/src/components/Chip/index.tsx
index 1a1c72fd0..796e4a799 100644
--- a/packages/core/src/components/Chip/index.tsx
+++ b/packages/core/src/components/Chip/index.tsx
@@ -7,8 +7,12 @@ import ProfilePhoto from '../ProfilePhoto';
 import ButtonOrLink, { ButtonOrLinkTypes } from '../private/ButtonOrLink';
 
 export type Props = {
+  /** Renders with a primary background and white text */
+  active?: boolean;
   /** Primary chip contents. */
   children: NonNullable<React.ReactNode>;
+  /** Renders with less padding and sharper corners. */
+  compact?: boolean;
   /** Disabled / gray. */
   disabled?: boolean;
   /** Icon to render to the right of the primary content. */
@@ -29,7 +33,17 @@ export class Chip extends React.Component<Props & WithStylesProps> {
   };
 
   render() {
-    const { children, disabled, icon, onClick, onIconClick, profileImageSrc, styles } = this.props;
+    const {
+      active,
+      children,
+      compact,
+      disabled,
+      icon,
+      onClick,
+      onIconClick,
+      profileImageSrc,
+      styles,
+    } = this.props;
 
     const Component = onClick ? 'button' : 'div';
     const props: React.HTMLProps<HTMLButtonElement> =
@@ -49,6 +63,9 @@ export class Chip extends React.Component<Props & WithStylesProps> {
           onClick && styles.chip_button,
           !profileImageSrc && styles.chip_noBefore,
           !icon && styles.chip_noAfter,
+          active && styles.chip_active,
+          onClick && active && styles.chip_active_button,
+          compact && styles.chip_compact,
           disabled && styles.chip_disabled,
         )}
         {...props}
@@ -107,6 +124,26 @@ export default withStyles(({ color, font, pattern, transition, ui, unit }) => ({
     paddingRight: unit,
   },
 
+  chip_active: {
+    background: color.core.primary[3],
+    borderColor: color.core.primary[3],
+    color: color.accent.bg,
+  },
+
+  chip_active_button: {
+    '@selectors': {
+      ':not([disabled]):hover': {
+        backgroundColor: color.core.primary[4],
+      },
+    },
+  },
+
+  chip_compact: {
+    borderRadius: 2,
+    padding: `0 ${unit}`,
+    height: 3 * unit,
+  },
+
   chip_disabled: {
     backgroundColor: color.core.neutral[1],
     cursor: 'normal',