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
airbnb · May 23, 2019 · aefd828 · aefd828
1 parent 20a2204
commit aefd828
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 1 deletion.
diff --git 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
@@ -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',