Update export style dropdown, form field, input

jpmorganchase · May 17, 2024 · c79bad7 · c79bad7
1 parent f1386fa
commit c79bad7
Show file tree

Hide file tree

Showing 6 changed files with 160 additions and 46 deletions.
diff --git a/packages/export-styles/ui-src/__tests__/ExportCssView.spec.tsx b/packages/export-styles/ui-src/__tests__/ExportCssView.spec.tsx
@@ -28,6 +28,30 @@ describe("ExportCssView", () => {
       "*"
     );
   });
+  test("update format and prefix, sends updated export message to figma when clicking export", async () => {
+    await userEvents.click(screen.getByRole("combobox", { name: "Format" }));
+    await userEvents.click(screen.getByRole("option", { name: "HEX" }));
+
+    await userEvents.type(
+      screen.getByRole("textbox", { name: "Prefix" }),
+      "some-prefix"
+    );
+
+    await userEvents.click(screen.getByRole("button", { name: "Export" }));
+    expect(window.parent.postMessage).toHaveBeenCalledTimes(1);
+    expect(window.parent.postMessage).toHaveBeenCalledWith(
+      expect.objectContaining({
+        pluginMessage: {
+          format: "HEX",
+          ignoreDefaultEnding: false,
+          ignoreFirstGroup: false,
+          prefix: "some-prefix",
+          type: "export-css",
+        },
+      }),
+      "*"
+    );
+  });
   test("set value in textarea from message sent from Figma", async () => {
     const expectedText = "text to be filled in";
     fireEvent(

diff --git a/packages/export-styles/ui-src/__tests__/ExportJsonView.spec.tsx b/packages/export-styles/ui-src/__tests__/ExportJsonView.spec.tsx
@@ -0,0 +1,44 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import userEvents from "@testing-library/user-event";
+import React from "react";
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import { ExportJsonView } from "../views/ExportJsonView";
+
+describe("ExportJsonView", () => {
+  beforeEach(() => {
+    window.parent.postMessage = vi.fn<any>();
+    render(<ExportJsonView />);
+  });
+  test("renders export button", () => {
+    expect(screen.getByText("Export")).toBeInTheDocument();
+  });
+  test("sends export message to figma when clicking export", async () => {
+    await userEvents.click(screen.getByRole("button", { name: "Export" }));
+    expect(window.parent.postMessage).toHaveBeenCalledTimes(1);
+    expect(window.parent.postMessage).toHaveBeenCalledWith(
+      expect.objectContaining({
+        pluginMessage: {
+          format: "RGB",
+          type: "export-json",
+        },
+      }),
+      "*"
+    );
+  });
+  test("update format and sends updated export message to figma when clicking export", async () => {
+    await userEvents.click(screen.getByRole("combobox", { name: "Format" }));
+    await userEvents.click(screen.getByRole("option", { name: "HEX" }));
+
+    await userEvents.click(screen.getByRole("button", { name: "Export" }));
+    expect(window.parent.postMessage).toHaveBeenCalledTimes(1);
+    expect(window.parent.postMessage).toHaveBeenCalledWith(
+      expect.objectContaining({
+        pluginMessage: {
+          format: "HEX",
+          type: "export-json",
+        },
+      }),
+      "*"
+    );
+  });
+});
diff --git a/packages/export-styles/ui-src/__tests__/VariableJsonView.spec.tsx b/packages/export-styles/ui-src/__tests__/VariableJsonView.spec.tsx
@@ -2,8 +2,8 @@ import { fireEvent, render, screen, within } from "@testing-library/react";
 import userEvents from "@testing-library/user-event";
 import React from "react";
 import { beforeEach, describe, expect, test, vi } from "vitest";
-import { VariableJsonView } from "../views/VariableJsonView";
 import * as utilExports from "../components/utils";
+import { VariableJsonView } from "../views/VariableJsonView";
 
 // Mock out download, `URL.createObjectURL` not supported in test env
 vi.spyOn(utilExports, "downloadBlob").mockImplementation(() => {});
@@ -32,11 +32,13 @@ describe("VariableJsonView", () => {
       })
     );
 
-    await userEvents.click(screen.getByRole("listbox", { name: "Collection" }));
     await userEvents.click(
-      screen.getByRole("option", { name: "Collection 1" })
+      screen.getByRole("combobox", { name: "Collection" })
+    );
+    const dropdownList = await screen.findByRole("listbox");
+    await userEvents.click(
+      within(dropdownList).getByRole("option", { name: "Collection 1" })
     );
-
     expect(screen.getByRole("button", { name: "Export" })).toBeDisabled();
 
     expect(window.parent.postMessage).toHaveBeenCalledWith(
@@ -64,7 +66,7 @@ describe("VariableJsonView", () => {
       })
     );
 
-    await userEvents.click(screen.getByRole("listbox", { name: "Mode" }));
+    await userEvents.click(screen.getByRole("combobox", { name: "Mode" }));
     await userEvents.click(screen.getByRole("option", { name: "Light" }));
     expect(screen.getByRole("button", { name: "Export" })).not.toBeDisabled();
     await userEvents.click(screen.getByRole("button", { name: "Export" }));
@@ -115,7 +117,9 @@ describe("VariableJsonView", () => {
       })
     );
 
-    await userEvents.click(screen.getByRole("listbox", { name: "Collection" }));
+    await userEvents.click(
+      screen.getByRole("combobox", { name: "Collection" })
+    );
     await userEvents.click(
       screen.getByRole("option", { name: "Collection 1" })
     );
@@ -147,22 +151,22 @@ describe("VariableJsonView", () => {
       })
     );
 
