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

package/dist-package/src/ButtonSplit/styles.d.ts

@@ -1,4 +1,10 @@
-import type { Theme } from '@material-ui/core/styles';
-declare const _default: ({ palette }: Theme) => import("@material-ui/styles").StyleRules<{}, "disabled" | "actionButton" | "menuButton" | "primaryVariant" | "smallSize" | "mediumSize" | "largeSize" | "dropdown" | "rotated">;
-export default _default;
+import type { SizeType } from '@toptal/picasso-shared';
+export declare const createActionButtonClassNames: ({ variant, }: {
+    variant?: "primary" | "secondary" | undefined;
+}) => string;
+export declare const createMenuButtonClassNames: ({ variant, size, disabled, }: {
+    variant?: "primary" | "secondary" | undefined;
+    size: SizeType<'small' | 'medium' | 'large'>;
+    disabled?: boolean | undefined;
+}) => string;
 //# sourceMappingURL=styles.d.ts.map

package/dist-package/src/ButtonSplit/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/ButtonSplit/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;sCAGxB,KAAK;AAAlC,wBAuDI"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/ButtonSplit/styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAA;AAGtD,eAAO,MAAM,4BAA4B;;YAUxC,CAAA;AAWD,eAAO,MAAM,0BAA0B;;UAM/B,SAAS,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAC;;YAS7C,CAAA"}

package/dist-package/src/ButtonSplit/styles.js

@@ -1,51 +1,14 @@
-import { createStyles } from '@material-ui/core/styles';
-export default ({ palette }) => createStyles({
-    actionButton: {
-        borderTopRightRadius: 0,
-        borderBottomRightRadius: 0,
-    },
-    menuButton: {
-        minWidth: '2em',
-        paddingLeft: '0.5em',
-        paddingRight: '0.5em',
-        borderTopLeftRadius: 0,
-        borderBottomLeftRadius: 0,
-        marginLeft: 0,
-    },
-    primaryVariant: {
-        '&$actionButton': {
-            borderRight: `1px solid ${palette.blue.darker}`,
-        },
-        '&$menuButton': {
-            borderLeft: `1px solid ${palette.blue.darker}`,
-            '&$disabled': {
-                borderLeftColor: palette.grey.main,
-            },
-        },
-    },
-    smallSize: {
-        minWidth: '1.5em',
-        paddingLeft: '0.25em',
-        paddingRight: '0.25em',
-    },
-    mediumSize: {},
-    largeSize: {
-        minWidth: '3em',
-        paddingLeft: '0.75em',
-        paddingRight: '0.75em',
-    },
-    dropdown: {
-        display: 'block',
-        cursor: 'pointer',
-    },
-    disabled: {
-        // override dropdown anchor styles
-        '& > div': {
-            cursor: 'auto',
-        },
-    },
-    rotated: {
-        transform: 'rotate(180deg)',
-    },
-});
+import { twMerge } from 'tailwind-merge';
+export const createActionButtonClassNames = ({ variant, }) => {
+    return twMerge('transition-[color,background]', variant === 'primary' &&
+        'border-r border-l-0 border-y-0 border-solid border-blue-700');
+};
+const menuButtonSizeClassNames = {
+    small: 'min-w-[1.5em] px-[0.25em]',
+    medium: 'min-w-[2em] px-[0.5em]',
+    large: 'min-w-[3em] px-[0.75em]',
+};
+export const createMenuButtonClassNames = ({ variant, size, disabled, }) => {
+    return twMerge(menuButtonSizeClassNames[size], variant === 'primary' && 'border-l border-r-0 border-y-0 border-solid', variant === 'primary' && disabled && 'border-gray-500', variant === 'primary' && !disabled && 'border-blue-700');
+};
 //# sourceMappingURL=styles.js.map

