feat: use ressetable blue label for properties

- properties now have blue labels when value is specified
- clicking on label shows tooltip
- alt+click does reset/delete

Author: TrySound

Diff for: apps/builder/app/builder/features/settings-panel/controls/boolean.tsx

@@ -6,22 +6,19 @@ import {
 } from "~/builder/shared/binding-popover";
 import {
   type ControlProps,
-  Label,
-  RemovePropButton,
   $selectedInstanceScope,
   updateExpressionValue,
   useBindingState,
   humanizeAttribute,
 } from "../shared";
+import { PropertyLabel } from "../property-label";
 
 export const BooleanControl = ({
   meta,
   prop,
   propName,
   computedValue,
-  deletable,
   onChange,
-  onDelete,
 }: ControlProps<"boolean">) => {
   const label = humanizeAttribute(meta.label || propName);
   const { scope, aliases } = useStore($selectedInstanceScope);
@@ -34,18 +31,14 @@ export const BooleanControl = ({
   return (
     <Grid
       css={{
-        gridTemplateColumns: deletable
-          ? `1fr max-content max-content`
-          : `1fr max-content`,
+        gridTemplateColumns: `1fr max-content`,
         minHeight: theme.spacing[13],
         justifyItems: "start",
       }}
       align="center"
       gap="2"
     >
-      <Label description={meta.description} readOnly={overwritable === false}>
-        {label}
-      </Label>
+      <PropertyLabel name={propName} readOnly={overwritable === false} />
       <BindingControl>
         <Switch
           disabled={overwritable === false}
@@ -76,7 +69,6 @@ export const BooleanControl = ({
           }
         />
       </BindingControl>
-      {deletable && <RemovePropButton onClick={onDelete} />}
     </Grid>
   );
 };

Diff for: apps/builder/app/builder/features/settings-panel/controls/check.tsx

@@ -14,6 +14,7 @@ import {
   useBindingState,
   humanizeAttribute,
 } from "../shared";
+import { PropertyLabel } from "../property-label";
 
 const add = (array: string[], item: string) => {
   if (array.includes(item)) {
@@ -34,9 +35,7 @@ export const CheckControl = ({
   prop,
   propName,
   computedValue,
-  deletable,
   onChange,
-  onDelete,
 }: ControlProps<"check" | "inline-check" | "multi-select">) => {
   const value = Array.isArray(computedValue)
     ? computedValue.map((item) => String(item))
@@ -57,16 +56,8 @@ export const CheckControl = ({
   return (
     <VerticalLayout
       label={
-        <Label
-          htmlFor={`${id}:${options[0]}`}
-          description={meta.description}
-          readOnly={overwritable === false}
-        >
-          {label}
-        </Label>
+        <PropertyLabel name={propName} readOnly={overwritable === false} />
       }
-      deletable={deletable}
-      onDelete={onDelete}
     >
       <BindingControl>
         {options.map((option) => (

Diff for: apps/builder/app/builder/features/settings-panel/controls/code.tsx

@@ -1,19 +1,4 @@
 import { useStore } from "@nanostores/react";
-import { CodeEditor } from "~/builder/shared/code-editor";
-import {
-  BindingControl,
-  BindingPopover,
-} from "~/builder/shared/binding-popover";
-import {
-  useLocalValue,
-  type ControlProps,
-  VerticalLayout,
-  Label,
-  updateExpressionValue,
-  $selectedInstanceScope,
-  useBindingState,
-  humanizeAttribute,
-} from "../shared";
 import { useState } from "react";
 import {
   Button,
@@ -29,6 +14,21 @@ import {
   theme,
 } from "@webstudio-is/design-system";
 import { InfoCircleIcon } from "@webstudio-is/icons";
+import { CodeEditor } from "~/builder/shared/code-editor";
+import {
+  BindingControl,
+  BindingPopover,
+} from "~/builder/shared/binding-popover";
+import {
+  useLocalValue,
+  type ControlProps,
+  VerticalLayout,
+  updateExpressionValue,
+  $selectedInstanceScope,
+  useBindingState,
+  humanizeAttribute,
+} from "../shared";
+import { PropertyLabel } from "../property-label";
 
 const ErrorInfo = ({
   error,
@@ -126,9 +126,7 @@ export const CodeControl = ({
   prop,
   propName,
   computedValue,
-  deletable,
   onChange,
-  onDelete,
 }: ControlProps<"code"> | ControlProps<"codetext">) => {
   const [error, setError] = useState<Error>();
   const metaOverride = {
@@ -177,17 +175,10 @@ export const CodeControl = ({
     <VerticalLayout
       label={
         <Flex gap="1" align="center">
-          <Label
-            description={metaOverride.description}
-            readOnly={overwritable === false}
-          >
-            {label}
-          </Label>
+          <PropertyLabel name={propName} readOnly={overwritable === false} />
           {errorInfo}
         </Flex>
       }
-      deletable={deletable}
-      onDelete={onDelete}
     >
       <BindingControl>
         <CodeEditor

Diff for: apps/builder/app/builder/features/settings-panel/controls/file.tsx

@@ -9,13 +9,13 @@ import {
   type ControlProps,
   VerticalLayout,
   useLocalValue,
-  Label,
   updateExpressionValue,
   $selectedInstanceScope,
   useBindingState,
   humanizeAttribute,
 } from "../shared";
 import { SelectAsset } from "./select-asset";
+import { PropertyLabel } from "../property-label";
 
 const UrlInput = ({
   id,
@@ -47,7 +47,6 @@ export const FileControl = ({
   prop,
   propName,
   computedValue,
-  deletable,
   onChange,
   onDelete,
 }: ControlProps<"file">) => {
@@ -81,15 +80,7 @@ export const FileControl = ({
   );
 
   return (
-    <VerticalLayout
-      label={
-        <Label htmlFor={id} description={meta.description}>
-          {label}
-        </Label>
-      }
-      deletable={deletable}
-      onDelete={onDelete}
-    >
+    <VerticalLayout label={<PropertyLabel name={propName} />}>
       <Flex css={{ gap: theme.spacing[3] }} direction="column" justify="center">
         <BindingControl>
           <UrlInput

Diff for: apps/builder/app/builder/features/settings-panel/controls/json.tsx

@@ -5,11 +5,9 @@ import {
   type ControlProps,
   useLocalValue,
   VerticalLayout,
-  Label,
   updateExpressionValue,
   $selectedInstanceScope,
   useBindingState,
-  humanizeAttribute,
 } from "../shared";
 import {
   ExpressionEditor,
@@ -19,15 +17,13 @@ import {
   BindingControl,
   BindingPopover,
 } from "~/builder/shared/binding-popover";
+import { PropertyLabel } from "../property-label";
 
 export const JsonControl = ({
-  meta,
   prop,
   propName,
   computedValue,
-  deletable,
   onChange,
-  onDelete,
 }: ControlProps<"json">) => {
   const [error, setError] = useState<boolean>(false);
   const valueString = formatValue(computedValue ?? "");
@@ -50,7 +46,6 @@ export const JsonControl = ({
       // empty block
     }
   });
-  const label = humanizeAttribute(meta.label || propName);
 
   const { scope, aliases } = useStore($selectedInstanceScope);
   const expression = prop?.type === "expression" ? prop.value : valueString;
@@ -61,12 +56,8 @@ export const JsonControl = ({
   return (
     <VerticalLayout
       label={
-        <Label description={meta.description} readOnly={overwritable === false}>
-          {label}
-        </Label>
+        <PropertyLabel name={propName} readOnly={overwritable === false} />
       }
-      deletable={deletable}
-      onDelete={onDelete}
     >
       <BindingControl>
         <ExpressionEditor

Diff for: apps/builder/app/builder/features/settings-panel/controls/number.tsx

@@ -9,21 +9,19 @@ import {
   type ControlProps,
   useLocalValue,
   ResponsiveLayout,
-  Label,
   updateExpressionValue,
   $selectedInstanceScope,
   useBindingState,
   humanizeAttribute,
 } from "../shared";
+import { PropertyLabel } from "../property-label";
 
 export const NumberControl = ({
   meta,
   prop,
   propName,
   computedValue,
   onChange,
-  deletable,
-  onDelete,
 }: ControlProps<"number">) => {
   const id = useId();
 
@@ -56,16 +54,8 @@ export const NumberControl = ({
   return (
     <ResponsiveLayout
       label={
-        <Label
-          htmlFor={id}
-          description={meta.description}
-          readOnly={overwritable === false}
-        >
-          {label}
-        </Label>
+        <PropertyLabel name={propName} readOnly={overwritable === false} />
       }
-      deletable={deletable}
-      onDelete={onDelete}
     >
       <BindingControl>
         <InputField

Diff for: apps/builder/app/builder/features/settings-panel/controls/radio.tsx

@@ -14,15 +14,14 @@ import {
   useBindingState,
   humanizeAttribute,
 } from "../shared";
+import { PropertyLabel } from "../property-label";
 
 export const RadioControl = ({
   meta,
   prop,
   propName,
   computedValue,
-  deletable,
   onChange,
-  onDelete,
 }: ControlProps<"radio" | "inline-radio">) => {
   const value = computedValue === undefined ? undefined : String(computedValue);
   // making sure that the current value is in the list of options
@@ -43,16 +42,8 @@ export const RadioControl = ({
   return (
     <VerticalLayout
       label={
-        <Label
-          htmlFor={id}
-          description={meta.description}
-          readOnly={overwritable === false}
-        >
-          {label}
-        </Label>
+        <PropertyLabel name={propName} readOnly={overwritable === false} />
       }
-      deletable={deletable}
-      onDelete={onDelete}
     >
       <BindingControl>
         <RadioGroup

Diff for: apps/builder/app/builder/features/settings-panel/controls/resource-control.tsx

@@ -1,3 +1,4 @@
+import { nanoid } from "nanoid";
 import { useId } from "react";
 import { useStore } from "@nanostores/react";
 import { InputField } from "@webstudio-is/design-system";
@@ -10,22 +11,20 @@ import {
 import {
   type ControlProps,
   useLocalValue,
-  ResponsiveLayout,
-  Label,
   humanizeAttribute,
+  VerticalLayout,
 } from "../shared";
 import { $resources } from "~/shared/nano-states";
 import { $selectedInstanceResourceScope } from "../resource-panel";
 import { computeExpression } from "~/shared/data-variables";
 import { updateWebstudioData } from "~/shared/instance-utils";
-import { nanoid } from "nanoid";
+import { PropertyLabel } from "../property-label";
 
 export const ResourceControl = ({
   meta,
   prop,
   propName,
   instanceId,
-  deletable,
 }: ControlProps<"resource">) => {
   const resources = useStore($resources);
   const { variableValues, scope, aliases } = useStore(
@@ -98,17 +97,6 @@ export const ResourceControl = ({
     });
   };
 
-  const deletePropAndResource = () => {
-    updateWebstudioData((data) => {
-      if (prop?.type === "resource") {
-        data.resources.delete(prop.value);
-      }
-      if (prop) {
-        data.props.delete(prop.id);
-      }
-    });
-  };
-
   const id = useId();
   const label = humanizeAttribute(meta.label || propName);
   let variant: BindingVariant = "bound";
@@ -122,14 +110,8 @@ export const ResourceControl = ({
   );
 
   return (
-    <ResponsiveLayout
-      label={
-        <Label htmlFor={id} description={meta.description} readOnly={readOnly}>
-          {label}
-        </Label>
-      }
-      deletable={deletable}
-      onDelete={deletePropAndResource}
+    <VerticalLayout
+      label={<PropertyLabel name={propName} readOnly={readOnly} />}
     >
       <BindingControl>
         <InputField
@@ -156,6 +138,6 @@ export const ResourceControl = ({
           }
         />
       </BindingControl>
-    </ResponsiveLayout>
+    </VerticalLayout>
   );
 };