Pass property to control (#700)

We might not need to pass style config everywhere and instead we can
pass only property.

In another PR will remove passing style configs everywhere.

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

@@ -5,11 +5,11 @@ import { ColorPicker } from "../../shared/color-picker";
 import { colord } from "colord";
 
 export const ColorControl = ({
+  property,
   currentStyle,
   setProperty,
-  styleConfig,
 }: ControlProps) => {
-  let value = currentStyle[styleConfig.property] ?? {
+  let value = currentStyle[property] ?? {
     // provide default value to avoid control hiding
     // when value is recomputed
     type: "rgb" as const,
@@ -19,7 +19,7 @@ export const ColorControl = ({
     alpha: 0,
   };
 
-  const setValue = setProperty(styleConfig.property);
+  const setValue = setProperty(property);
 
   if (value.type !== "rgb") {
     // Support previously set colors
@@ -50,7 +50,7 @@ export const ColorControl = ({
   return (
     <Flex align="center" css={{ gridColumn: "2/4" }} gap="1">
       <ColorPicker
-        id={styleConfig.property}
+        id={property}
         value={value}
         onChange={(value) => {
           setValue(value, { isEphemeral: true });

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

@@ -6,14 +6,14 @@ import { useState } from "react";
 import { toValue } from "@webstudio-is/css-engine";
 
 export const FontFamilyControl = ({
+  property,
   currentStyle,
   setProperty,
-  styleConfig,
 }: ControlProps) => {
-  const value = currentStyle[styleConfig.property];
+  const value = currentStyle[property];
   const [isOpen, setIsOpen] = useState(false);
 
-  const setValue = setProperty(styleConfig.property);
+  const setValue = setProperty(property);
 
   return (
     <FloatingPanel

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

@@ -67,11 +67,11 @@ const useLabels = (
 };
 
 export const FontWeightControl = ({
+  property,
   currentStyle,
   setProperty,
-  styleConfig,
 }: ControlProps) => {
-  const fontWeight = currentStyle[styleConfig.property];
+  const fontWeight = currentStyle[property];
 
   // We need the font family to determine which font weights are available
   const fontFamily = currentStyle.fontFamily;
@@ -84,7 +84,7 @@ export const FontWeightControl = ({
     toValue(fontWeight)
   );
 
-  const setValue = setProperty(styleConfig.property);
+  const setValue = setProperty(property);
 
   return (
     <Select

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

@@ -6,18 +6,18 @@ import { useAssets } from "~/designer/shared/assets";
 import { toValue } from "@webstudio-is/css-engine";
 
 export const ImageControl = ({
+  property,
   currentStyle,
   setProperty,
-  styleConfig,
 }: ControlProps) => {
   const { assetContainers } = useAssets("image");
-  const value = currentStyle[styleConfig.property];
+  const value = currentStyle[property];
 
   if (value === undefined) {
     return null;
   }
 
-  const setValue = setProperty(styleConfig.property);
+  const setValue = setProperty(property);
 
   const selectedAsset = assetContainers.find(
     (assetContainer) => assetContainer.asset.id === toValue(value)

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

@@ -5,30 +5,29 @@ import { iconConfigs } from "../../shared/configs";
 import { toValue } from "@webstudio-is/css-engine";
 
 export const MenuControl = ({
+  property,
   currentStyle,
   setProperty,
   styleConfig,
 }: ControlProps) => {
-  const value = currentStyle[styleConfig.property];
-  const isFromCurrentBreakpoint = useIsFromCurrentBreakpoint(
-    styleConfig.property
-  );
+  const value = currentStyle[property];
+  const isFromCurrentBreakpoint = useIsFromCurrentBreakpoint(property);
 
   if (value === undefined) {
     return null;
   }
 
-  const setValue = setProperty(styleConfig.property);
+  const setValue = setProperty(property);
   const currentValue = toValue(value);
 
-  const iconProps = iconConfigs[styleConfig.property];
+  const iconProps = iconConfigs[property];
   const iconStyle =
-    styleConfig.property === "flexDirection"
+    property === "flexDirection"
       ? {}
       : {
           transform: `rotate(${
             toValue(currentStyle.flexDirection) === "column"
-              ? 90 * (styleConfig.property === "alignItems" ? -1 : 1)
+              ? 90 * (property === "alignItems" ? -1 : 1)
               : 0
           }deg)`,
         };

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

@@ -3,13 +3,14 @@ import { Select } from "@webstudio-is/design-system";
 import type { ControlProps } from "../../style-sections";
 
 export const SelectControl = ({
+  property,
   currentStyle,
   setProperty,
   styleConfig,
 }: ControlProps) => {
-  const value = currentStyle[styleConfig.property];
+  const value = currentStyle[property];
 
-  const setValue = setProperty(styleConfig.property);
+  const setValue = setProperty(property);
 
   return (
     <Select

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

@@ -8,15 +8,16 @@ import { useState } from "react";
 import { Box, EnhancedTooltip } from "@webstudio-is/design-system";
 
 export const TextControl = ({
+  property,
   currentStyle,
   setProperty,
   deleteProperty,
   styleConfig,
   icon,
 }: ControlProps & { icon?: JSX.Element }) => {
-  const value = currentStyle[styleConfig.property];
+  const value = currentStyle[property];
 
-  const setValue = setProperty(styleConfig.property);
+  const setValue = setProperty(property);
 
   const [intermediateValue, setIntermediateValue] = useState<
     StyleValue | IntermediateStyleValue
@@ -27,7 +28,7 @@ export const TextControl = ({
       <Box>
         <CssValueInput
           icon={icon}
-          property={styleConfig.property}
+          property={property}
           value={value}
           intermediateValue={intermediateValue}
           keywords={styleConfig.items.map((item) => ({
@@ -38,7 +39,7 @@ export const TextControl = ({
             setIntermediateValue(styleValue);
 
             if (styleValue === undefined) {
-              deleteProperty(styleConfig.property, { isEphemeral: true });
+              deleteProperty(property, { isEphemeral: true });
               return;
             }
 
@@ -50,7 +51,7 @@ export const TextControl = ({
             if (styleValue !== undefined) {
               setValue(styleValue, { isEphemeral: true });
             } else {
-              deleteProperty(styleConfig.property, { isEphemeral: true });
+              deleteProperty(property, { isEphemeral: true });
             }
           }}
           onChangeComplete={({ value }) => {
@@ -58,7 +59,7 @@ export const TextControl = ({
             setIntermediateValue(undefined);
           }}
           onAbort={() => {
-            deleteProperty(styleConfig.property, { isEphemeral: true });
+            deleteProperty(property, { isEphemeral: true });
           }}
         />
       </Box>

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

@@ -30,7 +30,7 @@ export const FlexChildSection = (props: RenderCategoryProps) => {
 };
 
 const FlexChildSectionAlign = (props: RenderCategoryProps) => {
-  const { setProperty, deleteProperty, currentStyle, sectionStyle } = props;
+  const { setProperty, deleteProperty, currentStyle } = props;
   const setAlignSelf = setProperty("alignSelf");
 
   return (
@@ -41,7 +41,7 @@ const FlexChildSectionAlign = (props: RenderCategoryProps) => {
         onReset={() => deleteProperty("alignSelf")}
       />
       <ToggleGroupControl
-        property={sectionStyle.alignSelf?.styleConfig.property}
+        property="alignSelf"
         onValueChange={(value) => setAlignSelf(value)}
         value={toValue(currentStyle.alignSelf)}
         items={[
@@ -82,7 +82,7 @@ const FlexChildSectionAlign = (props: RenderCategoryProps) => {
 };
 
 const FlexChildSectionSizing = (props: RenderCategoryProps) => {
-  const { createBatchUpdate, currentStyle, sectionStyle } = props;
+  const { createBatchUpdate, currentStyle } = props;
   const setSizing = createBatchUpdate();
 
   return (
@@ -97,10 +97,7 @@ const FlexChildSectionSizing = (props: RenderCategoryProps) => {
         }}
       />
       <ToggleGroupControl
-        property={[
-          sectionStyle.flexGrow?.styleConfig.property,
-          sectionStyle.flexShrink?.styleConfig.property,
-        ]}
+        property={["flexGrow", "flexShrink"]}
         onValueChange={(value) => {
           switch (value) {
             case "none": {
@@ -204,7 +201,7 @@ const FlexChildSectionSizingPopover = ({
 };
 
 const FlexChildSectionOrder = (props: RenderCategoryProps) => {
-  const { deleteProperty, setProperty, currentStyle, sectionStyle } = props;
+  const { deleteProperty, setProperty, currentStyle } = props;
   const setOrder = setProperty("order");
 
   return (
@@ -215,7 +212,7 @@ const FlexChildSectionOrder = (props: RenderCategoryProps) => {
         onReset={() => deleteProperty("order")}
       />
       <ToggleGroupControl
-        property={sectionStyle.order?.styleConfig.property}
+        property="order"
         onValueChange={(value) => {
           switch (value) {
             case "0":

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

@@ -36,7 +36,7 @@ const LayoutSectionFlex = ({
     alignContent,
   ].some((config) => config !== undefined);
 
-  const flexWrapValue = flexWrap.currentStyle[flexWrap.styleConfig.property];
+  const flexWrapValue = flexWrap.currentStyle.flexWrap;
 
   // From design: Notice that the align-content icon button is not visible by default.
   // This property only applies when flex-wrap is set to "wrap".
@@ -161,6 +161,7 @@ export const LayoutSection = ({
             onReset={() => deleteProperty("display")}
           />
           <SelectControl
+            property="display"
             category={display.category}
             currentStyle={display.currentStyle}
             setProperty={display.setProperty}

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

@@ -2,7 +2,7 @@ import { Grid } from "@webstudio-is/design-system";
 import { toValue } from "@webstudio-is/css-engine";
 import type { StyleConfig } from "./shared/configs";
 import type { Category } from "@webstudio-is/react-sdk";
-import type { Style } from "@webstudio-is/css-data";
+import type { Style, StyleProperty } from "@webstudio-is/css-data";
 import type {
   SetProperty,
   DeleteProperty,
@@ -25,6 +25,7 @@ import {
 import { PropertyName } from "./shared/property-name";
 
 export type ControlProps = {
+  property: StyleProperty;
   setProperty: SetProperty;
   deleteProperty: DeleteProperty;
   currentStyle: Style;
@@ -46,6 +47,7 @@ export type RenderCategoryProps = {
 };
 
 export type RenderPropertyProps = {
+  property: StyleProperty;
   setProperty: SetProperty;
   deleteProperty: DeleteProperty;
   currentStyle: Style;
@@ -54,6 +56,7 @@ export type RenderPropertyProps = {
 };
 
 export const renderProperty = ({
+  property,
   currentStyle,
   setProperty,
   deleteProperty,
@@ -61,7 +64,6 @@ export const renderProperty = ({
   category,
 }: RenderPropertyProps) => {
   const Control = controls[styleConfig.control];
-  const { property } = styleConfig;
   if (!Control) {
     return null;
   }
@@ -69,11 +71,12 @@ export const renderProperty = ({
   return (
     <Grid key={category + property} css={{ gridTemplateColumns: "4fr 6fr" }}>
       <PropertyName
-        property={styleConfig.property}
+        property={property}
         label={styleConfig.label}
-        onReset={() => deleteProperty(styleConfig.property)}
+        onReset={() => deleteProperty(property)}
       />
       <Control
+        property={property}
         currentStyle={currentStyle}
         setProperty={setProperty}
         deleteProperty={deleteProperty}

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

@@ -117,7 +117,8 @@ export const StyleSettings = ({
     const moreStyleConfigsByCategory: Array<RenderPropertyProps> = [];
 
     for (const styleConfig of styleConfigs) {
-      const isInCategory = categoryProperties.includes(styleConfig.property);
+      const { property } = styleConfig;
+      const isInCategory = categoryProperties.includes(property);
       // We don't want to filter out inapplicable styles if user wants to apply them anyway
       const isApplicable = isSearchMode
         ? true
@@ -125,6 +126,7 @@ export const StyleSettings = ({
       const isRendered = didRender(category, styleConfig);
       const element = {
         ...rest,
+        property,
         setProperty,
         deleteProperty,
         currentStyle,
@@ -132,15 +134,14 @@ export const StyleSettings = ({
         category,
       };
 
-      sectionStyle[styleConfig.property] = element;
+      sectionStyle[property] = element;
 
       // @todo remove isRendered once spacing section is converted to a section
       if (isInCategory && isApplicable && isRendered === false) {
         // We are making a separate array of properties which come after the "moreFrom"
         // so we can make them collapsable
         if (
-          (styleConfig.property === moreFrom ||
-            moreStyleConfigsByCategory.length !== 0) &&
+          (property === moreFrom || moreStyleConfigsByCategory.length !== 0) &&
           isSearchMode === false
         ) {
           moreStyleConfigsByCategory.push(element);