Icon button (codesandbox#3596)

* add 32x32 svgs

* confused about icons

* separate viewboxes

* remove 32by32 icons

* add comments, fix story

* I AM A TYPESCRIPT GOD

* remove unrelated change

* simplify disabled state

* add icon button

* remove unrelated change

Author: siddharthkp

packages/components/src/components/Button/index.tsx

@@ -7,7 +7,7 @@ const variantStyles = {
   primary: {
     backgroundColor: 'button.background',
     color: 'button.foreground',
-    ':hover': {
+    ':hover:not(:disabled)': {
       // hoverBackground is polyfilled and uses a gradient
       // so we use background and not backgroundColor
 
@@ -16,57 +16,44 @@ const variantStyles = {
       // TODO @sid: extend our system to make background work as well
       background: theme => theme.colors.button.hoverBackground,
     },
-    ':focus': {
+    ':focus:not(:disabled)': {
       // we use the same colors for hover and focus
       // but we add an active state to give
       background: theme => theme.colors.button.hoverBackground,
     },
-    ':disabled:hover': {
-      background: 'transparent', // override hover
-      backgroundColor: 'button.background',
-    },
   },
   secondary: {
     backgroundColor: 'secondaryButton.background',
     color: 'secondaryButton.foreground',
     // same technique as primary
-    ':hover': {
+    ':hover:not(:disabled)': {
       background: theme => theme.colors.secondaryButton.hoverBackground,
     },
-    ':focus': {
+    ':focus:not(:disabled)': {
       background: theme => theme.colors.secondaryButton.hoverBackground,
     },
-    ':disabled:hover': {
-      background: 'transparent', // override hover
-      backgroundColor: 'secondaryButton.background',
-    },
   },
   link: {
     backgroundColor: 'transparent',
     color: 'mutedForeground',
     // same technique as primary
-    ':hover': {
+    ':hover:not(:disabled)': {
       color: 'foreground',
     },
-    ':focus': {
+    ':focus:not(:disabled)': {
       color: 'foreground',
     },
   },
   danger: {
     backgroundColor: 'dangerButton.background',
     color: 'dangerButton.foreground',
     // same technique as primary
-    ':hover': {
+    ':hover:not(:disabled)': {
       background: theme => theme.colors.dangerButton.hoverBackground,
     },
-    ':focus': {
+    ':focus:not(:disabled)': {
       background: theme => theme.colors.dangerButton.hoverBackground,
     },
-
-    ':disabled:hover': {
-      background: 'transparent', // override hover
-      backgroundColor: 'dangerButton.background',
-    },
   },
 };
 
@@ -107,7 +94,7 @@ export const Button = styled(Element).attrs({ as: 'button' })<IButtonProps>(
           ':focus': {
             outline: 'none',
           },
-          ':active': {
+          ':active:not(:disabled)': {
             transform: 'scale(0.98)',
           },
           ':disabled': {

packages/components/src/components/IconButton/iconbutton.stories.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { IconButton } from '.';
+
+export default {
+  title: 'components/IconButton',
+  component: IconButton,
+};
+
+export const Basic = () => <IconButton name="filter" />;
+
+export const Disabled = () => <IconButton disabled name="filter" />;

packages/components/src/components/IconButton/index.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Button } from '../Button';
+import { Icon } from '../Icon';
+
+export const IconButton = ({ name, ...props }) => (
+  <Button
+    variant="link"
+    css={{
+      width: '26px', // same width as (height of the button)
+      padding: 0,
+      borderRadius: '50%',
+      ':hover:not(:disabled)': {
+        backgroundColor: 'secondaryButton.background',
+      },
+      ':focus:not(:disabled)': {
+        outline: 'none',
+        backgroundColor: 'secondaryButton.background',
+      },
+    }}
+    {...props}
+  >
+    <Icon name={name} />
+  </Button>
+);