Merge pull request #381 from storybookjs/button-types

Add inverse and noChrome inverse button types

Author: winkerVSbecks

src/components/Button.stories.tsx

@@ -16,20 +16,20 @@ Basic.args = { children: 'Label' };
 
 export const All = () => (
   <>
-    <Button appearance="primary">Primary</Button>
-    <Button appearance="secondary">Secondary</Button>
-    <Button appearance="tertiary">Tertiary</Button>
-    <Button appearance="outline">Outline</Button>
-    <Button appearance="primaryOutline">Outline primary</Button>
-    <Button appearance="secondaryOutline">Outline secondary</Button>
-    <div style={{ background: 'grey', display: 'inline-block' }}>
-      <Button appearance="inversePrimary">Primary inverse</Button>
+    <div style={{ display: 'flex', gap: 16, padding: 32 }}>
+      <Button appearance="primary">Primary</Button>
+      <Button appearance="secondary">Secondary</Button>
+      <Button appearance="tertiary">Tertiary</Button>
+      <Button appearance="outline">Outline</Button>
+      <Button appearance="primaryOutline">Outline primary</Button>
+      <Button appearance="secondaryOutline">Outline secondary</Button>
     </div>
-    <div style={{ background: 'grey', display: 'inline-block' }}>
+    <div style={{ background: '#333333', display: 'flex', gap: 16, padding: 32 }}>
+      <Button appearance="inversePrimary">Primary inverse</Button>
       <Button appearance="inverseSecondary">Secondary inverse</Button>
-    </div>
-    <div style={{ background: 'grey', display: 'inline-block' }}>
       <Button appearance="inverseOutline">Outline inverse</Button>
+      <Button appearance="inverse">Inverse</Button>
+      <Button appearance="inverseNoChrome">No Chrome Inverse</Button>
     </div>
   </>
 );

src/components/Button.tsx

@@ -33,6 +33,8 @@ const APPEARANCES = {
   INVERSE_PRIMARY: 'inversePrimary',
   INVERSE_SECONDARY: 'inverseSecondary',
   INVERSE_OUTLINE: 'inverseOutline',
+  INVERSE: 'inverse',
+  INVERSE_NO_CHROME: 'inverseNoChrome',
 } as const;
 
 const SIZES = {
@@ -330,6 +332,46 @@ export const StyledButton = styled.button<ButtonStylingProps & { children: React
           color: ${color.darkest};
         }
     `};
+
+  ${(props) =>
+    props.appearance === APPEARANCES.INVERSE &&
+    `
+        background: ${color.tr10};
+        color: ${color.lightest};
+
+        ${
+          !props.isLoading &&
+          `
+            &:hover {
+              background: ${color.tr10};
+              box-shadow: none;
+            }
+            &:active {
+              box-shadow: none;
+            }
+        `
+        }
+    `}
+
+  ${(props) =>
+    props.appearance === APPEARANCES.INVERSE_NO_CHROME &&
+    `
+        background: transparent;
+        color: ${color.lightest};
+
+        ${
+          !props.isLoading &&
+          `
+            &:hover {
+              background: transparent;
+              box-shadow: none;
+            }
+            &:active {
+              box-shadow: none;
+            }
+        `
+        }
+    `}
 `;
 
 const ButtonLink = styled.a``;