Fix tooltips for buttons under `ActionButton` being partially covered by superseding buttons (#911)

* made Tooltip wrap ToolButton instead of the other way around for items in ActionButton

* removes unnecessary icon variant

* Add tooltips to align/distribute

Co-authored-by: Steve Ruiz <steveruizok@gmail.com>

packages/tldraw/src/components/ToolsPanel/ActionButton.tsx

@@ -196,149 +196,156 @@ export function ActionButton() {
       <DMContent sideOffset={16} side={contentSide}>
         <>
           <ButtonsRow>
-            <ToolButton variant="icon" disabled={!hasSelection} onClick={handleDuplicate}>
-              <Tooltip
-                label={intl.formatMessage({ id: 'duplicate' })}
-                kbd={`#D`}
-                id="TD-Tools-Copy"
-              >
+            <Tooltip label={intl.formatMessage({ id: 'duplicate' })} kbd={`#D`} id="TD-Tools-Copy">
+              <ToolButton disabled={!hasSelection} onClick={handleDuplicate}>
                 <CopyIcon />
-              </Tooltip>
-            </ToolButton>
-            <ToolButton disabled={!hasSelection} onClick={handleRotate}>
-              <Tooltip label={intl.formatMessage({ id: 'rotate' })} id="TD-Tools-Rotate">
+              </ToolButton>
+            </Tooltip>
+            <Tooltip label={intl.formatMessage({ id: 'rotate' })} id="TD-Tools-Rotate">
+              <ToolButton disabled={!hasSelection} onClick={handleRotate}>
                 <RotateCounterClockwiseIcon />
-              </Tooltip>
-            </ToolButton>
-            <ToolButton disabled={!hasSelection} onClick={handleToggleLocked}>
-              <Tooltip
-                label={intl.formatMessage({ id: isAllLocked ? 'unlock' : 'lock' })}
-                kbd={`#L`}
-                id="TD-Tools-Lock"
-              >
-                {isAllLocked ? <LockClosedIcon /> : <LockOpen1Icon />}
-              </Tooltip>
-            </ToolButton>
-            <ToolButton disabled={!hasSelection} onClick={handleToggleAspectRatio}>
-              <Tooltip
-                label={intl.formatMessage({
-                  id: isAllAspectLocked ? 'unlock.aspect.ratio' : 'lock.aspect.ratio',
-                })}
-                id="TD-Tools-AspectRatio"
-              >
-                {isAllAspectLocked ? <AspectRatioIcon /> : <BoxIcon />}
-              </Tooltip>
-            </ToolButton>
-            <ToolButton
-              disabled={!hasSelection || (!isAllGrouped && !hasMultipleSelection)}
-              onClick={handleGroup}
+              </ToolButton>
+            </Tooltip>
+            <Tooltip
+              label={intl.formatMessage({ id: isAllLocked ? 'unlock' : 'lock' })}
+              kbd={`#L`}
+              id="TD-Tools-Lock"
             >
-              <Tooltip label={intl.formatMessage({ id: 'group' })} kbd={`#G`} id="TD-Tools-Group">
+              <ToolButton disabled={!hasSelection} onClick={handleToggleLocked}>
+                {isAllLocked ? <LockClosedIcon /> : <LockOpen1Icon />}
+              </ToolButton>
+            </Tooltip>
+            <Tooltip
+              label={intl.formatMessage({
+                id: isAllAspectLocked ? 'unlock.aspect.ratio' : 'lock.aspect.ratio',
+              })}
+              id="TD-Tools-AspectRatio"
+            >
+              <ToolButton disabled={!hasSelection} onClick={handleToggleAspectRatio}>
+                {isAllAspectLocked ? <AspectRatioIcon /> : <BoxIcon />}
+              </ToolButton>
+            </Tooltip>
+            <Tooltip label={intl.formatMessage({ id: 'group' })} kbd={`#G`} id="TD-Tools-Group">
+              <ToolButton
+                disabled={!hasSelection || (!isAllGrouped && !hasMultipleSelection)}
+                onClick={handleGroup}
+              >
                 <GroupIcon />
-              </Tooltip>
-            </ToolButton>
+              </ToolButton>
+            </Tooltip>
           </ButtonsRow>
           <ButtonsRow>
-            <ToolButton disabled={!hasSelection} onClick={handleMoveToBack}>
-              <Tooltip
-                label={intl.formatMessage({ id: 'move.to.back' })}
-                kbd={`#⇧[`}
-                id="TD-Tools-PinBottom"
-              >
+            <Tooltip
+              label={intl.formatMessage({ id: 'move.to.back' })}
+              kbd={`#⇧[`}
+              id="TD-Tools-PinBottom"
+            >
+              <ToolButton disabled={!hasSelection} onClick={handleMoveToBack}>
                 <PinBottomIcon />
-              </Tooltip>
-            </ToolButton>
-            <ToolButton disabled={!hasSelection} onClick={handleMoveBackward}>
-              <Tooltip
-                label={intl.formatMessage({ id: 'move.backward' })}
-                kbd={`#[`}
-                id="TD-Tools-ArrowDown"
-              >
+              </ToolButton>
+            </Tooltip>
+            <Tooltip
+              label={intl.formatMessage({ id: 'move.backward' })}
+              kbd={`#[`}
+              id="TD-Tools-ArrowDown"
+            >
+              <ToolButton disabled={!hasSelection} onClick={handleMoveBackward}>
                 <ArrowDownIcon />
-              </Tooltip>
-            </ToolButton>
-            <ToolButton disabled={!hasSelection} onClick={handleMoveForward}>
-              <Tooltip
-                label={intl.formatMessage({ id: 'move.forward' })}
-                kbd={`#]`}
-                id="TD-Tools-ArrowUp"
-              >
+              </ToolButton>
+            </Tooltip>
+            <Tooltip
+              label={intl.formatMessage({ id: 'move.forward' })}
+              kbd={`#]`}
+              id="TD-Tools-ArrowUp"
+            >
+              <ToolButton disabled={!hasSelection} onClick={handleMoveForward}>
                 <ArrowUpIcon />
-              </Tooltip>
-            </ToolButton>
-            <ToolButton disabled={!hasSelection} onClick={handleMoveToFront}>
-              <Tooltip
-                label={intl.formatMessage({ id: 'move.to.front' })}
-                kbd={`#⇧]`}
-                id="TD-Tools-PinTop"
-              >
+              </ToolButton>
+            </Tooltip>
+            <Tooltip
+              label={intl.formatMessage({ id: 'move.to.front' })}
+              kbd={`#⇧]`}
+              id="TD-Tools-PinTop"
+            >
+              <ToolButton disabled={!hasSelection} onClick={handleMoveToFront}>
                 <PinTopIcon />
-              </Tooltip>
-            </ToolButton>
-            <ToolButton disabled={!hasSelection} onClick={handleResetAngle}>
-              <Tooltip label={intl.formatMessage({ id: 'reset.angle' })} id="TD-Tools-ResetAngle">
+              </ToolButton>
+            </Tooltip>
+            <Tooltip label={intl.formatMessage({ id: 'reset.angle' })} id="TD-Tools-ResetAngle">
+              <ToolButton disabled={!hasSelection} onClick={handleResetAngle}>
                 <AngleIcon />
-              </Tooltip>
-            </ToolButton>
+              </ToolButton>
+            </Tooltip>
           </ButtonsRow>
           <Divider />
           <ButtonsRow>
-            <ToolButton disabled={!hasTwoOrMore} onClick={alignLeft} id="TD-Tools-AlignLeft">
-              <AlignLeftIcon />
-            </ToolButton>
-            <ToolButton
-              disabled={!hasTwoOrMore}
-              onClick={alignCenterHorizontal}
+            <Tooltip label={intl.formatMessage({ id: 'align.left' })} id="TD-Tools-AlignLeft">
+              <ToolButton disabled={!hasTwoOrMore} onClick={alignLeft}>
+                <AlignLeftIcon />
+              </ToolButton>
+            </Tooltip>
+            <Tooltip
+              label={intl.formatMessage({ id: 'align.center.x' })}
               id="TD-Tools-AlignCenterHorizontal"
             >
-              <AlignCenterHorizontallyIcon />
-            </ToolButton>
-            <ToolButton disabled={!hasTwoOrMore} onClick={alignRight} id="TD-Tools-AlignRight">
-              <AlignRightIcon />
-            </ToolButton>
-            <ToolButton
-              disabled={!hasTwoOrMore}
-              onClick={stretchHorizontally}
+              <ToolButton disabled={!hasTwoOrMore} onClick={alignCenterHorizontal}>
+                <AlignCenterHorizontallyIcon />
+              </ToolButton>
+            </Tooltip>
+            <Tooltip label={intl.formatMessage({ id: 'align.right' })} id="TD-Tools-AlignRight">
+              <ToolButton disabled={!hasTwoOrMore} onClick={alignRight}>
+                <AlignRightIcon />
+              </ToolButton>
+            </Tooltip>
+            <Tooltip
+              label={intl.formatMessage({ id: 'stretch.x' })}
               id="TD-Tools-StretchHorizontal"
             >
-              <StretchHorizontallyIcon />
-            </ToolButton>
-            <ToolButton
-              disabled={!hasThreeOrMore}
-              onClick={distributeHorizontally}
+              <ToolButton disabled={!hasTwoOrMore} onClick={stretchHorizontally}>
+                <StretchHorizontallyIcon />
+              </ToolButton>
+            </Tooltip>
+            <Tooltip
+              label={intl.formatMessage({ id: 'distribute.x' })}
               id="TD-Tools-SpaceEvenlyHorizontal"
             >
-              <SpaceEvenlyHorizontallyIcon />
-            </ToolButton>
+              <ToolButton disabled={!hasThreeOrMore} onClick={distributeHorizontally}>
+                <SpaceEvenlyHorizontallyIcon />
+              </ToolButton>
+            </Tooltip>
           </ButtonsRow>
           <ButtonsRow>
-            <ToolButton disabled={!hasTwoOrMore} onClick={alignTop} id="TD-Tools-AlignTop">
-              <AlignTopIcon />
-            </ToolButton>
-            <ToolButton
-              disabled={!hasTwoOrMore}
-              onClick={alignCenterVertical}
+            <Tooltip label={intl.formatMessage({ id: 'align.top' })} id="TD-Tools-AlignTop">
+              <ToolButton disabled={!hasTwoOrMore} onClick={alignTop}>
+                <AlignTopIcon />
+              </ToolButton>
+            </Tooltip>
+            <Tooltip
+              label={intl.formatMessage({ id: 'align.center.y' })}
               id="TD-Tools-AlignCenterVertical"
             >
-              <AlignCenterVerticallyIcon />
-            </ToolButton>
-            <ToolButton disabled={!hasTwoOrMore} onClick={alignBottom} id="TD-Tools-AlignBottom">
-              <AlignBottomIcon />
-            </ToolButton>
-            <ToolButton
-              disabled={!hasTwoOrMore}
-              onClick={stretchVertically}
-              id="TD-Tools-tretchVertical"
-            >
-              <StretchVerticallyIcon />
-            </ToolButton>
-            <ToolButton
-              disabled={!hasThreeOrMore}
-              onClick={distributeVertically}
+              <ToolButton disabled={!hasTwoOrMore} onClick={alignCenterVertical}>
+                <AlignCenterVerticallyIcon />
+              </ToolButton>
+            </Tooltip>
+            <Tooltip label={intl.formatMessage({ id: 'align.bottom' })} id="TD-Tools-AlignBottom">
+              <ToolButton disabled={!hasTwoOrMore} onClick={alignBottom}>
+                <AlignBottomIcon />
+              </ToolButton>
+            </Tooltip>
+            <Tooltip label={intl.formatMessage({ id: 'stretch.y' })} id="TD-Tools-StretchVertical">
+              <ToolButton disabled={!hasTwoOrMore} onClick={stretchVertically}>
+                <StretchVerticallyIcon />
+              </ToolButton>
+            </Tooltip>
+            <Tooltip
+              label={intl.formatMessage({ id: 'distribute.y' })}
               id="TD-Tools-SpaceEvenlyVertical"
             >
-              <SpaceEvenlyVerticallyIcon />
-            </ToolButton>
+              <ToolButton disabled={!hasThreeOrMore} onClick={distributeVertically}>
+                <SpaceEvenlyVerticallyIcon />
+              </ToolButton>
+            </Tooltip>
           </ButtonsRow>
         </>
       </DMContent>

packages/tldraw/src/translations/main.json

@@ -107,5 +107,15 @@
   "github": "Github",
   "twitter": "Twitter",
   "discord": "Discord",
-  "image": "Image"
+  "image": "Image",
+  "align.left": "Align Left",
+  "align.center.x": "Align Horizontal Center",
+  "align.right": "Align Right",
+  "align.top": "Align Top",
+  "align.center.y": "Align Vertical Center",
+  "align.bottom": "Align Bottom",
+  "distribute.x": "Distribute Horizontal",
+  "distribute.y": "Distribute Vertical",
+  "stretch.x": "Stretch Horizontal",
+  "stretch.y": "Stretch Vertical"
 }