From 7cb2e16155048c83be9a20841bbed57c8bb407ec Mon Sep 17 00:00:00 2001
From: Oleg Isonen <oleg008@gmail.com>
Date: Thu, 28 Apr 2022 10:57:58 +0100
Subject: [PATCH] render a hint when canvas is too small an the breakpoint
 doesn't apply

---
 .../features/breakpoints/breakpoints.tsx      |  8 ++++--
 .../features/breakpoints/trigger-button.tsx   |  2 +-
 .../features/style-panel/style-panel.tsx      | 28 +++++++++++++++++--
 app/designer/shared/breakpoints/index.ts      |  1 +
 .../breakpoints/will-render.ts                |  0
 .../design-system/components/paragraph.tsx    |  2 +-
 6 files changed, 34 insertions(+), 7 deletions(-)
 create mode 100644 app/designer/shared/breakpoints/index.ts
 rename app/designer/{features => shared}/breakpoints/will-render.ts (100%)

diff --git a/app/designer/features/breakpoints/breakpoints.tsx b/app/designer/features/breakpoints/breakpoints.tsx
index eac59651b9..dca55a18fc 100644
--- a/app/designer/features/breakpoints/breakpoints.tsx
+++ b/app/designer/features/breakpoints/breakpoints.tsx
@@ -17,13 +17,13 @@ import {
   useSelectedBreakpoint,
   useCanvasWidth,
 } from "../../shared/nano-values";
+import { willRender } from "~/designer/shared/breakpoints";
 import { BreakpointsEditor } from "./breakpoints-editor";
 import { Preview } from "./preview";
 import { ScaleSetting } from "./scale-setting";
 import { TriggerButton } from "./trigger-button";
 import { WidthSetting } from "./width-setting";
 import { useUpdateCanvasWidth } from "./use-update-canvas-width";
-import { willRender } from "./will-render";
 
 const BreakpointSelectorItem = ({ breakpoint }: { breakpoint: Breakpoint }) => {
   const [canvasWidth = 0] = useCanvasWidth();
@@ -98,8 +98,10 @@ export const Breakpoints = ({ publish }: BreakpointsProps) => {
         {isEditing === false && (
           <>
             <DropdownMenuSeparator />
-            <ScaleSetting />
-            <WidthSetting />
+            <form>
+              <ScaleSetting />
+              <WidthSetting />
+            </form>
             <DropdownMenuSeparator />
             <Preview breakpoint={breakpointPreview} />
           </>
diff --git a/app/designer/features/breakpoints/trigger-button.tsx b/app/designer/features/breakpoints/trigger-button.tsx
index 3c20f3ec0e..a124b78e30 100644
--- a/app/designer/features/breakpoints/trigger-button.tsx
+++ b/app/designer/features/breakpoints/trigger-button.tsx
@@ -5,6 +5,7 @@ import {
   useScale,
   useSelectedBreakpoint,
 } from "~/designer/shared/nano-values";
+import { willRender } from "~/designer/shared/breakpoints";
 import { Button, Text } from "~/shared/design-system";
 import {
   DesktopIcon,
@@ -13,7 +14,6 @@ import {
   TabletIcon,
   DevicesIcon,
 } from "~/shared/icons";
-import { willRender } from "./will-render";
 
 type TriggerButtonProps = ComponentProps<typeof Button>;
 
diff --git a/app/designer/features/style-panel/style-panel.tsx b/app/designer/features/style-panel/style-panel.tsx
index d2c92a4572..7c42483ee9 100644
--- a/app/designer/features/style-panel/style-panel.tsx
+++ b/app/designer/features/style-panel/style-panel.tsx
@@ -1,11 +1,16 @@
 import type { Publish } from "~/designer/shared/canvas-iframe";
-import { Box } from "~/shared/design-system";
+import { willRender } from "~/designer/shared/breakpoints";
+import { Box, Card, Paragraph } from "~/shared/design-system";
 import type { SelectedInstanceData } from "~/shared/component";
 import { useStyleData } from "./use-style-data";
 import { ComponentInfo } from "../../shared/inspector";
 import { VisualSettings } from "./settings";
 import { Search } from "./search";
 import { useState } from "react";
+import {
+  useCanvasWidth,
+  useSelectedBreakpoint,
+} from "~/designer/shared/nano-values";
 
 type StylePanelProps = {
   publish: Publish;
@@ -20,16 +25,35 @@ export const StylePanel = ({
     selectedInstanceData,
     publish,
   });
+  const [breakpoint] = useSelectedBreakpoint();
+  const [canvasWidth] = useCanvasWidth();
   const [search, setSearch] = useState("");
 
   if (
     currentStyle === undefined ||
     inheritedStyle === undefined ||
-    selectedInstanceData === undefined
+    selectedInstanceData === undefined ||
+    breakpoint === undefined ||
+    canvasWidth === undefined
   ) {
     return null;
   }
 
+  if (willRender(breakpoint, canvasWidth) === false) {
+    return (
+      <Box css={{ p: "$2" }}>
+        <Card css={{ p: "$3", mt: "$3" }}>
+          <Paragraph css={{ marginBottom: "$2" }}>
+            {`Please increase the canvas width.`}
+          </Paragraph>
+          <Paragraph>
+            {`"${breakpoint.label}" breakpoint minimum width is ${breakpoint.minWidth}px.`}
+          </Paragraph>
+        </Card>
+      </Box>
+    );
+  }
+
   return (
     <>
       <Box css={{ p: "$2" }}>
diff --git a/app/designer/shared/breakpoints/index.ts b/app/designer/shared/breakpoints/index.ts
new file mode 100644
index 0000000000..9227bc300f
--- /dev/null
+++ b/app/designer/shared/breakpoints/index.ts
@@ -0,0 +1 @@
+export * from "./will-render";
diff --git a/app/designer/features/breakpoints/will-render.ts b/app/designer/shared/breakpoints/will-render.ts
similarity index 100%
rename from app/designer/features/breakpoints/will-render.ts
rename to app/designer/shared/breakpoints/will-render.ts
diff --git a/app/shared/design-system/components/paragraph.tsx b/app/shared/design-system/components/paragraph.tsx
index b03d992eb3..477eb4a520 100644
--- a/app/shared/design-system/components/paragraph.tsx
+++ b/app/shared/design-system/components/paragraph.tsx
@@ -23,7 +23,7 @@ export const Paragraph = React.forwardRef<
 
   // This is the mapping of Paragraph Variants to Text variants
   const textSize: Record<ParagraphSizeVariants, TextSizeVariants["size"]> = {
-    1: { "@initial": "3", "@bp2": "4" },
+    1: { "@initial": "2", "@bp2": "4" },
     2: { "@initial": "5", "@bp2": "6" },
   };