@toptal/picasso-button 1.0.12 → 1.0.13-alpha-fx-5263-merge-feature-branch-d124b1f9a.10

package/src/ButtonGroup/ButtonGroup.tsx

@@ -1,60 +1,25 @@
-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 type { ReactNode, HTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+import { twMerge } from 'tailwind-merge'
+import type { BaseProps } from '@toptal/picasso-shared'
 
-import { Button } from '../Button'
 import { ButtonGroupItem } from '../ButtonGroupItem'
-import styles from './styles'
+import { createRootClassNames } 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 classes = useStyles()
-    const childrenWithClasses = useMemo(
-      () =>
-        addClassesToChildren({
-          children,
-          classes,
-          config: getChildrenClassesConfig,
-        }),
-      [children, classes]
-    )
+
+    const finalClassName = twMerge(createRootClassNames(), className)
 
     return (
-      <div
-        {...rest}
-        ref={ref}
-        className={cx(classes.root, className)}
-        style={style}
-      >
-        {childrenWithClasses}
+      <div {...rest} ref={ref} className={finalClassName} style={style}>
+        {children}
       </div>
     )
   }

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

@@ -6,40 +6,46 @@ exports[`ButtonGroup render 1`] = `
     class="Picasso-root"
   >
     <div
-      class="PicassoButtonGroup-root"
+      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-["
     >
       <button
-        class="MuiButtonBase-root PicassoButton-medium PicassoButton-secondary PicassoButton-root PicassoButtonGroupItem-root PicassoButtonGroupItem-group"
+        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"
         data-component-type="button"
+        role="button"
         tabindex="0"
         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"
         >
           One
         </span>
       </button>
       <button
-        class="MuiButtonBase-root PicassoButton-active PicassoButton-medium PicassoButton-secondary PicassoButton-root PicassoButtonGroupItem-root PicassoButtonGroupItem-group PicassoButtonGroupItem-active"
+        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"
         data-component-type="button"
+        role="button"
         tabindex="0"
         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"
         >
           Two
         </span>
       </button>
       <button
-        class="MuiButtonBase-root PicassoButton-medium PicassoButton-secondary PicassoButton-root PicassoButtonGroupItem-root PicassoButtonGroupItem-group"
+        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"
         data-component-type="button"
+        role="button"
         tabindex="0"
         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"
         >
           Three
         </span>

package/src/ButtonGroup/styles.ts

@@ -1,71 +1,29 @@
-import { createStyles } from '@material-ui/core/styles'
+export const createRootClassNames = () => {
+  const classNames: string[] = [
+    'flex',
+    'justify-start',
 
-const baseButtonProps = {
-  transitionProperty: 'color, background',
+    '[&>[data-component-type="button"]:hover]:z-[1]',
 
-  '&: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"]:first-child:not(:last-child)]:rounded-r-none',
+    '[&>[data-component-type="button"]:first-child:not(:last-child)]:ml-0',
 
-export default () =>
-  createStyles({
-    root: {
-      display: 'flex',
-      justifyContent: 'flex-start',
+    '[&>[data-component-type="button"]:not(:first-child):not(:last-child)]:rounded-none',
+    '[&>[data-component-type="button"]:not(:first-child):not(:last-child)]:ml-[-1px]',
 
-      // default case
-      '& [data-component-type="button"]': {
-        ...baseButtonProps,
+    '[&>[data-component-type="button"]:last-child:not(:first-child)]:rounded-l-none',
+    '[&>[data-component-type="button"]:last-child:not(:first-child)]:ml-[-1px]',
 
-        // 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,
-      },
+    // 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',
 
-      // nested case when button is nested in first item in ButtonGroup
-      '& :first-child:not(:last-child) [data-component-type="button"]': {
-        ...baseButtonProps,
-        ...firstButtonProps,
-      },
+    '[&_: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 middle item in ButtonGroup
-      '& :not(:first-child):not(:last-child) [data-component-type="button"]': {
-        ...baseButtonProps,
-        ...middleButtonProps,
-      },
+    '[&_: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 last item in ButtonGroup
-      '& :last-child:not(:first-child) [data-component-type="button"]': {
-        ...baseButtonProps,
-        ...lastButtonProps,
-      },
-    },
-    active: {},
-    focused: {},
-    hovered: {},
-  })
+  return classNames
+}

package/src/ButtonGroupItem/ButtonGroupItem.tsx

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

package/src/ButtonGroupItem/styles.ts

@@ -1,30 +1,64 @@
-import type { Theme } from '@material-ui/core/styles'
-import { createStyles } from '@material-ui/core/styles'
+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 {
-  createOutlineCommons,
-  activeGroup,
-  disabledGroup,
-} from '../Button/styles'
+  if (active || hovered || focused || disabled) {
+    classNames.push('z-[1]')
+  }
 
-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: {},
-  })
+  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
+}

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

@@ -7,13 +7,14 @@ exports[`ButtonRadio renders 1`] = `
   >
     <label
       aria-disabled="false"
