@toptal/picasso-button 1.0.10-alpha-feature-migrate-buttons-d11d10471.27 → 1.0.10-alpha-FX-5195-fix-button-css-precedence-72b82fb59.19

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

@@ -6,14 +6,14 @@ exports[`ButtonCheckbox renders 1`] = `
     class="Picasso-root"
   >
     <label
-      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"
+      aria-disabled="false"
+      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"

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/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>
     )
   }

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

@@ -6,40 +6,40 @@ exports[`ButtonGroup render 1`] = `
     class="Picasso-root"
   >
     <div
-      class="flex justify-start [&>[data-component-type="button"]:hover]:z [&>[data-component-type="button"]:first-child:not(:last-child)]:rounded-r [&>[data-component-type="button"]:first-child:not(:last-child)]:ml [&>[data-component-type="button"]:not(:first-child):not(:last-child)]:rounded [&>[data-component-type="button"]:not(:first-child):not(:last-child)]:ml-[ [&>[data-component-type="button"]:last-child:not(:first-child)]:rounded-l [&>[data-component-type="button"]:last-child:not(:first-child)]:ml-[ [&_:first-child:not(:last-child)_[data-component-type="button"]]:rounded-r [&_:first-child:not(:last-child)_[data-component-type="button"]]:ml [&_:not(:first-child):not(:last-child)_[data-component-type="button"]]:rounded [&_:not(:first-child):not(:last-child)_[data-component-type="button"]]:ml-[ [&_:last-child:not(:first-child)_[data-component-type="button"]]:rounded-l [&_:last-child:not(:first-child)_[data-component-type="button"]]:ml-["
+      class="PicassoButtonGroup-root"
     >
       <button
-        class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle 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 bg-white min-w h-8 py-0 px-4 transition-[color,background] active:z-[1] hover:z-[1] focus-visible:z-[1] disabled:z-[1] visited:text-black border-solid active:bg-graphite active:border-graphite active:text-white hover:border-black border-gray text-black"
+        class="MuiButtonBase-root PicassoButton-medium PicassoButton-secondary PicassoButton-root PicassoButtonGroupItem-root PicassoButtonGroupItem-group"
         data-component-type="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"
         >
           One
         </span>
       </button>
       <button
-        class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle duration-350 ease-out shrink-0 outline-none [&+&]:ml-4 cursor-pointer no-underline rounded-sm focus-visible:shadow-[0_0_0_3px_rgba(32,78,207,0.48)] border min-w h-8 py-0 px-4 transition-[color,background] active:z-[1] hover:z-[1] focus-visible:z-[1] disabled:z-[1] z-[1] visited:text-black border-solid active:bg-graphite active:border-graphite active:text-white hover:border-black bg-graphite border-graphite text-white shadow-none"
+        class="MuiButtonBase-root PicassoButton-active PicassoButton-medium PicassoButton-secondary PicassoButton-root PicassoButtonGroupItem-root PicassoButtonGroupItem-group PicassoButtonGroupItem-active"
         data-component-type="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"
         >
           Two
         </span>
       </button>
       <button
-        class="base-Button text-lg inline-flex items-center justify-center select-none appearance-none m-0 relative normal-case align-middle 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 bg-white min-w h-8 py-0 px-4 transition-[color,background] active:z-[1] hover:z-[1] focus-visible:z-[1] disabled:z-[1] visited:text-black border-solid active:bg-graphite active:border-graphite active:text-white hover:border-black border-gray text-black"
+        class="MuiButtonBase-root PicassoButton-medium PicassoButton-secondary PicassoButton-root PicassoButtonGroupItem-root PicassoButtonGroupItem-group"
         data-component-type="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"
         >
           Three
         </span>

package/src/ButtonGroup/styles.ts

@@ -1,29 +1,71 @@
-export const createRootClassNames = () => {
-  const classNames: string[] = [
-    'flex',
-    'justify-start',
+import { createStyles } from '@material-ui/core/styles'
 
-    '[&>[data-component-type="button"]:hover]:z-[1]',
+const baseButtonProps = {
+  transitionProperty: 'color, background',
 
-    '[&>[data-component-type="button"]:first-child:not(:last-child)]:rounded-r-none',
-    '[&>[data-component-type="button"]:first-child:not(:last-child)]:ml-0',
+  '&:active, &$active, &:hover, &$hovered, &:focus, &$focused': {
+    // border overlap to keep proper border width, but on state change
+    // we need to move up overlapped border
+    zIndex: 1,
+  },
+}
+
+const firstButtonProps = {
+  borderTopRightRadius: 0,
+  borderBottomRightRadius: 0,
+  marginLeft: '0rem',
+}
+
+const middleButtonProps = {
+  borderRadius: 0,
+  // prevents border between 2 buttons to be wider then specified
+  marginLeft: '-1px',
+}
+
+const lastButtonProps = {
+  borderTopLeftRadius: 0,
+  borderBottomLeftRadius: 0,
+  // prevents border between 2 buttons to be wider then specified
+  marginLeft: '-1px',
+}
 
-    '[&>[data-component-type="button"]:not(:first-child):not(:last-child)]:rounded-none',
-    '[&>[data-component-type="button"]:not(:first-child):not(:last-child)]:ml-[-1px]',
+export default () =>
+  createStyles({
+    root: {
+      display: 'flex',
+      justifyContent: 'flex-start',
 
-    '[&>[data-component-type="button"]:last-child:not(:first-child)]:rounded-l-none',
-    '[&>[data-component-type="button"]:last-child:not(:first-child)]:ml-[-1px]',
+      // default case
+      '& [data-component-type="button"]': {
+        ...baseButtonProps,
 
-    // nested buttons
-    '[&_:first-child:not(:last-child)_[data-component-type="button"]]:rounded-r-none',
-    '[&_:first-child:not(:last-child)_[data-component-type="button"]]:ml-0',
+        // first item
+        '&:first-child:not(:last-child)': firstButtonProps,
+        // middle item
+        '&:not(:first-child):not(:last-child)': middleButtonProps,
+        // last item
+        '&:last-child:not(:first-child)': lastButtonProps,
+      },
 
-    '[&_:not(:first-child):not(:last-child)_[data-component-type="button"]]:rounded-none',
-    '[&_:not(:first-child):not(:last-child)_[data-component-type="button"]]:ml-[-1px]',
+      // nested case when button is nested in first item in ButtonGroup
+      '& :first-child:not(:last-child) [data-component-type="button"]': {
+        ...baseButtonProps,
+        ...firstButtonProps,
+      },
 
-    '[&_:last-child:not(:first-child)_[data-component-type="button"]]:rounded-l-none',
-    '[&_:last-child:not(:first-child)_[data-component-type="button"]]:ml-[-1px]',
-  ]
+      // nested case when button is nested in middle item in ButtonGroup
+      '& :not(:first-child):not(:last-child) [data-component-type="button"]': {
+        ...baseButtonProps,
+        ...middleButtonProps,
+      },
 
-  return classNames
-}
+      // nested case when button is nested in last item in ButtonGroup
+      '& :last-child:not(:first-child) [data-component-type="button"]': {
+        ...baseButtonProps,
+        ...lastButtonProps,
+      },
+    },
+    active: {},
+    focused: {},
+    hovered: {},
+  })