feat: change collab trigger & add share dialog (#7647)

packages/excalidraw/components/Button.tsx

@@ -1,4 +1,5 @@
 import clsx from "clsx";
+import React from "react";
 import { composeEventHandlers } from "../utils";
 import "./Button.scss";
 

packages/excalidraw/components/FilledButton.scss

@@ -24,6 +24,7 @@
       }
     }
 
+    &,
     &__contents {
       display: flex;
       justify-content: center;

packages/excalidraw/components/JSONExportDialog.tsx

@@ -78,7 +78,7 @@ const JSONExportModal = ({
               onClick={async () => {
                 try {
                   trackEvent("export", "link", `ui (${getFrame()})`);
-                  await onExportToBackend(elements, appState, files, canvas);
+                  await onExportToBackend(elements, appState, files);
                   onCloseRequest();
                 } catch (error: any) {
                   setAppState({ errorMessage: error.message });

packages/excalidraw/components/ShareableLinkDialog.scss

@@ -22,7 +22,7 @@
     }
 
     &__popover {
-      @keyframes RoomDialog__popover__scaleIn {
+      @keyframes ShareableLinkDialog__popover__scaleIn {
         from {
           opacity: 0;
         }
@@ -61,7 +61,7 @@
       }
 
       transform-origin: var(--radix-popover-content-transform-origin);
-      animation: RoomDialog__popover__scaleIn 150ms ease-out;
+      animation: ShareableLinkDialog__popover__scaleIn 150ms ease-out;
     }
 
     &__linkRow {

packages/excalidraw/components/TextField.tsx

@@ -13,8 +13,6 @@ import { Button } from "./Button";
 import { eyeIcon, eyeClosedIcon } from "./icons";
 
 type TextFieldProps = {
-  value?: string;
-
   onChange?: (value: string) => void;
   onClick?: () => void;
   onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
@@ -26,12 +24,11 @@ type TextFieldProps = {
   label?: string;
   placeholder?: string;
   isRedacted?: boolean;
-};
+} & ({ value: string } | { defaultValue: string });
 
 export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
   (
     {
-      value,
       onChange,
       label,
       fullWidth,
@@ -40,6 +37,7 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
       selectOnRender,
       onKeyDown,
       isRedacted = false,
+      ...rest
     },
     ref,
   ) => {
@@ -73,10 +71,17 @@ export const TextField = forwardRef<HTMLInputElement, TextFieldProps>(
         >
           <input
             className={clsx({
-              "is-redacted": value && isRedacted && !isTemporarilyUnredacted,
+              "is-redacted":
+                "value" in rest &&
+                rest.value &&
+                isRedacted &&
+                !isTemporarilyUnredacted,
             })}
             readOnly={readonly}
-            value={value}
+            value={"value" in rest ? rest.value : undefined}
+            defaultValue={
+              "defaultValue" in rest ? rest.defaultValue : undefined
+            }
             placeholder={placeholder}
             ref={innerRef}
             onChange={(event) => onChange?.(event.target.value)}

packages/excalidraw/components/live-collaboration/LiveCollaborationTrigger.scss

@@ -3,7 +3,7 @@
 .excalidraw {
   .collab-button {
     --button-bg: var(--color-primary);
-    --button-color: white;
+    --button-color: var(--color-surface-lowest);
     --button-border: var(--color-primary);
 
     --button-width: var(--lg-button-size);
@@ -35,12 +35,6 @@
     }
   }
 
-  &.theme--dark {
-    .collab-button {
-      color: var(--color-gray-90);
-    }
-  }
-
   .CollabButton.is-collaborating {
     background-color: var(--button-special-active-bg-color);
 

packages/excalidraw/components/live-collaboration/LiveCollaborationTrigger.tsx

@@ -1,5 +1,5 @@
 import { t } from "../../i18n";
-import { usersIcon } from "../icons";
+import { share } from "../icons";
 import { Button } from "../Button";
 
 import clsx from "clsx";
@@ -17,16 +17,18 @@ const LiveCollaborationTrigger = ({
 } & React.ButtonHTMLAttributes<HTMLButtonElement>) => {
   const appState = useUIAppState();
 
+  const showIconOnly = appState.width < 830;
+
   return (
     <Button
       {...rest}
       className={clsx("collab-button", { active: isCollaborating })}
       type="button"
       onSelect={onSelect}
-      style={{ position: "relative" }}
+      style={{ position: "relative", width: showIconOnly ? undefined : "auto" }}
       title={t("labels.liveCollaboration")}
     >
-      {usersIcon}
+      {showIconOnly ? share : t("labels.share")}
       {appState.collaborators.size > 0 && (
         <div className="CollabButton-collaborators">
           {appState.collaborators.size}