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/Button/Button.tsx

@@ -1,6 +1,8 @@
 import { Button as ButtonRAC } from 'react-aria-components'
-import { Loading, type LoadingProps } from '../Loading/Loading'
+import { Loading } from '../Loading/Loading'
 
+import { MaterialIcon } from '../Icons/MaterialIcon'
+import { Typography } from '../Typography'
 import type { ButtonProps } from './types'
 import { variants } from './variants'
 
@@ -10,7 +12,8 @@ export function Button({
   size,
   wrapping,
   fullWidth,
-  typography,
+  leadingIconName,
+  trailingIconName,
   className,
   children,
   ...props
@@ -20,32 +23,44 @@ export function Button({
     color,
     size,
     wrapping,
-    typography,
     fullWidth,
     className,
   })
 
   return (
-    <ButtonRAC {...props} className={classNames}>
-      {({ isPending, isHovered }) => {
-        let loadingType: LoadingProps['type'] = 'White'
-        if (variant === 'Secondary') {
-          if (isHovered || color !== 'Inverted') {
-            loadingType = 'Dark'
-          }
-        } else {
-          if (color === 'Inverted') {
-            loadingType = 'Dark'
-          }
-        }
-
-        return (
-          <>
-            {children}
-            {isPending && <Loading size={20} type={loadingType} />}
-          </>
-        )
-      }}
-    </ButtonRAC>
+    <Typography
+      variant={
+        size === 'sm'
+          ? 'Body/Supporting text (caption)/smBold'
+          : 'Body/Paragraph/mdBold'
+      }
+    >
+      <ButtonRAC {...props} className={classNames}>
+        {({ isPending }) => {
+          return (
+            <>
+              {leadingIconName && !isPending ? (
+                <MaterialIcon
+                  icon={leadingIconName}
+                  color="CurrentColor"
+                  size={size === 'sm' ? 20 : 24}
+                />
+              ) : null}
+              {children}
+              {trailingIconName && !isPending ? (
+                <MaterialIcon
+                  icon={trailingIconName}
+                  color="CurrentColor"
+                  size={size === 'sm' ? 20 : 24}
+                />
+              ) : null}
+              {isPending ? (
+                <Loading size={size === 'sm' ? 18 : 20} type="CurrentColor" />
+              ) : null}
+            </>
+          )
+        }}
+      </ButtonRAC>
+    </Typography>
   )
 }