@toptal/picasso-button 1.0.10-alpha-FX-5195-fix-update-problems-902f38edb.16 → 1.0.10-alpha-feature-migrate-buttons-6d6012711.21

package/src/ButtonAction/styles.ts

@@ -1,58 +1,58 @@
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
+import type { IconPositionType } from '../ButtonBase'
 
-export default ({ palette, typography }: Theme) =>
-  createStyles({
-    root: {
-      border: 'none',
-      minWidth: 'unset',
-      paddingLeft: '0',
-      paddingRight: '0',
-      backgroundColor: 'transparent',
-      '&:active, &$active, &:hover, &$hovered': {
-        backgroundColor: 'transparent',
-        color: palette.blue.main,
-        textDecoration: 'underline',
-      },
-      '&$loading': {
-        textDecoration: 'none',
-        cursor: 'default',
-      },
-      '&$disabled': {
-        backgroundColor: 'transparent',
-        opacity: 0.48,
-      },
-    },
-    content: {
-      fontWeight: typography.fontWeights.semibold,
-      color: palette.blue.main,
-    },
-    small: {
-      '& $content': {
-        fontSize: '0.875rem',
-        lineHeight: '1.375rem',
-      },
-      '& $iconLeft': {
-        marginLeft: 0,
-      },
-      '& $iconRight': {
-        marginRight: 0,
-      },
-    },
-    icon: {
-      width: '1rem',
-      height: '1rem',
-      color: palette.grey.dark,
-    },
-    iconLeft: {
-      marginRight: '0.5rem',
-    },
-    iconRight: {
-      marginLeft: '0.5rem',
-    },
-    active: {},
-    disabled: {},
-    hovered: {},
-    focused: {},
-    loading: {},
-  })
+export const createRootClassNames = ({
+  disabled,
+  focused,
+  hovered,
+  active,
+  loading,
+}: {
+  disabled?: boolean
+  focused?: boolean
+  hovered?: boolean
+  active?: boolean
+  loading?: boolean
+}) => {
+  const classNames = ['border-none', 'px-0', 'bg-transparent', 'h-[1.5em]']
+
+  if (disabled) {
+    classNames.push('opacity-[.48]')
+  } else if (loading) {
+    classNames.push('no-underline')
+    classNames.push('!cursor-default')
+  } else {
+    classNames.push('hover:text-blue-500')
+    classNames.push('hover:underline')
+    classNames.push('active:text-blue-500')
+    classNames.push('active:underline')
+
+    if (hovered || active) {
+      classNames.push('text-blue-500')
+      classNames.push('underline')
+    }
+
+    classNames.push('focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)]')
+    classNames.push('focus-visible:rounded-sm')
+
+    if (focused) {
+      classNames.push('shadow-[0_0_0_3px_rgba(32,78,207,0.48)]')
+      classNames.push('rounded-sm')
+    }
+  }
+
+  return classNames
+}
+
+export const createIconClassNames = ({
+  iconPosition,
+}: {
+  iconPosition?: IconPositionType
+}): string[] => {
+  return [
+    'w-4',
+    'h-4',
+    'text-graphite-700',
+    iconPosition === 'left' ? 'mr-[0.5rem]' : '',
+    iconPosition === 'right' ? 'ml-[0.5rem]' : '',
+  ]
+}

package/src/ButtonBase/ButtonBase.tsx

