@toptal/picasso-button 1.0.13 → 2.0.0

package/src/Button/styles.ts

@@ -1,222 +1,215 @@
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
-import { alpha, outline, mix } from '@toptal/picasso-shared'
-
-const ICON_SPACING = '0.5em'
-
-export const createOutlineCommons = ({ palette }: Theme) => ({
-  color: palette.common.black,
-  backgroundColor: palette.common.white,
-
-  '&:hover, &$hovered': {
-    borderColor: palette.common.black,
-  },
-
-  // when we use <Button as={Link} />
-  '&&&:visited': {
-    color: palette.common.black,
-  },
-
-  '&$disabled': {
-    color: palette.grey.main,
-    borderColor: palette.grey.main,
-    backgroundColor: palette.common.white,
-  },
-})
-
-export const activeGroup = ({ palette }: Theme) => ({
-  backgroundColor: palette.grey.dark,
-  borderColor: palette.grey.dark,
-  color: palette.common.white,
-})
-
-export const disabledGroup = ({ palette }: Theme) => ({
-  color: palette.grey.main,
-  cursor: 'not-allowed',
-  pointerEvents: 'all',
-})
-
-export const createVariant = (mainColor: string, { palette }: Theme) => ({
-  border: 'none',
-  color: palette.common.white,
-  backgroundColor: mainColor,
-
-  '&:hover, &$hovered': {
-    backgroundColor: mix(mainColor, palette.common.white, 0.152),
-  },
-
-  '&:active, &$active': {
-    backgroundColor: mix(mainColor, palette.common.black, 0.172),
-  },
-
-  // when we use <Button as={Link} />
-  '&&&:visited': {
-    color: palette.common.white,
-  },
-  '&$disabled': {
-    backgroundColor: palette.grey.light2,
-  },
-})
-
-export default (theme: Theme) => {
-  const { palette, sizes, transitions, typography } = theme
-
-  return createStyles({
-    root: {
-      position: 'relative',
-      textTransform: 'none',
-      borderRadius: sizes.borderRadius.small,
-      border: `solid ${sizes.borderWidth} ${palette.grey.light2}`,
-      fontSize: '1rem',
-      transitionDuration: `${transitions.duration.short}ms`,
-      transitionTimingFunction: transitions.easing.easeOut,
-      transitionProperty: 'border, color, background',
-      boxShadow: 'none',
-      flexShrink: 0,
-
-      '&$focusVisible, &$focused': {
-        ...outline(palette.primary.main),
-      },
-
-      '&+&': {
-        marginLeft: '1rem',
-      },
-    },
-    content: {
-      lineHeight: '1.5em',
-      fontWeight: typography.fontWeights.semibold,
-      whiteSpace: 'nowrap',
-    },
-    loader: {
-      position: 'absolute',
-      left: '50%',
-      top: '50%',
-      transform: 'translate(-50%, -50%)',
-    },
-
-    // sizes
-    small: {
-      minWidth: '3.5em',
-      height: '1.5em',
-      padding: '0 0.75em',
-
-      '& $content': {
-        fontSize: typography.buttons.fontSizeSmall,
-        lineHeight: typography.buttons.lineHeightSmall,
-      },
-
-      '& $iconLeft': {
-        marginLeft: '-0.125em',
-      },
-
-      '& $iconRight': {
-        marginRight: '-0.125em',
-      },
-    },
-    medium: {
-      minWidth: '4em',
-      height: '2em',
-      padding: '0 1em',
-
-      '& $content': {
-        fontSize: typography.buttons.fontSizeMedium,
-        lineHeight: typography.buttons.lineHeightMedium,
-      },
-
-      '& $iconLeft': {
-        marginLeft: '-0.25em',
-      },
-
-      '& $iconRight': {
-        marginRight: '-0.25em',
-      },
-    },
-    large: {
-      minWidth: '6em',
-      height: '3em',
-      padding: '0 2em',
-
-      '& $content': {
-        fontSize: typography.buttons.fontSizeLarge,
-        lineHeight: typography.buttons.lineHeightLarge,
-      },
-
-      '& $iconLeft': {
-        marginLeft: '-0.5em',
-      },
-
-      '& $iconRight': {
-        marginRight: '-0.5em',
-      },
-    },
-
-    // variants
-    primary: createVariant(palette.primary.main, theme),
-    negative: createVariant(palette.red.main, theme),
-    positive: createVariant(palette.green.main, theme),
-
-    secondary: {
-      ...createOutlineCommons(theme),
-      '&:active, &$active': {
-        backgroundColor: palette.grey.lighter2,
-        borderColor: palette.common.black,
-      },
-    },
-
-    transparent: {
-      color: palette.common.white,
-      border: `solid ${sizes.borderWidth} ${alpha(palette.common.white, 0.32)}`,
-
-      // when we use <Button as={Link} />
-      '&&&:visited': {
-        color: palette.common.white,
-      },
-
-      '&$focusVisible, &$focused': {
-        ...outline(palette.common.white),
-      },
-
-      '&:hover, &$hovered': {
-        borderColor: palette.common.white,
-      },
-
-      '&:active, &$active': {
-        backgroundColor: alpha(palette.common.white, 0.16),
-        borderColor: palette.common.white,
-      },
-
-      '&$disabled': {
-        color: alpha(palette.common.white, 0.32),
-        borderColor: alpha(palette.common.white, 0.32),
-        backgroundColor: 'initial',
-      },
-    },
-
-    // Other props
-    fullWidth: {
-      width: '100%',
-    },
-    hovered: {},
-    focused: {},
-    active: {
-      boxShadow: 'none',
-    },
-    disabled: {},
-    focusVisible: {},
-
-    // Child elements
-    icon: {
-      fontSize: '1.2em !important',
-      flex: '1 1 0%', // IE11 fix
-    },
-    iconLeft: {
-      marginRight: ICON_SPACING,
-    },
-    iconRight: {
-      marginLeft: ICON_SPACING,
-    },
-    hidden: {
-      opacity: 0,
-    },
-  })
+import type { SizeType } from '@toptal/picasso-shared'
+
+import type { IconPositionType, VariantType } from './Button'
+
+export const createSizeClassNames = (
+  size: 'small' | 'medium' | 'large'
+): string[] => {
+  const sizeClassNames: Record<
+    SizeType<'small' | 'medium' | 'large'>,
+    string[]
+  > = {
+    small: ['min-w-14', 'h-6', 'py-0', 'px-3'],
+    medium: ['min-w-16', 'h-8', 'py-0', 'px-4'],
+    large: ['min-w-24', 'h-12', 'py-0', 'px-8'],
+  }
+
+  return sizeClassNames[size]
+}
+
+export const createVariantClassNames = (
+  variant: VariantType,
+  {
+    disabled,
+    focused,
+    hovered,
+    active,
+  }: {
+    disabled?: boolean
+    focused?: boolean
+    hovered?: boolean
+    active?: boolean
+  }
+): string[] => {
+  const variantClassNames = []
+
+  switch (variant) {
+    case 'primary':
+      variantClassNames.push('border-none')
+      variantClassNames.push('text-white')
+      variantClassNames.push('visited:text-white')
+
+      if (disabled) {
+        variantClassNames.push('bg-gray-400')
+      } else {
+        variantClassNames.push('hover:bg-[#4269D6]')
+        variantClassNames.push('active:bg-[#1A41AB]')
+
+        if (hovered) {
+          variantClassNames.push('bg-[#4269D6]')
+        } else if (active) {
+          variantClassNames.push('bg-[#1A41AB]')
+        } else {
+          variantClassNames.push('bg-blue-500')
+        }
+      }
+
+      break
+    case 'negative':
+      variantClassNames.push('border-none')
+      variantClassNames.push('text-white')
+      variantClassNames.push('visited:text-white')
+
+      if (disabled) {
+        variantClassNames.push('bg-gray-400')
+      } else {
+        variantClassNames.push('hover:bg-[#DB466B]')
+        variantClassNames.push('active:bg-[#B01F43]')
+
+        if (hovered) {
+          variantClassNames.push('bg-[#DB466B]')
+        } else if (active) {
+          variantClassNames.push('bg-[#B01F43]')
+        } else {
+          variantClassNames.push('bg-red-500')
+        }
+      }
+      break
+    case 'positive':
+      variantClassNames.push('border-none')
+      variantClassNames.push('text-white')
+      variantClassNames.push('visited:text-white')
+
+      if (disabled) {
+        variantClassNames.push('bg-gray-400')
+      } else {
+        variantClassNames.push('hover:bg-[#27D496]')
+        variantClassNames.push('active:bg-[#00A96C]')
+
+        if (hovered) {
+          variantClassNames.push('bg-[#27D496]')
+        } else if (active) {
+          variantClassNames.push('bg-[#00A96C]')
+        } else {
+          variantClassNames.push('bg-green-500')
+        }
+      }
+      break
+    case 'secondary':
+      variantClassNames.push('border border-solid')
+
+      if (disabled) {
+        variantClassNames.push('text-gray-500')
+        variantClassNames.push('border-gray-500')
+        variantClassNames.push('bg-white')
+      } else {
+        variantClassNames.push('text-black')
+
+        variantClassNames.push('hover:border-black')
+        variantClassNames.push('visited:text-black')
+
+        variantClassNames.push('active:bg-gray-200')
+        variantClassNames.push('active:border-black')
+
+        if (hovered) {
+          variantClassNames.push('border-black')
+          variantClassNames.push('bg-white')
+        } else if (active) {
+          variantClassNames.push('border-black')
+          variantClassNames.push('bg-gray-200')
+        } else {
+          variantClassNames.push('bg-white')
+          variantClassNames.push('border-gray-400')
+        }
+      }
+
+      break
+    case 'transparent':
+      variantClassNames.push('border border-solid')
+      if (disabled) {
+        variantClassNames.push('text-white/[0.32]')
+        variantClassNames.push('border-white/[0.32]')
+        variantClassNames.push('bg-transparent')
+      } else {
+        variantClassNames.push('text-white')
+        variantClassNames.push('visited:text-white')
+        variantClassNames.push('border-solid')
+
+        variantClassNames.push('hover:border-white')
+        variantClassNames.push('active:border-white')
+        variantClassNames.push('active:bg-white/[.16]')
+        variantClassNames.push(
+          'focus-visible:shadow-[0_0_0_3px_rgba(255,255,255,0.48)]'
+        )
+
+        if (hovered) {
+          variantClassNames.push('border-white')
+          variantClassNames.push('bg-transparent')
+        } else if (active) {
+          variantClassNames.push('border-white')
+          variantClassNames.push('bg-white/[.16]')
+        } else {
+          variantClassNames.push('border-white/[0.32]')
+          variantClassNames.push('bg-transparent')
+        }
+
+        if (focused) {
+          variantClassNames.push('shadow-[0_0_0_3px_rgba(255,255,255,0.48)]')
+        }
+      }
+      break
+  }
+
+  return variantClassNames
+}
+
+export const createCoreClassNames = ({
+  disabled,
+  focused,
+  active,
+}: {
+  disabled?: boolean
+  focused?: boolean
+  hovered?: boolean
+  active?: boolean
+}): string[] => {
+  const classNames = ['no-underline', 'rounded-sm', 'shadow-none']
+
+  if (!disabled) {
+    classNames.push('focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)]')
+    classNames.push('focus-within:shadow-[0_0_0_3px_rgba(32,78,207,0.48)]')
+
+    if (focused) {
+      classNames.push('shadow-[0_0_0_3px_rgba(32,78,207,0.48)]')
+    }
+
+    if (active) {
+      classNames.push('shadow-none')
+    }
+  }
+
+  return classNames
+}
+
+export const createIconClassNames = ({
+  iconPosition,
+  size,
+}: {
+  iconPosition?: IconPositionType
+  size: SizeType<'small' | 'medium' | 'large'>
+}): string[] => {
+  const sizeClassNames: Record<
+    SizeType<'small' | 'medium' | 'large'>,
+    string[]
+  > = {
+    small: [iconPosition === 'left' ? 'ml-[-0.125em]' : 'mr-[-0.125em]'],
+    medium: [iconPosition === 'left' ? 'ml-[-0.25em]' : 'mr-[-0.25em]'],
+    large: [iconPosition === 'left' ? 'ml-[-0.5em]' : 'mr-[-0.5em]'],
+  }
+
+  return [
+    sizeClassNames[size].join(' '),
+    iconPosition === 'left' ? 'mr-[0.5em]' : '',
+    iconPosition === 'right' ? 'ml-[0.5em]' : '',
+  ]
 }

package/src/Button/test.tsx

@@ -14,7 +14,7 @@ const renderButton = (
   props: OmitInternalProps<Props>,
   picassoConfig?: PicassoConfig
 ) => {
-  const { children, disabled, loading, onClick, titleCase, as } = props
+  const { children, disabled, loading, onClick, titleCase, as, href } = props
 
   return render(
     <Button
@@ -23,6 +23,7 @@ const renderButton = (
       onClick={onClick}
       titleCase={titleCase}
       as={as}
+      href={href}
     >
       {children}
     </Button>,
@@ -119,6 +120,7 @@ describe('Button', () => {
         children: 'Click me!',
         disabled: true,
         as: Link,
+        href: 'URL',
       })
 
       expect(container).toMatchSnapshot()

package/src/ButtonAction/ButtonAction.tsx

@@ -1,8 +1,6 @@
-import type { ReactElement, MouseEvent, ElementType } from 'react'
+import type { ReactElement, MouseEvent, ElementType, ReactNode } from 'react'
 import React, { forwardRef } from 'react'
 import cx from 'classnames'
-import type { Theme } from '@material-ui/core/styles'
-import { makeStyles } from '@material-ui/core/styles'
 import type {
   BaseProps,
   ButtonOrAnchorProps,
@@ -11,8 +9,30 @@ import type {
 import { Loader } from '@toptal/picasso-loader'
 
 import type { IconPositionType } from '../Button'
-import { Button } from '../Button'
-import styles from './styles'
+import { ButtonBase } from '../ButtonBase'
+import { createRootClassNames, createIconClassNames } from './styles'
+
+const getIcon = ({
+  children,
+  icon,
+  iconPosition,
+}: {
+  children: ReactNode
+  icon?: ReactElement
+  iconPosition?: IconPositionType
+}) => {
+  if (!icon) {
+    return null
+  }
+
+  const iconClassNames = createIconClassNames({
+    iconPosition: children && iconPosition ? iconPosition : undefined,
+  })
+
+  return React.cloneElement(icon, {
+    className: cx(iconClassNames, icon.props.className),
+  })
+}
 
 export interface Props extends BaseProps, ButtonOrAnchorProps {
   /** Show button in the active state (left mouse button down) */
@@ -37,14 +57,6 @@ export interface Props extends BaseProps, ButtonOrAnchorProps {
   value?: string | number
 }
 
-// Using { index: -1 } to inject CSS link to the bottom of the head
-// in order to prevent Button's styles to override ButtonAction's ones
-// Related Jira issue: https://toptal-core.atlassian.net/browse/FX-1520
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoButtonAction',
-  index: -1,
-})
-
 const loaderIcon = <Loader size='small' variant='inherit' />
 
 export const ButtonAction: OverridableComponent<Props> = forwardRef<
@@ -63,50 +75,26 @@ export const ButtonAction: OverridableComponent<Props> = forwardRef<
     onClick,
     ...rest
   } = props
-  const classes = useStyles()
-
-  const {
-    root: rootClass,
-    content,
-    icon: iconClassName,
-    iconLeft,
-    iconRight,
-    small,
-  } = classes
-
-  const rootClassName = cx(
-    {
-      [classes.active]: active,
-      [classes.focused]: focused,
-      [classes.hovered]: hovered,
-      [classes.disabled]: disabled,
-      [classes.loading]: loading,
-      [classes.iconless]: !icon,
-    },
-    rootClass
-  )
 
   const usedIcon = loading ? loaderIcon : icon
   const usedIconPosition = icon ? iconPosition : 'right'
 
+  const finalClassName = cx(createRootClassNames(props), className)
+  const finalIcon = getIcon({
+    children: rest.children,
+    icon: usedIcon,
+    iconPosition: usedIconPosition,
+  })
+
   return (
-    <Button
+    <ButtonBase
       {...rest}
       ref={ref}
-      icon={usedIcon}
+      icon={finalIcon}
       iconPosition={usedIconPosition}
       onClick={loading ? undefined : onClick}
-      variant='secondary'
-      classes={{
-        root: rootClassName,
-        content,
-        icon: iconClassName,
-        iconLeft,
-        iconRight,
-        small,
-      }}
-      className={className}
-      size='small'
+      className={finalClassName}
+      contentClassName='font-semibold text-blue-500 text-md'
       active={active}
       hovered={hovered}
       focused={focused}