fix(Button): fixing animated label logic

livechat · Nov 4, 2024 · c783aa4 · c783aa4
1 parent 82f4035
commit c783aa4
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 53 deletions.
diff --git a/packages/react-components/src/components/Button/Button.tsx b/packages/react-components/src/components/Button/Button.tsx
@@ -4,12 +4,7 @@ import cx from 'clsx';
 
 import { Loader } from '../Loader';
 
-import {
-  buttonRef,
-  getSpinnerColors,
-  handleKeyboardInteraction,
-  handleMouseInteraction,
-} from './Button.helpers';
+import { buttonRef, getSpinnerColors } from './Button.helpers';
 import { ButtonKind, ButtonSize } from './types';
 
 import styles from './Button.module.scss';
@@ -77,7 +72,6 @@ export const Button = React.forwardRef<
     ref
   ) => {
     const [labelWidth, setLabelWidth] = React.useState(0);
-    const [isLabelOpen, setIsLabelOpen] = React.useState(false);
     const isDisabled = loading || disabled;
     const isIconOnly = !children && icon;
     const isAnimatedLabel = animatedLabel && children && icon;
@@ -98,8 +92,6 @@ export const Button = React.forwardRef<
         [styles[`${baseClass}--icon-only--bg`]]: isIconOnly && isTextButton,
         [styles[`${baseClass}--disabled`]]: isDisabled,
         [styles[`${baseClass}--animated-label`]]: isAnimatedLabel,
-        [styles[`${baseClass}--animated-label--expanded`]]:
-          isAnimatedLabel && isLabelOpen,
       },
       className
     );
@@ -113,35 +105,6 @@ export const Button = React.forwardRef<
         disabled={isDisabled}
         {...(!isDisabled && { href, onClick })}
         {...props}
-        {...(isAnimatedLabel && {
-          onMouseEnter: (e) =>
-            handleMouseInteraction(
-              e,
-              () => setIsLabelOpen(true),
-              props?.onMouseEnter
-            ),
-          onMouseLeave: (e) =>
-            handleMouseInteraction(
-              e,
-              () => setIsLabelOpen(false),
-              props?.onMouseLeave
-            ),
-          onBlur: (e) =>
-            handleKeyboardInteraction(
-              e,
-              () => setIsLabelOpen(false),
-              props?.onBlur
-            ),
-          onKeyUp: (e) => {
-            if (e.key === 'Enter' || e.key === ' ') {
-              setIsLabelOpen(true);
-            }
-            if (e.key === 'Escape') {
-              setIsLabelOpen(false);
-            }
-            props?.onKeyUp?.(e as React.KeyboardEvent<HTMLButtonElement>);
-          },
-        })}
       >
         {loading && (
           <Loader
@@ -170,7 +133,9 @@ export const Button = React.forwardRef<
           className={styles[`${baseClass}__content`]}
           style={
             isAnimatedLabel
-              ? { maxWidth: isLabelOpen ? labelWidth : 0 }
+              ? // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-expect-error
+                { '--button-label-width': `${labelWidth}px` }
               : undefined
           }
         >

diff --git a/packages/react-components/src/components/Button/styles/animated-label.scss b/packages/react-components/src/components/Button/styles/animated-label.scss
@@ -4,20 +4,16 @@
     .#{$base-class}__content {
       visibility: visible;
       opacity: 1;
+      max-width: var(--button-label-width);
     }
-  }
 
-  &--expanded {
-    &:hover,
-    &:focus-visible {
-      .#{$base-class}__icon {
-        &--right {
-          margin-left: 4px;
-        }
+    .#{$base-class}__icon {
+      &--right {
+        margin-left: 4px;
+      }
 
-        &--left {
-          margin-right: 4px;
-        }
+      &--left {
+        margin-right: 4px;
       }
     }
   }
@@ -32,6 +28,7 @@
     transition: all var(--transition-duration-moderate-1) ease-in-out;
     visibility: hidden;
     opacity: 0;
+    max-width: 0;
     overflow: hidden;
     white-space: nowrap;
   }
@@ -53,21 +50,24 @@
     padding-right: $padding-default;
     padding-left: $padding-default;
 
-    &:hover {
+    &:hover,
+    &:focus-visible {
       padding-right: $padding-hover-label;
       padding-left: $padding-hover-icon;
     }
   }
 
   &.#{$base-class}--with-left-icon {
-    &:hover {
+    &:hover,
+    &:focus-visible {
       padding-right: $padding-hover-label;
       padding-left: $padding-hover-icon;
     }
   }
 
   &.#{$base-class}--with-right-icon {
-    &:hover {
+    &:hover,
+    &:focus-visible {
       padding-right: $padding-hover-icon;
       padding-left: $padding-hover-label;
     }