Merged in fix/BOOK-293-button-variants (pull request #3371)

fix(BOOK-293): changed variants and props on IconButton component

* fix(BOOK-293): changed variants and props on IconButton component

* fix(BOOK-293): inherit color for icon


Approved-by: Bianca Widstam
Approved-by: Christel Westerberg

packages/design-system/lib/components/IconButton/IconButton.tsx

@@ -1,16 +1,14 @@
 import { Button as ButtonRAC } from 'react-aria-components'
 
-import { VariantProps } from 'class-variance-authority'
-import { ComponentProps } from 'react'
+import { MaterialIcon } from '../Icons/MaterialIcon'
+import { IconButtonProps } from './types'
 import { variants } from './variants'
 
-interface IconButtonProps
-  extends ComponentProps<typeof ButtonRAC>, VariantProps<typeof variants> {}
-
 export function IconButton({
   variant,
   emphasis,
   size,
+  iconName,
   className,
   ...props
 }: IconButtonProps) {
@@ -21,5 +19,27 @@ export function IconButton({
     className,
   })
 
-  return <ButtonRAC {...props} className={classNames} />
+  return (
+    <ButtonRAC {...props} className={classNames}>
+      <MaterialIcon
+        icon={iconName}
+        size={getIconSize(size)}
+        color="CurrentColor"
+      />
+    </ButtonRAC>
+  )
+}
+
+function getIconSize(size: IconButtonProps['size']) {
+  switch (size) {
+    case 'sm':
+      return 16
+    case 'md':
+      return 20
+    case 'xl':
+      return 28
+    case 'lg':
+    default:
+      return 24
+  }
 }