Merge branch 'main' into fix-wf-paste

Author: kof

apps/builder/app/builder/features/settings-panel/props-section/props-section.tsx

@@ -9,7 +9,10 @@ import {
   Flex,
   Box,
 } from "@webstudio-is/design-system";
-import { descendantComponent } from "@webstudio-is/react-sdk";
+import {
+  descendantComponent,
+  isAttributeNameSafe,
+} from "@webstudio-is/react-sdk";
 import {
   $propValuesByInstanceSelector,
   $propsIndex,
@@ -21,7 +24,6 @@ import { renderControl } from "../controls/combined";
 import { usePropsLogic, type PropAndMeta } from "./use-props-logic";
 import { Row } from "../shared";
 import { serverSyncStore } from "~/shared/sync";
-import { isAttributeNameSafe } from "~/shared/dom-utils";
 
 type Item = {
   name: string;

apps/builder/app/builder/features/style-panel/sections/advanced/advanced.tsx

@@ -1,4 +1,6 @@
+import { colord } from "colord";
 import { useEffect, useMemo, useRef, useState, type ReactNode } from "react";
+import { useStore } from "@nanostores/react";
 import { computed } from "nanostores";
 import { matchSorter } from "match-sorter";
 import { isFeatureEnabled } from "@webstudio-is/feature-flags";
@@ -19,9 +21,10 @@ import {
   properties as propertiesData,
   propertyDescriptions,
 } from "@webstudio-is/css-data";
-import { useStore } from "@nanostores/react";
+import { ROOT_INSTANCE_ID } from "@webstudio-is/sdk";
 import {
   hyphenateProperty,
+  toValue,
   type StyleProperty,
 } from "@webstudio-is/css-engine";
 import {
@@ -33,12 +36,20 @@ import { styleConfigByName } from "../../shared/configs";
 import { deleteProperty, setProperty } from "../../shared/use-style-data";
 import {
   $definedStyles,
+  $matchingBreakpoints,
+  getDefinedStyles,
   useComputedStyleDecl,
   useComputedStyles,
 } from "../../shared/model";
 import { getDots } from "../../shared/style-section";
 import { PropertyInfo } from "../../property-label";
 import { sections } from "../sections";
+import { ColorPopover } from "../../shared/color-picker";
+import {
+  $selectedInstanceSelector,
+  $styles,
+  $styleSourceSelections,
+} from "~/shared/nano-states";
 
 // Only here to keep the same section module interface
 export const properties = [];
@@ -165,45 +176,41 @@ const AdvancedPropertyLabel = ({ property }: { property: StyleProperty }) => {
     styleDecl.source.name === "default" ? "code" : styleDecl.source.name;
   const [isOpen, setIsOpen] = useState(false);
   return (
-    <Flex align="center">
-      <Tooltip
-        open={isOpen}
-        onOpenChange={setIsOpen}
-        // prevent closing tooltip on content click
-        onPointerDown={(event) => event.preventDefault()}
-        triggerProps={{
-          onClick: (event) => {
-            if (event.altKey) {
-              event.preventDefault();
-              deleteProperty(property);
-              return;
-            }
-            setIsOpen(true);
-          },
-        }}
-        content={
-          <PropertyInfo
-            title={label}
-            description={description}
-            styles={[styleDecl]}
-            onReset={() => {
-              deleteProperty(property);
-              setIsOpen(false);
-            }}
-          />
-        }
-      >
-        <Flex shrink gap={1} align="center">
-          <Label color={color} text="mono" truncate>
-            {label}
-          </Label>
-        </Flex>
-      </Tooltip>
-    </Flex>
+    <Tooltip
+      open={isOpen}
+      onOpenChange={setIsOpen}
+      // prevent closing tooltip on content click
+      onPointerDown={(event) => event.preventDefault()}
+      triggerProps={{
+        onClick: (event) => {
+          if (event.altKey) {
+            event.preventDefault();
+            deleteProperty(property);
+            return;
+          }
+          setIsOpen(true);
+        },
+      }}
+      content={
+        <PropertyInfo
+          title={label}
+          description={description}
+          styles={[styleDecl]}
+          onReset={() => {
+            deleteProperty(property);
+            setIsOpen(false);
+          }}
+        />
+      }
+    >
+      <Label color={color} text="mono">
+        {label}
+      </Label>
+    </Tooltip>
   );
 };
 
-const $customProperties = computed($definedStyles, (definedStyles) => {
+const $availableCustomProperties = computed($definedStyles, (definedStyles) => {
   const customProperties = new Set<StyleProperty>();
   for (const { property } of definedStyles) {
     if (property.startsWith("--")) {
@@ -221,21 +228,41 @@ const AdvancedPropertyValue = ({
   property: StyleProperty;
 }) => {
   const styleDecl = useComputedStyleDecl(property);
-  const customProperties = useStore($customProperties);
+  const availableCustomProperties = useStore($availableCustomProperties);
   const { items } = styleConfigByName(property);
   const inputRef = useRef<HTMLInputElement>(null);
   useEffect(() => {
     if (autoFocus) {
       inputRef.current?.focus();
     }
   }, [autoFocus]);
+  const isColor = colord(toValue(styleDecl.usedValue)).isValid();
   return (
     <CssValueInputContainer
       inputRef={inputRef}
       variant="chromeless"
       size="2"
       text="mono"
       fieldSizing="content"
+      prefix={
+        isColor && (
+          <ColorPopover
+            size={1}
+            value={styleDecl.usedValue}
+            onChange={(styleValue) => {
+              const options = { isEphemeral: true, listed: true };
+              if (styleValue) {
+                setProperty(property)(styleValue, options);
+              } else {
+                deleteProperty(property, options);
+              }
+            }}
+            onChangeComplete={(styleValue) => {
+              setProperty(property)(styleValue);
+            }}
+          />
+        )
+      }
       property={property}
       styleSource={styleDecl.source.name}
       keywords={[
@@ -244,7 +271,7 @@ const AdvancedPropertyValue = ({
           value: item.name,
         })),
         // very basic custom properties autocomplete
-        ...Array.from(customProperties).map((name) => ({
+        ...Array.from(availableCustomProperties).map((name) => ({
           type: "keyword" as const,
           value: name,
         })),
@@ -276,23 +303,46 @@ const initialProperties = new Set<StyleProperty>([
   "opacity",
 ]);
 
-const $advancedProperties = computed($definedStyles, (definedStyles) => {
-  // All properties used by the panels except the advanced panel
-  const baseProperties = new Set<StyleProperty>([]);
-  for (const { properties } of sections.values()) {
-    for (const property of properties) {
-      baseProperties.add(property);
+const $advancedProperties = computed(
+  [
+    $selectedInstanceSelector,
+    $styleSourceSelections,
+    $matchingBreakpoints,
+    $styles,
+  ],
+  (instanceSelector, styleSourceSelections, matchingBreakpoints, styles) => {
+    if (instanceSelector === undefined) {
+      return [];
     }
-  }
-  const advancedProperties = new Set<StyleProperty>(initialProperties);
-  for (const { property, listed } of definedStyles) {
-    // exclude properties from style panel UI unless edited in advanced section
-    if (baseProperties.has(property) === false || listed) {
-      advancedProperties.add(property);
+    const instanceAndRootSelector =
+      instanceSelector[0] === ROOT_INSTANCE_ID
+        ? instanceSelector
+        : // prevent showing properties inherited from root
+          // to not bloat advanced panel
+          instanceSelector;
+    const definedStyles = getDefinedStyles({
+      instanceSelector: instanceAndRootSelector,
+      matchingBreakpoints,
+      styleSourceSelections,
+      styles,
+    });
+    // All properties used by the panels except the advanced panel
+    const baseProperties = new Set<StyleProperty>([]);
+    for (const { properties } of sections.values()) {
+      for (const property of properties) {
+        baseProperties.add(property);
+      }
     }
+    const advancedProperties = new Set<StyleProperty>(initialProperties);
+    for (const { property, listed } of definedStyles) {
+      // exclude properties from style panel UI unless edited in advanced section
+      if (baseProperties.has(property) === false || listed) {
+        advancedProperties.add(property);
+      }
+    }
+    return Array.from(advancedProperties).reverse();
   }
-  return Array.from(advancedProperties).reverse();
-});
+);
 
 export const Section = () => {
   const [isAdding, setIsAdding] = useState(false);
@@ -320,7 +370,7 @@ export const Section = () => {
       )}
       <Box>
         {advancedProperties.map((property) => (
-          <Flex key={property} wrap="wrap" align="center">
+          <Flex key={property} wrap="wrap" align="center" justify="start">
             <AdvancedPropertyLabel property={property} />
             <Text>:</Text>
             <AdvancedPropertyValue

apps/builder/app/builder/features/style-panel/sections/borders/border-property.tsx

@@ -1,12 +1,7 @@
 import { type ReactNode } from "react";
 import type { StyleProperty } from "@webstudio-is/css-engine";
 import { toValue } from "@webstudio-is/css-engine";
-import {
-  Box,
-  Grid,
-  NestedIconLabel,
-  ToggleButton,
-} from "@webstudio-is/design-system";
+import { Box, Grid, ToggleButton } from "@webstudio-is/design-system";
 import { CssValueInputContainer } from "../../shared/css-value-input";
 import { styleConfigByName } from "../../shared/configs";
 import { rowCss } from "./utils";
@@ -124,12 +119,7 @@ export const BorderProperty = ({
             <CssValueInputContainer
               key={styleDecl.property}
               icon={
-                <NestedIconLabel>
-                  {
-                    borderPropertyOptions[styleDecl.property as StyleProperty]
-                      ?.icon
-                  }
-                </NestedIconLabel>
+                borderPropertyOptions[styleDecl.property as StyleProperty]?.icon
               }
               property={styleDecl.property as StyleProperty}
               styleSource={styleDecl.source.name}

apps/builder/app/builder/features/style-panel/shared/color-picker.tsx

@@ -176,25 +176,21 @@ type ColorPickerProps = {
   disabled?: boolean;
 };
 
-export const ColorPicker = ({
+export const ColorPopover = ({
+  size,
   value,
-  currentColor,
-  keywords,
-  property,
-  disabled,
   onChange,
   onChangeComplete,
-  onAbort,
-}: ColorPickerProps) => {
+}: {
+  size?: 1 | 2;
+  value: StyleValue;
+  onChange: (value: undefined | StyleValue) => void;
+  onChangeComplete: (value: StyleValue) => void;
+}) => {
   const [displayColorPicker, setDisplayColorPicker] = useState(false);
   const { enableCanvasPointerEvents, disableCanvasPointerEvents } =
     useDisableCanvasPointerEvents();
 
-  const [intermediateValue, setIntermediateValue] = useState<
-    StyleValue | IntermediateStyleValue
-  >();
-  const currentValue = intermediateValue ?? value;
-
   const handleOpenChange = (open: boolean) => {
     setDisplayColorPicker(open);
     if (open) {
@@ -209,15 +205,16 @@ export const ColorPicker = ({
     enableCanvasPointerEvents();
   };
 
-  const prefix = (
+  return (
     <Popover modal open={displayColorPicker} onOpenChange={handleOpenChange}>
       <PopoverTrigger
         asChild
         aria-label="Open color picker"
         onClick={() => setDisplayColorPicker((shown) => !shown)}
       >
         <ColorThumb
-          color={styleValueToRgbaColor(currentColor)}
+          color={styleValueToRgbaColor(value)}
+          size={size}
           css={{ margin: theme.spacing[2] }}
           tabIndex={-1}
         />
@@ -230,7 +227,36 @@ export const ColorPicker = ({
         }}
       >
         <ColorPickerPopoverContent
-          value={currentValue}
+          value={value}
+          onChange={onChange}
+          onChangeComplete={onChangeComplete}
+        />
+      </PopoverContent>
+    </Popover>
+  );
+};
+
+export const ColorPicker = ({
+  value,
+  currentColor,
+  keywords,
+  property,
+  disabled,
+  onChange,
+  onChangeComplete,
+  onAbort,
+}: ColorPickerProps) => {
+  const [intermediateValue, setIntermediateValue] = useState<
+    StyleValue | IntermediateStyleValue
+  >();
+
+  return (
+    <CssValueInput
+      aria-disabled={disabled}
+      styleSource="default"
+      prefix={
+        <ColorPopover
+          value={currentColor}
           onChange={(styleValue) => {
             setIntermediateValue(styleValue);
             if (styleValue) {
@@ -244,15 +270,7 @@ export const ColorPicker = ({
             onChangeComplete(value);
           }}
         />
-      </PopoverContent>
-    </Popover>
-  );
-
-  return (
-    <CssValueInput
-      aria-disabled={disabled}
-      styleSource="default"
-      prefix={prefix}
+      }
       showSuffix={false}
       property={property}
       value={value}