fix(Button): adjust loading state to initial button size (#1707)

mondaycom · Oct 26, 2023 · 64ed233 · 64ed233
1 parent 241e240
commit 64ed233
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 45 deletions.
diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss
@@ -23,9 +23,22 @@ $disabled-on-primary-color-opacity: 0.5;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
-  /* Will be updated dynamically after render by js */
-  --element-width: 32;
-  --element-height: 32;
+  --element-width: auto;
+  min-width: var(--element-width);
+
+  .loader {
+    height: 100%;
+
+    .loaderSvg {
+      position: static;
+      height: 100%;
+      margin: 0;
+    }
+
+    .textPlaceholder {
+      opacity: 0;
+    }
+  }
 }
 
 .marginRight {
@@ -46,38 +59,6 @@ $disabled-on-primary-color-opacity: 0.5;
   border-bottom-left-radius: 0;
 }
 
-.button {
-  min-width: var(--element-width);
-}
-
-.button.loading {
-  min-width: 0;
-}
-
-.button.loading.hasStyleSize {
-  width: var(--element-height);
-  max-width: var(--element-height);
-  height: var(--element-height);
-  max-height: var(--element-height);
-}
-
-.button.loading {
-  position: relative;
-}
-
-.button .loader {
-  width: calc(var(--element-height) - var(--loader-padding) * 2);
-  height: calc(var(--element-height) - var(--loader-padding) * 2);
-  position: absolute;
-  top: var(--loader-padding);
-  left: auto;
-}
-
-.button .loader .loaderSvg {
-  width: calc(var(--element-height) - var(--loader-padding) * 2);
-  height: calc(var(--element-height) - var(--loader-padding) * 2);
-}
-
 .button:active:not(.preventClickAnimation) {
   transform: scale(0.95) translate3d(0, 0, 0);
 }

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -11,15 +11,13 @@ import Loader from "../../components/Loader/Loader";
 import { BUTTON_ICON_SIZE, ButtonColor, ButtonInputType, ButtonType, getActualSize, Size } from "./ButtonConstants";
 import { getParentBackgroundColorNotTransparent, TRANSPARENT_COLOR } from "./helper/dom-helpers";
 import { getTestId } from "../../tests/test-ids-utils";
-import { isIE11 } from "../../utils/user-agent-utils";
 import { SubIcon, VibeComponent, VibeComponentProps, withStaticProps } from "../../types";
 import { ComponentDefaultTestId } from "../../tests/constants";
 import { backwardCompatibilityForProperties } from "../../helpers/backwardCompatibilityForProperties";
 import { getStyle } from "../../helpers/typesciptCssModulesHelper";
 import styles from "./Button.module.scss";
 
-// min button width
-const MIN_BUTTON_HEIGHT_PX = isIE11() ? 32 : 6;
+const MIN_BUTTON_WIDTH_PX = 6;
 const UPDATE_CSS_VARIABLES_DEBOUNCE = 200;
 
 export interface ButtonProps extends VibeComponentProps {
@@ -155,12 +153,10 @@ const Button: VibeComponent<ButtonProps, unknown> & {
 
     const updateCssVariables = useMemo(() => {
       return ({ borderBoxSize }: { borderBoxSize: { blockSize: number; inlineSize: number } }) => {
-        const { blockSize, inlineSize } = borderBoxSize;
-        const width = Math.max(inlineSize, MIN_BUTTON_HEIGHT_PX);
-        const height = Math.max(blockSize, MIN_BUTTON_HEIGHT_PX);
+        const { inlineSize } = borderBoxSize;
+        const width = Math.max(inlineSize, MIN_BUTTON_WIDTH_PX);
         if (!buttonRef.current) return;
         buttonRef.current.style.setProperty("--element-width", `${width}px`);
-        buttonRef.current.style.setProperty("--element-height", `${height}px`);
         setHasSizeStyle(true);
       };
     }, [buttonRef]);
@@ -332,7 +328,10 @@ const Button: VibeComponent<ButtonProps, unknown> & {
       return (
         <button {...buttonProps}>
           <span className={styles.loader}>
-            <Loader svgClassName={styles.loaderSvg} />
+            <Loader className={styles.loaderSvg} />
+            <span aria-hidden className={styles.textPlaceholder}>
+              {children}
+            </span>
           </span>
         </button>
       );

diff --git a/src/components/Button/__stories__/button.stories.mdx b/src/components/Button/__stories__/button.stories.mdx
@@ -122,10 +122,10 @@ Set disable button for something that isn’t usable. Use a tooltip on hover in
   </Story>
 </Canvas>
 
-### Error and success
+### Positive and Negative
 
 <Canvas>
-  <Story name="Error and success">
+  <Story name="Positive and Negative">
     <Button color={Button.colors.POSITIVE}>Positive</Button>
     <Button color={Button.colors.NEGATIVE}>Negative</Button>
   </Story>