Add a simple tooltip to the sidebar (#6295)

## Summary Not perfect, but IMO helpful: <img width="1792" alt="Screen Shot 2023-08-02 at 9 29 24 PM" src="https://github.com/astral-sh/ruff/assets/1309177/e613e918-75cb-475e-9ea4-f833d1a0b5f6"> <img width="1792" alt="Screen Shot 2023-08-02 at 9 29 20 PM" src="https://github.com/astral-sh/ruff/assets/1309177/bb3efdfe-40e1-45b5-b774-082521b2d214">
astral-sh · Aug 3, 2023 · 9e2bbf4 · 9e2bbf4
1 parent d7627c3
commit 9e2bbf4
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 5 deletions.
diff --git a/playground/src/Editor/PrimarySideBar.tsx b/playground/src/Editor/PrimarySideBar.tsx
@@ -16,6 +16,7 @@ export default function PrimarySideBar({
     <SideBar position="left">
       <SideBarEntry
         title="Source"
+        position={"left"}
         onClick={() => onSelectTool("Source")}
         selected={selected == "Source"}
       >
@@ -24,6 +25,7 @@ export default function PrimarySideBar({
 
       <SideBarEntry
         title="Settings"
+        position={"left"}
         onClick={() => onSelectTool("Settings")}
         selected={selected == "Settings"}
       >

diff --git a/playground/src/Editor/SecondarySideBar.tsx b/playground/src/Editor/SecondarySideBar.tsx
@@ -20,6 +20,7 @@ export default function SecondarySideBar({
     <SideBar position="right">
       <SideBarEntry
         title="Format (alpha)"
+        position={"right"}
         selected={selected === SecondaryTool.Format}
         onClick={() => onSelected(SecondaryTool.Format)}
       >
@@ -28,6 +29,7 @@ export default function SecondarySideBar({
 
       <SideBarEntry
         title="AST"
+        position={"right"}
         selected={selected === SecondaryTool.AST}
         onClick={() => onSelected(SecondaryTool.AST)}
       >
@@ -36,6 +38,7 @@ export default function SecondarySideBar({
 
       <SideBarEntry
         title="Tokens"
+        position={"right"}
         selected={selected === SecondaryTool.Tokens}
         onClick={() => onSelected(SecondaryTool.Tokens)}
       >
@@ -44,6 +47,7 @@ export default function SecondarySideBar({
 
       <SideBarEntry
         title="Formatter IR"
+        position={"right"}
         selected={selected === SecondaryTool.FIR}
         onClick={() => onSelected(SecondaryTool.FIR)}
       >

diff --git a/playground/src/Editor/ShareButton.tsx b/playground/src/Editor/ShareButton.tsx
@@ -22,9 +22,7 @@ export default function ShareButton({ onShare }: { onShare?: () => void }) {
       >
         Share
       </span>
-      <span aria-hidden="false">
-        Copied!
-      </span>
+      <span aria-hidden="false">Copied!</span>
     </AstralButton>
   ) : (
     <AstralButton

diff --git a/playground/src/Editor/SideBar.tsx b/playground/src/Editor/SideBar.tsx
@@ -23,6 +23,8 @@ export interface SideBarEntryProps {
   title: string;
   selected: boolean;
   children: ReactNode;
+  position: "left" | "right";
+
   onClick?(): void;
 }
 
@@ -31,20 +33,40 @@ export function SideBarEntry({
   onClick,
   children,
   selected,
+  position,
 }: SideBarEntryProps) {
   return (
     <li
-      title={title}
+      aria-label={title}
       onClick={onClick}
       role="button"
-      className={`py-4 px-2 relative flex items-center flex-col fill-white text-white ${
+      className={`group py-4 px-2 relative flex items-center justify-center flex-col fill-white text-white ${
         selected ? "opacity-100" : "opacity-50 hover:opacity-100"
       }`}
     >
       {children}
       {selected && (
         <span className="absolute start-0 inset-y-0 bg-white w-0.5"></span>
       )}
+
+      <Tooltip position={position}>{title}</Tooltip>
     </li>
   );
 }
+
+interface TooltipProps {
+  children: ReactNode;
+  position: "left" | "right";
+}
+
+function Tooltip({ children, position }: TooltipProps) {
+  return (
+    <span
+      className={`z-10 absolute w-100 rounded dark:border-[1px] dark:border-white bg-space dark:bg-white px-2 py-1 hidden text-xs text-white dark:text-black group-hover:flex whitespace-nowrap ${
+        position === "right" ? "right-[52px]" : "left-[52px]"
+      }`}
+    >
+      {children}
+    </span>
+  );
+}