<Button> small variant and default color (gray) (#2106)

packages/insomnia-components/components/button.js

@@ -4,27 +4,60 @@ import styled from 'styled-components';
 
 type Props = {
   onClick?: (e: SyntheticEvent<HTMLButtonElement>) => any,
-  bg?: 'success' | 'notice' | 'warning' | 'danger' | 'surprise' | 'info',
+  bg?: 'default' | 'success' | 'notice' | 'warning' | 'danger' | 'surprise' | 'info',
   variant?: 'outlined' | 'contained' | 'text',
+  size?: 'default' | 'small',
 };
 
 const StyledButton: React.ComponentType<Props> = styled.button`
   color: ${({ bg }) => (bg ? `var(--color-${bg})` : 'var(--color-font)')};
   text-align: center;
   font-size: var(--font-size-sm);
-  padding: 0 var(--padding-md);
-  height: var(--line-height-xs);
   border-radius: 3px;
-  display: flex !important;
+  display: inline-flex !important;
   flex-direction: row !important;
   align-items: center !important;
+  border: 1px solid transparent;
+
+  ${({ size }) => {
+    switch (size) {
+      case 'small':
+        return `
+          padding: 0 calc(var(--padding-md) * 0.8);
+          height: calc(var(--line-height-xs) * 0.8);
+          font-size: var(--font-size-sm);
+        `;
+      default:
+        return `
+          padding: 0 var(--padding-md);
+          height: var(--line-height-xs);
+        `;
+    }
+  }}}
+
+  ${({ variant, bg }) => {
+    if (variant !== 'outlined') {
+      return '';
+    }
+
+    // Inherit border color from text color for colored outlines
+    if (bg === 'default') {
+      return 'border-color: var(--hl-lg)';
+    }
+
+    // Colored borders inherit from button text color
+    return 'border-color: inherit';
+  }}}
 
-  border: ${({ variant }) => (variant !== 'outlined' ? '1px solid transparent' : '1px solid')};
   ${({ variant, bg }) => {
     if (variant !== 'contained') {
       return 'background-color: transparent;';
     }
 
+    if (bg === 'default') {
+      return 'background-color: var(--hl-xs)';
+    }
+
     return `background: var(--color-${bg}); color: var(--color-font-${bg})`;
   }}}
 
@@ -38,6 +71,10 @@ const StyledButton: React.ComponentType<Props> = styled.button`
           return 'box-shadow: inset 0 0 99px rgba(0, 0, 0, 0.1)';
         }
 
+        if (bg === 'default') {
+          return 'background-color: var(--hl-xs)';
+        }
+
         return `background-color: rgba(var(--color-${bg}-rgb), 0.1)`;
       }}
     }
