@toptal/picasso-button 1.0.13 → 2.0.0

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,186 @@
+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]
+  /*
+   Workaround for the case: <Button as={Link} href='' /> (with empty href!), we have to determine "rootElementName" like below
+   Mui/base throws an error when "href" or "to" are empty
+   */
+  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/__snapshots__/test.tsx.snap

@@ -0,0 +1,286 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ButtonBase when "as" prop is passed when "as" prop does not equal "button" when "href" prop is passed renders Button as a link 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <span
+      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"
+      data-component-type="button"
+      href="/"
+      role="button"
+      tabindex="0"
+      type="button"
+    >
+      <span
+        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline"
+      >
+        Click me!
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`ButtonBase when "as" prop is passed when "as" prop does not equal "button" when "to" prop is passed renders Button as a link 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <span
+      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"
+      data-component-type="button"
+      role="button"
+      tabindex="0"
+      to="/"
+      type="button"
+    >
+      <span
+        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline"
+      >
+        Click me!
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`ButtonBase when "as" prop is passed when "as" prop equals "Link" component renders Button as a 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <a
+      aria-disabled="false"
+      class="MuiTypography-root MuiLink-root MuiLink-underlineHover PicassoLink-root 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 PicassoLink-blue MuiTypography-colorPrimary"
+      data-component-type="button"
+      href="URL"
+      role="button"
+      tabindex="0"
+      type="button"
+    >
+      <span
+        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline"
+      >
+        Click me!
+      </span>
+    </a>
+  </div>
+</div>
+`;
+
+exports[`ButtonBase when "as" prop is passed when "as" prop equals "Link" component when "disabled" prop is true renders Button as a and does not trigger onClick handler 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <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 PicassoLink-blue MuiTypography-colorPrimary"
+      data-component-type="button"
+      href="URL"
+      role="button"
+      tabindex="-1"
+      type="button"
+    >
+      <span
+        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline"
+      >
+        Click me!
+      </span>
+    </a>
+  </div>
+</div>
+`;
+
+exports[`ButtonBase when "as" prop is passed when "as" prop equals "Link" component when "href" prop is empty renders Button as a 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <a
+      aria-disabled="false"
+      class="MuiTypography-root MuiLink-root MuiLink-underlineHover PicassoLink-root 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 PicassoLink-blue MuiTypography-colorPrimary"
+      data-component-type="button"
+      href=""
+      role="button"
+      tabindex="0"
+      type="button"
+    >
+      <span
+        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline"
+      >
+        Click me!
+      </span>
+    </a>
+  </div>
+</div>
+`;
+
+exports[`ButtonBase when "as" prop is passed when "as" prop equals "a" renders Button as a 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <a
+      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"
+      data-component-type="button"
+      href="/"
+      role="button"
+      tabindex="0"
+      type="button"
+    >
+      <span
+        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline"
+      >
+        Click me!
+      </span>
+    </a>
+  </div>
+</div>
+`;
+
+exports[`ButtonBase when "disabled" prop is false renders Button and does not trigger onClick handler 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <button
+      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"
+      data-component-type="button"
+      role="button"
+      tabindex="0"
+      type="button"
+    >
+      <span
+        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline"
+      >
+        Click me!
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`ButtonBase when "disabled" prop is true renders Button and does not trigger onClick handler 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <button
+      aria-disabled="true"
+      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"
+      data-component-type="button"
+      disabled=""
+      role="button"
+      tabindex="-1"
+      type="button"
+    >
+      <span
+        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline"
+      >
+        Click me!
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`ButtonBase when "loading" prop is true renders Button with loading state and does not trigger onClick handler 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <button
+      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"
+      data-component-type="button"
+      role="button"
+      tabindex="0"
+      type="button"
+    >
+      <span
+        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline"
+      >
+        Click me!
+      </span>
+      <div
+        class="PicassoLoader-root absolute top-1/2 left-1/2 translate-x-[ translate-y-[ PicassoLoader-inline"
+      >
+        <div
+          aria-valuenow="35"
+          class="MuiCircularProgress-root PicassoCircularProgress-root PicassoLoader-spinnerInherit MuiCircularProgress-colorPrimary MuiCircularProgress-determinate"
+          role="progressbar"
+          style="width: 16px; height: 16px; transform: rotate(-90deg);"
+        >
+          <svg
+            class="MuiCircularProgress-svg"
+            viewBox="22 22 44 44"
+          >
+            <circle
+              class="MuiCircularProgress-circle MuiCircularProgress-circleDeterminate"
+              cx="44"
+              cy="44"
+              fill="none"
+              r="20.2"
+              stroke-width="3.6"
+              style="stroke-dasharray: 126.920; stroke-dashoffset: 82.498px;"
+            />
+          </svg>
+        </div>
+      </div>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`ButtonBase when "role" prop is passed renders Button with a custom role 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <button
+      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"
+      data-component-type="button"
+      role="custom"
+      tabindex="0"
+      type="button"
+    >
+      <span
+        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline"
+      >
+        Click me!
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`ButtonBase when "titleCase" prop is true renders Button with transformed text to title case 1`] = `
+<div>
+  <div
+    class="Picasso-root"
+  >
+    <button
+      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"
+      data-component-type="button"
+      role="button"
+      tabindex="0"
+      type="button"
+    >
+      <span
+        class="PicassoContainer-centerAlignItems PicassoContainer-flex PicassoContainer-inline"
+      >
+        __TITLE_CASE__Test bk9
+      </span>
+    </button>
+  </div>
+</div>
+`;

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
+}