Toolbar rewrite: (mostly) fixed content, separate config, rich tooltips, and roadmapped tools (#3119)

* Basic implementation of rich tooltips

* Break out config to its own file, add a bunch of items

* Better lower right control tooltip sizing

* Add a bunch of sketch tools to the config

* Fix hotkey collisions and UX polish

* Get tests working again

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* Re-run CI

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* We updated how the sidebar buttons' test IDs are generated, fix it post-merge

* fmt

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* Re-run CI

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* Re-run CI

* A snapshot a day keeps the bugs away! 📷🐛 (OS: ubuntu)

* Re-run CI

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

src/components/Tooltip.tsx

@@ -3,7 +3,6 @@
 // eslint-disable-next-line css-modules/no-unused-class
 import styles from './Tooltip.module.css'
 
-const SIDES = ['top', 'bottom', 'left', 'right'] as const
 type TopOrBottom = 'top' | 'bottom'
 type LeftOrRight = 'left' | 'right'
 type Corner = `${TopOrBottom}-${LeftOrRight}`
@@ -11,53 +10,36 @@ type TooltipPosition = TopOrBottom | LeftOrRight | Corner
 
 interface TooltipProps extends React.PropsWithChildren {
   position?: TooltipPosition
-  className?: string
+  wrapperClassName?: string
+  contentClassName?: string
   delay?: number
   hoverOnly?: boolean
+  inert?: boolean
 }
 
 export default function Tooltip({
   children,
   position = 'top',
-  className,
+  wrapperClassName: className,
+  contentClassName,
   delay = 200,
   hoverOnly = false,
+  inert = true,
 }: TooltipProps) {
   return (
     <div
       // @ts-ignore while awaiting merge of this PR for support of "inert" https://github.com/DefinitelyTyped/DefinitelyTyped/pull/60822
-      inert="true"
+      inert={inert}
       role="tooltip"
-      className={`${styles.tooltip} ${hoverOnly ? '' : styles.withFocus} ${
+      className={`p-3 ${
+        position !== 'left' && position !== 'right' ? 'px-0' : ''
+      } ${styles.tooltipWrapper} ${hoverOnly ? '' : styles.withFocus} ${
         styles[position]
       } ${className}`}
       style={{ '--_delay': delay + 'ms' } as React.CSSProperties}
     >
-      {children}
-      <div className={styles.caret}>
-        {SIDES.includes(position as any) ? (
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 8 12"
-          >
-            <path
-              fill="currentColor"
-              d="M3.0513 9.154c.304.9116 1.5935.9116 1.8974 0L8 0H0l3.0513 9.154Z"
-            />
-          </svg>
-        ) : (
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            fill="none"
-            viewBox="0 0 8 10"
-          >
-            <path
-              fill="currentColor"
-              d="m0 0 6.168 9.252C6.7168 10.0751 8 9.6865 8 8.6971V0H0Z"
-            />
-          </svg>
-        )}
+      <div className={`rounded ${styles.tooltip} ${contentClassName || ''}`}>
+        {children}
       </div>
     </div>
   )