@@ -50,6 +87,10 @@ const StyledButton: React.ComponentType<Props> = styled.button`
         return 'box-shadow: inset 0 0 99px rgba(0, 0, 0, 0.2)';
       }
 
+      if (bg === 'default') {
+        return 'background-color: var(--hl-sm)';
+      }
+
       return `background-color: rgba(var(--color-${bg}-rgb), 0.2)`;
     }}
   }
@@ -70,7 +111,8 @@ class Button extends React.Component<Props> {
       <StyledButton
         {...(this.props: Object)}
         variant={this.props.variant || 'outlined'}
-        bg={this.props.bg || 'surprise'}
+        bg={this.props.bg || 'default'}
+        size={this.props.size || 'default'}
       />
     );
   }

packages/insomnia-components/components/button.stories.js

@@ -20,6 +20,16 @@ const Wrapper: React.ComponentType<any> = styled.div`
 `;
 Wrapper.displayName = '...';
 
+const Padded: React.ComponentType<any> = styled.div`
+  margin: 2rem auto;
+`;
+Padded.displayName = '...';
+
+const sizes = {
+  Default: 'default',
+  Small: 'small',
+};
+
 const variants = {
   Outlined: 'outlined',
   Contained: 'contained',
@@ -27,6 +37,7 @@ const variants = {
 };
 
 const themeColors = {
+  Default: null,
   Surprise: 'surprise',
   Info: 'info',
   Success: 'success',
@@ -38,8 +49,9 @@ const themeColors = {
 export const outlined = () => (
   <Button
     variant={select('Variant', variants, 'outlined')}
+    size={select('Size', sizes, null)}
     onClick={() => window.alert('Clicked!')}
-    bg={select('Background', themeColors)}>
+    bg={select('Background', themeColors, null)}>
     Outlined
   </Button>
 );
@@ -74,67 +86,81 @@ export const withIcon = () => (
   </Button>
 );
 
-export const colors = () => (
+export const reference = () => (
   <React.Fragment>
-    <Wrapper>
-      <Button bg="success" variant="contained">
-        Success
-      </Button>
-      <Button bg="surprise" variant="contained">
-        Surprise
-      </Button>
-      <Button bg="danger" variant="contained">
-        Danger
-      </Button>
-      <Button bg="warning" variant="contained">
-        Warning
-      </Button>
-      <Button bg="notice" variant="contained">
-        Notice
-      </Button>
-      <Button bg="info" variant="contained">
-        Info
-      </Button>
-    </Wrapper>
-    <Wrapper>
-      <Button bg="success" variant="outlined">
-        Success
-      </Button>
-      <Button bg="surprise" variant="outlined">
-        Surprise
-      </Button>
-      <Button bg="danger" variant="outlined">
-        Danger
-      </Button>
-      <Button bg="warning" variant="outlined">
-        Warning
-      </Button>
-      <Button bg="notice" variant="outlined">
-        Notice
-      </Button>
-      <Button bg="info" variant="outlined">
-        Info
-      </Button>
-    </Wrapper>
-    <Wrapper>
-      <Button bg="success" variant="text">
-        Success
-      </Button>
-      <Button bg="surprise" variant="text">
-        Surprise
-      </Button>
-      <Button bg="danger" variant="text">
-        Danger
-      </Button>
-      <Button bg="warning" variant="text">
-        Warning
-      </Button>
-      <Button bg="notice" variant="text">
-        Notice
-      </Button>
-      <Button bg="info" variant="text">
-        Info
-      </Button>
-    </Wrapper>
+    {['default', 'small'].map(s => (
+      <Padded>
+        <h2><code>size={s}</code></h2>
+        <Wrapper>
+          <Button variant="contained" size={s}>
+            Default
+          </Button>
+          <Button bg="success" variant="contained" size={s}>
+            Success
+          </Button>
+          <Button bg="surprise" variant="contained" size={s}>
+            Surprise
+          </Button>
+          <Button bg="danger" variant="contained" size={s}>
+            Danger
+          </Button>
+          <Button bg="warning" variant="contained" size={s}>
+            Warning
+          </Button>
+          <Button bg="notice" variant="contained" size={s}>
+            Notice
+          </Button>
+          <Button bg="info" variant="contained" size={s}>
+            Info
+          </Button>
+        </Wrapper>
+        <Wrapper>
+          <Button variant="outlined" size={s}>
+            Default
+          </Button>
+          <Button bg="success" variant="outlined" size={s}>
+            Success
+          </Button>
+          <Button bg="surprise" variant="outlined" size={s}>
+            Surprise
+          </Button>
+          <Button bg="danger" variant="outlined" size={s}>
+            Danger
+          </Button>
+          <Button bg="warning" variant="outlined" size={s}>
+            Warning
+          </Button>
+          <Button bg="notice" variant="outlined" size={s}>
+            Notice
+          </Button>
+          <Button bg="info" variant="outlined" size={s}>
+            Info
+          </Button>
+        </Wrapper>
+        <Wrapper>
+          <Button variant="text" size={s}>
+            Default
+          </Button>
+          <Button bg="success" variant="text" size={s}>
+            Success
+          </Button>
+          <Button bg="surprise" variant="text" size={s}>
+            Surprise
+          </Button>
+          <Button bg="danger" variant="text" size={s}>
+            Danger
+          </Button>
+          <Button bg="warning" variant="text" size={s}>
+            Warning
+          </Button>
+          <Button bg="notice" variant="text" size={s}>
+            Notice
+          </Button>
+          <Button bg="info" variant="text" size={s}>
+            Info
+          </Button>
+        </Wrapper>
+      </Padded>
+    ))}
   </React.Fragment>
 );