@toptal/picasso-button 1.0.13-alpha-fx-5263-merge-feature-branch-d124b1f9a.10 → 1.0.13-alpha-fx-4593-migrate-tag-4f7c872c8.4

package/src/ButtonAction/styles.ts

@@ -1,58 +1,58 @@
-import type { IconPositionType } from '../ButtonBase'
+import type { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/core/styles'
 
-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]' : '',
-  ]
-}
+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: {},
+  })

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

@@ -7,14 +7,13 @@ exports[`ButtonCheckbox renders 1`] = `
   >
     <label
       aria-disabled="false"
-      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)] focus-within: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 px-4 text-center py-2 pr-6 pl-4"
+      class="MuiButtonBase-root PicassoButton-medium PicassoButton-secondary PicassoButton-root PicassoButtonControlLabel-root PicassoButtonControlLabel-medium"
       data-component-type="button"
       role="button"
       tabindex="0"
-      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"
       >
         <span
           class="PicassoContainer-flex PicassoContainer-inline PicassoCheckbox-checkboxWrapper"
@@ -39,7 +38,7 @@ exports[`ButtonCheckbox renders 1`] = `
           </span>
         </span>
         <div
-          class="min-w"
+          class="PicassoButtonControlLabel-content"
           style="margin-left: 0.5rem;"
         >
           Click me!

package/src/ButtonCircular/ButtonCircular.tsx

@@ -1,14 +1,17 @@
 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 { ButtonBase } from '../ButtonBase'
-import { createRootClassNames, createVariantClassNames } from './styles'
+import { Button } from '../Button'
+import styles from './styles'
 
 export type VariantType = 'primary' | 'flat' | 'transparent'
 
@@ -37,6 +40,14 @@ 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
@@ -49,35 +60,39 @@ export const ButtonCircular: OverridableComponent<Props> = forwardRef<
     hovered,
     disabled,
     responsive,
-    loading,
     ...rest
   } = props
-  const variantClassNames = createVariantClassNames(variant, {
-    disabled,
-    focused,
-    hovered,
-    active,
-  })
+  const classes = useStyles()
 
-  const finalClassName = cx(
-    createRootClassNames({ responsive, active, disabled, focused, hovered }),
-    variantClassNames,
-    className
-  )
+  const { root: rootClass, focusVisible: focusVisibleClass } = classes
+
+  const variantClassName = classes[kebabToCamelCase(variant)]
 
-  const contentClassName = cx(
-    'font-semibold whitespace-nowrap',
-    'text-button-small',
-    loading ? 'opacity-0' : ''
+  const rootClassName = cx(
+    {
+      [classes.active]: active,
+      [classes.focused]: focused,
+      [classes.hovered]: hovered,
+      [classes.disabled]: disabled,
+      [classes.responsive]: responsive,
+    },
+    variantClassName,
+    rootClass
   )
 
   return (
-    <ButtonBase
+    <Button
       {...rest}
       ref={ref}
-      loading={loading}
-      className={finalClassName}
-      contentClassName={contentClassName}
+      classes={{
+        root: rootClassName,
+        focusVisible: focusVisibleClass,
+      }}
+      className={className}
+      size='small'
+      active={active}
+      hovered={hovered}
+      focused={focused}
       disabled={disabled}
     />
   )

package/src/ButtonCircular/styles.ts

@@ -1,127 +1,75 @@
-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
-}
+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: {},
+  })

package/src/ButtonControlLabel/ButtonControlLabel.tsx

@@ -1,11 +1,13 @@
 import type { ReactElement, ReactNode } from 'react'
 import React from 'react'
 import type { BaseProps, SizeType } from '@toptal/picasso-shared'
-import { twMerge } from 'tailwind-merge'
+import type { Theme } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core'
+import cx from 'classnames'
 import { Container } from '@toptal/picasso-container'
 
 import { Button } from '../Button'
