feat(IconButton): loading state (#2029)

mondaycom · Mar 25, 2024 · a38dd2b · a38dd2b
1 parent 3340721
commit a38dd2b
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 3 deletions.
diff --git a/packages/core/src/components/Button/Button.tsx b/packages/core/src/components/Button/Button.tsx
@@ -51,6 +51,8 @@ export interface ButtonProps extends VibeComponentProps {
   successText?: string;
   /** loading boolean which switches the text to a loader */
   loading?: boolean;
+  /** className which is applied to loader container **/
+  loaderClassName?: string;
   style?: React.CSSProperties;
   /** displays the active state */
   active?: boolean;
@@ -120,6 +122,7 @@ const Button: VibeComponent<ButtonProps, unknown> & {
       successIcon,
       style,
       loading: isLoading,
+      loaderClassName,
       active,
       activeButtonClassName,
       id,
@@ -345,7 +348,7 @@ const Button: VibeComponent<ButtonProps, unknown> & {
     if (loading) {
       return (
         <button {...buttonProps} key={`${id}-loading`}>
-          <span className={styles.loader}>
+          <span className={cx(styles.loader, loaderClassName)}>
             <Loader className={styles.loaderSvg} />
             <span aria-hidden className={styles.textPlaceholder}>
               {buttonContent}
@@ -405,6 +408,7 @@ Button.defaultProps = {
   successText: "",
   successIcon: null,
   loading: false,
+  loaderClassName: undefined,
   active: false,
   marginRight: false,
   marginLeft: false,

diff --git a/packages/core/src/components/IconButton/IconButton.module.scss b/packages/core/src/components/IconButton/IconButton.module.scss
@@ -6,4 +6,16 @@
 
 .referenceWrapper {
   display: inline-flex;
-}
+}
+
+.referenceWrapper button .loader {
+  width: 16px;
+  height: 16px;
+  &.xxs {
+    width: 10px;
+    height: 10px;
+    svg {
+      display: block;
+    }
+  }
+}
diff --git a/packages/core/src/components/IconButton/IconButton.tsx b/packages/core/src/components/IconButton/IconButton.tsx
@@ -12,6 +12,7 @@ import { ComponentDefaultTestId } from "../../tests/constants";
 import { backwardCompatibilityForProperties } from "../../helpers/backwardCompatibilityForProperties";
 import Button from "../Button/Button";
 import { BUTTON_ICON_SIZE, ButtonColor, ButtonType } from "../Button/ButtonConstants";
+import { getStyle } from "../../helpers/typesciptCssModulesHelper";
 import styles from "./IconButton.module.scss";
 
 export interface IconButtonProps extends VibeComponentProps {
@@ -86,6 +87,8 @@ export interface IconButtonProps extends VibeComponentProps {
   insetFocus?: boolean;
   /** Specifies the tab order of an element */
   tabIndex?: number;
+  /** Show a loader instead of the icon  */
+  loading?: boolean;
 }
 
 const IconButton: VibeComponent<IconButtonProps> & {
@@ -116,7 +119,8 @@ const IconButton: VibeComponent<IconButtonProps> & {
       dataTestId: backwardCompatabilityDataTestId,
       "data-testid": dataTestId,
       insetFocus = false,
-      tabIndex
+      tabIndex,
+      loading = false
     },
     ref
   ) => {
@@ -198,6 +202,8 @@ const IconButton: VibeComponent<IconButtonProps> & {
             style={overrideStyle}
             insetFocus={insetFocus}
             tabIndex={tabIndex}
+            loading={loading}
+            loaderClassName={cx(styles.loader, getStyle(styles, size))}
           >
             <Icon
               icon={icon}