refactor(frontend): Button without className; toggles, adornments and special shapes on react-aria

frontend/src/js/authorization/LoginPage.tsx

@@ -42,9 +42,7 @@ const form = tv({
   ],
 });
 
-const submitButton = tv({
-  base: ["flex items-center justify-center", "mt-[35px]", "w-[255px]"],
-});
+const submitButton = tv({ base: ["grid", "mt-[35px]", "w-[255px]"] });
 
 const LoginPage = () => {
   const [user, setUser] = useState("");
@@ -115,16 +113,20 @@ const LoginPage = () => {
               disabled: loading,
             }}
           />
-          <Button
-            intent="primary"
-            className={submitButton()}
-            isDisabled={!user || !password}
-            size="lg"
-            type="submit"
-          >
-            <Icon icon={loading ? faSpinner : faCheck} className="text-white" />
-            {t("login.submit")}
-          </Button>
+          <div className={submitButton()}>
+            <Button
+              intent="primary"
+              isDisabled={!user || !password}
+              size="lg"
+              type="submit"
+            >
+              <Icon
+                icon={loading ? faSpinner : faCheck}
+                className="text-white"
+              />
+              {t("login.submit")}
+            </Button>
+          </div>
         </form>
       </div>
     </div>

frontend/src/js/button/BadgeToggleButton.tsx

@@ -1,26 +1,22 @@
 import type { ReactNode } from "react";
+import { ToggleButton } from "react-aria-components";
 import { useHotkeys } from "react-hotkeys-hook";
-
 import { tv } from "tailwind-variants";
 
