Merge pull request #1911 from quadratichq/jim-fix-border-menu

fix: border menu
quadratichq · Sep 23, 2024 · 207fca6 · 207fca6
2 parents 0c6dca6 + f67226e
commit 207fca6
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 15 deletions.
diff --git a/quadratic-client/src/app/ui/components/BorderMenu.tsx b/quadratic-client/src/app/ui/components/BorderMenu.tsx
@@ -5,6 +5,7 @@ import { QColorPicker } from '@/app/ui/components/qColorPicker';
 import { useBorders } from '@/app/ui/hooks/useBorders';
 import { CheckSmallIcon } from '@/shared/components/Icons';
 import { Button } from '@/shared/shadcn/ui/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/shared/shadcn/ui/tooltip';
 import { cn } from '@/shared/shadcn/utils';
 import * as ToggleGroup from '@radix-ui/react-toggle-group';
 import { useRecoilValue } from 'recoil';
@@ -40,23 +41,29 @@ export const BorderMenu = () => {
   return (
     <div>
       <ToggleGroup.Root type="single" className="flex flex-row border-b border-border pb-1">
-        {borderActionKeys.map((actionKey, i) => {
+        {borderActionKeys.map((actionKey) => {
+          const label = defaultActionSpec[actionKey].label;
           const Icon = 'Icon' in defaultActionSpec[actionKey] ? defaultActionSpec[actionKey].Icon : undefined;
           const run = defaultActionSpec[actionKey].run;
           return (
-            <ToggleGroup.Item autoFocus={i === 0} asChild value={actionKey} key={actionKey}>
-              <Button
-                size="icon"
-                variant="ghost"
-                className="focus-visible:bg-accent"
-                key={actionKey}
-                onClick={() => {
-                  run(borders);
-                }}
-              >
-                {Icon && <Icon />}
-              </Button>
-            </ToggleGroup.Item>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <ToggleGroup.Item asChild value={actionKey} key={actionKey}>
+                  <Button
+                    size="icon"
+                    variant="ghost"
+                    className="focus-visible:bg-accent"
+                    key={actionKey}
+                    onClick={() => {
+                      run(borders);
+                    }}
+                  >
+                    {Icon && <Icon />}
+                  </Button>
+                </ToggleGroup.Item>
+              </TooltipTrigger>
+              <TooltipContent side="bottom">{label}</TooltipContent>
+            </Tooltip>
           );
         })}
       </ToggleGroup.Root>

diff --git a/quadratic-client/src/shared/components/Icons.tsx b/quadratic-client/src/shared/components/Icons.tsx
@@ -77,7 +77,7 @@ export const BorderRightIcon: IconComponent = (props) => {
 };
 
 export const BorderTopIcon: IconComponent = (props) => {
-  return <Icon {...props}>border_bottom</Icon>;
+  return <Icon {...props}>border_top</Icon>;
 };
 
 export const BorderBottomIcon: IconComponent = (props) => {