feat(button): add a circle shape (uber#3716)

documentation-site/examples/button/shapes.js

@@ -17,7 +17,7 @@ export default () => (
       </Button>
     </p>
     <p>
-      <Button shape={SHAPE.round}>
+      <Button shape={SHAPE.circle}>
         <Upload />
       </Button>
     </p>

documentation-site/examples/button/shapes.tsx

@@ -16,7 +16,7 @@ export default () => (
       </Button>
     </p>
     <p>
-      <Button shape={SHAPE.round}>
+      <Button shape={SHAPE.circle}>
         <Upload />
       </Button>
     </p>

src/button/__tests__/button-circle.scenario.js

@@ -0,0 +1,81 @@
+/*
+Copyright (c) 2018-2020 Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+// @flow
+
+import * as React from 'react';
+import {useStyletron} from '../../index.js';
+import {Button, SHAPE, SIZE, KIND} from '../index.js';
+import Upload from '../../icon/upload.js';
+
+export default function Scenario() {
+  const [css] = useStyletron();
+  return (
+    <React.Fragment>
+      <div>
+        <Button
+          key={`circle-kind-primary`}
+          shape={SHAPE.circle}
+          kind={KIND.primary}
+        >
+          GM
+        </Button>
+        <span className={css({display: 'inline-block', width: '10px'})} />
+        <Button
+          key={`circle-kind-secondary`}
+          shape={SHAPE.circle}
+          kind={KIND.secondary}
+        >
+          GM
+        </Button>
+        <span className={css({display: 'inline-block', width: '10px'})} />
+        <Button
+          key={`circle-kind-tertiary`}
+          shape={SHAPE.circle}
+          kind={KIND.tertiary}
+        >
+          GM
+        </Button>
+      </div>
+      <br />
+      <div>
+        <Button key={`circle-size-mini`} shape={SHAPE.circle} size={SIZE.mini}>
+          GM
+        </Button>
+        <span className={css({display: 'inline-block', width: '10px'})} />
+        <Button
+          key={`circle-size-compact`}
+          shape={SHAPE.circle}
+          size={SIZE.compact}
+        >
+          GM
+        </Button>
+        <span className={css({display: 'inline-block', width: '10px'})} />
+        <Button
+          key={`circle-size-default`}
+          shape={SHAPE.circle}
+          size={SIZE.default}
+        >
+          GM
+        </Button>
+        <span className={css({display: 'inline-block', width: '10px'})} />
+        <Button
+          key={`circle-size-large`}
+          shape={SHAPE.circle}
+          size={SIZE.large}
+        >
+          GM
+        </Button>
+      </div>
+      <br />
+      <div>
+        <Button shape={SHAPE.circle}>
+          <Upload size={24} />
+        </Button>
+      </div>
+    </React.Fragment>
+  );
+}

src/button/constants.js

@@ -17,6 +17,7 @@ export const SHAPE = {
   default: 'default',
   pill: 'pill',
   round: 'round',
+  circle: 'circle',
   square: 'square',
 };
 

src/button/index.d.ts

@@ -24,6 +24,7 @@ export interface SHAPE {
   default: 'default';
   pill: 'pill';
   round: 'round';
+  circle: 'circle';
   square: 'square';
 }
 

src/button/styled-components.js

@@ -35,12 +35,18 @@ export const BaseButton = styled<SharedStylePropsT>(
     borderRightStyle: 'none',
     borderBottomStyle: 'none',
     outline:
-      $isFocusVisible && $shape !== SHAPE.round && $shape !== SHAPE.pill
+      $isFocusVisible &&
+      $shape !== SHAPE.circle &&
+      $shape !== SHAPE.round &&
+      $shape !== SHAPE.pill
         ? `3px solid ${$theme.colors.accent}`
         : 'none',
     outlineOffset: '-3px',
     boxShadow:
-      $isFocusVisible && ($shape === SHAPE.round || $shape === SHAPE.pill)
+      $isFocusVisible &&
+      ($shape === SHAPE.circle ||
+        $shape === SHAPE.round ||
+        $shape === SHAPE.pill)
         ? `0 0 0 3px ${$theme.colors.accent}`
         : 'none',
     textDecoration: 'none',
@@ -63,6 +69,7 @@ export const BaseButton = styled<SharedStylePropsT>(
     ...getPaddingStyles({$theme, $size, $shape}),
     // Kind style override
     ...getKindStyles({$theme, $kind, $isLoading, $isSelected, $disabled}),
+    ...getShapeStyles({$theme, $shape, $size}),
   }),
 );
 
@@ -205,7 +212,7 @@ function getBorderRadiiStyles({$theme, $size, $shape}) {
     } else {
       value = '38px';
     }
-  } else if ($shape === SHAPE.round) {
+  } else if ($shape === SHAPE.circle || $shape === SHAPE.round) {
     value = '50%';
   }
 
@@ -231,7 +238,10 @@ function getFontStyles({$theme, $size}) {
 }
 
 function getPaddingStyles({$theme, $size, $shape}) {
-  const iconShape = $shape === SHAPE.square || $shape === SHAPE.round;
+  const iconShape =
+    $shape === SHAPE.square ||
+    $shape === SHAPE.circle ||
+    $shape === SHAPE.round;
   switch ($size) {
     case SIZE.mini:
       return {
@@ -384,3 +394,38 @@ function getKindStyles({
       return Object.freeze({});
   }
 }
+
+function getShapeStyles({$theme, $shape, $size}) {
+  if ($shape === SHAPE.circle || $shape === SHAPE.square) {
+    let height, width;
+    switch ($size) {
+      case SIZE.mini:
+        height = '28px';
+        width = '28px';
+        break;
+      case SIZE.compact:
+        height = '36px';
+        width = '36px';
+        break;
+      case SIZE.large:
+        height = '56px';
+        width = '56px';
+        break;
+      case SIZE.default:
+      default:
+        height = '48px';
+        width = '48px';
+        break;
+    }
+    return {
+      height,
+      width,
+      paddingTop: 0,
+      paddingBottom: 0,
+      paddingLeft: 0,
+      paddingRight: 0,
+    };
+  } else {
+    return {};
+  }
+}