Merge remote-tracking branch 'upstream/master' into rjhear/chore/fix-spelling

.env.development

@@ -48,3 +48,6 @@ UNWEjuqNMi/lwAErS9fFa2oJlWyT8U7zzv/5kQREkxZI6y9v0AF3qcbsy2731FnD
 s9ChJvOUW9toIab2gsIdrKW8ZNpu084ZFVKb6LNjvIXI1Se4oMTHeszXzNptzlot
 kdxxjOoaQMAyfljFSot1F1FlU6MQlag7UnFGvFjRHN1JI5q4K+n3a67DX+TMyRqS
 HQIDAQAB'
+
+# set to true in .env.development.local to disable the prevent unload dialog
+VITE_APP_DISABLE_PREVENT_UNLOAD=

excalidraw-app/App.tsx

@@ -608,7 +608,13 @@ const ExcalidrawWrapper = () => {
           excalidrawAPI.getSceneElements(),
         )
       ) {
-        preventUnload(event);
+        if (import.meta.env.VITE_APP_DISABLE_PREVENT_UNLOAD !== "true") {
+          preventUnload(event);
+        } else {
+          console.warn(
+            "preventing unload disabled (VITE_APP_DISABLE_PREVENT_UNLOAD)",
+          );
+        }
       }
     };
     window.addEventListener(EVENT.BEFORE_UNLOAD, unloadHandler);

excalidraw-app/collab/Collab.tsx

@@ -301,7 +301,13 @@ class Collab extends PureComponent<CollabProps, CollabState> {
       //  the purpose is to run in immediately after user decides to stay
       this.saveCollabRoomToFirebase(syncableElements);
 
-      preventUnload(event);
+      if (import.meta.env.VITE_APP_DISABLE_PREVENT_UNLOAD !== "true") {
+        preventUnload(event);
+      } else {
+        console.warn(
+          "preventing unload disabled (VITE_APP_DISABLE_PREVENT_UNLOAD)",
+        );
+      }
     }
   });
 

packages/excalidraw/components/ColorPicker/ColorPicker.scss