-import { Button } from "../ui-components/Button";
-
+// a chip that toggles: dotted while off, solid in the primary color while on
 const badgeToggleButton = tv({
-  base: ["h-auto px-1 py-px", "text-sm", "font-bold"],
-  variants: {
-    active: {
-      true: [
-        "border-2 border-primary-500",
-        "bg-white hover:bg-gray-50",
-        "text-primary-500",
-      ],
-      false: [
-        "border-2 border-dotted border-gray-100",
-        "hover:bg-bg-50",
-        "text-gray-500",
-      ],
-    },
-  },
+  base: [
+    "inline-flex items-center",
+    "rounded",
+    "px-1 py-px",
+    "border-2 border-dotted border-gray-100",
+    "text-sm font-bold text-gray-500 whitespace-nowrap",
+    "cursor-pointer",
+    "hover:bg-bg-50",
+    "data-selected:border-solid data-selected:border-primary-500",
+    "data-selected:bg-white data-selected:hover:bg-gray-50",
+    "data-selected:text-primary-500",
+  ],
 });
 
 const superScript = tv({
@@ -51,16 +47,14 @@ export const BadgeToggleButton = ({
   useHotkeys(hotkey || "", onClick, { enabled: !!hotkey }, [hotkey, onClick]);
 
   return (
-    <Button
-      intent="tertiary"
-      size="sm"
-      aria-pressed={!!active}
-      className={badgeToggleButton({ active: !!active, className })}
-      onPress={onClick}
+    <ToggleButton
+      className={badgeToggleButton({ className })}
+      isSelected={!!active}
+      onChange={onClick}
     >
       {!active && "+ "}
       {children}
       {hotkey && <span className={superScript()}>{hotkey}</span>}
-    </Button>
+    </ToggleButton>
   );
 };

frontend/src/js/button/DownloadButton.tsx

@@ -13,7 +13,7 @@ import { tv } from "tailwind-variants";
 import type { ResultUrlWithLabel } from "../api/types";
 import { AuthTokenContext } from "../authorization/AuthTokenProvider";
 import { getEnding } from "../query-runner/DownloadResultsDropdownButton";
-import { Button, type ButtonProps } from "../ui-components/Button";
+import { Button } from "../ui-components/Button";
 import { Icon } from "../ui-components/Icon";
 
 const link = tv({ base: "leading-none" });
@@ -43,7 +43,7 @@ export function getFileIcon(url: string): FileIcon {
   return { icon: faFileDownload };
 }
 
-interface Props extends Omit<ButtonProps, "children" | "className"> {
+interface Props {
   resultUrl: ResultUrlWithLabel;
   className?: string;
   children?: ReactNode;
@@ -58,7 +58,6 @@ const DownloadButton = ({
   className,
   children,
   showColoredIcon,
-  ...restProps
 }: Props & { ref?: Ref<HTMLAnchorElement> }) => {
   const { authToken } = useContext(AuthTokenContext);
 
@@ -68,7 +67,7 @@ const DownloadButton = ({
 
   return (
     <a href={href} className={link({ className })} ref={ref}>
-      <Button intent="tertiary" className="whitespace-nowrap" {...restProps}>
+      <Button intent="link">
         <Icon
           icon={simpleIcon ? faDownload : icon}
           style={{ color: showColoredIcon ? color : undefined }}

frontend/src/js/button/QueryResultHistoryButton.tsx

@@ -33,7 +33,6 @@ export const QueryResultHistoryButton = ({
         await newHistorySession(getAuthorizedUrl(url), columns, label);
         dispatch(openHistory());
       }}
-      className="whitespace-nowrap"
     >
       <Icon icon={isLoading ? faSpinner : faListUl} />
       {t("history.history")}

frontend/src/js/concept-trees/ConceptTree.tsx

@@ -59,8 +59,9 @@ const ConceptTree = ({
       >
         <Button
           intent="tertiary"
+          size="sm"
+          danger
           onPress={() => onLoadTree(conceptId)}
-          className="text-red"
         >
           <Icon icon={faRedo} />
         </Button>

frontend/src/js/concept-trees/ConceptTreeSearchBox.tsx

@@ -83,15 +83,14 @@ const ConceptTreeSearchBox = ({ className }: { className?: string }) => {
                 duration: (search.duration / 1000.0).toFixed(2),
               })}
             </p>
-            <div>
+            <div className="my-[3px] flex items-center gap-[5px]">
               <span className={displaying()}>
                 {showMismatches
                   ? t("conceptTreeList.showingMismatches")
                   : t("conceptTreeList.showingMatchesOnly")}
               </span>
               <Button
                 intent="secondary"
-                className="my-[3px] ml-[5px]"
                 size="sm"
                 onPress={onToggleShowMismatches}
               >

frontend/src/js/editor-v2/EditorV2.tsx

@@ -24,6 +24,7 @@ import { Button } from "../ui-components/Button";
 import { ConfirmMenu } from "../ui-components/ConfirmMenu";
 import Dropzone from "../ui-components/Dropzone";
 import { Icon } from "../ui-components/Icon";
+import { ToggleButton } from "../ui-components/ToggleButton";
 import { Tooltip, TooltipTrigger } from "../ui-components/Tooltip";
 import { EDITOR_DROP_TYPES, HOTKEYS } from "./config";
 import { useConnectorEditing } from "./connector-update/useConnectorRotation";
@@ -297,52 +298,47 @@ export function EditorV2({
                 <KeyboardShortcutTooltip
                   keyname={HOTKEYS.editQueryNode.keyname}
                 >
-                  <Button
+                  <ToggleButton
                     intent="tertiary"
-                    size="sm"
                     isDisabled={
                       !selectedNode?.data ||
                       !nodeIsConceptQueryNode(selectedNode.data)
                     }
-                    aria-pressed={selectedNodeActive}
-                    onPress={() => {
+                    isSelected={selectedNodeActive}
+                    onChange={() => {
                       onOpenQueryNodeEditor();
                     }}
                   >
                     <Icon icon={faEdit} />
                     {t("editorV2.edit")}
-                  </Button>
+                  </ToggleButton>
                 </KeyboardShortcutTooltip>
               )}
               {featureDates && selectedNode && (
                 <KeyboardShortcutTooltip keyname={HOTKEYS.editDates.keyname}>
-                  <Button
+                  <ToggleButton
                     intent="tertiary"
-                    size="sm"
-                    aria-pressed={!!selectedNode.dates?.restriction}
-                    onPress={() => {
+                    isSelected={!!selectedNode.dates?.restriction}
+                    onChange={() => {
                       onOpen();
                     }}
                   >
                     <Icon icon={faCalendar} />
                     {t("editorV2.dates")}
-                  </Button>
+                  </ToggleButton>
                 </KeyboardShortcutTooltip>
               )}
               {featureNegate && selectedNode && (
                 <KeyboardShortcutTooltip keyname={HOTKEYS.negate.keyname}>
-                  <Button
+                  <ToggleButton
                     intent="tertiary"
-                    size="sm"
-                    aria-pressed={selectedNode.negation}
-                    onPress={() => {
-                      onNegateClick();
-                    }}
-                    className="aria-pressed:text-red"
+                    highlight="danger"
+                    isSelected={!!selectedNode.negation}
+                    onChange={onNegateClick}
                   >
                     <Icon icon={faBan} />
                     {t("editorV2.negate")}
-                  </Button>
+                  </ToggleButton>
                 </KeyboardShortcutTooltip>
               )}
               {featureConnectorRotate && selectedNode && connection && (
@@ -351,7 +347,6 @@ export function EditorV2({
                 >
                   <Button
                     intent="tertiary"
-                    size="sm"
                     isDisabled={!selectedNode?.children}
                     onPress={() => {
                       onRotateConnector();
@@ -368,7 +363,6 @@ export function EditorV2({
                 >
                   <Button
                     intent="tertiary"
-                    size="sm"
                     onPress={() => {
                       onOpenTimeModal();
                     }}
@@ -382,7 +376,6 @@ export function EditorV2({
                 <KeyboardShortcutTooltip keyname={HOTKEYS.expand.keyname}>
                   <Button
                     intent="tertiary"
-                    size="sm"
                     onPress={() => {
                       onExpand();
                     }}
@@ -398,7 +391,6 @@ export function EditorV2({
                 <KeyboardShortcutTooltip keyname={HOTKEYS.flip.keyname}>
                   <Button
                     intent="tertiary"
-                    size="sm"
                     isDisabled={!selectedNode?.children}
                     onPress={() => {
                       onFlip();
@@ -415,7 +407,6 @@ export function EditorV2({
                 >
                   <Button
                     intent="tertiary"
-                    size="sm"
                     onPress={() => {
                       onDelete();
                     }}
@@ -425,21 +416,19 @@ export function EditorV2({
                   </Button>
                 </KeyboardShortcutTooltip>
               )}
-              <TooltipTrigger>
-                <ConfirmMenu
-                  onConfirm={onReset}
-                  confirmationText={t("editorV2.clearConfirm")}
-                >
-                  <Button
-                    aria-label={t("editorV2.clear")}
-                    intent="tertiary"
-                    className="ml-5"
+              <div className="ml-5">
+                <TooltipTrigger>
+                  <ConfirmMenu
+                    onConfirm={onReset}
+                    confirmationText={t("editorV2.clearConfirm")}
                   >
-                    <Icon icon={faTrash} />
-                  </Button>
-                </ConfirmMenu>
-                <Tooltip>{t("editorV2.clear")}</Tooltip>
-              </TooltipTrigger>
+                    <Button aria-label={t("editorV2.clear")} intent="tertiary">
+                      <Icon icon={faTrash} />
+                    </Button>
+                  </ConfirmMenu>
+                  <Tooltip>{t("editorV2.clear")}</Tooltip>
+                </TooltipTrigger>
+              </div>
             </div>
           </div>
         )}

frontend/src/js/editor-v2/date-restriction/DateModal.tsx

@@ -22,10 +22,6 @@ const sectionHeadline = tv({
   ],
 });
 
-const resetAll = tv({
-  base: ["ml-5", "text-primary-500", "font-bold"],
-});
-
 export const DateModal = ({
   onClose,
   dateRange = {},
@@ -53,15 +49,12 @@ export const DateModal = ({
 
   const labelSuffix = useMemo(() => {
     return hasActiveDate ? (
-      <Button
-        intent="tertiary"
-        size="sm"
-        onPress={onResetDates}
-        className={resetAll()}
-      >
-        <Icon icon={faUndo} />
-        {t("queryNodeEditor.reset")}
-      </Button>
+      <span className="ml-5">
+        <Button intent="link" onPress={onResetDates}>
+          <Icon icon={faUndo} />
+          {t("queryNodeEditor.reset")}
+        </Button>
+      </span>
     ) : null;
   }, [t, hasActiveDate, onResetDates]);