feat(components): add Color prop type to Plasmic components

GitOrigin-RevId: 852dfec134b436d7ea6cf0df8b4672c910afb743
plasmicapp · Feb 14, 2025 · 386ee3e · 386ee3e
1 parent 30f8daf
commit 386ee3e
Show file tree

Hide file tree

Showing 7 changed files with 73 additions and 21 deletions.
diff --git a/platform/wab/cypress/e2e/hostless-rich-layout.spec.ts b/platform/wab/cypress/e2e/hostless-rich-layout.spec.ts
@@ -125,7 +125,7 @@ describe("hostless-rich-components", () => {
         justType("#E6EEF4{enter}");
         maybeSelectedElt()
           .find(".ant-layout-header")
-          .should("have.css", "background-color", "rgba(230, 238, 244, 0)");
+          .should("have.css", "background-color", "rgb(230, 238, 244)");
         checkDarkFgColors();
         cy.get("[data-test-id='back-sidebar-modal']").click();
 

diff --git a/platform/wab/src/wab/client/components/modals/ComponentPropModal.tsx b/platform/wab/src/wab/client/components/modals/ComponentPropModal.tsx
@@ -1,21 +1,28 @@
 import { PropValueEditor } from "@/wab/client/components/sidebar-tabs/PropValueEditor";
 import { SidebarModal } from "@/wab/client/components/sidebar/SidebarModal";
-import { IconLinkButton } from "@/wab/client/components/widgets";
+import {
+  IconLinkButton,
+  IFrameAwareDropdownMenu,
+} from "@/wab/client/components/widgets";
 import { Icon } from "@/wab/client/components/widgets/Icon";
+import { IconButton } from "@/wab/client/components/widgets/IconButton";
 import LabeledListItem from "@/wab/client/components/widgets/LabeledListItem";
+import { Modal } from "@/wab/client/components/widgets/Modal";
 import Select from "@/wab/client/components/widgets/Select";
 import Textbox from "@/wab/client/components/widgets/Textbox";
+import DotsVerticalIcon from "@/wab/client/plasmic/plasmic_kit/PlasmicIcon__DotsVertical";
 import PlusIcon from "@/wab/client/plasmic/plasmic_kit/PlasmicIcon__Plus";
 import PlasmicParamSection from "@/wab/client/plasmic/plasmic_kit_state_management/PlasmicParamSection";
 import { StudioCtx } from "@/wab/client/studio-ctx/StudioCtx";
-import { assert, ensure, mkShortId, spawn } from "@/wab/shared/common";
-import { canRenameParam } from "@/wab/shared/core/components";
-import { clone, codeLit, tryExtractJson } from "@/wab/shared/core/exprs";
-import { mkParam } from "@/wab/shared/core/lang";
 import {
   getPropTypeType,
   wabTypeToPropType,
 } from "@/wab/shared/code-components/code-components";
+import { assert, ensure, mkShortId, spawn } from "@/wab/shared/common";
+import { canRenameParam } from "@/wab/shared/core/components";
+import { clone, codeLit, tryExtractJson } from "@/wab/shared/core/exprs";
+import { mkParam } from "@/wab/shared/core/lang";
+import { cloneType } from "@/wab/shared/core/tpls";
 import { COMPONENT_PROP_CAP } from "@/wab/shared/Labels";
 import {
   Component,
@@ -30,10 +37,9 @@ import {
 } from "@/wab/shared/model/classes";
 import { typeDisplayName, typeFactory } from "@/wab/shared/model/model-util";
 import { smartHumanize } from "@/wab/shared/strs";
-import { cloneType } from "@/wab/shared/core/tpls";
+import { Menu } from "antd";
 import { isNaN } from "lodash";
 import React from "react";
-import { Modal } from "@/wab/client/components/widgets/Modal";
 
 function getComponentParamTypeOptions() {
   return [
@@ -47,6 +53,7 @@ function getComponentParamTypeOptions() {
     { value: "href", label: "Link URL", isPrimitive: false },
     { value: "dateString", label: "Date", isPrimitive: true },
     { value: "dateRangeStrings", label: "Date Range", isPrimitive: true },
+    { value: "color", label: "Color", isPrimitive: false },
   ] as const;
 }
 
@@ -280,6 +287,23 @@ export function ComponentPropModal(props: {
                   )}
                   attr="default-value"
                 />
+                <IFrameAwareDropdownMenu
+                  menu={
+                    <Menu>
+                      <Menu.Item
+                        onClick={() => {
+                          setDefaultExpr(undefined);
+                        }}
+                      >
+                        Unset
+                      </Menu.Item>
+                    </Menu>
+                  }
+                >
+                  <IconButton>
+                    <DotsVerticalIcon />
+                  </IconButton>
+                </IFrameAwareDropdownMenu>
               </div>
             ),
         }}
@@ -311,6 +335,23 @@ export function ComponentPropModal(props: {
                   )}
                   attr="preview-value"
                 />
+                <IFrameAwareDropdownMenu
+                  menu={
+                    <Menu>
+                      <Menu.Item
+                        onClick={() => {
+                          setDefaultExpr(undefined);
+                        }}
+                      >
+                        Unset
+                      </Menu.Item>
+                    </Menu>
+                  }
+                >
+                  <IconButton>
+                    <DotsVerticalIcon />
+                  </IconButton>
+                </IFrameAwareDropdownMenu>
               </div>
             ),
         }}

