Merge branch 'main' into use-project-references

apps/designer/app/designer/features/style-panel/controls/image/image-control.tsx

@@ -5,7 +5,7 @@ import { ValuePickerPopover } from "../../shared/value-picker-popover";
 import { ImageManager } from "~/designer/shared/image-manager";
 import { useAssets } from "~/designer/shared/assets";
 
-export const BackgroundImageControl = ({
+export const ImageControl = ({
   currentStyle,
   inheritedStyle,
   setProperty,

apps/designer/app/designer/features/style-panel/controls/index.ts

@@ -3,3 +3,4 @@ export * from "./color/color-control";
 export * from "./select/select-control";
 export * from "./menu/menu-control";
 export * from "./font-family/font-family-control";
+export * from "./image/image-control";

apps/designer/app/designer/features/style-panel/sections/layout/layout.tsx

@@ -23,56 +23,77 @@ const LayoutSectionFlex = ({
     rowGap,
   } = sectionStyle;
   const batchUpdate = createBatchUpdate();
+  const hasMenuItems = [
+    flexDirection,
+    flexWrap,
+    alignItems,
+    justifyContent,
+    alignContent,
+  ].some((config) => config !== undefined);
+
   return (
     <Flex css={{ flexDirection: "column", gap: "$2" }}>
-      <Grid
-        css={{
-          gridArea: "display",
-          gridTemplateColumns: "auto 1fr",
-          gap: "$space$2",
-          width: "fit-content",
-          fontWeight: "500",
-        }}
-      >
-        <PropertyName
-          property={display.styleConfig.property}
-          label={display.styleConfig.label}
-        />
-        <SelectControl {...display} />
-      </Grid>
-      <Grid
-        css={{
-          gap: "$2",
-          gridTemplateColumns: "repeat(2, $6) repeat(3, $6)",
-          gridTemplateRows: "repeat(2, $6)",
-          gridTemplateAreas: `
+      {display?.styleConfig && (
+        <Grid
+          css={{
+            gridArea: "display",
+            gridTemplateColumns: "auto 1fr",
+            gap: "$space$2",
+            width: "fit-content",
+            fontWeight: "500",
+          }}
+        >
+          <PropertyName
+            property={display.styleConfig.property}
+            label={display.styleConfig.label}
+          />
+          <SelectControl {...display} />
+        </Grid>
+      )}
+      {hasMenuItems && (
+        <Grid
+          css={{
+            gap: "$2",
+            gridTemplateColumns: "repeat(2, $6) repeat(3, $6)",
+            gridTemplateRows: "repeat(2, $6)",
+            gridTemplateAreas: `
             "grid grid flexDirection flexWrap ."
             "grid grid alignItems justifyContent alignContent"
           `,
-          alignItems: "center",
-        }}
-      >
-        <Box css={{ gridArea: "grid" }}>
-          <FlexGrid currentStyle={currentStyle} batchUpdate={batchUpdate} />
-        </Box>
-        <Box css={{ gridArea: "flexDirection" }}>
-          <MenuControl {...flexDirection} />
-        </Box>
-        <Box css={{ gridArea: "flexWrap" }}>
-          <MenuControl {...flexWrap} />
-        </Box>
-        <Box css={{ gridArea: "alignItems" }}>
-          <MenuControl {...alignItems} />
-        </Box>
-        <Box css={{ gridArea: "justifyContent" }}>
-          <MenuControl {...justifyContent} />
-        </Box>
-        {alignContent && (
-          <Box css={{ gridArea: "alignContent" }}>
-            <MenuControl {...alignContent} />
+            alignItems: "center",
+          }}
+        >
+          <Box css={{ gridArea: "grid" }}>
+            <FlexGrid currentStyle={currentStyle} batchUpdate={batchUpdate} />
           </Box>
-        )}
-      </Grid>
+          {flexDirection?.styleConfig && (
+            <Box css={{ gridArea: "flexDirection" }}>
+              <MenuControl {...flexDirection} />
+            </Box>
+          )}
+          {flexWrap?.styleConfig && (
+            <Box css={{ gridArea: "flexWrap" }}>
+              <MenuControl {...flexWrap} />
+            </Box>
+          )}
+          {alignItems?.styleConfig && (
+            <Box css={{ gridArea: "alignItems" }}>
+              <MenuControl {...alignItems} />
+            </Box>
+          )}
+          {justifyContent?.styleConfig && (
+            <Box css={{ gridArea: "justifyContent" }}>
+              <MenuControl {...justifyContent} />
+            </Box>
+          )}
+          {alignContent && (
+            <Box css={{ gridArea: "alignContent" }}>
+              <MenuControl {...alignContent} />
+            </Box>
+          )}
+        </Grid>
+      )}
+
       <Grid
         css={{
           gridTemplateColumns: "4fr 1fr 4fr",
@@ -83,19 +104,25 @@ const LayoutSectionFlex = ({
           alignItems: "center",
         }}
       >
-        <Box css={{ gridArea: "columnGap" }}>
-          <TextControl {...columnGap} />
-        </Box>
-        <Box css={{ gridArea: "lock", px: "$1" }}>
-          <Lock
-            pairedKeys={["columnGap", "rowGap"]}
-            currentStyle={currentStyle}
-            batchUpdate={batchUpdate}
-          />
-        </Box>
-        <Box css={{ gridArea: "rowGap" }}>
-          <TextControl {...rowGap} />
-        </Box>
+        {columnGap?.styleConfig && (
+          <Box css={{ gridArea: "columnGap" }}>
+            <TextControl {...columnGap} />
+          </Box>
+        )}
+        {rowGap?.styleConfig && columnGap?.styleConfig && (
+          <Box css={{ gridArea: "lock", px: "$1" }}>
+            <Lock
+              pairedKeys={["columnGap", "rowGap"]}
+              currentStyle={currentStyle}
+              batchUpdate={batchUpdate}
+            />
+          </Box>
+        )}
+        {rowGap?.styleConfig && (
+          <Box css={{ gridArea: "rowGap" }}>
+            <TextControl {...rowGap} />
+          </Box>
+        )}
       </Grid>
     </Flex>
   );

apps/designer/app/designer/features/style-panel/shared/configs.ts

@@ -48,12 +48,12 @@ type BaseStyleConfig = {
 
 // @todo make it use actual list of controls
 export type Control =
-  | "Text"
-  | "Color"
-  | "Menu"
-  | "Select"
-  | "FontFamily"
-  | "Image";
+  | "TextControl"
+  | "ColorControl"
+  | "MenuControl"
+  | "SelectControl"
+  | "FontFamilyControl"
+  | "ImageControl";
 
 export type StyleConfig = BaseStyleConfig & {
   control: Control;
@@ -64,19 +64,19 @@ type Property = keyof typeof keywordValues;
 
 const getControl = (property: StyleProperty): Control => {
   if (property.toLocaleLowerCase().includes("color")) {
-    return "Color";
+    return "ColorControl";
   }
 
   switch (property) {
     case "fontFamily": {
-      return isFeatureEnabled("fonts") ? "FontFamily" : "Text";
+      return isFeatureEnabled("fonts") ? "FontFamilyControl" : "TextControl";
     }
     case "backgroundImage": {
-      return isFeatureEnabled("assets") ? "Image" : "Text";
+      return isFeatureEnabled("assets") ? "ImageControl" : "TextControl";
     }
   }
 
-  return "Text";
+  return "TextControl";
 };
 
 const createStyleConfigs = () => {

apps/designer/app/designer/features/style-panel/style-sections.tsx

@@ -8,16 +8,9 @@ import {
 } from "@webstudio-is/react-sdk";
 import type { SetProperty, CreateBatchUpdate } from "./shared/use-style-data";
 import type { InheritedStyle } from "./shared/get-inherited-style";
-import {
-  ColorControl,
-  TextControl,
-  SelectControl,
-  MenuControl,
-  FontFamilyControl,
-} from "./controls";
+import * as controls from "./controls";
 import { ShowMore } from "./shared/show-more";
 import { LayoutSection, SpacingSection } from "./sections";
-import { BackgroundImageControl } from "./controls/background-image/background-image-control";
 import { PropertyName } from "./shared/property-name";
 
 export type PropertyProps = {
@@ -39,7 +32,7 @@ export type RenderCategoryProps = {
   createBatchUpdate: CreateBatchUpdate;
   currentStyle: Style;
   sectionStyle: {
-    [Property in keyof Style]-?: RenderPropertyProps;
+    [Property in keyof Style]: RenderPropertyProps;
   };
   inheritedStyle: InheritedStyle;
   category: Category;
@@ -138,14 +131,3 @@ const sections: {
   layout: LayoutSection,
   spacing: SpacingSection,
 };
-
-const controls: {
-  [key: string]: (props: ControlProps) => JSX.Element | null;
-} = {
-  Menu: MenuControl,
-  Text: TextControl,
-  Color: ColorControl,
-  Select: SelectControl,
-  FontFamily: FontFamilyControl,
-  Image: BackgroundImageControl,
-};