feat: Merge arbitrary CSS selectors with Element States

Issue: https://linear.app/plasmic/issue/PLA-10742 Change-Id: I20e6ebbe21391d7923b2eeb240f3474c5b1c3a37 GitOrigin-RevId: 3aa7ddb927d599400e9541f4dfbd624e29919604
plasmicapp · Oct 16, 2024 · fa795a2 · fa795a2
1 parent ecd76d0
commit fa795a2
Show file tree

Hide file tree

Showing 26 changed files with 555 additions and 688 deletions.
diff --git a/platform/wab/cypress/e2e/component-ops.spec.ts b/platform/wab/cypress/e2e/component-ops.spec.ts
@@ -119,9 +119,9 @@ describe("component-ops - tricky operations", function () {
                 '[data-event="component-arena-add-interaction-variant"]'
               ).click();
             }).then((hoverFramed) => {
-              cy.get('input[placeholder="Enter CSS selectors"]').type(
-                "Hover{enter}"
-              );
+              cy.get(
+                'input[placeholder="e.g. :hover, :focus, :nth-child(odd)"]'
+              ).type("Hover{enter}");
               cy.contains("Done").click({ force: true });
               cy.focusFrameRoot(hoverFramed);
               cy.selectTreeNode(["vertical stack", "text2"]);

diff --git a/platform/wab/cypress/support/util.ts b/platform/wab/cypress/support/util.ts
@@ -1147,7 +1147,7 @@ function toggleElementStates() {
     .click()
     .wait(200)
     .get(".ant-dropdown-menu")
-    .contains("Element States")
+    .contains("Element states")
     .click()
     .wait(200);
 }

diff --git a/platform/wab/src/wab/client/components/VariantControls.tsx b/platform/wab/src/wab/client/components/VariantControls.tsx
@@ -1,6 +1,9 @@
 import {
+  Selector,
   SelectorsInput,
+  selectorsToVariantSelectors,
   SelectorTags,
+  styleVariantToSelectors,
 } from "@/wab/client/components/sidebar/RuleSetControls";
 import S from "@/wab/client/components/VariantControls.module.scss";
 import Button from "@/wab/client/components/widgets/Button";
@@ -9,19 +12,19 @@ import {
   EditableLabelHandles,
 } from "@/wab/client/components/widgets/EditableLabel";
 import { StudioCtx, useStudioCtx } from "@/wab/client/studio-ctx/StudioCtx";
-import { assert, spawn } from "@/wab/shared/common";
 import { InlineEdit } from "@/wab/commons/components/InlineEdit";
+import { spawn } from "@/wab/shared/common";
+import { isTplCodeComponent, isTplTag } from "@/wab/shared/core/tpls";
 import { VARIANT_CAP, VARIANT_LOWER } from "@/wab/shared/Labels";
 import { Component, isKnownTplTag, Variant } from "@/wab/shared/model/classes";
 import {
-  getStyleVariantSelectorsDisplayNames,
   isBaseVariant,
   isGlobalVariant,
   isPrivateStyleVariant,
   isStyleVariant,
   makeVariantName,
+  StyleVariant,
 } from "@/wab/shared/Variants";
-import { isTplCodeComponent, isTplTag } from "@/wab/shared/core/tpls";
 import { Menu } from "antd";
 import { default as classNames, default as cn } from "classnames";
 import { sumBy } from "lodash";
@@ -148,18 +151,18 @@ export const StyleVariantEditor = observer(function StyleVariantEditor_({
   onDismiss,
   variant,
 }: {
-  variant: Variant;
+  variant: StyleVariant;
   component: Component;
-  onDismiss?: (selectors: string[]) => void;
+  onDismiss?: () => void;
 }) {
-  const [chosenSelectors, setChosenSelectors] = useState<string[]>([]);
+  const [chosenSelectors, setChosenSelectors] = useState<Selector[]>([]);
   const studioCtx = useStudioCtx();
 
   const maybeSubmit = async (opts?: { force?: boolean }) => {
     if (chosenSelectors.length || opts?.force) {
       return studioCtx.changeUnsafe(() => {
-        variant.selectors = chosenSelectors;
-        onDismiss?.(chosenSelectors);
+        variant.selectors = selectorsToVariantSelectors(chosenSelectors);
+        onDismiss?.();
 
         if (isStyleVariant(variant) && variant.selectors?.length === 0) {
           spawn(studioCtx.siteOps().removeVariant(component, variant));
@@ -179,7 +182,7 @@ export const StyleVariantEditor = observer(function StyleVariantEditor_({
   );
 
   useEffect(() => {
-    setChosenSelectors(variant.selectors || []);
+    setChosenSelectors(styleVariantToSelectors(variant, studioCtx.site));
   }, [variant.selectors?.join(",")]);
 
   const tplRoot = component.tplTree;
@@ -224,21 +227,17 @@ export const StyleVariantLabel = observer(forwardRef(StyleVariantLabel_));
 function StyleVariantLabel_(
   props: {
     defaultEditing?: boolean;
-    overrideSelectors?: any[];
-    variant: Variant;
+    variant: StyleVariant;
     forTag: string;
-    onSelectorsChange: (selectors: string[]) => void;
+    onSelectorsChange: (selectors: Selector[]) => void;
     onBlur?: () => void;
     forRoot?: boolean;
   },
   ref: React.Ref<EditableLabelHandles>
 ) {
   const studioCtx = useStudioCtx();
   const { defaultEditing, variant, forTag, onSelectorsChange, forRoot } = props;
-  assert(isStyleVariant(variant), "Expected a style variant");
-  const selectors =
-    props.overrideSelectors ??
-    getStyleVariantSelectorsDisplayNames(variant, studioCtx.site);
+  const selectors = styleVariantToSelectors(variant, studioCtx.site);
 
   const isPrivate = isPrivateStyleVariant(variant);
   return (
@@ -264,9 +263,7 @@ function StyleVariantLabel_(
                 props.onBlur && props.onBlur();
                 onDone();
               }}
-              onChange={(sels) => {
-                onSelectorsChange(sels);
-              }}
+              onChange={onSelectorsChange}
               forPrivateStyleVariant={isPrivate}
               forTag={forTag}
               className="textbox--listitem focused-input-bg"

diff --git a/platform/wab/src/wab/client/components/canvas/CanvasFrame/CanvasHeader.tsx b/platform/wab/src/wab/client/components/canvas/CanvasFrame/CanvasHeader.tsx
@@ -1,8 +1,8 @@
 import { maybeShowContextMenu } from "@/wab/client/components/ContextMenu";
 import {
+  makeCanvasVariantContextMenu,
   StyleVariantEditor,
   VariantLabel,
-  makeCanvasVariantContextMenu,
 } from "@/wab/client/components/VariantControls";
 import { CanvasConfigButton } from "@/wab/client/components/canvas/CanvasFrame/CanvasConfigButton";
 import styles from "@/wab/client/components/canvas/CanvasFrame/CanvasHeader.module.scss";
@@ -15,16 +15,23 @@ import {
 import ComponentIcon from "@/wab/client/plasmic/plasmic_kit/PlasmicIcon__Component";
 import PageIcon from "@/wab/client/plasmic/plasmic_kit_design_system/icons/PlasmicIcon__Page";
 import { StudioCtx, useStudioCtx } from "@/wab/client/studio-ctx/StudioCtx";
-import { cx } from "@/wab/shared/common";
 import { MaybeWrap } from "@/wab/commons/components/ReactUtil";
-import { isFrameComponent, isPageComponent } from "@/wab/shared/core/components";
 import {
   AnyArena,
   isComponentArena,
   isMixedArena,
   isPageArena,
 } from "@/wab/shared/Arenas";
-import { getDisplayVariants, isStyleVariant } from "@/wab/shared/Variants";
+import {
+  getDisplayVariants,
+  isStyleVariant,
+  StyleVariant,
+} from "@/wab/shared/Variants";
+import { cx } from "@/wab/shared/common";
+import {
+  isFrameComponent,
+  isPageComponent,
+} from "@/wab/shared/core/components";
 import {
   ArenaFrame,
   Component,
@@ -228,7 +235,7 @@ export const VariantName = observer(function VariantName_({
             visible={showStyleVariantEditor}
             content={() => (
               <StyleVariantEditor
-                variant={variant}
+                variant={variant as StyleVariant}
                 component={component}
                 onDismiss={() => setShowStyleVariantEditor(false)}
               />

diff --git a/platform/wab/src/wab/client/components/canvas/VariantsBar/VariantBadge.tsx b/platform/wab/src/wab/client/components/canvas/VariantsBar/VariantBadge.tsx
@@ -1,8 +1,8 @@
 import { maybeShowContextMenu } from "@/wab/client/components/ContextMenu";
 import {
+  makeCanvasVariantContextMenu,
   StyleVariantEditor,
   VariantLabel,
-  makeCanvasVariantContextMenu,
 } from "@/wab/client/components/VariantControls";
 import styles from "@/wab/client/components/canvas/VariantsBar/VariantBadge.module.scss";
 import { EditableLabelHandles } from "@/wab/client/components/widgets/EditableLabel";
@@ -12,7 +12,7 @@ import {
 } from "@/wab/client/plasmic/plasmic_kit_variants_bar/PlasmicVariantBadge";
 import { useStudioCtx } from "@/wab/client/studio-ctx/StudioCtx";
 import { MaybeWrap } from "@/wab/commons/components/ReactUtil";
-import { isStyleVariant } from "@/wab/shared/Variants";
+import { isStyleVariant, StyleVariant } from "@/wab/shared/Variants";
 import { Component, Variant } from "@/wab/shared/model/classes";
 import { Popover } from "antd";
 import { observer } from "mobx-react";
@@ -94,7 +94,7 @@ const VariantBadge = observer(function VariantBadge_({
             visible={showStyleVariantEditor}
             content={() => (
               <StyleVariantEditor
-                variant={variant}
+                variant={variant as StyleVariant}
                 component={component}
                 onDismiss={() => setShowStyleVariantEditor(false)}
               />

diff --git a/platform/wab/src/wab/client/components/canvas/VariantsBar/VariantsDrawer.tsx b/platform/wab/src/wab/client/components/canvas/VariantsBar/VariantsDrawer.tsx
@@ -276,6 +276,7 @@ function VariantsDrawer_({
           ) : (
             variants?.map((variant) => (
               <VariantRow
+                key={variant.uuid}
                 ref={getVariantRowRef(variant)}
                 isRecording={targetedVariantsSet.has(variant)}
                 highlight={flattenedVariants[highlightIndex] === variant}