feat(button): add loading indicator in the icon button

.changeset/silly-coats-end.md

@@ -0,0 +1,5 @@
+---
+"@equinor/mad-components": patch
+---
+
+New `busy` prop in the `Button.Icon` component that shows a loading indicator.

apps/chronicles/screens/components/components/ButtonScreen.tsx

@@ -40,6 +40,8 @@ export const ButtonScreen = () => {
                 <Button.Icon name="cloud-outline" color="danger" />
                 <Button.Icon name="fingerprint" color="danger" variant="outlined" />
                 <Button.Icon name="fire" color="danger" variant="ghost" />
+                <Button.Icon name="fish" busy />
+                <Button.Icon name="flask" disabled busy />
             </View>
             <Spacer amount="large" />
 

packages/components/src/components/Button/IconButton.tsx

@@ -5,6 +5,7 @@ import { EDSStyleSheet } from "../../styling";
 import { getBackgroundColorForButton } from "../../utils/getBackgroundColorForButton";
 import { Icon, IconName } from "../Icon";
 import { PressableHighlight } from "../PressableHighlight";
+import { CircularProgress } from "../ProgressIndicator";
 
 export type IconButtonProps = {
     /**
@@ -15,10 +16,6 @@ export type IconButtonProps = {
      * Size of the icon.
      */
     iconSize?: number;
-    /**
-     * Callback method invoked when the user presses outside the child content.
-     */
-    onPress?: () => void;
     /**
      * Color theme of the icon button.
      */
@@ -27,10 +24,18 @@ export type IconButtonProps = {
      * Button variant. This value works with the `color` prop to set the theming of the button.
      */
     variant?: "contained" | "outlined" | "ghost";
+    /**
+     * Boolean value indicating whether or not the button should be in its busy state.
+     */
+    busy?: boolean;
     /**
      * Boolean value indicating whether or not the button should be in its disabled state.
      */
     disabled?: boolean;
+    /**
+     * Callback method invoked when the user presses outside the child content.
+     */
+    onPress?: () => void;
 };
 
 export const IconButton = forwardRef<View, IconButtonProps & ViewProps>(
@@ -40,8 +45,9 @@ export const IconButton = forwardRef<View, IconButtonProps & ViewProps>(
             iconSize = 22,
             color = "primary",
             variant = "contained",
-            onPress = () => null,
+            busy = false,
             disabled = false,
+            onPress = () => null,
             ...rest
         },
         ref,
@@ -54,17 +60,22 @@ export const IconButton = forwardRef<View, IconButtonProps & ViewProps>(
         });
 
         return (
-            <View>
-                <View ref={ref} style={[styles.colorContainer, rest.style]}>
-                    <PressableHighlight
-                        id={rest.id}
-                        disabled={disabled}
-                        onPress={onPress}
-                        style={styles.pressableContainer}
-                    >
+            <View ref={ref} style={[styles.colorContainer, rest.style]}>
+                <PressableHighlight
+                    id={rest.id}
+                    disabled={disabled}
+                    onPress={onPress}
+                    style={styles.pressableContainer}
+                >
+                    {busy ? (
+                        <CircularProgress
+                            color={disabled || variant !== "contained" ? "primary" : "neutral"}
+                            size={iconSize}
+                        />
+                    ) : (
                         <Icon name={name} size={iconSize} color={styles.textStyle.color} />
-                    </PressableHighlight>
-                </View>
+                    )}
+                </PressableHighlight>
             </View>
         );
     },