@toptal/picasso-button 1.0.13-alpha-fx-5263-merge-feature-branch-d124b1f9a.10 → 1.0.13-alpha-fx-4594-migrate-griditem-4e798b92d.27

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

@@ -6,46 +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
-        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 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 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"
-        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"
         >
           One
         </span>
       </button>
       <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 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)] focus-within: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"
-        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"
         >
           Two
         </span>
       </button>
       <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 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 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"
-        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"
         >
           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: {},
+  })

package/src/ButtonGroupItem/ButtonGroupItem.tsx

@@ -1,37 +1,28 @@
 import React from 'react'
-import { twMerge } from 'tailwind-merge'
+import type { Theme } from '@material-ui/core'
+import { makeStyles } from '@material-ui/core'
+import cx from 'classnames'
 
 import type { ButtonProps } from '../Button'
 import { Button } from '../Button'
-import {
-  createButtonGroupItemClassNames,
-  createGroupVariantClassNames,
-} from './styles'
+import styles from './styles'
+
+const useStyles = makeStyles<Theme>(styles, {
+  name: 'PicassoButtonGroupItem',
+})
 
 export interface Props extends ButtonProps {}
 
-const ButtonGroupItem = ({
-  active,
-  disabled,
-  focused,
-  hovered,
-  className,
-  ...rest
-}: Props) => {
-  const finalClassName = twMerge(
-    createButtonGroupItemClassNames({ active, disabled, focused, hovered }),
-    createGroupVariantClassNames({ active, disabled, hovered }),
-    className
-  )
+const ButtonGroupItem = (props: Props) => {
+  const classes = useStyles()
 
   return (
     <Button
-      {...rest}
-      active={active}
-      disabled={disabled}
-      focused={focused}
-      hovered={hovered}
-      className={finalClassName}
+      {...props}
+      className={cx(props.className, classes.root, classes.group, {
+        [classes.active]: props.active,
+        [classes.disabled]: props.disabled,
+      })}
       variant='secondary'
     />
   )

package/src/ButtonGroupItem/styles.ts

@@ -1,64 +1,30 @@
-export const createButtonGroupItemClassNames = ({
-  disabled,
-  focused,
-  hovered,
-  active,
-}: {
-  disabled?: boolean
-  focused?: boolean
-  hovered?: boolean
-  active?: boolean
-  loading?: boolean
-}) => {
-  const classNames = [
-    'border-solid',
-    'transition-[color,background]',
-    'active:z-[1] hover:z-[1] focus-visible:z-[1] disabled:z-[1]',
-  ]
+import type { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/core/styles'
 
-  if (active || hovered || focused || disabled) {
-    classNames.push('z-[1]')
-  }
+import {
+  createOutlineCommons,
+  activeGroup,
+  disabledGroup,
+} from '../Button/styles'
 
-  return classNames
-}
-
-export const createGroupVariantClassNames = ({
-  disabled,
-  hovered,
-  active,
-}: {
-  disabled?: boolean
-  hovered?: boolean
-  active?: boolean
-  loading?: boolean
-}): string[] => {
-  const classNames = ['visited:text-black', 'border-solid']
-
-  if (disabled) {
-    classNames.push('cursor-not-allowed')
-    classNames.push('text-gray-500')
-
-    if (active) {
-      classNames.push('bg-graphite-700 border-graphite-700')
-    } else {
-      classNames.push('border-gray-500')
-    }
-  } else {
-    classNames.push(
-      'active:bg-graphite-700 active:border-graphite-700 active:text-white'
-    )
-    classNames.push('hover:border-black')
-
-    if (hovered) {
-      classNames.push('border-black text-black')
-    } else if (active) {
-      classNames.push('bg-graphite-700 border-graphite-700 text-white')
-      classNames.push('shadow-none')
-    } else {
-      classNames.push('border-gray-400 text-black')
-    }
-  }
-
-  return classNames
-}
+export default (theme: Theme) =>
+  createStyles({
+    root: {
+      '&:active, &$active, &:hover, &$hovered, &:focus, &$focused, &:disabled, &$disabled':
+        {
+          // border overlap to keep proper border width, but on state change
+          // we need to move up overlapped border
+          zIndex: 1,
+        },
+      '&$group': {
+        ...createOutlineCommons(theme),
+        '&:active, &$active': activeGroup(theme),
+        '&:disabled, &$disabled': disabledGroup(theme),
+      },
+    },
+    active: {},
+    hovered: {},
+    focused: {},
+    disabled: {},
+    group: {},
+  })

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

@@ -7,14 +7,13 @@ exports[`ButtonRadio 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
           aria-disabled="false"
@@ -34,7 +33,7 @@ exports[`ButtonRadio renders 1`] = `
           </span>
         </span>
         <div
-          class="min-w"
+          class="PicassoButtonControlLabel-content"
           style="margin-left: 0.5rem;"
         >
           Click me!

package/src/ButtonSplit/ButtonSplit.tsx

@@ -1,18 +1,16 @@
 import type { ReactNode, MouseEvent, HTMLAttributes } from 'react'
 import React, { forwardRef } from 'react'
+import type { Theme } from '@material-ui/core/styles'
+import { makeStyles } from '@material-ui/core/styles'
 import type { SizeType, BaseProps } from '@toptal/picasso-shared'
-import { twMerge } from 'tailwind-merge'
+import cx from 'classnames'
 import { ArrowDownMinor24, ArrowDownMinor16 } from '@toptal/picasso-icons'
 import { Dropdown } from '@toptal/picasso-dropdown'
 
 import type { ButtonProps } from '../Button'
 import { Button } from '../Button'
 import { ButtonGroup } from '../ButtonGroup'
-import { createButtonGroupItemClassNames } from '../ButtonGroupItem/styles'
-import {
-  createActionButtonClassNames,
-  createMenuButtonClassNames,
-} from './styles'
+import styles from './styles'
 
 export interface Props
   extends BaseProps,
@@ -37,6 +35,13 @@ export interface Props
     menuButton?: string
   }
 }
+// Using { index: -1 } to inject CSS link to the bottom of the head
+// in order to prevent Button's styles to override ButtonSplit's ones
+// Related Jira issue: https://toptal-core.atlassian.net/browse/FX-1520
+const useStyles = makeStyles<Theme>(styles, {
+  name: 'PicassoButtonSplit',
+  index: -1,
+})
 
 const DropdownIcon = ({
   size,
@@ -78,35 +83,37 @@ export const ButtonSplit = forwardRef<HTMLDivElement, Props>(
       testIds = {},
       ...rest
     } = props
+    const classes = useStyles()
 
-    const renderMenuButton = ({ isOpen }: { isOpen: boolean }) => {
-      const menuButtonClassName = twMerge(
-        createButtonGroupItemClassNames({
-          active: menuButtonProps?.active,
-          hovered: menuButtonProps?.hovered,
-          disabled: menuButtonProps?.disabled || disabled,
-          focused: menuButtonProps?.focused,
-        }),
-        createMenuButtonClassNames({
-          variant,
-          size,
-          disabled: menuButtonProps?.disabled || disabled,
-        }),
-        menuButtonProps?.className
-      )
-
-      const iconClassName = isOpen ? 'rotate-180' : ''
+    const commonClasses = cx(classes.button, {
+      [classes.primaryVariant]: variant === 'primary',
+      [classes.disabled]: disabled,
+    })
 
+    const renderMenuButton = ({
+      isOpen,
+      disabled,
+    }: {
+      isOpen: boolean
+      disabled?: boolean
+    }) => {
       const menuButton = (
         <Button
           {...menuButtonProps}
           variant={variant}
-          className={menuButtonClassName}
+          className={`${commonClasses} ${classes.menuButton} ${
+            classes[`${size}Size`]
+          }`}
           size={size}
           disabled={disabled}
           data-testid={testIds.menuButton}
         >
-          <DropdownIcon className={iconClassName} size={size} />
+          <DropdownIcon
+            className={cx({
+              [classes.rotated]: isOpen,
+            })}
+            size={size}
+          />
         </Button>
       )
 
@@ -117,29 +124,11 @@ export const ButtonSplit = forwardRef<HTMLDivElement, Props>(
       )
     }
 
-    const actionButtonClassName = twMerge(
-      createButtonGroupItemClassNames({
-        active: actionButtonProps?.active,
-        hovered: actionButtonProps?.hovered,
-        disabled: actionButtonProps?.disabled || disabled,
-        focused: actionButtonProps?.focused,
-      }),
-      createActionButtonClassNames({
-        variant,
-      }),
-      actionButtonProps?.className
-    )
-
-    const dropdownClassName = twMerge(
-      'block cursor-pointer',
-      disabled && '[&>div]:cursor-auto'
-    )
-
     return (
       <ButtonGroup {...rest} ref={ref} style={style} className={className}>
         <Button
           {...actionButtonProps}
-          className={actionButtonClassName}
+          className={`${commonClasses} ${classes.actionButton}`}
           size={size}
           variant={variant}
           disabled={disabled}
@@ -148,8 +137,15 @@ export const ButtonSplit = forwardRef<HTMLDivElement, Props>(
         >
           {children}
         </Button>
-        <Dropdown content={menu} className={dropdownClassName}>
-          {({ isOpen }: { isOpen: boolean }) => renderMenuButton({ isOpen })}
+        <Dropdown
+          content={menu}
+          className={cx(classes.dropdown, {
+            [classes.disabled]: disabled,
+          })}
+        >
+          {({ isOpen }: { isOpen: boolean }) =>
+            renderMenuButton({ isOpen, disabled })
+          }
         </Dropdown>
       </ButtonGroup>
     )

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

@@ -2,7 +2,7 @@
 
 exports[`ButtonSplit closes menu on click to the item 1`] = `
 <svg
-  class="PicassoSvgArrowDownMinor24-root-172"
+  class="PicassoSvgArrowDownMinor24-root-206"
   style="min-width: 24px; min-height: 24px;"
   viewBox="0 0 24 24"
 >
@@ -18,38 +18,34 @@ exports[`ButtonSplit default 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
-        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 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)] text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue min-w h-8 py-0 px-4 active:z-[1] hover:z-[1] focus-visible:z-[1] disabled:z-[1] transition-[color,background] border-r border-l border-y border-solid border-blue"
+        class="MuiButtonBase-root PicassoButton-medium PicassoButton-primary PicassoButton-root PicassoButtonSplit-primaryVariant PicassoButtonSplit-actionButton"
         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"
         >
           Action
         </span>
       </button>
       <div
-        class="PicassoDropdown-root block cursor-pointer"
+        class="PicassoDropdown-root PicassoButtonSplit-dropdown"
       >
         <div
           class="PicassoDropdown-anchor"
         >
           <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 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)] text-white visited:text-white hover:bg-[#4269D6] active:bg-[#1A41AB] bg-blue h-8 py-0 transition-[color,background] active:z-[1] hover:z-[1] focus-visible:z-[1] disabled:z-[1] min-w px-[0.5em] border-l border-r border-y border-solid border-blue"
+            class="MuiButtonBase-root PicassoButton-medium PicassoButton-primary PicassoButton-root PicassoButtonSplit-primaryVariant PicassoButtonSplit-menuButton PicassoButtonSplit-mediumSize"
             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"
             >
               <svg
                 class="PicassoSvgArrowDownMinor16-root"
@@ -71,7 +67,7 @@ exports[`ButtonSplit default render 1`] = `
 
 exports[`ButtonSplit renders arrow down icon for a closed menu 1`] = `
 <svg
-  class="PicassoSvgArrowDownMinor16-root-172"
+  class="PicassoSvgArrowDownMinor16-root-206"
   style="min-width: 16px; min-height: 16px;"
   viewBox="0 0 16 16"
 >
@@ -83,7 +79,7 @@ exports[`ButtonSplit renders arrow down icon for a closed menu 1`] = `
 
 exports[`ButtonSplit renders arrow up icon for an opened menu 1`] = `
 <svg
-  class="PicassoSvgArrowDownMinor16-root-172 rotate-180"
+  class="PicassoSvgArrowDownMinor16-root-206 PicassoButtonSplit-rotated-12"
   style="min-width: 16px; min-height: 16px;"
   viewBox="0 0 16 16"
 >

package/src/ButtonSplit/styles.ts

@@ -1,40 +1,59 @@
-import type { SizeType } from '@toptal/picasso-shared'
-import { twMerge } from 'tailwind-merge'
+import type { Theme } from '@material-ui/core/styles'
+import { createStyles } from '@material-ui/core/styles'
 
-export const createActionButtonClassNames = ({
-  variant,
-}: {
-  variant?: 'primary' | 'secondary'
-}) => {
-  return twMerge(
-    'transition-[color,background]',
-    variant === 'primary' &&
-      'border-r border-l-0 border-y-0 border-solid border-blue-700'
-  )
-}
+export default ({ palette }: Theme) =>
+  createStyles({
+    actionButton: {
+      borderTopRightRadius: 0,
+      borderBottomRightRadius: 0,
+    },
+    menuButton: {
+      minWidth: '2em',
+      paddingLeft: '0.5em',
+      paddingRight: '0.5em',
+      borderTopLeftRadius: 0,
+      borderBottomLeftRadius: 0,
+      marginLeft: 0,
+    },
 
-const menuButtonSizeClassNames: Record<
-  SizeType<'small' | 'medium' | 'large'>,
-  string
-> = {
-  small: 'min-w-[1.5em] px-[0.25em]',
-  medium: 'min-w-[2em] px-[0.5em]',
-  large: 'min-w-[3em] px-[0.75em]',
-}
+    primaryVariant: {
+      '&$actionButton': {
+        borderRight: `1px solid ${palette.blue.darker}`,
+      },
+      '&$menuButton': {
+        borderLeft: `1px solid ${palette.blue.darker}`,
 
-export const createMenuButtonClassNames = ({
-  variant,
-  size,
-  disabled,
-}: {
-  variant?: 'primary' | 'secondary'
-  size: SizeType<'small' | 'medium' | 'large'>
-  disabled?: boolean
-}) => {
-  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'
-  )
-}
+        '&$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)',
+    },
+  })