@toptal/picasso-button 1.0.10-alpha-feature-migrate-buttons-876f8c430.20 → 1.0.10-alpha-FX-5195-fix-button-css-precedence-06be01cc1.19

package/src/Button/Button.tsx

@@ -1,26 +1,31 @@
 import type { ReactNode, ReactElement, MouseEvent, ElementType } from 'react'
 import React, { forwardRef } from 'react'
 import cx from 'classnames'
-import { twMerge } from 'tailwind-merge'
 import type {
   StandardProps,
   SizeType,
   ButtonOrAnchorProps,
   OverridableComponent,
   TextLabelProps,
+  Classes,
 } from '@toptal/picasso-shared'
-import { noop } from '@toptal/picasso-utils'
-// we need to ensure the correct order of styles import
-// @TODO: to be removed when the component is migrated in FX-4614
-import '@toptal/picasso-link'
-
-import { ButtonBase } from '../ButtonBase'
-import {
-  createVariantClassNames,
-  createCoreClassNames,
-  createSizeClassNames,
-  createIconClassNames,
-} from './styles'
+import { useTitleCase } from '@toptal/picasso-shared'
+import type { Theme } from '@material-ui/core'
+import { makeStyles, ButtonBase } from '@material-ui/core'
+import { Loader } from '@toptal/picasso-loader'
+import { Container } from '@toptal/picasso-container'
+import { noop, toTitleCase } from '@toptal/picasso-utils'
+
+import styles from './styles'
+
+// Using { index: -50 } to inject CSS link to the bottom of the head
+// in order to prevent Link and Typography styles to override Button's ones
+// More specific button components like ButtonCircular, ButtonSplit, ButtonControlLabel, ButtonAction
+// have even lower indexes, so higher priority
+const useStyles = makeStyles<Theme, Props>(styles, {
+  name: 'PicassoButton',
+  index: -50,
+})
 
 export type VariantType =
   | 'primary'
@@ -67,28 +72,31 @@ export interface Props
   type?: 'button' | 'reset' | 'submit'
 }
 
-const getIcon = ({
-  children,
-  icon,
-  iconPosition,
-  size,
-}: {
-  children: ReactNode
-  icon?: ReactElement
+const getClickHandler = (loading?: boolean, handler?: Props['onClick']) =>
+  loading ? noop : handler
+
+const getIcon = (
+  classes: Classes,
+  children: ReactNode,
+  icon?: ReactElement,
   iconPosition?: IconPositionType
-  size: SizeType<'small' | 'medium' | 'large'>
-}) => {
+) => {
   if (!icon) {
-    return undefined
+    return null
   }
 
-  const iconClassNames = createIconClassNames({
-    size,
-    iconPosition: children && iconPosition ? iconPosition : undefined,
-  })
+  const {
+    icon: iconClass,
+    iconLeft: iconLeftClass,
+    iconRight: iconRightClass,
+  } = classes
 
   return React.cloneElement(icon, {
-    className: twMerge(iconClassNames, icon.props.className),
+    className: cx(iconClass, icon.props.className, {
+      [iconLeftClass]: children && iconPosition === 'left',
+      [iconRightClass]: children && iconPosition === 'right',
+    }),
+    key: 'button-icon',
   })
 }
 
@@ -100,7 +108,9 @@ export const Button: OverridableComponent<Props> = forwardRef<
     icon,
     iconPosition,
     loading,
+    children,
     className,
+    style,
     fullWidth,
     variant = 'primary',
     size = 'medium',
@@ -108,63 +118,86 @@ export const Button: OverridableComponent<Props> = forwardRef<
     hovered,
     disabled,
     active,
+    onClick,
+    title,
+    value,
+    type,
+    as = 'button',
+    titleCase: propsTitleCase,
     ...rest
   } = props
+  const classes = useStyles(props)
 
