@toptal/picasso-button 1.0.13-alpha-fx-5263-merge-feature-branch-d124b1f9a.10 → 1.0.13-alpha-fx-4594-migrate-griditem-4e798b92d.27

package/src/Button/styles.ts

@@ -1,215 +1,222 @@
-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]' : '',
-  ]
+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,
+    },
+  })
 }

package/src/Button/test.tsx

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

package/src/ButtonAction/ButtonAction.tsx

@@ -1,6 +1,8 @@
-import type { ReactElement, MouseEvent, ElementType, ReactNode } from 'react'
+import type { ReactElement, MouseEvent, ElementType } 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,
@@ -9,30 +11,8 @@ import type {
 import { Loader } from '@toptal/picasso-loader'
 
 import type { IconPositionType } from '../Button'
-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),
-  })
-}
+import { Button } from '../Button'
+import styles from './styles'
 
 export interface Props extends BaseProps, ButtonOrAnchorProps {
   /** Show button in the active state (left mouse button down) */
@@ -57,6 +37,14 @@ 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<
@@ -75,26 +63,50 @@ 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 (
-    <ButtonBase
+    <Button
       {...rest}
       ref={ref}
-      icon={finalIcon}
+      icon={usedIcon}
       iconPosition={usedIconPosition}
       onClick={loading ? undefined : onClick}
-      className={finalClassName}
-      contentClassName='font-semibold text-blue-500 text-md'
+      variant='secondary'
+      classes={{
+        root: rootClassName,
+        content,
+        icon: iconClassName,
+        iconLeft,
+        iconRight,
+        small,
+      }}
+      className={className}
+      size='small'
       active={active}
       hovered={hovered}
       focused={focused}