Feat/updated button

.changeset/spotty-mangos-punch.md

@@ -0,0 +1,5 @@
+---
+'@stacks/ui': patch
+---
+
+This change improves the button component in a few ways: it fixes the sizes to match the figma, updates the hover states, variants, and refactors the component to be easier to understand.

packages/ui/package.json

@@ -7,6 +7,7 @@
     "@reach/alert": "^0.12.1",
     "@reach/auto-id": "^0.12.1",
     "@reach/rect": "^0.12.1",
+    "@react-spectrum/utils": "^3.5.0",
     "@stacks/ui-core": "^7.0.0",
     "@stacks/ui-theme": "^7.1.0",
     "@stacks/ui-utils": "^7.1.0",
@@ -17,6 +18,7 @@
     "color": "3.1.3",
     "prism-react-renderer": "^1.0.2",
     "prismjs": "^1.20.0",
+    "react-aria": "^3.2.0",
     "react-hotkeys-hook": "^2.4.0",
     "react-transition-group": "^4.4.1",
     "type-fest": "^0.20.2",

packages/ui/src/button/index.tsx

@@ -1,100 +1,226 @@
-import React from 'react';
-import { Box } from '../box';
-import { useButtonStyle } from './styles';
+import * as React from 'react';
+import { Box, BoxProps } from '../box';
+import { Flex } from '../flex';
+import { transition } from '@stacks/ui-theme';
+import { color } from '@stacks/ui-utils';
+import { ForwardRefExoticComponentWithAs, forwardRefWithAs } from '@stacks/ui-core';
+import { usePress } from 'react-aria';
+import { Grid } from '../grid';
 import { Spinner } from '../spinner';
-import { ButtonProps } from './types';
-import { useHover } from 'use-events';
-import { forwardRefWithAs } from '@stacks/ui-core';
 
-export * from './types';
+export const blue = (alpha = 1, darker = false) =>
+  `rgba(${darker ? '70,55,255' : '85,70,255'},${alpha})`;
+export const focusBlue = (alpha = 1) => `rgba(170, 179, 255,${alpha})`;
 
-const HoverChange = ({ isHovered, isDisabled }: { isHovered: boolean; isDisabled: boolean }) => (
-  <Box
-    borderRadius="6px"
-    position="absolute"
-    width="100%"
-    height="100%"
-    left={0}
-    top={0}
-    bg="darken.150"
-    opacity={!isDisabled && isHovered ? 1 : 0}
-    zIndex={1}
-    transition="all 250ms"
-  />
-);
+export interface ButtonProps extends Omit<BoxProps, 'size'> {
+  variant?: 'link' | 'solid';
+  mode?: 'primary' | 'secondary' | 'tertiary';
+  isDisabled?: boolean;
+  loadingText?: string;
+  isLoading?: boolean;
+  type?: 'button' | 'reset' | 'submit';
+  size?: 'sm' | 'md' | 'lg';
+}
 
