style(button): reduce duplicate code blocks

components/button/button.tsx

@@ -47,6 +47,7 @@ const Button: React.FC<React.PropsWithChildren<ButtonProps>> = ({ ...btnProps })
   const [dripX, setDripX] = useState<number>(0)
   const [dripY, setDripY] = useState<number>(0)
   const groupConfig = useButtonGroupContext()
+  const filteredProps = filterPropsWithGroup(btnProps, groupConfig)
   const {
     children,
     disabled,
@@ -63,22 +64,13 @@ const Button: React.FC<React.PropsWithChildren<ButtonProps>> = ({ ...btnProps })
     iconRight,
     className,
     ...props
-  } = filterPropsWithGroup(btnProps, groupConfig)
+  } = filteredProps
 
-  const { bg, border, color } = useMemo(() => getButtonColors(theme, type, disabled, ghost), [
+  const { bg, border, color } = useMemo(() => getButtonColors(theme, filteredProps), [
     theme,
-    type,
+    filteredProps,
-    disabled,
-    ghost,
-  ])
-  const hover = useMemo(() => getButtonHoverColors(theme, type, disabled, loading, shadow, ghost), [
-    theme,
-    type,
-    disabled,
-    loading,
-    shadow,
-    ghost,
   ])
+  const hover = useMemo(() => getButtonHoverColors(theme, filteredProps), [theme, filteredProps])
   const { cursor, events } = useMemo(() => getButtonCursor(disabled, loading), [disabled, loading])
   const { height, minWidth, padding, width, fontSize } = useMemo(() => getButtonSize(size, auto), [
     size,
@@ -151,7 +143,7 @@ const Button: React.FC<React.PropsWithChildren<ButtonProps>> = ({ ...btnProps })
           text-align: center;
           white-space: nowrap;
           transition: background-color 200ms ease 0ms, box-shadow 200ms ease 0ms,
-            border 200ms ease 0ms;
+            border 200ms ease 0ms, color 200ms ease 0ms;
           position: relative;
           overflow: hidden;
           color: ${color};

components/button/styles.ts

@@ -1,5 +1,6 @@
 import { ZeitUIThemes } from '../styles/themes'
 import { NormalSizes, ButtonTypes } from '../utils/prop-types'
+import { ButtonProps } from 'components/button/button'
 
 export interface ButtonColorGroup {
   bg: string
@@ -37,12 +38,8 @@ export const getButtonGhostColors = (
   return colors[type] || null
 }
 
-export const getButtonColors = (
+export const getButtonColors = (theme: ZeitUIThemes, props: ButtonProps): ButtonColorGroup => {
-  theme: ZeitUIThemes,
+  const { type, disabled, ghost } = props
-  type: ButtonTypes,
-  disabled: boolean,
-  ghost: boolean,
-): ButtonColorGroup => {
   const colors: { [key in ButtonTypes]?: ButtonColorGroup } = {
     default: {
       bg: theme.palette.background,
@@ -118,14 +115,8 @@ export const getButtonGhostHoverColors = (
   return colors[type] || null
 }
 
-export const getButtonHoverColors = (
+export const getButtonHoverColors = (theme: ZeitUIThemes, props: ButtonProps): ButtonColorGroup => {
-  theme: ZeitUIThemes,
+  const { type, disabled, loading, shadow, ghost } = props
-  type: ButtonTypes,
-  disabled: boolean,
-  loading: boolean,
-  shadow: boolean,
-  ghost: boolean,
-): ButtonColorGroup => {
   const colors: { [key in ButtonTypes]?: any } = {
     default: {
       bg: theme.palette.background,
@@ -168,10 +159,10 @@ export const getButtonHoverColors = (
     }
   if (loading)
     return {
-      ...getButtonColors(theme, type, disabled, ghost),
+      ...getButtonColors(theme, props),
       color: 'transparent',
     }
-  if (shadow) return getButtonColors(theme, type, disabled, ghost)
+  if (shadow) return getButtonColors(theme, props)
   if (ghost) return getButtonGhostHoverColors(theme, type) || defaultHover
   return colors[type] || defaultHover
 }