message: feat: better naming props and used classNames library
diff: import * as React from 'react'
  +import classNames from 'classnames/bind'
  +
  import { ISplitButton } from '@venice/core/models'
  import styles from '@venice/styles/components/SplitButton.module.scss'
  @@ -16,21 +18,28 @@ const SplitButton: React.FC<ISplitButtonProps> = ({
  color = 'default',
  size = 'large',
  direction = 'rtl',
  - menuFitButtonContainer = false,
  + isFitMenu = false,
  openType = 'hover',
  ...props
  }: ISplitButtonProps) => {
  const [isOpen, setIsOpen] = React.useState(false)
  - const clickType = openType === 'click' && isOpen ? styles.active : ''
  + const clickType = openType === 'click' && isOpen
  +
  + const navClassNames = classNames(styles.splitButton, styles[openType], {
  + [styles.active]: clickType,
  + })
  +
  + const menuClassNames = classNames(
  + styles.dropdown,
  + styles[size],
  + styles[color],
  + styles[direction],
  + { [styles.fitbutton]: isFitMenu }
  + )
  return (
  - <nav
  - className={`${styles.splitButton}
  - ${styles[openType]}
  - ${clickType}`}
  - {...props}
  - >
  + <nav className={navClassNames} {...props}>
  <Button
  color={color}
  size={size}
  @@ -40,14 +49,7 @@ const SplitButton: React.FC<ISplitButtonProps> = ({
  {text}
  <span className={styles.caret}></span>
  </Button>
  - <div
  - className={`${styles.dropdown}
  - ${styles[size]}
  - ${styles[color]}
  - ${styles[direction]}
  - ${menuFitButtonContainer ? styles.fitbutton : ''}`}
  - role="menu"
  - >
  + <div className={menuClassNames} role="menu">
  {children}
  </div>
  </nav>
  