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/Lightbox/FullView/index.tsx

@@ -7,7 +7,6 @@ import { useIntl } from 'react-intl'
 import Image from '../../Image'
 
 import { IconButton } from '../../IconButton'
-import { MaterialIcon } from '../../Icons/MaterialIcon'
 import { Typography } from '../../Typography'
 
 import { LightboxImage } from '../index'
@@ -94,9 +93,8 @@ export default function FullView({
           id: 'common.close',
           defaultMessage: 'Close',
         })}
-      >
-        <MaterialIcon icon="close" color="CurrentColor" size={24} />
-      </IconButton>
+        iconName="close"
+      />
       <div className={styles.header}>
         <Typography variant="Tag/sm">
           <span className={styles.imageCount}>
@@ -141,16 +139,14 @@ export default function FullView({
         variant="Muted"
         className={`${styles.navigationButton} ${styles.prev}`}
         onPress={handlePrev}
-      >
-        <MaterialIcon icon="arrow_back" color="CurrentColor" />
-      </IconButton>
+        iconName="arrow_back"
+      />
       <IconButton
         variant="Muted"
         className={`${styles.navigationButton} ${styles.next}`}
         onPress={handleNext}
-      >
-        <MaterialIcon icon="arrow_forward" color="CurrentColor" />
-      </IconButton>
+        iconName="arrow_forward"
+      />
     </div>
   )
 }

packages/design-system/lib/components/Lightbox/Gallery/index.tsx

@@ -5,12 +5,12 @@ import { Button as ButtonRAC } from 'react-aria-components'
 import { useIntl } from 'react-intl'
 
 import { IconButton } from '../../IconButton'
-import { MaterialIcon } from '../../Icons/MaterialIcon'
 import { Typography } from '../../Typography'
 
 import Image from '../../Image'
 
 import { cx } from 'class-variance-authority'
+import { useMediaQuery } from 'usehooks-ts'
 import { LightboxImage } from '..'
 import styles from './gallery.module.css'
 
@@ -35,6 +35,7 @@ export default function Gallery({
   const [animateLeft, setAnimateLeft] = useState(true)
   const mainImage = selectedImage || images[0]
   const mainImageIndex = images.findIndex((img) => img === mainImage)
+  const isMobile = useMediaQuery('(max-width: 767px)')
 
   function getThumbImages() {
     const thumbs = []
@@ -96,20 +97,8 @@ export default function Gallery({
           id: 'common.close',
           defaultMessage: 'Close',
         })}
-      >
-        <MaterialIcon
-          icon="chevron_left"
-          color="CurrentColor"
-          size={24}
-          className={styles.mobileCloseIcon}
-        />
-        <MaterialIcon
-          icon="close"
-          color="CurrentColor"
-          size={24}
-          className={styles.desktopCloseIcon}
-        />
-      </IconButton>
+        iconName={isMobile ? 'chevron_left' : 'close'}
+      />
 
       {/* Desktop Gallery */}
       <div className={styles.desktopGallery}>
@@ -156,9 +145,8 @@ export default function Gallery({
               id: 'lightbox.previousImage',
               defaultMessage: 'Previous image',
             })}
-          >
-            <MaterialIcon icon="arrow_back" color="CurrentColor" />
-          </IconButton>
+            iconName="arrow_back"
+          />
           <IconButton
             variant="Elevated"
             className={cx(styles.navigationButton, styles.next)}
@@ -167,9 +155,8 @@ export default function Gallery({
               id: 'lightbox.nextImage',
               defaultMessage: 'Next image',
             })}
-          >
-            <MaterialIcon icon="arrow_forward" color="CurrentColor" />
-          </IconButton>
+            iconName="arrow_forward"
+          />
         </div>
         <div className={styles.desktopThumbnailGrid}>
           <AnimatePresence initial={false}>