✨ feat(ui): forward ref to tooltip

dashpresshq · Jun 30, 2024 · 4eb96e9 · 4eb96e9
1 parent edebd9f
commit 4eb96e9
Show file tree

Hide file tree

Showing 18 changed files with 76 additions and 62 deletions.
diff --git a/src/backend/data/data.service.ts b/src/backend/data/data.service.ts
@@ -138,6 +138,7 @@ export class DataApiService implements IDataApiService {
         ],
       })
     );
+
     if (!data) {
       throw new NotFoundError(
         `Entity '${entity}' with '${columnField}' '${id}' does not exist`

diff --git a/src/components/app/button/soft.tsx b/src/components/app/button/soft.tsx
@@ -79,7 +79,9 @@ export function SoftButton({
     );
 
   return size === "icon" ? (
-    <Tooltip text={labelString}>{buttonElement}</Tooltip>
+    <Tooltip text={labelString} isOverAButton>
+      {buttonElement}
+    </Tooltip>
   ) : (
     buttonElement
   );

diff --git a/src/components/app/form/input/date.tsx b/src/components/app/form/input/date.tsx
@@ -118,6 +118,7 @@ export function ControlledFormDateInput({
 export function FormDateInput(formInput: IFormDateInput) {
   const { input, disabled, meta, minDate, maxDate } = formInput;
   let { value } = input;
+
   if (value && typeof value === "string") {
     value = new Date(value);
     input.onChange(value);

diff --git a/src/components/app/form/input/label-and-error.tsx b/src/components/app/form/input/label-and-error.tsx
@@ -38,7 +38,7 @@ export function LabelAndError({ formInput, children }: IProps) {
             </>
           )}
           {description ? (
-            <Tooltip text={description}>
+            <Tooltip isOverAButton={false} text={description}>
               <SystemIcon icon="Help" className="w-4 h-4 ml-1" />
             </Tooltip>
           ) : null}

diff --git a/src/components/app/off-canvas.tsx b/src/components/app/off-canvas.tsx
@@ -5,6 +5,7 @@ import { Sheet, SheetContent, SheetHeader, SheetTitle } from "../ui/sheet";
 import { cn } from "@/lib/utils";
 import { Separator } from "../ui/separator";
 import { NextPortal } from "./next-portal";
+import { ScrollArea } from "../ui/scroll-area";
 
 export interface IProps {
   show: boolean;
@@ -35,7 +36,7 @@ export function OffCanvas({ show, onClose, title, children, size }: IProps) {
             <SheetTitle>{_(title)}</SheetTitle>
           </SheetHeader>
           <Separator className="mt-2" />
-          <div className="flex-grow overflow-y-auto px-4 my-2">{children}</div>
+          <ScrollArea className="flex-grow px-4 my-2">{children}</ScrollArea>
         </SheetContent>
       </Sheet>
     </NextPortal>

diff --git a/src/components/app/section-box/index.tsx b/src/components/app/section-box/index.tsx
@@ -49,7 +49,7 @@ export function SectionBox({
                 <p className="font-semibold">{_(title)}</p>
               )}
               {description ? (
-                <Tooltip text={description}>
+                <Tooltip isOverAButton={false} text={description}>
                   <SystemIcon icon="Help" className="h-4 w-4" />
                 </Tooltip>
               ) : null}

diff --git a/src/components/app/system-icons.tsx b/src/components/app/system-icons.tsx
@@ -9,24 +9,27 @@ interface IProps {
   className: string;
 }
 
-export function SystemIcon({ icon, label, strokeWidth, className }: IProps) {
-  if (!icon) {
-    return null;
-  }
+export const SystemIcon = forwardRef<HTMLElement, IProps>(
+  ({ icon, label, strokeWidth, className }, ref) => {
+    if (!icon) {
+      return null;
+    }
 
-  if (icon === "none") {
-    return null;
-  }
+    if (icon === "none") {
+      return null;
+    }
 
-  const iconSvg = systemIconToSVG(icon, strokeWidth);
-  return (
-    <i
-      className={cn("inline-block [&_svg]:align-baseline", className)}
-      aria-label={label}
-      dangerouslySetInnerHTML={{ __html: iconSvg }}
-    />
-  );
-}
+    const iconSvg = systemIconToSVG(icon, strokeWidth);
+    return (
+      <i
+        ref={ref}
+        className={cn("inline-block", className)}
+        aria-label={label}
+        dangerouslySetInnerHTML={{ __html: iconSvg }}
+      />
+    );
+  }
+);
 
 export const GrabIcon = forwardRef<
   SVGSVGElement,

diff --git a/src/components/app/table/_Pagination.tsx b/src/components/app/table/_Pagination.tsx
@@ -50,8 +50,7 @@ export function TablePagination({
               onChange={(value) => setPageSize(Number(value))}
               value={`${pageSize}`}
             />{" "}
-            entries of <b>{Intl.NumberFormat("en-US").format(totalRecords)}</b>{" "}
-            results
+            of <b>{Intl.NumberFormat("en-US").format(totalRecords)}</b> results
           </Trans>
         </div>
         <nav role="navigation" aria-label="pagination">
@@ -67,6 +66,8 @@ export function TablePagination({
             breakLinkClassName={className}
             pageLinkClassName={className}
             nextLinkClassName={className}
+            breakClassName="hidden md:inline-block"
+            pageClassName="hidden md:inline-block"
             previousLinkClassName={className}
             disabledLinkClassName="opacity-70 cursor-not-allowed"
             containerClassName="flex flex-row items-center gap-1"

diff --git a/src/components/app/table/filters/Date/_Selection.tsx b/src/components/app/table/filters/Date/_Selection.tsx
@@ -54,7 +54,7 @@ export function DateSelection({
   const currentFilterValue = filterValue?.[field] || "";
   const hasCountValue = currentFilterValue?.includes(":");
   return (
-    <>
+    <div className="flex gap-2">
       {hasCountValue && (
         <Select
           placeholder={msg`Select Count`}
@@ -89,6 +89,6 @@ export function DateSelection({
         }}
         value={getFilterValue(currentFilterValue || defaultValue)}
       />
-    </>
+    </div>
   );
 }
diff --git a/src/components/app/table/index.tsx b/src/components/app/table/index.tsx
@@ -18,6 +18,7 @@ import { cn } from "@/lib/utils";
 import { Table as TableRoot } from "@/components/ui/table";
 import { Skeleton } from "@/components/ui/skeleton";
 import { TableSkeleton } from "../skeleton/table";
+import { ScrollArea } from "@/components/ui/scroll-area";
 
 export { DEFAULT_TABLE_STATE };
 
@@ -94,8 +95,9 @@ export function Table<T extends unknown>({
 
   return (
     <div className="w-full">
-      <div
-        className={cn("relative overflow-x-auto bg-base", {
+      <ScrollArea
+        orientation="horizontal"
+        className={cn("relative bg-base", {
           "min-h-[500px]": dataLength > 0 && !lean,
         })}
       >
@@ -115,7 +117,7 @@ export function Table<T extends unknown>({
           <TableFoot table={table} dataLength={dataLength} />
         </TableRoot>
         {previousDataRender}
-      </div>
+      </ScrollArea>
       {!lean && (
         <TablePagination
           {...{

diff --git a/src/components/app/tabs.tsx b/src/components/app/tabs.tsx
@@ -5,6 +5,7 @@ import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { useLingui } from "@lingui/react";
 import { TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
 import { cn } from "@/lib/utils";
+import { ScrollArea } from "../ui/scroll-area";
 
 interface IProps {
   contents: {
@@ -52,17 +53,19 @@ export function Tabs({ contents, currentTab, onChange }: IProps) {
       value={activeTab}
       onValueChange={changeTab}
     >
-      <TabsList>
-        {contents.map(({ label, id, muted }) => (
-          <TabsTrigger
-            value={id}
-            key={id}
-            className={cn({ "!text-muted": muted })}
-          >
-            {_(label)}
-          </TabsTrigger>
-        ))}
-      </TabsList>
+      <ScrollArea orientation="horizontal">
+        <TabsList className="mb-1">
+          {contents.map(({ label, id, muted }) => (
+            <TabsTrigger
+              value={id}
+              key={id}
+              className={cn({ "!text-muted": muted })}
+            >
+              {_(label)}
+            </TabsTrigger>
+          ))}
+        </TabsList>
+      </ScrollArea>
       {contents.map(({ id, content }) => (
         <TabsContent key={id} value={id}>
           {content}

diff --git a/src/components/app/tooltip/index.tsx b/src/components/app/tooltip/index.tsx
@@ -9,17 +9,18 @@ import {
 export interface IProps {
   children: ReactNode;
   text: string;
+  isOverAButton: boolean;
 }
 
-export function Tooltip({ children, text }: IProps) {
+export function Tooltip({ children, text, isOverAButton }: IProps) {
   if (!text) {
     // eslint-disable-next-line react/jsx-no-useless-fragment
     return <>{children}</>;
   }
   return (
     <TooltipProvider>
       <TooltipRoot>
-        <TooltipTrigger>{children}</TooltipTrigger>
+        <TooltipTrigger asChild={isOverAButton}>{children}</TooltipTrigger>
         <TooltipContent>
           <div
             className="rounded-md bg-base px-3 py-1.5 text-sm text-main shadow-md"

diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx
@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center whitespace-nowrap relative rounded-md text-sm transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {

diff --git a/src/components/ui/scroll-area.tsx b/src/components/ui/scroll-area.tsx
@@ -28,8 +28,10 @@ ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
 const ScrollArea = React.forwardRef<
   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
->(({ className, children, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> & {
+    orientation?: "horizontal";
+  }
+>(({ className, children, orientation, ...props }, ref) => (
   <ScrollAreaPrimitive.Root
     ref={ref}
     className={cn("relative overflow-hidden", className)}
@@ -38,7 +40,7 @@ const ScrollArea = React.forwardRef<
     <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
       {children}
     </ScrollAreaPrimitive.Viewport>
-    <ScrollBar />
+    <ScrollBar orientation={orientation} />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
 ));

diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx
@@ -11,7 +11,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      "inline-flex h-9 items-center justify-center rounded-md bg-base shadow-md p-1 text-main",
+      "inline-flex h-9 items-center justify-center rounded-md bg-base shadow-md p-1 text-main overflow-hidden",
       className
     )}
     {...props}

diff --git a/src/frontend/_layouts/app/NavigationSideBar/SideBar.tsx b/src/frontend/_layouts/app/NavigationSideBar/SideBar.tsx
@@ -67,7 +67,7 @@ export function SideBar({ isFullWidth, setIsFullWidth }: IProps) {
           : SIDE_BAR_WIDTH_VARIATIONS.collapsed,
       }}
     >
-      <div className="flex items-center justify-center h-[50px] bg-primary-shade-thick-xxl">
+      <div className="flex items-center justify-center h-[50px] bg-[hsla(var(--dp-primary),0.95)]">
         <Link href="/">
           {isFullWidth ? (
             <img
@@ -81,7 +81,7 @@ export function SideBar({ isFullWidth, setIsFullWidth }: IProps) {
         </Link>
       </div>
       <div className="flex justify-between flex-col h-[calc(100dvh-50px)]">
-        <ScrollArea className="h-[calc(100%-1px)] bg-primary-shade-thick-xxl">
+        <ScrollArea className="h-[calc(100%-1px)] bg-[hsla(var(--dp-primary),0.95)]">
           <ProfileOnNavigation isFullWidth={isFullWidth} />
           <ViewStateMachine
             loading={navigationMenuItems.isLoading}

diff --git a/src/frontend/views/settings/Variables/ManageCredentialGroup.tsx b/src/frontend/views/settings/Variables/ManageCredentialGroup.tsx
@@ -218,16 +218,18 @@ export function ManageCredentialGroup({
             <PasswordMessage />
           </div>
         )}
-        <KeyValueForm
-          group={group}
-          initialValues={tableData.data.find(
-            ({ key }) => key === currentConfigItem
-          )}
-          onSubmit={async (values: { key: string; value: string }) => {
-            await upsertConfigurationMutation.mutateAsync(values);
-            closeConfigItem();
-          }}
-        />
+        <div className="px-1">
+          <KeyValueForm
+            group={group}
+            initialValues={tableData.data.find(
+              ({ key }) => key === currentConfigItem
+            )}
+            onSubmit={async (values: { key: string; value: string }) => {
+              await upsertConfigurationMutation.mutateAsync(values);
+              closeConfigItem();
+            }}
+          />
+        </div>
       </OffCanvas>
       <VariablesDocumentation />
     </Card>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -14,7 +14,6 @@ module.exports = {
     },
     extend: {
       colors: {
-        // foreground: "hsl(var(--foreground))",
         soft: "hsl(var(--dp-soft))",
         muted: "hsl(var(--dp-muted))",
         main: "hsl(var(--dp-main))",
@@ -29,11 +28,7 @@ module.exports = {
           "alpha-text": "hsl(var(--dp-primary-alpha-text))",
           "shade-thick": "hsla(var(--dp-primary), 0.85)",
           "shade-thick-xl": "hsla(var(--dp-primary), 0.9)",
-          "shade-thick-xxl": "hsla(var(--dp-primary), 0.95)",
         },
-        // destructive: {
-        //   DEFAULT: "hsl(var(--destructive))",
-        // },
       },
       borderRadius: {
         lg: `var(--radius)`,
-Original file line number
+Diff line change
@@ Expand Up / @@ -138,6 +138,7 @@ export class DataApiService implements IDataApiService { @@
             ],
           })
         );
         if (!data) {
           throw new NotFoundError(
             `Entity '${entity}' with '${columnField}' '${id}' does not exist`
@@ Expand Down @@