-    await userEvents.click(screen.getByRole("listbox", { name: "Mode" }));
+    await userEvents.click(screen.getByRole("combobox", { name: "Mode" }));
     await userEvents.click(screen.getByRole("option", { name: "Light" }));
-    expect(
-      within(screen.getByRole("listbox", { name: "Mode" })).getByRole("option")
-        .innerHTML
-    ).toEqual("Light");
+    expect(screen.getByRole("combobox", { name: "Mode" })).toHaveTextContent(
+      "Light"
+    );
     expect(screen.getByRole("button", { name: "Export" })).not.toBeDisabled();
 
-    await userEvents.click(screen.getByRole("listbox", { name: "Collection" }));
+    await userEvents.click(
+      screen.getByRole("combobox", { name: "Collection" })
+    );
     await userEvents.click(
       screen.getByRole("option", { name: "Collection 2" })
     );
-    expect(
-      within(screen.getByRole("listbox", { name: "Mode" })).getByRole("option")
-        .innerHTML
-    ).toEqual("");
+    expect(screen.getByRole("combobox", { name: "Mode" })).toHaveTextContent(
+      ""
+    );
     expect(screen.getByRole("button", { name: "Export" })).toBeDisabled();
   });
   test("download JSON button is disabled until export text is available", async () => {

diff --git a/packages/export-styles/ui-src/views/ExportCssView.tsx b/packages/export-styles/ui-src/views/ExportCssView.tsx
@@ -4,8 +4,12 @@ import {
   FlexLayout,
   StackLayout,
   Checkbox,
+  FormField,
+  FormFieldLabel,
+  Dropdown,
+  Option,
+  Input,
 } from "@salt-ds/core";
-import { Dropdown, FormField, Input } from "@salt-ds/lab";
 import React, { useEffect, useRef, useState } from "react";
 import {
   ExportColorAllFormats,
@@ -68,23 +72,31 @@ export const ExportCssView = () => {
 
   return (
     <StackLayout gap={1} className="viewRoot">
-      <FormField label="Prefix" labelPlacement="left">
+      <FormField labelPlacement="left">
+        <FormFieldLabel>Prefix</FormFieldLabel>
         <Input
           value={prefix}
-          onChange={(e) => setPrefix(e.currentTarget.value)}
-          inputProps={{ placeholder: "e.g. brand-" }}
+          inputProps={{
+            placeholder: "e.g. brand-",
+            onChange: (e) => setPrefix(e.target.value),
+          }}
         ></Input>
       </FormField>
-      <FormField label="Format" labelPlacement="left">
+      <FormField labelPlacement="left">
+        <FormFieldLabel>Format</FormFieldLabel>
         <Dropdown
-          source={ExportColorAllFormats}
-          selected={format}
-          onSelectionChange={(_, item) => {
+          selected={[format]}
+          onSelectionChange={(_, items) => {
+            const item = items[0];
             if (item) {
               setFormat(item);
             }
           }}
-        />
+        >
+          {ExportColorAllFormats.map((f) => (
+            <Option key={f} value={f} />
+          ))}
+        </Dropdown>
       </FormField>
       <FlexItem>
         <FlexLayout>

diff --git a/packages/export-styles/ui-src/views/ExportJsonView.tsx b/packages/export-styles/ui-src/views/ExportJsonView.tsx
@@ -1,5 +1,11 @@
-import { Button, StackLayout } from "@salt-ds/core";
-import { Dropdown, FormField } from "@salt-ds/lab";
+import {
+  Button,
+  StackLayout,
+  FormField,
+  FormFieldLabel,
+  Dropdown,
+  Option,
+} from "@salt-ds/core";
 import React, { useEffect, useRef, useState } from "react";
 import {
   ExportColorAllFormats,
@@ -56,16 +62,21 @@ export const ExportJsonView = () => {
 
   return (
     <StackLayout gap={1} className="viewRoot">
-      <FormField label="Format" labelPlacement="left">
+      <FormField labelPlacement="left">
+        <FormFieldLabel>Format</FormFieldLabel>
         <Dropdown
-          source={ExportColorAllFormats}
-          selected={format}
-          onSelectionChange={(_, item) => {
+          selected={[format]}
+          onSelectionChange={(_, items) => {
+            const item = items[0];
             if (item) {
               setFormat(item);
             }
           }}
-        />
+        >
+          {ExportColorAllFormats.map((f) => (
+            <Option key={f} value={f} />
+          ))}
+        </Dropdown>
       </FormField>
       <Button onClick={onExport}>Export</Button>
       <textarea

diff --git a/packages/export-styles/ui-src/views/VariableJsonView.tsx b/packages/export-styles/ui-src/views/VariableJsonView.tsx
@@ -1,6 +1,15 @@
-import { Button, FlexLayout, StackLayout, Text, Tooltip } from "@salt-ds/core";
+import {
+  Button,
+  FlexLayout,
+  StackLayout,
+  Text,
+  Tooltip,
+  Dropdown,
+  FormField,
+  FormFieldLabel,
+  Option,
+} from "@salt-ds/core";
 import { DownloadIcon } from "@salt-ds/icons";
-import { Dropdown, FormField } from "@salt-ds/lab";
 import React, { useEffect, useId, useRef, useState } from "react";
 import {
   FigmaVariableCollection,
@@ -95,12 +104,13 @@ export const VariableJsonView = () => {
 
   return (
     <StackLayout gap={1} className="viewRoot">
-      <FormField label="Collection">
+      <FormField>
+        <FormFieldLabel>Collection</FormFieldLabel>
         <Dropdown
-          source={collections}
-          selected={selectedCollection}
-          itemToString={(item) => item?.name}
-          onSelectionChange={(_, item) => {
+          selected={[selectedCollection]}
+          valueToString={(item) => item?.name || ""}
+          onSelectionChange={(_, items) => {
+            const item = items[0];
             setSelectedCollection(item);
             if (item) {
               setSelectedMode(null);
@@ -115,17 +125,26 @@ export const VariableJsonView = () => {
               );
             }
           }}
-        />
+        >
+          {collections.map((col) => (
+            <Option key={col.id} value={col} />
+          ))}
+        </Dropdown>
       </FormField>
-      <FormField label="Mode">
+      <FormField>
+        <FormFieldLabel>Mode</FormFieldLabel>
         <Dropdown
-          source={modes}
-          selected={selectedMode}
-          itemToString={(item) => item?.name}
-          onSelectionChange={(_, item) => {
+          selected={[selectedMode]}
+          onSelectionChange={(_, items) => {
+            const item = items[0];
             setSelectedMode(item);
           }}
-        />
+          valueToString={(item) => item?.name || ""}
+        >
+          {modes.map((m) => (
+            <Option key={m.modeId} value={m} />
+          ))}
+        </Dropdown>
       </FormField>
       <Button
         disabled={selectedCollection === null || selectedMode === null}