package/dist-package/src/ButtonSplit/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/ButtonSplit/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEvD,eAAe,CAAC,EAAE,OAAO,EAAS,EAAE,EAAE,CACpC,YAAY,CAAC;IACX,YAAY,EAAE;QACZ,oBAAoB,EAAE,CAAC;QACvB,uBAAuB,EAAE,CAAC;KAC3B;IACD,UAAU,EAAE;QACV,QAAQ,EAAE,KAAK;QACf,WAAW,EAAE,OAAO;QACpB,YAAY,EAAE,OAAO;QACrB,mBAAmB,EAAE,CAAC;QACtB,sBAAsB,EAAE,CAAC;QACzB,UAAU,EAAE,CAAC;KACd;IAED,cAAc,EAAE;QACd,gBAAgB,EAAE;YAChB,WAAW,EAAE,aAAa,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE;SAChD;QACD,cAAc,EAAE;YACd,UAAU,EAAE,aAAa,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE;YAE9C,YAAY,EAAE;gBACZ,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;aACnC;SACF;KACF;IAED,SAAS,EAAE;QACT,QAAQ,EAAE,OAAO;QACjB,WAAW,EAAE,QAAQ;QACrB,YAAY,EAAE,QAAQ;KACvB;IACD,UAAU,EAAE,EAAE;IACd,SAAS,EAAE;QACT,QAAQ,EAAE,KAAK;QACf,WAAW,EAAE,QAAQ;QACrB,YAAY,EAAE,QAAQ;KACvB;IAED,QAAQ,EAAE;QACR,OAAO,EAAE,OAAO;QAChB,MAAM,EAAE,SAAS;KAClB;IAED,QAAQ,EAAE;QACR,kCAAkC;QAClC,SAAS,EAAE;YACT,MAAM,EAAE,MAAM;SACf;KACF;IAED,OAAO,EAAE;QACP,SAAS,EAAE,gBAAgB;KAC5B;CACF,CAAC,CAAA"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/ButtonSplit/styles.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA;AAExC,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,EAC3C,OAAO,GAGR,EAAE,EAAE;IACH,OAAO,OAAO,CACZ,+BAA+B,EAC/B,OAAO,KAAK,SAAS;QACnB,6DAA6D,CAChE,CAAA;AACH,CAAC,CAAA;AAED,MAAM,wBAAwB,GAG1B;IACF,KAAK,EAAE,2BAA2B;IAClC,MAAM,EAAE,wBAAwB;IAChC,KAAK,EAAE,yBAAyB;CACjC,CAAA;AAED,MAAM,CAAC,MAAM,0BAA0B,GAAG,CAAC,EACzC,OAAO,EACP,IAAI,EACJ,QAAQ,GAKT,EAAE,EAAE;IACH,OAAO,OAAO,CACZ,wBAAwB,CAAC,IAAI,CAAC,EAC9B,OAAO,KAAK,SAAS,IAAI,6CAA6C,EACtE,OAAO,KAAK,SAAS,IAAI,QAAQ,IAAI,iBAAiB,EACtD,OAAO,KAAK,SAAS,IAAI,CAAC,QAAQ,IAAI,iBAAiB,CACxD,CAAA;AACH,CAAC,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-button",
-  "version": "1.0.10-alpha-FX-5195-fix-button-css-precedence-bb0862d3c.18+bb0862d3c",
+  "version": "1.0.10-alpha-feature-migrate-buttons-d11d10471.27+d11d10471",
   "description": "Toptal UI components library - Button",
   "publishConfig": {
     "access": "public"
@@ -22,17 +22,19 @@
   },
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
   "dependencies": {
-    "@toptal/picasso-checkbox": "1.0.7-alpha-FX-5195-fix-button-css-precedence-bb0862d3c.26+bb0862d3c",
-    "@toptal/picasso-container": "1.0.3-alpha-FX-5195-fix-button-css-precedence-bb0862d3c.55+bb0862d3c",
-    "@toptal/picasso-dropdown": "2.0.1-alpha-FX-5195-fix-button-css-precedence-bb0862d3c.29+bb0862d3c",
-    "@toptal/picasso-icons": "1.0.3-alpha-FX-5195-fix-button-css-precedence-bb0862d3c.55+bb0862d3c",
-    "@toptal/picasso-link": "1.0.3-alpha-FX-5195-fix-button-css-precedence-bb0862d3c.55+bb0862d3c",
-    "@toptal/picasso-loader": "1.0.3-alpha-FX-5195-fix-button-css-precedence-bb0862d3c.55+bb0862d3c",
-    "@toptal/picasso-radio": "1.0.7-alpha-FX-5195-fix-button-css-precedence-bb0862d3c.26+bb0862d3c",
-    "@toptal/picasso-shared": "14.0.2-alpha-FX-5195-fix-button-css-precedence-bb0862d3c.55+bb0862d3c",
-    "@toptal/picasso-utils": "1.0.3-alpha-FX-5195-fix-button-css-precedence-bb0862d3c.55+bb0862d3c",
+    "@mui/base": "5.0.0-beta.40",
+    "@toptal/picasso-checkbox": "1.0.7-alpha-feature-migrate-buttons-d11d10471.35+d11d10471",
+    "@toptal/picasso-container": "1.0.3-alpha-feature-migrate-buttons-d11d10471.64+d11d10471",
+    "@toptal/picasso-dropdown": "2.0.1-alpha-feature-migrate-buttons-d11d10471.38+d11d10471",
+    "@toptal/picasso-icons": "1.0.3-alpha-feature-migrate-buttons-d11d10471.64+d11d10471",
+    "@toptal/picasso-link": "1.0.3-alpha-feature-migrate-buttons-d11d10471.64+d11d10471",
+    "@toptal/picasso-loader": "1.0.3-alpha-feature-migrate-buttons-d11d10471.64+d11d10471",
+    "@toptal/picasso-radio": "1.0.7-alpha-feature-migrate-buttons-d11d10471.35+d11d10471",
+    "@toptal/picasso-shared": "14.0.2-alpha-feature-migrate-buttons-d11d10471.64+d11d10471",
+    "@toptal/picasso-utils": "1.0.3-alpha-feature-migrate-buttons-d11d10471.64+d11d10471",
     "ap-style-title-case": "^1.1.2",
-    "classnames": "^2.5.1"
+    "classnames": "^2.5.1",
+    "tailwind-merge": "^2.2.2"
   },
   "sideEffects": [
     "**/styles.ts",
@@ -41,19 +43,21 @@
   "peerDependencies": {
     "@material-ui/core": "4.12.4",
     "@toptal/picasso-provider": "*",
-    "react": ">=16.12.0 < 19.0.0"
+    "@toptal/picasso-tailwind": ">=2.0.1",
+    "react": ">=16.12.0 < 19.0.0",
+    "tailwindcss": ">=3"
   },
   "exports": {
     ".": "./dist-package/src/index.js"
   },
   "devDependencies": {
-    "@toptal/picasso-provider": "4.2.1-alpha-FX-5195-fix-button-css-precedence-bb0862d3c.26+bb0862d3c",
-    "@toptal/picasso-test-utils": "1.1.1-alpha-FX-5195-fix-button-css-precedence-bb0862d3c.47+bb0862d3c"
+    "@toptal/picasso-provider": "4.2.1-alpha-feature-migrate-buttons-d11d10471.35+d11d10471",
+    "@toptal/picasso-test-utils": "1.1.1-alpha-feature-migrate-buttons-d11d10471.56+d11d10471"
   },
   "files": [
     "dist-package/**",
     "!dist-package/tsconfig.tsbuildinfo",
     "src"
   ],
-  "gitHead": "bb0862d3c4ccf0de0695d70dc919ebba36c881b0"
+  "gitHead": "d11d1047100fb9cfe39e7d0f98884130f8d07543"
 }