-export const Button = forwardRefWithAs<ButtonProps, 'button'>(
-  (
-    {
+const modeStyles = (mode: ButtonProps['mode'], variant: ButtonProps['variant'] = 'solid') => {
+  if (variant === 'solid') {
+    switch (mode) {
+      case 'secondary':
+        return ({
+          isPressed,
+          isDisabled,
+          _hover,
+        }: {
+          isPressed?: boolean;
+          isDisabled?: boolean;
+          isLoading?: boolean;
+          _hover?: any;
+        }) => ({
+          bg: blue(0.2, isPressed),
+          border: '1px solid',
+          borderRadius: '6px',
+          color: color('invert'),
+          borderColor: blue(0),
+          _hover: {
+            bg: blue(0.25, true),
+            cursor: isDisabled ? 'not-allowed' : 'pointer',
+            ..._hover,
+          },
+          _focus: {
+            boxShadow: `0 0 0 3px ${focusBlue(0.5)}`,
+          },
+        });
+      case 'tertiary':
+        return ({
+          isPressed,
+          isDisabled,
+          _hover,
+        }: {
+          isPressed?: boolean;
+          isDisabled?: boolean;
+          isLoading?: boolean;
+          _hover?: any;
+        }) => ({
+          border: '1px solid',
+          borderRadius: '6px',
+          color: color('invert'),
+          bg: color(isPressed ? 'bg' : 'bg-2'),
+          borderColor: color('border'),
+          boxShadow: 'mid',
+          _hover: {
+            bg: color('bg-3'),
+            boxShadow: 'high',
+            cursor: isDisabled ? 'not-allowed' : 'pointer',
+            ..._hover,
+          },
+          _focus: {
+            boxShadow: `0 0 0 3px ${focusBlue(0.5)}`,
+          },
+        });
+      default:
+        return ({
+          isPressed,
+          isDisabled,
+          _hover,
+        }: {
+          isPressed?: boolean;
+          isDisabled?: boolean;
+          isLoading?: boolean;
+          _hover?: any;
+        }) => ({
+          border: '1px solid',
+          borderRadius: '6px',
+          bg: blue(1, isPressed),
+          color: 'white',
+          borderColor: blue(0),
+          _hover: { bg: blue(1, true), cursor: isDisabled ? 'not-allowed' : 'pointer', ..._hover },
+          _focus: {
+            boxShadow: `0 0 0 3px ${focusBlue(0.75)}`,
+          },
+        });
+    }
+  } else {
+    return ({
+      _hover,
+      isPressed,
       isDisabled,
-      isActive,
-      children,
-      as: Comp,
-      mode = 'primary',
-      variant = 'solid',
-      type,
-      size = 'md',
-      isLoading,
-      loadingText,
-      customStyles,
-      ...rest
-    },
-    ref
-  ) => {
-    const styles = useButtonStyle({
-      variant,
-      mode,
-      size,
-      customStyles,
+    }: {
+      isPressed?: boolean;
+      isDisabled?: boolean;
+      isLoading?: boolean;
+      _hover?: any;
+    }) => ({
+      color: blue(1, isPressed),
+      textDecoration: 'none',
+      _hover: {
+        textDecoration: 'underline',
+        cursor: isDisabled ? 'not-allowed' : 'pointer',
+        ..._hover,
+      },
     });
+  }
+};
 
-    const [hovered, bind] = useHover();
-
-    return (
-      <Box
-        disabled={isDisabled}
-        aria-disabled={isDisabled}
-        ref={ref}
-        type={type}
-        borderRadius="6px"
-        fontWeight="medium"
-        position="relative"
-        data-active={isActive ? 'true' : undefined}
-        as={Comp || 'button'}
-        {...rest}
-        {...styles}
-        {...bind}
-      >
-        <Box
-          as="span"
-          display="flex"
-          alignItems="center"
-          justifyContent="center"
-          position="relative"
-          zIndex={5}
-        >
-          {isLoading && (
-            <Spinner
-              position={loadingText ? 'relative' : 'absolute'}
-              mx={!loadingText ? 'auto' : 'unset'}
-              color="currentColor"
-              size={size === 'sm' ? 'xs' : 'sm'}
-            />
-          )}
-          {isLoading
-            ? <Box ml="tight">{loadingText}</Box> || (
-                <Box ml="tight" as="span" opacity={0}>
-                  {children}
-                </Box>
-              )
-            : children}
-        </Box>
-        {mode === 'primary' ? (
-          <HoverChange isDisabled={isDisabled || false} isHovered={hovered} />
-        ) : null}
-      </Box>
-    );
+const sizeProps = (size: 'sm' | 'md' | 'lg') => {
+  switch (size) {
+    case 'sm': {
+      return {
+        px: 'tight',
+        py: 'extra-tight',
+        fontSize: '12px',
+      };
+    }
+    case 'md': {
+      return {
+        px: 'base',
+        py: 'base-tight',
+        fontSize: '14px',
+      };
+    }
+    case 'lg': {
+      return {
+        px: 'base-loose',
+        py: 'base',
+        fontSize: '14px',
+      };
+    }
   }
-);
+};
+
+export const Button: ForwardRefExoticComponentWithAs<ButtonProps, 'button'> = forwardRefWithAs<
+  ButtonProps,
+  'button'
+>((props, ref) => {
+  const {
+    children,
+    as = 'button',
+    onClick,
+    mode = 'primary',
+    variant = 'solid',
+    isLoading,
+    isDisabled,
+    size = 'md',
+    _hover,
+    ...rest
+  } = props;
 
-Button.displayName = 'Button';
+  const { pressProps, isPressed } = usePress({
+    ref,
+    onPress: e => {
+      onClick?.(e as any);
+    },
+  });
+  const { onKeyUp, onKeyDown } = pressProps;
+
+  const sizeStyles = variant === 'link' ? {} : sizeProps(size);
+  const _modeStyle = modeStyles(mode, variant);
+  const modeStyle = _modeStyle({ isPressed, _hover, isDisabled });
+  return (
+    <Box
+      as={as}
+      outline="none"
+      fontWeight="500"
+      transition={transition}
+      userSelect="none"
+      ref={ref}
+      onKeyUp={onKeyUp}
+      onKeyDown={onKeyDown}
+      position="relative"
+      pointerEvents={isLoading || isDisabled ? 'none' : 'unset'}
+      onClick={e => {
+        onClick?.(e);
+      }}
+      opacity={isDisabled ? 0.4 : 1}
+      alignItems="center"
+      justifyContent="center"
+      {...modeStyle}
+      {...sizeStyles}
+      {...rest}
+      display={rest.display || 'inline-flex'}
+    >
+      <Grid
+        transition={transition}
+        opacity={isLoading ? 1 : 0}
+        zIndex={2}
+        position="absolute"
+        top={0}
+        left={0}
+        size="100%"
+        placeItems="center"
+      >
+        <Spinner size="sm" color="currentColor" />
+      </Grid>
+      <Flex
+        transition="opacity 0.2s cubic-bezier(0.23, 1, 0.32, 1)"
+        as="span"
+        color="currentColor"
+        opacity={isLoading ? 0 : 1}
+        display={rest.display || 'inline-flex'}
+        alignItems={rest.alignItems || 'center'}
+        justifyContent={rest.justifyContent || 'center'}
+      >
+        {children}
+      </Flex>
+    </Box>
+  );
+});