Display transparent color values as transparent (#450)

Author: aidenybai

packages/react-grab/e2e/edit-panel-color.spec.ts

@@ -4,6 +4,7 @@ import {
   BUTTON_SELECTOR,
   EDIT_PANEL_ATTR,
   EDIT_PROPERTY_ATTR,
+  getActivePropertyValue,
   clearEditStorage,
   getActivePropertyKey,
   getInlineStyleProperty,
@@ -34,6 +35,15 @@ test.describe("Style Panel Color Controls", () => {
     expect(propertyKeys).toContain("color");
   });
 
+  test("transparent color values are labeled as transparent", async ({ reactGrab }) => {
+    const { page } = reactGrab;
+    await openEditPanel(reactGrab, PLAIN_TEXT_SELECTOR);
+    await setSearchInputValue(page, "background");
+    await expect.poll(() => getActivePropertyKey(page)).toBe("background-color");
+
+    await expect.poll(() => getActivePropertyValue(page)).toBe("transparent");
+  });
+
   test("typing bg-[#hex] applies the background color", async ({ reactGrab }) => {
     await openEditPanel(reactGrab, BUTTON_SELECTOR);
     await setSearchInputValue(reactGrab.page, "bg-[#ff0000]");

packages/react-grab/src/components/edit-panel/color-picker.tsx

@@ -1,5 +1,6 @@
 import { createSignal, onCleanup, onMount, Show, type Component } from "solid-js";
 import { IME_COMPOSING_KEY_CODE } from "../../constants.js";
+import { formatColorLabel } from "../../utils/format-color-label.js";
 import { parseAnyColor } from "../../utils/parse-any-color.js";
 import { EDIT_LABEL_CLASS } from "./constants.js";
 
@@ -19,11 +20,12 @@ interface ColorPickerProps {
   emphasized?: boolean;
 }
 
-const HEX_CLASS = "text-[12px] leading-4 font-medium tabular-nums uppercase";
+const HEX_CLASS = "text-[12px] leading-4 font-medium tabular-nums";
 
 export const ColorPicker: Component<ColorPickerProps> = (props) => {
   const [draftText, setDraftText] = createSignal<string | null>(null);
   const isEditing = () => draftText() !== null;
+  const displayValue = () => formatColorLabel(props.value);
   let nativePickerRef: HTMLInputElement | undefined;
 
   // isMounted gates the native picker's `onInput` against firing
@@ -97,14 +99,15 @@ export const ColorPicker: Component<ColorPickerProps> = (props) => {
           fallback={
             <span
               class={`${HEX_CLASS} text-[var(--rg-text-primary)] cursor-text`}
+              data-react-grab-value={displayValue()}
               onPointerDown={(event) => event.stopPropagation()}
               onClick={(event) => {
                 event.preventDefault();
                 event.stopPropagation();
-                setDraftText(props.value.replace(/^#/, "").toUpperCase());
+                setDraftText(displayValue());
               }}
             >
-              {props.value.toUpperCase()}
+              {displayValue()}
             </span>
           }
         >

packages/react-grab/src/constants.ts

@@ -192,6 +192,7 @@ export const TEXTAREA_MAX_HEIGHT_PX = 95;
 export const EDIT_PROPERTY_LIST_MAX_HEIGHT_PX = 280;
 export const EDIT_PROPERTY_MAX_COUNT = 40;
 export const EDIT_TRANSPARENT_COLOR_HEX = "#00000000";
+export const EDIT_TRANSPARENT_COLOR_LABEL = "transparent";
 export const EDIT_ROOT_FONT_SIZE_PX = 16;
 export const EDIT_PANEL_MIN_WIDTH_PX = 200;
 export const EDIT_PANEL_MAX_WIDTH_PX = 320;

packages/react-grab/src/utils/format-color-label.ts

@@ -0,0 +1,6 @@
+import { EDIT_TRANSPARENT_COLOR_HEX, EDIT_TRANSPARENT_COLOR_LABEL } from "../constants.js";
+
+export const formatColorLabel = (colorValue: string): string =>
+  colorValue.toLowerCase() === EDIT_TRANSPARENT_COLOR_HEX
+    ? EDIT_TRANSPARENT_COLOR_LABEL
+    : colorValue.toUpperCase();