@@ -15,7 +15,7 @@
 
   .color-picker-container {
     display: grid;
-    grid-template-columns: 1fr 20px 1.625rem;
+    grid-template-columns: 1fr 8px 1.625rem;
     padding: 0.25rem 0px;
     align-items: center;
 
@@ -30,13 +30,14 @@
   }
 
   .color-picker__button {
-    --radius: 0.25rem;
+    --radius: 6px;
+    --size: 1.375rem;
 
     padding: 0;
-    margin: 0;
+    margin: 1px;
-    width: 1.35rem;
+    width: var(--size);
-    height: 1.35rem;
+    height: var(--size);
-    border: 1px solid var(--color-gray-30);
+    border: 0;
     border-radius: var(--radius);
     filter: var(--theme-filter);
     background-color: var(--swatch-color);
@@ -45,16 +46,16 @@
     font-family: inherit;
     box-sizing: border-box;
 
-    &:hover {
+    &:hover:not(.active) {
       &::after {
         content: "";
         position: absolute;
-        top: -2px;
+        top: 0;
-        left: -2px;
+        left: 0;
-        right: -2px;
+        right: 0;
-        bottom: -2px;
+        bottom: 0;
-        box-shadow: 0 0 0 1px var(--color-gray-30);
+        box-shadow: 0 0 0 1px var(--swatch-color);
-        border-radius: calc(var(--radius) + 1px);
+        border-radius: var(--radius);
         filter: var(--theme-filter);
       }
     }
@@ -62,10 +63,11 @@
     &.active {
       .color-picker__button-outline {
         position: absolute;
-        top: -2px;
+        --offset: -1px;
-        left: -2px;
+        top: var(--offset);
-        right: -2px;
+        left: var(--offset);
-        bottom: -2px;
+        right: var(--offset);
+        bottom: var(--offset);
         box-shadow: 0 0 0 1px var(--color-primary-darkest);
         z-index: 1; // due hover state so this has preference
         border-radius: calc(var(--radius) + 1px);

packages/excalidraw/components/Range.scss

@@ -6,7 +6,7 @@
   .range-wrapper {
     position: relative;
     padding-top: 10px;
-    padding-bottom: 30px;
+    padding-bottom: 25px;
   }
 
   .range-input {

packages/excalidraw/components/Stats/DragInput.scss

@@ -2,10 +2,12 @@
   .drag-input-container {
     display: flex;
     width: 100%;
+    border-radius: var(--border-radius-lg);
 
     &:focus-within {
       box-shadow: 0 0 0 1px var(--color-primary-darkest);
       border-radius: var(--border-radius-md);
+      background: transparent;
     }
   }
 
@@ -16,24 +18,14 @@
 
   .drag-input-label {
     flex-shrink: 0;
-    border: 1px solid var(--default-border-color);
+    border: 0;
-    border-right: 0;
+    padding: 0 0.5rem 0 0.25rem;
-    padding: 0 0.5rem 0 0.75rem;
     min-width: 1rem;
+    width: 1.5rem;
     height: 2rem;
-    box-sizing: border-box;
+    box-sizing: content-box;
     color: var(--popup-text-color);
 
-    :root[dir="ltr"] & {
-      border-radius: var(--border-radius-md) 0 0 var(--border-radius-md);
-    }
-
-    :root[dir="rtl"] & {
-      border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
-      border-right: 1px solid var(--default-border-color);
-      border-left: 0;
-    }
-
     display: flex;
     align-items: center;
     justify-content: center;
@@ -51,20 +43,8 @@
     border: 0;
     outline: none;
     height: 2rem;
-    border: 1px solid var(--default-border-color);
-    border-left: 0;
     letter-spacing: 0.4px;
 
-    :root[dir="ltr"] & {
-      border-radius: 0 var(--border-radius-md) var(--border-radius-md) 0;
-    }
-
-    :root[dir="rtl"] & {
-      border-radius: var(--border-radius-md) 0 0 var(--border-radius-md);
-      border-left: 1px solid var(--default-border-color);
-      border-right: 0;
-    }
-
     padding: 0.5rem;
     padding-left: 0.25rem;
     appearance: none;

packages/excalidraw/components/Stats/Stats.scss

@@ -41,6 +41,10 @@
     div + div {
       text-align: right;
     }
+
+    &:empty {
+      display: none;
+    }
   }
 
   &__row--heading {

packages/excalidraw/components/Stats/index.tsx

@@ -289,7 +289,11 @@ export const StatsInner = memo(
                           </StatsRow>
                         )}
 
-                      <StatsRow heading data-testid="stats-element-type">
+                      <StatsRow
+                        heading
+                        data-testid="stats-element-type"
+                        style={{ margin: "0.3125rem 0" }}
+                      >
                         {appState.croppingElementId
                           ? t("labels.imageCropping")
                           : t(`element.${singleElement.type}`)}

packages/excalidraw/css/styles.scss

@@ -173,7 +173,7 @@ body.excalidraw-cursor-resize * {
     .buttonList {
       flex-wrap: wrap;
       display: flex;
-      column-gap: 0.5rem;
+      column-gap: 0.375rem;
       row-gap: 0.5rem;
 
       label {
@@ -386,10 +386,16 @@ body.excalidraw-cursor-resize * {
 
   .App-menu__left {
     overflow-y: auto;
-    padding: 0.75rem;
+    padding: 0.75rem 0.75rem 0.25rem 0.75rem;
-    width: 12.5rem;
+    width: 11.875rem;
     box-sizing: border-box;
     position: absolute;
+
+    .buttonList label,
+    .buttonList button,
+    .buttonList .zIndexButton {
+      --button-bg: transparent;
+    }
   }
 
   .dropdown-select {

packages/excalidraw/data/restore.ts

@@ -221,7 +221,7 @@ const restoreElementWithProperties = <
       "customData" in extra ? extra.customData : element.customData;
   }
 
-  return {
+  const ret = {
     // spread the original element properties to not lose unknown ones
     // for forward-compatibility
     ...element,
@@ -230,6 +230,12 @@ const restoreElementWithProperties = <
     ...getNormalizedDimensions(base),
     ...extra,
   } as unknown as T;
+
+  // strip legacy props (migrated in previous steps)
+  delete ret.strokeSharpness;
+  delete ret.boundElementIds;
+
+  return ret;
 };
 
 const restoreElement = (