@@ -0,0 +1,182 @@
+import type {
+  ReactNode,
+  ReactElement,
+  MouseEvent,
+  ElementType,
+  FC,
+} from 'react'
+import React, { forwardRef } from 'react'
+import { twMerge } from 'tailwind-merge'
+import type {
+  StandardProps,
+  ButtonOrAnchorProps,
+  OverridableComponent,
+  TextLabelProps,
+} from '@toptal/picasso-shared'
+import { useTitleCase } from '@toptal/picasso-shared'
+import { Button as MUIButtonBase } from '@mui/base/Button'
+import { Loader } from '@toptal/picasso-loader'
+import { Container } from '@toptal/picasso-container'
+import { noop, toTitleCase } from '@toptal/picasso-utils'
+
+import { createCoreClassNames } from './styles'
+
+export type IconPositionType = 'left' | 'right'
+
+export interface Props
+  extends StandardProps,
+    TextLabelProps,
+    ButtonOrAnchorProps {
+  as?: ElementType
+  /** Disables button */
+  disabled?: boolean
+  /** Content of Button component */
+  children?: ReactNode
+  /** ClassName for the content */
+  contentClassName?: string
+  /** Add an `<Icon />` along Button's children */
+  icon?: ReactElement
+  /** Icon can be positioned on the left or right */
+  iconPosition?: IconPositionType
+  /** Shows a loading indicator and disables click events */
+  loading?: boolean
+  /** Callback invoked when component is clicked */
+  onClick?: (event: MouseEvent<HTMLButtonElement & HTMLAnchorElement>) => void
+  /** HTML Value of Button component */
+  value?: string | number
+  /** HTML title of Button component */
+  title?: string
+  /** HTML type of Button component */
+  type?: 'button' | 'reset' | 'submit'
+}
+
+const getClickHandler = (loading?: boolean, handler?: Props['onClick']) =>
+  loading ? noop : handler
+
+const getIcon = ({ icon }: { icon?: ReactElement }) => {
+  if (!icon) {
+    return null
+  }
+
+  return React.cloneElement(icon, {
+    className: twMerge('text-[1.2em] flex-1', icon.props.className),
+    key: 'button-icon',
+  })
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const isReactComponent = (component: any) => {
+  return (
+    component &&
+    (component.$$typeof === Symbol.for('react.forward_ref') ||
+      typeof component === 'function')
+  )
+}
+
+export const ButtonBase: OverridableComponent<Props> = forwardRef<
+  HTMLButtonElement,
+  Props
+>(function ButtonBase(props, ref) {
+  const {
+    icon,
+    iconPosition,
+    loading,
+    children,
+    className,
+    contentClassName,
+    style,
+    disabled,
+    onClick,
+    title,
+    value,
+    type,
+    as = 'button',
+    titleCase: propsTitleCase,
+    ...rest
+  } = props
+
+  let RootElement: ElementType | FC = as
+
+  if (isReactComponent(RootElement)) {
+    RootElement = forwardRef(
+      // We don't need to pass ownerState to the root component
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      ({ ownerState, ...restProps }: { ownerState: object }, rootRef) => {
+        const Root = as
+
+        return <Root ref={rootRef} {...restProps} />
+      }
+    )
+  }
+
+  const titleCase = useTitleCase(propsTitleCase)
+  const finalChildren = [titleCase ? toTitleCase(children) : children]
+  const rootElementName =
+    as !== 'button' && ('href' in props || 'to' in props) ? 'a' : undefined
+
+  if (icon) {
+    const iconComponent = getIcon({ icon })
+
+    if (iconPosition === 'left') {
+      finalChildren.unshift(iconComponent)
+    } else {
+      finalChildren.push(iconComponent)
+    }
+  }
+
+  const finalClassName = twMerge(createCoreClassNames({ disabled }), className)
+
+  return (
+    <MUIButtonBase
+      {...rest}
+      ref={ref}
+      onClick={getClickHandler(loading, onClick)}
+      className={finalClassName}
+      style={style}
+      aria-disabled={disabled}
+      disabled={disabled}
+      title={title}
+      value={value}
+      type={type}
+      data-component-type='button'
+      tabIndex={rest.tabIndex ?? disabled ? -1 : 0}
+      role={rest.role ?? 'button'}
+      rootElementName={rootElementName}
+      slots={{ root: RootElement }}
+    >
+      <Container
+        as='span'
+        inline
+        flex
+        direction='row'
+        alignItems='center'
+        className={contentClassName}
+      >
+        {finalChildren}
+      </Container>
+
+      {loading && (
+        <Loader
+          variant='inherit'
+          className='absolute top-1/2 left-1/2 translate-x-[-50%] translate-y-[-50%]'
+          inline
+          size='small'
+        />
+      )}
+    </MUIButtonBase>
+  )
+})
+
+ButtonBase.defaultProps = {
+  as: 'button',
+  children: null,
+  disabled: false,
+  iconPosition: 'left',
+  loading: false,
+  onClick: noop,
+  type: 'button',
+}
+
+ButtonBase.displayName = 'ButtonBase'
+
+export default ButtonBase

package/src/ButtonBase/index.ts

@@ -0,0 +1,5 @@
+import type { Props } from './ButtonBase'
+
+export { default as ButtonBase } from './ButtonBase'
+export type { IconPositionType } from './ButtonBase'
+export type ButtonBaseProps = Props

package/src/ButtonBase/styles.ts

@@ -0,0 +1,36 @@
+export const createCoreClassNames = ({
+  disabled,
+  loading,
+}: {
+  disabled?: boolean
+  focused?: boolean
+  loading?: boolean
+}): string[] => {
+  const classNames = [
+    'text-lg',
+    'inline-flex',
+    'items-center',
+    'justify-center',
+    'select-none',
+    'appearance-none',
+    'm-0',
+    'relative',
+    'normal-case',
+    'align-middle',
+    'transition-colors',
+    'duration-350',
+    'ease-out',
+    'shrink-0',
+    'outline-none',
+    '[&+&]:ml-4',
+  ]
+
+  if (!disabled && !loading) {
+    classNames.push('cursor-pointer')
+  } else {
+    classNames.push('cursor-default')
+    classNames.push('pointer-events-none')
+  }
+
+  return classNames
+}

package/src/ButtonCheckbox/__snapshots__/test.tsx.snap

@@ -6,14 +6,14 @@ exports[`ButtonCheckbox renders 1`] = `
     class="Picasso-root"
   >
     <label
-      aria-disabled="false"
-      class="MuiButtonBase-root PicassoButton-medium PicassoButton-secondary PicassoButton-root PicassoButtonControlLabel-root PicassoButtonControlLabel-medium"
+      class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle transition-colors duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline rounded-sm shadow-none focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border border-solid text-black hover:border-black visited:text-black active:bg-gray active:border-black bg-white border-gray min-w h-8 py-0 px-4 PicassoButtonControlLabel-root PicassoButtonControlLabel-medium"
       data-component-type="button"
       role="button"
       tabindex="0"
+      type="button"
     >
       <span
-        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
+        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
       >
         <span
           class="PicassoContainer-flex PicassoContainer-inline PicassoCheckbox-checkboxWrapper"

package/src/ButtonCircular/ButtonCircular.tsx

@@ -1,17 +1,14 @@
 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,
   OverridableComponent,
 } from '@toptal/picasso-shared'
-import { kebabToCamelCase } from '@toptal/picasso-utils'
 
-import { Button } from '../Button'
-import styles from './styles'
+import { ButtonBase } from '../ButtonBase'
+import { createRootClassNames, createVariantClassNames } from './styles'
 
 export type VariantType = 'primary' | 'flat' | 'transparent'
 
@@ -40,14 +37,6 @@ export interface Props extends BaseProps, ButtonOrAnchorProps {
   responsive?: boolean
 }
 
-// Using { index: -1 } to inject CSS link to the bottom of the head
-// in order to prevent Button's styles to override ButtonCircular's ones
-// Related Jira issue: https://toptal-core.atlassian.net/browse/FX-1520
-const useStyles = makeStyles<Theme>(styles, {
-  name: 'PicassoButtonCircular',
-  index: -1,
-})
-
 export const ButtonCircular: OverridableComponent<Props> = forwardRef<
   HTMLButtonElement,
   Props
@@ -60,39 +49,35 @@ export const ButtonCircular: OverridableComponent<Props> = forwardRef<
     hovered,
     disabled,
     responsive,
+    loading,
     ...rest
   } = props
-  const classes = useStyles()
-
-  const { root: rootClass, focusVisible: focusVisibleClass } = classes
+  const variantClassNames = createVariantClassNames(variant, {
+    disabled,
+    focused,
+    hovered,
+    active,
+  })
 
-  const variantClassName = classes[kebabToCamelCase(variant)]
+  const finalClassName = cx(
+    createRootClassNames({ responsive, active, disabled, focused, hovered }),
+    variantClassNames,
+    className
+  )
 
-  const rootClassName = cx(
-    {
-      [classes.active]: active,
-      [classes.focused]: focused,
-      [classes.hovered]: hovered,
-      [classes.disabled]: disabled,
-      [classes.responsive]: responsive,
-    },
-    variantClassName,
-    rootClass
+  const contentClassName = cx(
+    'font-semibold whitespace-nowrap',
+    'text-button-small',
+    loading ? 'opacity-0' : ''
   )
 
   return (
-    <Button
+    <ButtonBase
       {...rest}
       ref={ref}
-      classes={{
-        root: rootClassName,
-        focusVisible: focusVisibleClass,
-      }}
-      className={className}
-      size='small'
-      active={active}
-      hovered={hovered}
-      focused={focused}
+      loading={loading}
+      className={finalClassName}
+      contentClassName={contentClassName}
       disabled={disabled}
     />
   )

package/src/ButtonCircular/styles.ts

@@ -1,75 +1,127 @@
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
-import { alpha, outline } from '@toptal/picasso-shared'
-import { screens } from '@toptal/picasso-provider'
-
-export default ({ palette }: Theme) =>
-  createStyles({
-    root: {
-      borderRadius: '50%',
-      padding: 0,
-      minWidth: 'initial',
-      width: '1.5em',
-    },
-
-    primary: {},
-
-    responsive: {
-      width: '2.5em',
-      height: '2.5em',
-      [screens('xl')]: {
-        width: '1.5em',
-        height: '1.5em',
-      },
-    },
-
-    flat: {
-      color: palette.grey.dark,
-      backgroundColor: 'initial',
-
-      '&:hover, &$hovered': {
-        backgroundColor: palette.grey.lighter2,
-      },
-
-      '&:active, &$active': {
-        backgroundColor: palette.grey.light2,
-      },
-
-      '&$disabled': {
-        opacity: 0.48,
-        color: palette.grey.dark,
-        backgroundColor: 'initial',
-      },
-
-      border: 'none',
-    },
-
-    transparent: {
-      border: 'none',
-      color: palette.common.white,
-      backgroundColor: 'initial',
-
-      '&$focusVisible, &$focused': {
-        ...outline(palette.common.white),
-      },
-
-      '&:hover, &$hovered': {
-        backgroundColor: alpha(palette.common.white, 0.08),
-      },
-
-      '&:active, &$active': {
-        backgroundColor: alpha(palette.common.white, 0.16),
-      },
-
-      '&$disabled': {
-        color: alpha(palette.common.white, 0.48),
-        backgroundColor: 'initial',
-      },
-    },
-
-    disabled: {},
-    hovered: {},
-    focused: {},
-    active: {},
-    focusVisible: {},
-  })
+import type { VariantType } from './ButtonCircular'
+
+export const createRootClassNames = ({
+  responsive,
+}: {
+  disabled?: boolean
+  focused?: boolean
+  hovered?: boolean
+  active?: boolean
+  loading?: boolean
+  responsive?: boolean
+}) => {
+  const classNames = ['rounded-full', 'p-0']
+
+  if (responsive) {
+    classNames.push('w-[2.5em] h-[2.5em] xl:w-[1.5em] xl:h-[1.5em]')
+  } else {
+    classNames.push('w-[1.5em] h-[1.5em]')
+  }
+
+  return classNames
+}
+
+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]')
+
+        variantClassNames.push(
+          'focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)]'
+        )
+        if (focused) {
+          variantClassNames.push('shadow-[0_0_0_3px_rgba(32,78,207,0.48)]')
+        }
+
+        if (hovered) {
+          variantClassNames.push('bg-[#4269D6]')
+        } else if (active) {
+          variantClassNames.push('bg-[#1A41AB]')
+        } else {
+          variantClassNames.push('bg-blue-500')
+        }
+      }
+      break
+    case 'flat':
+      variantClassNames.push('border-none')
+      variantClassNames.push('text-graphite-700')
+
+      if (disabled) {
+        variantClassNames.push('text-graphite-700')
+        variantClassNames.push('opacity-[0.48]')
+        variantClassNames.push('bg-transparent')
+      } else {
+        variantClassNames.push('hover:bg-gray-200')
+        variantClassNames.push('active:bg-gray-400')
+
+        variantClassNames.push(
+          'focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)]'
+        )
+        if (focused) {
+          variantClassNames.push('shadow-[0_0_0_3px_rgba(32,78,207,0.48)]')
+        }
+
+        if (hovered) {
+          variantClassNames.push('bg-gray-200')
+        } else if (active) {
+          variantClassNames.push('bg-gray-400')
+        } else {
+          variantClassNames.push('bg-transparent')
+        }
+      }
+      break
+    case 'transparent':
+      variantClassNames.push('border-none')
+      variantClassNames.push('text-white')
+
+      if (disabled) {
+        variantClassNames.push('text-white/[0.48]')
+        variantClassNames.push('bg-transparent')
+      } else {
+        variantClassNames.push('hover:bg-white/[0.08]')
+        variantClassNames.push('active:bg-white/[0.16]')
+
+        variantClassNames.push(
+          'focus-visible:shadow-[0_0_0_3px_rgba(255,255,255,0.48)]'
+        )
+        if (focused) {
+          variantClassNames.push('shadow-[0_0_0_3px_rgba(255,255,255,0.48)]')
+        }
+
+        if (hovered) {
+          variantClassNames.push('bg-white/[0.08]')
+        } else if (active) {
+          variantClassNames.push('bg-white/[0.16]')
+        } else {
+          variantClassNames.push('bg-transparent')
+        }
+      }
+
+      break
+  }
+
+  return variantClassNames
+}