fix: don't show `canvasBackground` label when `UIOptions.canvasActions.changeViewBackgroundColor` is false (#6781)

* fix(components/main-menu): not show canvasBackground

* chore(components/main-menu): add data-testid attr to canvasBackground label

* test(tests/packages/excalidraw): check whether canvasbackground label is rendered when changeviewbackground is false

* test: update snapshots

* fix(tests/packages/excalidraw): change to lowercase canvas background test id

* change to pull request target for size-limit

* Revert "change to pull request target for size-limit"

This reverts commit baf1ca2677.

* Add test

---------

Co-authored-by: Aakansha Doshi <aakansha1216@gmail.com>

src/components/main-menu/DefaultItems.tsx

@@ -4,6 +4,7 @@ import {
   useExcalidrawSetAppState,
   useExcalidrawActionManager,
   useExcalidrawElements,
+  useAppProps,
 } from "../App";
 import {
   ExportIcon,
@@ -198,13 +199,20 @@ export const ChangeCanvasBackground = () => {
   const { t } = useI18n();
   const appState = useUIAppState();
   const actionManager = useExcalidrawActionManager();
+  const appProps = useAppProps();
 
-  if (appState.viewModeEnabled) {
+  if (
+    appState.viewModeEnabled ||
+    !appProps.UIOptions.canvasActions.changeViewBackgroundColor
+  ) {
     return null;
   }
   return (
     <div style={{ marginTop: "0.5rem" }}>
-      <div style={{ fontSize: ".75rem", marginBottom: ".5rem" }}>
+      <div
+        data-testid="canvas-background-label"
+        style={{ fontSize: ".75rem", marginBottom: ".5rem" }}
+      >
         {t("labels.canvasBackground")}
       </div>
       <div style={{ padding: "0 0.625rem" }}>

src/packages/excalidraw/example/App.tsx

@@ -678,7 +678,11 @@ export default function App({ appTitle, useCustom, customArgs }: AppProps) {
             gridModeEnabled={gridModeEnabled}
             theme={theme}
             name="Custom name of drawing"
-            UIOptions={{ canvasActions: { loadScene: false } }}
+            UIOptions={{
+              canvasActions: {
+                loadScene: false,
+              },
+            }}
             renderTopRightUI={renderTopRightUI}
             onLinkOpen={onLinkOpen}
             onPointerDown={onPointerDown}

src/tests/packages/__snapshots__/excalidraw.test.tsx.snap

@@ -516,6 +516,7 @@ exports[`<Excalidraw/> Test UIOptions prop Test canvasActions should render menu
       style="margin-top: 0.5rem;"
     >
       <div
+        data-testid="canvas-background-label"
         style="font-size: .75rem; margin-bottom: .5rem;"
       >
         Canvas background

src/tests/packages/excalidraw.test.tsx

@@ -199,6 +199,23 @@ describe("<Excalidraw/>", () => {
         );
         //open menu
         toggleMenu(container);
+        expect(queryByTestId(container, "canvas-background-label")).toBeNull();
+        expect(queryByTestId(container, "canvas-background-picker")).toBeNull();
+      });
+
+      it("should hide the canvas background picker even if passed if the `canvasActions.changeViewBackgroundColor` is set to false", async () => {
+        const { container } = await render(
+          <Excalidraw
+            UIOptions={{ canvasActions: { changeViewBackgroundColor: false } }}
+          >
+            <MainMenu>
+              <MainMenu.DefaultItems.ChangeCanvasBackground />
+            </MainMenu>
+          </Excalidraw>,
+        );
+        //open menu
+        toggleMenu(container);
+        expect(queryByTestId(container, "canvas-background-label")).toBeNull();
         expect(queryByTestId(container, "canvas-background-picker")).toBeNull();
       });