-  const iconComponent = getIcon({
-    children: rest.children,
-    icon,
-    iconPosition,
-    size,
-  })
-  const coreClassNames = createCoreClassNames({
-    disabled,
-    focused,
-    hovered,
-    active,
-  })
-  const variantClassNames = createVariantClassNames(variant, {
-    disabled,
-    focused,
-    hovered,
-    active,
-  })
-  const sizeClassNames = createSizeClassNames(size)
-
-  const finalClassName = twMerge(
-    coreClassNames,
-    variantClassNames,
-    sizeClassNames,
-    fullWidth ? 'w-full' : '',
-    className
-  )
+  const {
+    root: rootClass,
+    hidden: hiddenClass,
+    loader: loaderClass,
+    content: contentClass,
+  } = classes
+
+  const titleCase = useTitleCase(propsTitleCase)
+
+  const finalChildren = [titleCase ? toTitleCase(children) : children]
+
+  if (icon) {
+    const iconComponent = getIcon(classes, children, icon, iconPosition)
 
-  const contentSizeClassNames: Record<
-    SizeType<'small' | 'medium' | 'large'>,
-    string[]
-  > = {
-    small: ['text-button-small'],
-    medium: ['text-button-medium'],
-    large: ['text-button-large'],
+    if (iconPosition === 'left') {
+      finalChildren.unshift(iconComponent)
+    } else {
+      finalChildren.push(iconComponent)
+    }
   }
 
-  const contentClassName = cx(
-    'font-semibold whitespace-nowrap',
-    contentSizeClassNames[size],
-    loading ? 'opacity-0' : ''
+  const variantClassName = classes[variant]
+  const sizeClassName = classes[size]
+
+  const rootClassName = cx(
+    {
+      [classes.fullWidth]: fullWidth,
+      [classes.active]: active,
+      [classes.focused]: focused,
+      [classes.hovered]: hovered,
+      [classes.disabled]: disabled,
+    },
+    sizeClassName,
+    variantClassName,
+    rootClass
   )
 
   return (
     <ButtonBase
       {...rest}
       ref={ref}
-      className={finalClassName}
-      contentClassName={contentClassName}
-      icon={iconComponent}
-      iconPosition={iconPosition}
-      loading={loading}
+      classes={{
+        root: rootClassName,
+        focusVisible: cx(classes.focusVisible),
+      }}
+      onClick={getClickHandler(loading, onClick)}
+      className={className}
+      style={style}
       disabled={disabled}
-    />
+      title={title}
+      value={value}
+      type={type}
+      component={as}
+      data-component-type='button'
+    >
+      <Container
+        as='span'
+        inline
+        flex
+        direction='row'
+        alignItems='center'
+        className={cx({ [hiddenClass]: loading }, contentClass)}
+      >
+        {finalChildren}
+      </Container>
+
+      {loading && (
+        <Loader variant='inherit' className={loaderClass} inline size='small' />
+      )}
+    </ButtonBase>
   )
 })
 

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

@@ -7,14 +7,13 @@ exports[`Button disabled button as link renders disabled version 1`] = `
   >
     <a
       aria-disabled="true"
-      class="MuiTypography-root MuiLink-root MuiLink-underlineHover PicassoLink-root base-Button base- 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-default pointer-events no-underline rounded-sm shadow-none border-none text-white visited:text-white bg-gray min-w h-8 py-0 px-4 PicassoLink-blue MuiTypography-colorPrimary"
+      class="MuiTypography-root MuiLink-root MuiLink-underlineHover PicassoLink-root MuiButtonBase-root PicassoButton-disabled PicassoButton-medium PicassoButton-primary PicassoButton-root Mui-disabled PicassoLink-blue MuiTypography-colorPrimary"
       data-component-type="button"
-      href="URL"
+      role="button"
       tabindex="-1"
-      type="button"
     >
       <span
-        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
+        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
       >
         Click me!
       </span>
@@ -29,14 +28,14 @@ exports[`Button disabled button renders disabled version 1`] = `
     class="Picasso-root"
   >
     <button
-      class="base-Button base- 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-default pointer-events no-underline rounded-sm shadow-none border-none text-white visited:text-white bg-gray min-w h-8 py-0 px-4"
+      class="MuiButtonBase-root PicassoButton-disabled PicassoButton-medium PicassoButton-primary PicassoButton-root Mui-disabled"
       data-component-type="button"
       disabled=""
       tabindex="-1"
       type="button"
     >
       <span
-        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline font-semibold whitespace-nowrap text-button"
+        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline PicassoButton-content"
       >
         Click me!
       </span>