diff --git a/platform/wab/src/wab/client/components/sidebar-tabs/PropValueEditor.tsx b/platform/wab/src/wab/client/components/sidebar-tabs/PropValueEditor.tsx
@@ -966,6 +966,7 @@ const PropValueEditor_ = (
               )
             : (value as string) || ""
         }
+        valueSetState={valueSetState}
         hideTokenPicker={hackyCast(propType).disableTokens}
         sc={studioCtx}
         data-plasmic-prop={attr}

diff --git a/platform/wab/src/wab/client/components/style-controls/ColorButton.tsx b/platform/wab/src/wab/client/components/style-controls/ColorButton.tsx
@@ -4,13 +4,13 @@ import { ColorPicker } from "@/wab/client/components/widgets/ColorPicker";
 import { useClientTokenResolver } from "@/wab/client/components/widgets/ColorPicker/client-token-resolver";
 import PlasmicColorButton from "@/wab/client/plasmic/plasmic_kit_style_controls/PlasmicColorButton";
 import { StudioCtx } from "@/wab/client/studio-ctx/StudioCtx";
-import { zeroWidthSpace } from "@/wab/shared/common";
 import { isTokenRef, tryParseTokenRef } from "@/wab/commons/StyleToken";
 import { TOKEN_CAP } from "@/wab/shared/Labels";
 import { VariantedStylesHelper } from "@/wab/shared/VariantedStylesHelper";
+import { zeroWidthSpace } from "@/wab/shared/common";
+import { allColorTokens } from "@/wab/shared/core/sites";
 import { StyleToken } from "@/wab/shared/model/classes";
 import Chroma from "@/wab/shared/utils/color-utils";
-import { allColorTokens } from "@/wab/shared/core/sites";
 import { Tooltip } from "antd";
 import { observer } from "mobx-react";
 import * as React from "react";
@@ -77,6 +77,7 @@ function _ColorButton(props: ColorButtonProps) {
           root: {
             props: {
               // ref,
+              type: "button",
               "data-plasmic-prop": props["data-plasmic-prop"],
               onClick: (e) => {
                 if (isDisabled) {

diff --git a/platform/wab/src/wab/client/components/widgets/ColorPicker/ColorPicker.tsx b/platform/wab/src/wab/client/components/widgets/ColorPicker/ColorPicker.tsx
@@ -123,7 +123,10 @@ function ColorPicker_({
     return null;
   }
 
-  const realColor = ensure(maybeRealColor, "Unexpected empty real color");
+  const realColor =
+    color === ""
+      ? "#FFFFFF"
+      : ensure(maybeRealColor, "Unexpected empty real color");
   const colorPickerRef = useRef<HTMLDivElement>(null);
   const [pickr, setPickr] = useState<Pickr | null>(null);
   const [mode, setMode] = useState(ColorMode.hex);

diff --git a/platform/wab/src/wab/shared/code-components/code-components.ts b/platform/wab/src/wab/shared/code-components/code-components.ts
@@ -3913,10 +3913,7 @@ export function propTypeToWabType(
                 )
               );
             case "color":
-              // temporarily cast to any until type exists on host package
-              return success(
-                typeFactory.color({ noDeref: !!(type as any).keepCssVar })
-              );
+              return success(typeFactory.color({ noDeref: !!type.keepCssVar }));
             case "object":
             case "custom":
             case "dataSource":

diff --git a/platform/wab/src/wab/shared/model/model-util.ts b/platform/wab/src/wab/shared/model/model-util.ts
@@ -1,8 +1,19 @@
-import { assert, ensureInstance, objsEq, switchType } from "@/wab/shared/common";
 import { Values } from "@/wab/commons/types";
-import { getComponentDisplayName } from "@/wab/shared/core/components";
 import { StudioPropType } from "@/wab/shared/code-components/code-components";
 import { jsLiteral } from "@/wab/shared/codegen/util";
+import {
+  assert,
+  ensureInstance,
+  objsEq,
+  switchType,
+} from "@/wab/shared/common";
+import { getComponentDisplayName } from "@/wab/shared/core/components";
+import { StateVariableType } from "@/wab/shared/core/states";
+import {
+  isTplComponent,
+  isTplFromComponent,
+  isTplTextBlock,
+} from "@/wab/shared/core/tpls";
 import {
   AnyType,
   ArgType,
@@ -49,8 +60,6 @@ import {
 } from "@/wab/shared/model/classes";
 import { instUtil as defaultInstUtil } from "@/wab/shared/model/InstUtil";
 import { Type as ModelType } from "@/wab/shared/model/model-meta";
-import { StateVariableType } from "@/wab/shared/core/states";
-import { isTplComponent, isTplFromComponent, isTplTextBlock } from "@/wab/shared/core/tpls";
 import L, {
   isArray,
   isBoolean,
@@ -130,8 +139,8 @@ export const typeFactory = {
       includeTagStyles,
     }),
   defaultStyles: () => new DefaultStylesPropType({ name: "defaultStyles" }),
-  color: (opts: { noDeref: boolean }) =>
-    new ColorPropType({ name: "color", noDeref: opts.noDeref }),
+  color: (opts?: { noDeref: boolean }) =>
+    new ColorPropType({ name: "color", noDeref: opts ? !!opts.noDeref : true }),
 };
 
 export const genericTypes = [