-import { createSizeClassNames, createContentSizeClassNames } from './styles'
+import styles from './styles'
 
 export interface Props extends BaseProps {
   /** Show the control initially as checked */
@@ -35,6 +37,14 @@ export interface Props extends BaseProps {
   control: ReactElement
 }
 
+// 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: 'PicassoButtonControlLabel',
+  index: -1,
+})
+
 const ButtonControlLabel = ({
   children,
   size = 'medium',
@@ -47,12 +57,14 @@ const ButtonControlLabel = ({
   disabled,
   ...props
 }: Props) => {
+  const classes = useStyles()
+
   const contentLeftSpacing = size === 'large' ? 1 : 0.5
 
   return (
     <Button
       {...props}
-      className={twMerge('text-center', createSizeClassNames(size), className)}
+      className={cx(className, classes.root, classes[size])}
       variant='secondary'
       size={size}
       as='label'
@@ -60,10 +72,7 @@ const ButtonControlLabel = ({
       disabled={disabled}
     >
       {React.cloneElement(control, { id, checked, value, onChange, disabled })}
-      <Container
-        className={createContentSizeClassNames(size)}
-        left={contentLeftSpacing}
-      >
+      <Container className={classes.content} left={contentLeftSpacing}>
         {children}
       </Container>
     </Button>

package/src/ButtonControlLabel/styles.ts

@@ -1,31 +1,27 @@
-import type { SizeType } from '@toptal/picasso-shared'
+import { createStyles } from '@material-ui/core/styles'
 
-export const createSizeClassNames = (
-  size: 'small' | 'medium' | 'large'
-): string => {
-  const sizeClassNames: Record<
-    SizeType<'small' | 'medium' | 'large'>,
-    string
-  > = {
-    small: 'py-1 pr-4 pl-2',
-    medium: 'py-2 pr-6 pl-4',
-    large: 'py-4 pr-8 pl-4',
-  }
-
-  return sizeClassNames[size]
-}
-
-export const createContentSizeClassNames = (
-  size: 'small' | 'medium' | 'large'
-): string => {
-  const sizeClassNames: Record<
-    SizeType<'small' | 'medium' | 'large'>,
-    string
-  > = {
-    small: 'min-w-12',
-    medium: 'min-w-16',
-    large: 'min-w-[5.25rem]',
-  }
-
-  return sizeClassNames[size]
-}
+export default () =>
+  createStyles({
+    root: {
+      textAlign: 'center',
+      padding: '0.5rem 1.5rem 0.5rem 1rem',
+      '&$small': {
+        padding: '0.25rem 1rem 0.25rem 0.5rem',
+      },
+      '&$large': {
+        padding: '1rem 2rem 1rem 1rem',
+      },
+    },
+    content: {
+      minWidth: 64,
+      '$small &': {
+        minWidth: 48,
+      },
+      '$large &': {
+        minWidth: 84,
+      },
+    },
+    small: {},
+    medium: {},
+    large: {},
+  })

package/src/ButtonGroup/ButtonGroup.tsx

@@ -1,25 +1,60 @@
-import type { ReactNode, HTMLAttributes } from 'react'
-import React, { forwardRef } from 'react'
-import { twMerge } from 'tailwind-merge'
-import type { BaseProps } from '@toptal/picasso-shared'
+import type { ReactNode, HTMLAttributes, ElementType } from 'react'
+import React, { forwardRef, useMemo } from 'react'
+import type { Theme } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/core/styles'
+import cx from 'classnames'
+import type { BaseProps, Classes } from '@toptal/picasso-shared'
+import { addClassesToChildren } from '@toptal/picasso-shared'
 
+import { Button } from '../Button'
 import { ButtonGroupItem } from '../ButtonGroupItem'
-import { createRootClassNames } from './styles'
+import styles from './styles'
 
 export interface Props extends BaseProps, HTMLAttributes<HTMLDivElement> {
   /** List of `Button` components which you want to render as `ButtonGroup` */
   children: ReactNode
 }
 
+const useStyles = makeStyles<Theme>(styles, {
+  name: 'PicassoButtonGroup',
+})
+
+const getChildrenClassesConfig = (
+  classes: Classes
+): [ElementType, Classes][] => [
+  [
+    Button,
+    {
+      root: classes.button,
+      active: classes.active,
+      focused: classes.focused,
+      hovered: classes.hovered,
+    },
+  ],
+]
+
 export const ButtonGroup = forwardRef<HTMLDivElement, Props>(
   function ButtonGroup(props, ref) {
     const { children, className, style, ...rest } = props
-
-    const finalClassName = twMerge(createRootClassNames(), className)
+    const classes = useStyles()
+    const childrenWithClasses = useMemo(
+      () =>
+        addClassesToChildren({
+          children,
+          classes,
+          config: getChildrenClassesConfig,
+        }),
+      [children, classes]
+    )
 
     return (
-      <div {...rest} ref={ref} className={finalClassName} style={style}>
-        {children}
+      <div
+        {...rest}
+        ref={ref}
+        className={cx(classes.root, className)}
+        style={style}
+      >
+        {childrenWithClasses}
       </div>
     )
   }