button: remove extra button wrap (#87276)

Tooltip with disabled skips rendering and just renders children

Author: JonasBa

static/app/components/core/button/index.tsx

@@ -283,47 +283,39 @@ function BaseButton({
   // Buttons come in 4 flavors: <Link>, <ExternalLink>, <a>, and <button>.
   // Let's use props to determine which to serve up, so we don't have to think about it.
   // *Note* you must still handle tabindex manually.
-  const button = (
-    <StyledButton
-      aria-label={accessibleLabel}
-      aria-disabled={disabled}
-      busy={busy}
-      disabled={disabled}
-      to={disabled ? undefined : to}
-      href={disabled ? undefined : href}
-      replace={replace}
-      size={size}
-      priority={priority}
-      borderless={borderless}
-      translucentBorder={translucentBorder}
-      type={type}
-      {...buttonProps}
-      onClick={handleClick}
-      role="button"
-    >
-      {priority !== 'link' && (
-        <InteractionStateLayer
-          higherOpacity={priority && ['primary', 'danger'].includes(priority)}
-        />
-      )}
-      <ButtonLabel size={size} borderless={borderless}>
-        {icon && (
-          <Icon size={size} hasChildren={hasChildren}>
-            <IconDefaultsProvider size={ICON_SIZES[size]}>{icon}</IconDefaultsProvider>
-          </Icon>
-        )}
-        {children}
-      </ButtonLabel>
-    </StyledButton>
-  );
-
-  if (!title) {
-    return button;
-  }
-
   return (
-    <Tooltip skipWrapper {...tooltipProps} title={title}>
-      {button}
+    <Tooltip skipWrapper {...tooltipProps} title={title} disabled={!title}>
+      <StyledButton
+        aria-label={accessibleLabel}
+        aria-disabled={disabled}
+        busy={busy}
+        disabled={disabled}
+        to={disabled ? undefined : to}
+        href={disabled ? undefined : href}
+        replace={replace}
+        size={size}
+        priority={priority}
+        borderless={borderless}
+        translucentBorder={translucentBorder}
+        type={type}
+        {...buttonProps}
+        onClick={handleClick}
+        role="button"
+      >
+        {priority !== 'link' && (
+          <InteractionStateLayer
+            higherOpacity={priority && ['primary', 'danger'].includes(priority)}
+          />
+        )}
+        <ButtonLabel size={size} borderless={borderless}>
+          {icon && (
+            <Icon size={size} hasChildren={hasChildren}>
+              <IconDefaultsProvider size={ICON_SIZES[size]}>{icon}</IconDefaultsProvider>
+            </Icon>
+          )}
+          {children}
+        </ButtonLabel>
+      </StyledButton>
     </Tooltip>
   );
 }

static/app/components/tooltip.tsx

@@ -66,10 +66,10 @@ function Tooltip({
 
   // Reset the visibility when the tooltip becomes disabled
   useEffect(() => {
-    if (disabled) {
+    if (disabled && isOpen) {
       reset();
     }
-  }, [reset, disabled]);
+  }, [reset, disabled, isOpen]);
 
   // Update the tooltip when the tooltip is forced to be visible and the children change
   useEffect(() => {