-      class="MuiButtonBase-root PicassoButton-medium PicassoButton-secondary PicassoButton-root PicassoButtonControlLabel-root PicassoButtonControlLabel-medium"
+      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"
       data-component-type="button"
       role="button"
       tabindex="0"
+      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"
       >
         <span
           aria-disabled="false"
@@ -33,7 +34,7 @@ exports[`ButtonRadio renders 1`] = `
           </span>
         </span>
         <div
-          class="PicassoButtonControlLabel-content"
+          class="min-w"
           style="margin-left: 0.5rem;"
         >
           Click me!

package/src/ButtonSplit/ButtonSplit.tsx

@@ -1,16 +1,18 @@
 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 cx from 'classnames'
+import { twMerge } from 'tailwind-merge'
 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 styles from './styles'
+import { createButtonGroupItemClassNames } from '../ButtonGroupItem/styles'
+import {
+  createActionButtonClassNames,
+  createMenuButtonClassNames,
+} from './styles'
 
 export interface Props
   extends BaseProps,
@@ -35,13 +37,6 @@ 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,
@@ -83,37 +78,35 @@ export const ButtonSplit = forwardRef<HTMLDivElement, Props>(
       testIds = {},
       ...rest
     } = props
-    const classes = useStyles()
 
-    const commonClasses = cx(classes.button, {
-      [classes.primaryVariant]: variant === 'primary',
-      [classes.disabled]: disabled,
-    })
+    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 renderMenuButton = ({
-      isOpen,
-      disabled,
-    }: {
-      isOpen: boolean
-      disabled?: boolean
-    }) => {
       const menuButton = (
         <Button
           {...menuButtonProps}
           variant={variant}
-          className={`${commonClasses} ${classes.menuButton} ${
-            classes[`${size}Size`]
-          }`}
+          className={menuButtonClassName}
           size={size}
           disabled={disabled}
           data-testid={testIds.menuButton}
         >
-          <DropdownIcon
-            className={cx({
-              [classes.rotated]: isOpen,
-            })}
-            size={size}
-          />
+          <DropdownIcon className={iconClassName} size={size} />
         </Button>
       )
 
@@ -124,11 +117,29 @@ 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={`${commonClasses} ${classes.actionButton}`}
+          className={actionButtonClassName}
           size={size}
           variant={variant}
           disabled={disabled}
@@ -137,15 +148,8 @@ export const ButtonSplit = forwardRef<HTMLDivElement, Props>(
         >
           {children}
         </Button>
-        <Dropdown
-          content={menu}
-          className={cx(classes.dropdown, {
-            [classes.disabled]: disabled,
-          })}
-        >
-          {({ isOpen }: { isOpen: boolean }) =>
-            renderMenuButton({ isOpen, disabled })
-          }
+        <Dropdown content={menu} className={dropdownClassName}>
+          {({ isOpen }: { isOpen: boolean }) => renderMenuButton({ isOpen })}
         </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-206"
+  class="PicassoSvgArrowDownMinor24-root-172"
   style="min-width: 24px; min-height: 24px;"
   viewBox="0 0 24 24"
 >
@@ -18,34 +18,38 @@ exports[`ButtonSplit default render 1`] = `
     class="Picasso-root"
   >
     <div
-      class="PicassoButtonGroup-root"
+      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-["
     >
       <button
-        class="MuiButtonBase-root PicassoButton-medium PicassoButton-primary PicassoButton-root PicassoButtonSplit-primaryVariant PicassoButtonSplit-actionButton"
+        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"
         data-component-type="button"
+        role="button"
         tabindex="0"
         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"
         >
           Action
         </span>
       </button>
       <div
-        class="PicassoDropdown-root PicassoButtonSplit-dropdown"
+        class="PicassoDropdown-root block cursor-pointer"
       >
         <div
           class="PicassoDropdown-anchor"
         >
           <button
-            class="MuiButtonBase-root PicassoButton-medium PicassoButton-primary PicassoButton-root PicassoButtonSplit-primaryVariant PicassoButtonSplit-menuButton PicassoButtonSplit-mediumSize"
+            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"
             data-component-type="button"
+            role="button"
             tabindex="0"
             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"
             >
               <svg
                 class="PicassoSvgArrowDownMinor16-root"
@@ -67,7 +71,7 @@ exports[`ButtonSplit default render 1`] = `
 
 exports[`ButtonSplit renders arrow down icon for a closed menu 1`] = `
 <svg
-  class="PicassoSvgArrowDownMinor16-root-206"
+  class="PicassoSvgArrowDownMinor16-root-172"
   style="min-width: 16px; min-height: 16px;"
   viewBox="0 0 16 16"
 >
@@ -79,7 +83,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-206 PicassoButtonSplit-rotated-12"
+  class="PicassoSvgArrowDownMinor16-root-172 rotate-180"
   style="min-width: 16px; min-height: 16px;"
   viewBox="0 0 16 16"
 >