Merge pull request #188 from element-hq/quenting/refactor-edit-in-place

Refactor EditInPlace

src/components/Form/Controls/EditInPlace/EditInPlace.module.css

@@ -14,137 +14,18 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.container {
-  min-block-size: 124px;
-}
-
-.label {
-  font-size: 15px;
-  font-weight: 500;
-  margin-block-end: 4px;
-}
-
 .controls {
   display: flex;
   gap: 15px;
-}
-
-.button-group {
-  display: none;
-  position: relative;
-  inset-block-start: 5px;
-  grid-template-columns: 1fr 1fr;
-  gap: 7px;
-}
-
-.button {
-  display: flex;
-  inline-size: 36px;
-  block-size: 36px;
-  border: 1px solid var(--cpd-color-border-interactive-secondary);
-  border-radius: 20px;
-  background-color: transparent;
-  text-align: center;
-  cursor: pointer;
-}
-
-.primary-button {
-  background-color: var(--cpd-color-bg-action-primary-rest);
-  border-color: var(--cpd-color-bg-action-primary-rest);
 
-  svg {
-    color: var(--cpd-color-icon-on-solid-primary);
+  & > input {
+    min-inline-size: 0;
   }
 }
 
-.primary-button-disabled {
-  background-color: var(--cpd-color-bg-subtle-primary);
-  border-color: var(--cpd-color-bg-subtle-primary);
-
-  svg {
-    color: var(--cpd-color-icon-disabled);
-  }
-}
-
-.button svg {
-  inline-size: 24px;
-  block-size: 24px;
-  margin: auto;
-}
-
-.control {
-  inline-size: 100%;
-}
-
-.container-show-buttons .button-group,
-.container:focus-within .button-group {
-  display: inline-grid;
-}
-
-.container-error .control {
-  border-color: var(--cpd-color-border-critical-primary);
-}
-
-.container-error .label {
-  color: var(--cpd-color-text-critical-primary);
-}
-
-.caption-line {
-  margin-block-start: var(--cpd-space-2x);
+.button-group {
   display: flex;
+  inset-block-start: var(--cpd-space-1x);
   align-items: center;
   gap: var(--cpd-space-2x);
 }
-
-.caption-icon {
-  display: inline-block;
-  inline-size: 20px;
-  block-size: 20px;
-}
-
-.caption-icon-error {
-  color: var(--cpd-color-icon-critical-primary);
-}
-
-.caption-icon-saved {
-  background-color: var(--cpd-color-icon-success-primary);
-
-  /*
-   * We are trying to match the size of the error icon which
-   * is displayed 20px big but has 2px of border in an SVG
-   * with a viewBox of 24x24...
-   */
-  inline-size: calc(20px * (20 / 24));
-  block-size: calc(20px * (20 / 24));
-  margin: calc(2px * (20 / 24));
-  border-radius: 20px;
-  text-align: center;
-
-  svg {
-    color: var(--cpd-color-icon-on-solid-primary);
-    position: relative;
-    inset-block-start: -1px;
-  }
-}
-
-.caption-text {
-  font-size: var(--cpd-font-body-sm-medium);
-  font-weight: var(--cpd-font-weight-medium);
-}
-
-.caption-text-error {
-  color: var(--cpd-color-text-critical-primary);
-}
-
-.caption-text-saved {
-  color: var(--cpd-color-text-success-primary);
-}
-
-.caption-text-saving {
-  color: var(--cpd-color-text-secondary);
-}
-
-.caption-text-help {
-  font: var(--cpd-font-body-sm-regular);
-  color: var(--cpd-color-text-secondary);
-}

src/components/Form/Controls/EditInPlace/EditInPlace.stories.tsx

@@ -18,6 +18,7 @@ import React from "react";
 
 import { EditInPlace } from "./";
 import { Meta, StoryObj } from "@storybook/react";
+import { expect, userEvent, within } from "@storybook/test";
 
 type Props = { invalid?: boolean } & React.ComponentProps<typeof EditInPlace>;
 
@@ -31,13 +32,11 @@ export default {
         "onChange",
         "onSave",
         "onCancel",
-        "value",
-        "initialValue",
+        "defaultValue",
         "error",
         "savedLabel",
         "saveButtonLabel",
         "cancelButtonLabel",
-        "disableSaveButton",
         "disabled",
       ],
     },
@@ -50,18 +49,12 @@ export default {
     label: {
       type: "string",
     },
-    value: {
+    defaultValue: {
       type: "string",
     },
-    disableSaveButton: {
-      type: "boolean",
-    },
     onChange: {
       action: "changed",
     },
-    onSave: {
-      action: "saved",
-    },
     onCancel: {
       action: "cancelled",
     },
@@ -87,10 +80,11 @@ export default {
   render: ({ ...restArgs }) => <EditInPlace {...restArgs} />,
   args: {
     label: "Label",
-    value: "",
+    onSave: () => new Promise((resolve) => setTimeout(resolve, 1000)),
+    savedLabel: "Saved",
     saveButtonLabel: "Save",
     cancelButtonLabel: "Cancel",
-    savingLabel: "Saving...",
+    savingLabel: "Saving…",
   },
 } satisfies Meta<Props>;
 
@@ -100,14 +94,29 @@ export const Empty: Story = {};
 
 export const WithText: Story = {
   args: {
-    value: "Hello, Computer",
+    defaultValue: "Hello, Computer",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByRole("textbox");
+    await userEvent.clear(input);
+    await userEvent.type(input, "Hello, Computer");
   },
 };
 
-export const SaveDisabled: Story = {
+export const Saving: Story = {
   args: {
-    value: "Hello, World",
-    disableSaveButton: true,
+    defaultValue: "Hello",
+    onSave: () => new Promise(() => {}),
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const input = canvas.getByRole("textbox");
+    await userEvent.clear(input);
+    await userEvent.type(input, "Hello");
+    const save = canvas.getByRole("button", { name: "Save" });
+    await userEvent.click(save);
+    await expect(canvas.getByText("Saving…")).toBeInTheDocument();
   },
 };