package/src/Button/Button.tsx

@@ -1,27 +1,26 @@
 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 { 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'
-
-const useStyles = makeStyles<Theme, Props>(styles, {
-  name: 'PicassoButton',
-  index: 1,
-})
+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'
 
 export type VariantType =
   | 'primary'
@@ -68,31 +67,28 @@ export interface Props
   type?: 'button' | 'reset' | 'submit'
 }
 
-const getClickHandler = (loading?: boolean, handler?: Props['onClick']) =>
-  loading ? noop : handler
-
-const getIcon = (
-  classes: Classes,
-  children: ReactNode,
-  icon?: ReactElement,
+const getIcon = ({
+  children,
+  icon,
+  iconPosition,
+  size,
+}: {
+  children: ReactNode
+  icon?: ReactElement
   iconPosition?: IconPositionType
-) => {
+  size: SizeType<'small' | 'medium' | 'large'>
+}) => {
   if (!icon) {
-    return null
+    return undefined
   }
 
-  const {
-    icon: iconClass,
-    iconLeft: iconLeftClass,
-    iconRight: iconRightClass,
-  } = classes
+  const iconClassNames = createIconClassNames({
+    size,
+    iconPosition: children && iconPosition ? iconPosition : undefined,
+  })
 
   return React.cloneElement(icon, {
-    className: cx(iconClass, icon.props.className, {
-      [iconLeftClass]: children && iconPosition === 'left',
-      [iconRightClass]: children && iconPosition === 'right',
-    }),
-    key: 'button-icon',
+    className: twMerge(iconClassNames, icon.props.className),
   })
 }
 
@@ -104,9 +100,7 @@ export const Button: OverridableComponent<Props> = forwardRef<
     icon,
     iconPosition,
     loading,
-    children,
     className,
-    style,
     fullWidth,
     variant = 'primary',
     size = 'medium',
@@ -114,86 +108,63 @@ export const Button: OverridableComponent<Props> = forwardRef<
     hovered,
     disabled,
     active,
-    onClick,
-    title,
-    value,
-    type,
-    as = 'button',
-    titleCase: propsTitleCase,
     ...rest
   } = props
