feat: generic button export (#6092)

Co-authored-by: dwelle <luzar.david@gmail.com>

src/components/Button.scss

@@ -0,0 +1,8 @@
+@import "../css/theme";
+
+.excalidraw {
+  .excalidraw-button {
+    @include outlineButtonStyles;
+    overflow: hidden;
+  }
+}

src/components/Button.tsx

@@ -0,0 +1,35 @@
+import "./Button.scss";
+
+interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
+  type?: "button" | "submit" | "reset";
+  onSelect: () => any;
+  children: React.ReactNode;
+  className?: string;
+}
+
+/**
+ * A generic button component that follows Excalidraw's design system.
+ * Style can be customised using `className` or `style` prop.
+ * Accepts all props that a regular `button` element accepts.
+ */
+export const Button = ({
+  type = "button",
+  onSelect,
+  children,
+  className = "",
+  ...rest
+}: ButtonProps) => {
+  return (
+    <button
+      onClick={(event) => {
+        onSelect();
+        rest.onClick?.(event);
+      }}
+      type={type}
+      className={`excalidraw-button ${className}`}
+      {...rest}
+    >
+      {children}
+    </button>
+  );
+};

src/components/CollabButton.scss

@@ -2,29 +2,22 @@
 
 .excalidraw {
   .collab-button {
-    @include outlineButtonStyles;
-    width: var(--lg-button-size);
-    height: var(--lg-button-size);
+    --button-bg: var(--color-primary);
+    --button-color: white;
+    --button-border: var(--color-primary);
+
+    --button-width: var(--lg-button-size);
+    --button-height: var(--lg-button-size);
+
+    --button-hover-bg: var(--color-primary-darker);
+    --button-hover-border: var(--color-primary-darker);
+
+    --button-active-bg: var(--color-primary-darker);
 
-    svg {
-      width: var(--lg-icon-size);
-      height: var(--lg-icon-size);
-    }
-    background-color: var(--color-primary);
-    border-color: var(--color-primary);
-    color: white;
     flex-shrink: 0;
 
-    &:hover {
-      background-color: var(--color-primary-darker);
-      border-color: var(--color-primary-darker);
-    }
-
-    &:active {
-      background-color: var(--color-primary-darker);
-    }
-
-    &.active {
+    // double .active to force specificity
+    &.active.active {
       background-color: #0fb884;
       border-color: #0fb884;
 

src/components/CollabButton.tsx

@@ -3,6 +3,7 @@ import { UsersIcon } from "./icons";
 
 import "./CollabButton.scss";
 import clsx from "clsx";
+import { Button } from "./Button";
 
 const CollabButton = ({
   isCollaborating,
@@ -14,10 +15,10 @@ const CollabButton = ({
   onClick: () => void;
 }) => {
   return (
-    <button
+    <Button
       className={clsx("collab-button", { active: isCollaborating })}
       type="button"
-      onClick={onClick}
+      onSelect={onClick}
       style={{ position: "relative" }}
       title={t("labels.liveCollaboration")}
     >
@@ -25,7 +26,7 @@ const CollabButton = ({
       {collaboratorCount > 0 && (
         <div className="CollabButton-collaborators">{collaboratorCount}</div>
       )}
-    </button>
+    </Button>
   );
 };
 

src/components/dropdownMenu/DropdownMenu.scss

@@ -73,7 +73,7 @@
       }
 
       &:hover {
-        background-color: var(--button-hover);
+        background-color: var(--button-hover-bg);
         text-decoration: none;
       }