Update some design elements based on latest orbit designs (#1349)

apollographql · May 6, 2024 · 06a0b5a · 06a0b5a
1 parent 2761ff3
commit 06a0b5a
Show file tree

Hide file tree

Showing 22 changed files with 249 additions and 75 deletions.
diff --git a/.changeset/moody-grapes-play.md b/.changeset/moody-grapes-play.md
@@ -0,0 +1,5 @@
+---
+"apollo-client-devtools": patch
+---
+
+Fix some design issues to match latest design implementation
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -46,6 +46,7 @@
     "@radix-ui/react-tabs": "^1.0.2",
     "@radix-ui/react-tooltip": "^1.0.7",
     "@xstate/fsm": "^2.1.0",
+    "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "framer-motion": "^11.0.3",
     "graphql": "^16.0.0",
@@ -58,6 +59,7 @@
     "react-json-tree": "^0.18.0",
     "react-resizable-panels": "^1.0.0",
     "react-syntax-highlighter": "^15.5.0",
+    "tailwind-merge": "^2.3.0",
     "zen-observable": "^0.10.0"
   },
   "devDependencies": {

diff --git a/src/application/App.tsx b/src/application/App.tsx
@@ -65,7 +65,7 @@ const ALERT_CONFIGS = {
         <Button
           size="xs"
           variant="hidden"
-          icon={IconSync}
+          icon={<IconSync />}
           onClick={() => panelWindow.send({ type: "retryConnection" })}
         >
           Retry connection
@@ -175,22 +175,25 @@ export const App = () => {
 
           <ButtonGroup className="ml-auto flex-1 justify-end">
             <Tooltip content="Report an issue">
-              <Button variant="hidden" size="sm" asChild>
-                <GitHubIssueLink labels={[LABELS.bug]} body={ISSUE_BODY}>
-                  <IconGitHubSolid aria-hidden="true" className="w-4" />
-                </GitHubIssueLink>
+              <Button
+                aria-label="Report an issue"
+                variant="hidden"
+                size="sm"
+                icon={<IconGitHubSolid />}
+                asChild
+              >
+                <GitHubIssueLink labels={[LABELS.bug]} body={ISSUE_BODY} />
               </Button>
             </Tooltip>
 
             <Tooltip content="Settings">
               <Button
+                aria-label="Settings"
                 size="sm"
                 variant="hidden"
                 onClick={() => setSettingsOpen(true)}
-              >
-                <IconSettings aria-hidden="true" className="w-4" />
-                <span className="sr-only">Settings</span>
-              </Button>
+                icon={<IconSettings />}
+              />
             </Tooltip>
           </ButtonGroup>
           <SettingsModal open={settingsOpen} onOpen={setSettingsOpen} />

diff --git a/src/application/components/Button.tsx b/src/application/components/Button.tsx
@@ -1,29 +1,118 @@
-import type { ComponentPropsWithoutRef, ElementType } from "react";
-import { forwardRef } from "react";
-import { clsx } from "clsx";
+import type { ComponentPropsWithoutRef, ReactElement } from "react";
+import { cloneElement, forwardRef, isValidElement } from "react";
 import { Slot, Slottable } from "@radix-ui/react-slot";
 import type { AsChildProps } from "../types/props";
+import { cva, type VariantProps } from "class-variance-authority";
+import { twMerge } from "tailwind-merge";
+import type { OmitNull } from "../types/utils";
 
 type NativeButtonProps = ComponentPropsWithoutRef<"button">;
 
-type ButtonSize = "md" | "sm" | "xs";
+type ButtonProps = AsChildProps<NativeButtonProps> &
+  Variants & {
+    className?: string;
+    icon?: ReactElement<{ "aria-hidden": boolean; className?: string }>;
+  };
 
-type ButtonProps = AsChildProps<NativeButtonProps> & {
-  className?: string;
-  icon?: ElementType;
-  variant: "primary" | "secondary" | "hidden";
-  size: ButtonSize;
-};
+type Variants = OmitNull<Required<VariantProps<typeof button>>>;
 
-const ICON_SIZES = {
-  xs: "w-3",
-  sm: "w-4",
-  md: "w-4",
-} satisfies Record<ButtonSize, string>;
+const button = cva(
+  [
+    "flex",
+    "items-center",
+    "flex",
+    "gap-2",
+    "outline-none",
+    "focus:ring-3",
+    "focus:ring-offset-3",
+    "focus:ring-offset-primary",
+    "focus:dark:ring-offset-primary-dark",
+    "focus:ring-focused",
+    "focus:dark:ring-focused-dark",
+    "disabled:bg-button-disabled",
+    "disabled:dark:bg-button-disabled-dark",
+    "disabled:text-disabled",
+    "disabled:dark:text-disabled-dark",
+    "disabled:cursor-not-allowed",
+    "transition-colors",
+    "duration-200",
+  ],
+  {
+    variants: {
+      variant: {
+        hidden: [
+          "text-primary",
+          "dark:text-primary-dark",
+          "hover:bg-button-secondaryHover",
+          "hover:dark:bg-button-secondaryHover-dark",
+          "active:bg-button-secondarySelected",
+          "active:dark:bg-button-secondarySelected-dark",
+        ],
+        primary: [
+          "text-white",
+          "bg-button-primary",
+          "dark:bg-button-primary-dark",
+          "hover:bg-button-primaryHover",
+          "hover:dark:bg-button-primaryHover-dark",
+          "active:bg-selected",
+          "active:dark:bg-selected-dark",
+        ],
+        secondary: [
+          "text-primary",
+          "dark:text-primary-dark",
+          "border",
+          "bg-button-secondary",
+          "dark:bg-button-secondary-dark",
+          "border-primary",
+          "dark:border-primary-dark",
+          "hover:bg-button-secondaryHover",
+          "hover:dark:bg-button-secondaryHover-dark",
+          "active:bg-selected",
+          "active:dark:bg-selected-dark",
+        ],
+      },
+      size: {
+        xs: [
+          "p-2",
+          "rounded",
+          "text-sm",
+          "font-semibold",
+          "has-[>svg:only-child]:p-1.5",
+        ],
+        sm: [
+          "py-2",
+          "px-3",
+          "rounded",
+          "text-sm",
+          "font-semibold",
+          "has-[>svg:only-child]:p-2",
+        ],
+        md: [
+          "py-2",
+          "px-3",
+          "rounded-lg",
+          "text-md",
+          "font-semibold",
+          "has-[>svg:only-child]:p-3",
+        ],
+      },
+    },
+  }
+);
+
+const iconSize = cva([], {
+  variants: {
+    size: {
+      xs: ["w-3"],
+      sm: ["w-4"],
+      md: ["w-4"],
+    },
+  },
+});
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   function Button(
-    { asChild, className, children, variant, size, icon: Icon, ...props },
+    { asChild, className, children, variant, size, icon, ...props },
     ref
   ) {
     const Component = asChild ? Slot : "button";
@@ -32,25 +121,13 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
       <Component
         {...props}
         ref={ref}
-        className={clsx(
-          className,
-          "flex items-center gap-2 outline-none",
-          "focus:ring-3 focus:ring-offset-3 focus:ring-offset-primary focus:dark:ring-offset-primary-dark focus:ring-focused focus:dark:ring-focused-dark",
-          "disabled:bg-button-disabled disabled:dark:bg-button-disabled-dark disabled:text-disabled disabled:dark:text-disabled-dark disabled:cursor-not-allowed",
-          {
-            "py-2 px-3 rounded-lg text-md font-semibold": size === "md",
-            "py-2 px-3 rounded text-sm font-semibold": size === "sm",
-            "p-2 rounded text-sm font-semibold": size === "xs",
-            "text-white bg-button-primary dark:bg-button-primary-dark hover:bg-button-primaryHover hover:dark:bg-button-primaryHover-dark active:bg-selected active:dark:bg-selected-dark":
-              variant === "primary",
-            "text-primary dark:text-primary-dark border bg-button-secondary dark:bg-button-secondary-dark border-primary dark:border-primary-dark hover:bg-button-secondaryHover hover:dark:bg-button-secondaryHover-dark active:bg-selected active:dark:bg-selected-dark":
-              variant === "secondary",
-            "text-primary dark:text-primary-dark hover:bg-button-secondaryHover hover:dark:bg-button-secondaryHover-dark active:bg-selected active:dark:bg-selected-dark":
-              variant === "hidden",
-          }
-        )}
+        className={twMerge(button({ variant, size }), className)}
       >
-        {Icon && <Icon className={ICON_SIZES[size]} />}
+        {isValidElement(icon) &&
+          cloneElement(icon, {
+            "aria-hidden": true,
+            className: twMerge(iconSize({ size }), icon.props.className),
+          })}
         <Slottable>{children}</Slottable>
       </Component>
     );

diff --git a/src/application/components/Cache/sidebar/EntityList.tsx b/src/application/components/Cache/sidebar/EntityList.tsx
@@ -28,7 +28,7 @@ export function EntityList({
             key={cacheId}
             onClick={() => setCacheId(cacheId)}
             selected={cacheId === selectedCacheId}
-            className="font-code h-8 text-sm"
+            className="font-code"
           >
             {searchTerm ? (
               <HighlightMatch searchTerm={searchTerm} value={cacheId} />

diff --git a/src/application/components/CopyButton.tsx b/src/application/components/CopyButton.tsx
@@ -1,5 +1,4 @@
 import type { ComponentPropsWithoutRef } from "react";
-import clsx from "clsx";
 import CopyToClipboard from "react-copy-to-clipboard";
 import { Button } from "./Button";
 import IconCopy from "@apollo/icons/default/IconCopy.svg";
@@ -20,14 +19,14 @@ export function CopyButton({
 }: CopyButtonProps) {
   return (
     <CopyToClipboard text={text}>
-      <Button {...rest} className={className} size={size} variant="hidden">
-        <IconCopy
-          className={clsx({
-            "h-4": size === "sm" || size === "md",
-            "h-2": size === "xs",
-          })}
-        />
-      </Button>
+      <Button
+        {...rest}
+        aria-label="Copy"
+        className={className}
+        size={size}
+        variant="hidden"
+        icon={<IconCopy />}
+      />
     </CopyToClipboard>
   );
 }
diff --git a/src/application/components/GitHubIssueLink.tsx b/src/application/components/GitHubIssueLink.tsx
@@ -8,7 +8,7 @@ interface GitHubIssueLinkProps {
   body?: string;
   labels?: string[];
   repository?: "apollo-client" | "apollo-client-devtools";
-  children: ReactNode;
+  children?: ReactNode;
 }
 
 const WHITESPACE = /\s/g;

diff --git a/src/application/components/Layouts/SettingsModal.tsx b/src/application/components/Layouts/SettingsModal.tsx
@@ -1,3 +1,4 @@
+import { Button } from "../Button";
 import { Modal } from "../Modal";
 
 declare const VERSION: string;
@@ -25,6 +26,11 @@ export function SettingsModal({
           {VERSION}
         </a>
       </Modal.Body>
+      <Modal.Footer>
+        <Button variant="primary" size="md" onClick={() => onOpen(false)}>
+          Close
+        </Button>
+      </Modal.Footer>
     </Modal>
   );
 }
diff --git a/src/application/components/List.tsx b/src/application/components/List.tsx
@@ -1,8 +1,16 @@
 import type { ComponentPropsWithoutRef } from "react";
 import clsx from "clsx";
 
-type ListProps = ComponentPropsWithoutRef<"div">;
+type ListProps = ComponentPropsWithoutRef<"ul">;
 
 export function List({ className, ...props }: ListProps) {
-  return <div {...props} className={clsx(className, "overflow-y-auto")} />;
+  return (
+    <ul
+      {...props}
+      className={clsx(
+        className,
+        "overflow-y-auto flex flex-col gap-2 list-none"
+      )}
+    />
+  );
 }