-  const classes = useStyles(props)
-
-  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 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
+  )
 
-    if (iconPosition === 'left') {
-      finalChildren.unshift(iconComponent)
-    } else {
-      finalChildren.push(iconComponent)
-    }
+  const contentSizeClassNames: Record<
+    SizeType<'small' | 'medium' | 'large'>,
+    string[]
+  > = {
+    small: ['text-button-small'],
+    medium: ['text-button-medium'],
+    large: ['text-button-large'],
   }
 
-  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
+  const contentClassName = cx(
+    'font-semibold whitespace-nowrap',
+    contentSizeClassNames[size],
+    loading ? 'opacity-0' : ''
   )
 
   return (
     <ButtonBase
       {...rest}
       ref={ref}
-      classes={{
-        root: rootClassName,
-        focusVisible: cx(classes.focusVisible),
-      }}
-      onClick={getClickHandler(loading, onClick)}
-      className={className}
-      style={style}
+      className={finalClassName}
+      contentClassName={contentClassName}
+      icon={iconComponent}
+      iconPosition={iconPosition}
+      loading={loading}
       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,13 +7,14 @@ exports[`Button disabled button as link renders disabled version 1`] = `
   >
     <a
       aria-disabled="true"
-      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"
+      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"
       data-component-type="button"
-      role="button"
+      href="URL"
       tabindex="-1"
+      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"
       >
         Click me!
       </span>
@@ -28,14 +29,14 @@ exports[`Button disabled button renders disabled version 1`] = `
     class="Picasso-root"
   >
     <button
-      class="MuiButtonBase-root PicassoButton-disabled PicassoButton-medium PicassoButton-primary PicassoButton-root Mui-disabled"
+      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"
       data-component-type="button"
       disabled=""
       tabindex="-1"
       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"
       >
         Click me!
       </span>