refactor: migrate to property section label

apps/builder/app/builder/features/style-panel/property-label.tsx

@@ -11,6 +11,7 @@ import {
   Flex,
   Kbd,
   Label,
+  SectionTitleLabel,
   Text,
   theme,
   Tooltip,
@@ -243,6 +244,74 @@ export const PropertyLabel = ({
   );
 };
 
+export const PropertySectionLabel = ({
+  label,
+  description,
+  properties,
+}: {
+  label: string;
+  description: string;
+  properties: [StyleProperty, ...StyleProperty[]];
+}) => {
+  const instanceSelector = useStore($selectedInstanceSelector);
+  const { createBatchUpdate } = useStyleData(instanceSelector?.[0] ?? "");
+  const $styles = useMemo(() => {
+    return computed(
+      properties.map(createComputedStyleDeclStore),
+      (...computedStyles) => computedStyles
+    );
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, properties);
+  const styles = useStore($styles);
+  const colors = styles.map(({ source }) => source.name);
+  const styleValueSourceColor = getPriorityStyleSource(colors);
+  const [isOpen, setIsOpen] = useState(false);
+  const resetProperty = () => {
+    const batch = createBatchUpdate();
+    for (const property of properties) {
+      batch.deleteProperty(property);
+    }
+    batch.publish();
+  };
+  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();
+              resetProperty();
+              return;
+            }
+            setIsOpen(true);
+          },
+        }}
+        content={
+          <PropertyInfo
+            title={label}
+            description={description}
+            styles={styles}
+            onReset={() => {
+              resetProperty();
+              setIsOpen(false);
+            }}
+          />
+        }
+      >
+        <Flex shrink gap={1} align="center">
+          <SectionTitleLabel color={styleValueSourceColor}>
+            {label}
+          </SectionTitleLabel>
+        </Flex>
+      </Tooltip>
+    </Flex>
+  );
+};
+
 /**
  * Some properties like layered background-image, background-size are non resetable.
  * UI of background would be unreadable, imagine you have

apps/builder/app/builder/features/style-panel/sections/backdrop-filter/backdrop-filter.tsx

@@ -5,21 +5,22 @@ import { useState } from "react";
 import {
   SectionTitle,
   SectionTitleButton,
-  SectionTitleLabel,
   Tooltip,
   Flex,
   Text,
 } from "@webstudio-is/design-system";
 import { parseCssValue } from "@webstudio-is/css-data";
-import { PropertyName } from "../../shared/property-name";
-import { getStyleSource } from "../../shared/style-info";
 import { getDots } from "../../shared/collapsible-section";
 import { InfoCircleIcon, PlusIcon } from "@webstudio-is/icons";
 import { addLayer } from "../../style-layer-utils";
 import { LayersList } from "../../style-layers-list";
 import { FilterSectionContent } from "../../shared/filter-content";
+import { PropertySectionLabel } from "../../property-label";
 
-export const properties = ["backdropFilter"] satisfies Array<StyleProperty>;
+export const properties = ["backdropFilter"] satisfies [
+  StyleProperty,
+  ...StyleProperty[],
+];
 
 const property: StyleProperty = properties[0];
 const label = "Backdrop Filters";
@@ -29,10 +30,6 @@ export const Section = (props: SectionProps) => {
   const { currentStyle, deleteProperty } = props;
   const [isOpen, setIsOpen] = useState(true);
   const value = currentStyle[property]?.value;
-  const sectionStyleSource =
-    value?.type === "unparsed" || value?.type === "guaranteedInvalid"
-      ? undefined
-      : getStyleSource(currentStyle[property]);
 
   return (
     <CollapsibleSectionRoot
@@ -63,17 +60,10 @@ export const Section = (props: SectionProps) => {
             </Tooltip>
           }
         >
-          <PropertyName
-            title={label}
-            style={currentStyle}
-            properties={properties}
+          <PropertySectionLabel
+            label={label}
             description="Backdrop filters are similar to filters, but are applied to the area behind an element. This can be useful for creating frosted glass effects."
-            label={
-              <SectionTitleLabel color={sectionStyleSource}>
-                {label}
-              </SectionTitleLabel>
-            }
-            onReset={() => deleteProperty(property)}
+            properties={properties}
           />
         </SectionTitle>
       }

apps/builder/app/builder/features/style-panel/sections/backgrounds/background-layers.ts

@@ -1,9 +1,5 @@
 import type { LayersValue, StyleValue } from "@webstudio-is/css-engine";
-import {
-  type StyleInfo,
-  type StyleValueInfo,
-  getStyleSource,
-} from "../../shared/style-info";
+import type { StyleInfo, StyleValueInfo } from "../../shared/style-info";
 import type {
   CreateBatchUpdate,
   DeleteProperty,
@@ -41,9 +37,11 @@ export const isBackgroundStyleValue = (
   return false;
 };
 
+type BackgroundProperty = keyof typeof layeredBackgroundPropsDefaults;
+
 export const layeredBackgroundProps = Object.keys(
   layeredBackgroundPropsDefaults
-) as (keyof typeof layeredBackgroundPropsDefaults)[];
+) as [BackgroundProperty, ...BackgroundProperty[]];
 
 export type LayeredBackgroundProperty = (typeof layeredBackgroundProps)[number];
 
@@ -186,18 +184,6 @@ const getLayersValue = (styleValue?: StyleValueInfo) => {
   return { type: "layers" as const, value: [] };
 };
 
-export const getLayersStyleSource = (style: StyleInfo) => {
-  return getStyleSource(...layeredBackgroundProps.map((prop) => style[prop]));
-};
-
-export const deleteLayers = (createBatchUpdate: CreateBatchUpdate) => {
-  const batch = createBatchUpdate();
-  for (const property of layeredBackgroundProps) {
-    batch.deleteProperty(property);
-  }
-  batch.publish();
-};
-
 const isLayerStylesRecord = (value: {
   [property in LayeredBackgroundProperty]?: LayersValue;
 }): value is Record<LayeredBackgroundProperty, LayersValue> => {

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

@@ -10,7 +10,6 @@ import {
   Label,
   SectionTitle,
   SectionTitleButton,
-  SectionTitleLabel,
   SmallIconButton,
   SmallToggleButton,
   theme,
@@ -23,7 +22,6 @@ import {
   PlusIcon,
 } from "@webstudio-is/icons";
 import { $assets } from "~/shared/nano-states";
-import { PropertyName } from "../../shared/property-name";
 import type { StyleInfo } from "../../shared/style-info";
 import { ColorControl } from "../../controls/color/color-control";
 import {
@@ -37,8 +35,6 @@ import {
   getLayerBackgroundStyleInfo,
   deleteLayerProperty,
   swapLayers,
-  getLayersStyleSource,
-  deleteLayers,
 } from "./background-layers";
 import { BackgroundContent } from "./background-content";
 import { getLayerName, LayerThumbnail } from "./background-thumbnail";
@@ -49,6 +45,8 @@ import {
   useOpenState,
 } from "~/builder/shared/collapsible-section";
 import { getDots } from "../../shared/collapsible-section";
+import { PropertyLabel, PropertySectionLabel } from "../../property-label";
+import { propertyDescriptions } from "@webstudio-is/css-data";
 
 const Layer = (props: {
   id: string;
@@ -159,7 +157,6 @@ const BackgroundsCollapsibleSection = ({
 }: SectionProps & { children: React.ReactNode }) => {
   const label = "Backgrounds";
   const [isOpen, setIsOpen] = useOpenState({ label });
-  const layersStyleSource = getLayersStyleSource(currentStyle);
 
   return (
     <CollapsibleSectionRoot
@@ -182,19 +179,10 @@ const BackgroundsCollapsibleSection = ({
             />
           }
         >
-          <PropertyName
-            style={currentStyle}
-            title="Backgrounds"
+          <PropertySectionLabel
+            label="Backgrounds"
             description="Add one or more backgrounds to the instance such as a color, image, or gradient."
             properties={layeredBackgroundProps}
-            label={
-              <SectionTitleLabel color={layersStyleSource}>
-                {label}
-              </SectionTitleLabel>
-            }
-            onReset={() => {
-              deleteLayers(createBatchUpdate);
-            }}
           />
         </SectionTitle>
       }
@@ -277,12 +265,10 @@ export const Section = (props: SectionProps) => {
             gridTemplateColumns: `1fr ${theme.spacing[23]}`,
           }}
         >
-          <PropertyName
-            style={currentStyle}
+          <PropertyLabel
             properties={["backgroundColor"]}
-            title={"Background Color"}
-            label={"Color"}
-            onReset={() => deleteProperty("backgroundColor")}
+            label="Color"
+            description={propertyDescriptions.backgroundColor}
           />
 
           <ColorControl

apps/builder/app/builder/features/style-panel/sections/box-shadows/box-shadows.tsx

@@ -1,7 +1,6 @@
 import {
   SectionTitle,
   SectionTitleButton,
-  SectionTitleLabel,
   Tooltip,
   Text,
 } from "@webstudio-is/design-system";
@@ -10,15 +9,17 @@ import type { LayersValue, StyleProperty } from "@webstudio-is/css-engine";
 import { CollapsibleSectionRoot } from "~/builder/shared/collapsible-section";
 import { useState } from "react";
 import { getDots } from "../../shared/collapsible-section";
-import { PropertyName } from "../../shared/property-name";
-import { getStyleSource } from "../../shared/style-info";
 import type { SectionProps } from "../shared/section";
 import { LayersList } from "../../style-layers-list";
 import { addLayer } from "../../style-layer-utils";
 import { parseCssValue } from "@webstudio-is/css-data";
 import { ShadowContent } from "../../shared/shadow-content";
+import { PropertySectionLabel } from "../../property-label";
 
-export const properties = ["boxShadow"] satisfies Array<StyleProperty>;
+export const properties = ["boxShadow"] satisfies [
+  StyleProperty,
+  ...StyleProperty[],
+];
 
 const property: StyleProperty = properties[0];
 const label = "Box Shadows";
@@ -28,10 +29,6 @@ export const Section = (props: SectionProps) => {
   const { currentStyle, deleteProperty } = props;
   const [isOpen, setIsOpen] = useState(true);
   const value = currentStyle[property]?.value;
-  const sectionStyleSource =
-    value?.type === "unparsed" || value?.type === "guaranteedInvalid"
-      ? undefined
-      : getStyleSource(currentStyle[property]);
 
   return (
     <CollapsibleSectionRoot
@@ -57,17 +54,10 @@ export const Section = (props: SectionProps) => {
             />
           }
         >
-          <PropertyName
-            title={label}
-            style={currentStyle}
-            properties={properties}
+          <PropertySectionLabel
+            label={label}
             description="Adds shadow effects around an element's frame."
-            label={
-              <SectionTitleLabel color={sectionStyleSource}>
-                {label}
-              </SectionTitleLabel>
-            }
-            onReset={() => deleteProperty(property)}
+            properties={properties}
           />
         </SectionTitle>
       }

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

@@ -5,21 +5,22 @@ import {
   Flex,
   SectionTitle,
   SectionTitleButton,
-  SectionTitleLabel,
   Tooltip,
   Text,
 } from "@webstudio-is/design-system";
 import { parseCssValue } from "@webstudio-is/css-data";
 import { getDots } from "../../shared/collapsible-section";
-import { PropertyName } from "../../shared/property-name";
 import { InfoCircleIcon, PlusIcon } from "@webstudio-is/icons";
 import { LayersValue, type StyleProperty } from "@webstudio-is/css-engine";
-import { getStyleSource } from "../../shared/style-info";
 import { LayersList } from "../../style-layers-list";
 import { addLayer } from "../../style-layer-utils";
 import { FilterSectionContent } from "../../shared/filter-content";
+import { PropertySectionLabel } from "../../property-label";
 
-export const properties = ["filter"] satisfies Array<StyleProperty>;
+export const properties = ["filter"] satisfies [
+  StyleProperty,
+  ...StyleProperty[],
+];
 
 const property: StyleProperty = properties[0];
 const label = "Filters";
@@ -29,10 +30,6 @@ export const Section = (props: SectionProps) => {
   const { currentStyle, deleteProperty } = props;
   const [isOpen, setIsOpen] = useState(true);
   const value = currentStyle[property]?.value;
-  const sectionStyleSource =
-    value?.type === "unparsed" || value?.type === "guaranteedInvalid"
-      ? undefined
-      : getStyleSource(currentStyle[property]);
 
   return (
     <CollapsibleSectionRoot
@@ -60,17 +57,10 @@ export const Section = (props: SectionProps) => {
             </Tooltip>
           }
         >
-          <PropertyName
-            title={label}
-            style={currentStyle}
-            properties={properties}
+          <PropertySectionLabel
+            label={label}
             description="Filter effects allow you to apply graphical effects like blurring, color shifting, and more to elements."
-            label={
-              <SectionTitleLabel color={sectionStyleSource}>
-                {label}
-              </SectionTitleLabel>
-            }
-            onReset={() => deleteProperty(property)}
+            properties={properties}
           />
         </SectionTitle>
       }