feat: simplify array UI by removing the dropdown menu

packages/fast-form-generator-react/src/class-name-contracts/form-item.array.class-name-contract.ts

@@ -3,9 +3,11 @@
  */
 export default interface FormItemArrayClassNameContract {
     formItemArray: string;
-    formItemArray_actionMenu: string;
-    formItemArray_actionMenuItem__add: string;
-    formItemArray_actionMenuItem__remove: string;
-    formItemArray_header: string;
-    formItemArray_linkMenu: string;
+    formItemArray_control: string;
+    formItemArray_controlAddButton: string;
+    formItemArray_controlLabel: string;
+    formItemArray_existingItemList: string;
+    formItemArray_existingItemListItem: string;
+    formItemArray_existingItemListItemLink: string;
+    formItemArray_existingItemRemoveButton: string;
 }

packages/fast-form-generator-react/src/class-name-contracts/form-item.children.class-name-contract.ts

@@ -5,10 +5,15 @@ export default interface FormItemChildrenClassNameContract {
     formItemChildren: string;
     formItemChildren_control: string;
     formItemChildren_controlLabel: string;
-    formItemChildren_addedChildren: string;
+    formItemChildren_existingChildren: string;
+    formItemChildren_existingChildrenItem: string;
+    formItemChildren_existingChildrenItemLink: string;
+    formItemChildren_existingChildrenItemContent: string;
+    formItemChildren_existingChildrenItemName: string;
     formItemChildren_childrenList: string;
     formItemChildren_childrenListControl: string;
     formItemChildren_childrenListInput: string;
+    formItemChildren_childrenListItem: string;
     formItemChildren_childrenListTrigger: string;
     formItemChildren_delete: string;
     formItemChildren_deleteButton: string;

packages/fast-form-generator-react/src/form/form-item.array.spec.tsx

@@ -1,7 +1,8 @@
 import * as React from "react";
 import * as Adapter from "enzyme-adapter-react-16";
 import { configure, mount } from "enzyme";
-import Array, { FormItemArrayProps } from "./form-item.array";
+import Array, { FormItemArray, FormItemArrayProps } from "./form-item.array";
+import { FormItemArrayClassNameContract } from "../class-name-contracts";
 
 /*
  * Configure Enzyme
@@ -22,10 +23,169 @@ const arrayProps: FormItemArrayProps = {
     onUpdateActiveSection: jest.fn(),
 };
 
+const managedClasses: FormItemArrayClassNameContract = {
+    formItemArray: "formItemArray-class",
+    formItemArray_control: "formItemArray_control-class",
+    formItemArray_controlAddButton: "formItemArray_controlAddButton-class",
+    formItemArray_controlLabel: "formItemArray_controlLabel-class",
+    formItemArray_existingItemList: "formItemArray_existingItemList-class",
+    formItemArray_existingItemListItem: "formItemArray_existingItemListItem-class",
+    formItemArray_existingItemListItemLink:
+        "formItemArray_existingItemListItemLink-class",
+    formItemArray_existingItemRemoveButton:
+        "formItemArray_existingItemRemoveButton-class",
+};
+
+const schema: any = {
+    title: "Array of strings",
+    type: "array",
+    items: {
+        title: "String",
+        type: "string",
+    },
+    minItems: 2,
+    maxItems: 5,
+};
+
 describe("Array", () => {
     test("should not throw", () => {
         expect(() => {
             mount(<Array {...arrayProps} />);
         }).not.toThrow();
     });
+    test("should generate a button to add an array item if the maximum number of items has not been reached", () => {
+        const rendered: any = mount(
+            <FormItemArray
+                {...arrayProps}
+                schema={{ maxItems: 2 }}
+                data={["foo"]}
+                managedClasses={managedClasses}
+            />
+        );
+
+        expect(
+            rendered.find(`.${managedClasses.formItemArray_controlAddButton}`).length
+        ).toEqual(1);
+    });
+    test("should generate a button to add an array item if no maximum number of items has been specified", () => {
+        const rendered: any = mount(
+            <FormItemArray
+                {...arrayProps}
+                data={["foo"]}
+                managedClasses={managedClasses}
+            />
+        );
+
+        expect(
+            rendered.find(`.${managedClasses.formItemArray_controlAddButton}`).length
+        ).toEqual(1);
+    });
+    test("should not generate a button to add an array item if the maximum number of items has been reached", () => {
+        const rendered: any = mount(
+            <FormItemArray
+                {...arrayProps}
+                schema={{ maxItems: 2 }}
+                data={["foo", "bar"]}
+                managedClasses={managedClasses}
+            />
+        );
+
+        expect(
+            rendered.find(`.${managedClasses.formItemArray_controlAddButton}`).length
+        ).toEqual(0);
+    });
+    test("should add an item to the array if the add button has been clicked", () => {
+        const callback: any = jest.fn();
+        const rendered: any = mount(
+            <FormItemArray
+                {...arrayProps}
+                schema={schema}
+                data={["foo"]}
+                managedClasses={managedClasses}
+                onChange={callback}
+            />
+        );
+        const addButton: any = rendered.find(
+            `.${managedClasses.formItemArray_controlAddButton}`
+        );
+        addButton.simulate("click");
+
+        expect(callback).toHaveBeenCalledTimes(1);
+        expect(callback.mock.calls[0][0]).toEqual("");
+        expect(typeof callback.mock.calls[0][1]).toBe("string");
+        expect(callback.mock.calls[0][2]).toBe(true);
+        expect(callback.mock.calls[0][3]).toBe(undefined);
+    });
+    test("should show a remove button on an existing array item if the minimum number of items has not been reached", () => {
+        const callback: any = jest.fn();
+        const rendered: any = mount(
+            <FormItemArray
+                {...arrayProps}
+                schema={schema}
+                data={["foo", "bar", "bat"]}
+                managedClasses={managedClasses}
+                onChange={callback}
+            />
+        );
+
+        expect(
+            rendered.find(`.${managedClasses.formItemArray_existingItemRemoveButton}`)
+                .length
+        ).toBe(3);
+    });
+    test("should show a remove button on an existing array item if the minimum number of items has not been specified", () => {
+        const callback: any = jest.fn();
+        const rendered: any = mount(
+            <FormItemArray
+                {...arrayProps}
+                data={["foo", "bar"]}
+                managedClasses={managedClasses}
+                onChange={callback}
+            />
+        );
+
+        expect(
+            rendered.find(`.${managedClasses.formItemArray_existingItemRemoveButton}`)
+                .length
+        ).toBe(2);
+    });
+    test("should not show a remove button on existing array items if the minimum number of items has been reached", () => {
+        const callback: any = jest.fn();
+        const rendered: any = mount(
+            <FormItemArray
+                {...arrayProps}
+                schema={schema}
+                data={["foo", "bar"]}
+                managedClasses={managedClasses}
+                onChange={callback}
+            />
+        );
+
+        expect(
+            rendered.find(`.${managedClasses.formItemArray_existingItemRemoveButton}`)
+                .length
+        ).toBe(0);
+    });
+    test("should remove an array item if the remove button has been clicked", () => {
+        const callback: any = jest.fn();
+        const rendered: any = mount(
+            <FormItemArray
+                {...arrayProps}
+                schema={schema}
+                data={["foo", "bar", "bat"]}
+                managedClasses={managedClasses}
+                onChange={callback}
+            />
+        );
+        const removeButton: any = rendered
+            .find(`.${managedClasses.formItemArray_existingItemRemoveButton}`)
+            .at(1);
+        removeButton.simulate("click");
+
+        expect(callback).toHaveBeenCalledTimes(1);
+        expect(callback.mock.calls[0][0]).toEqual("");
+        expect(callback.mock.calls[0][1]).toBe(undefined);
+        expect(callback.mock.calls[0][2]).toBe(true);
+        expect(callback.mock.calls[0][3]).toBe(1);
+    });
 });

packages/fast-form-generator-react/src/form/form-item.array.style.ts

@@ -1,15 +1,13 @@
-import { ellipsis, toPx } from "@microsoft/fast-jss-utilities";
+import { ellipsis, focusVisible, toPx } from "@microsoft/fast-jss-utilities";
 import {
-    applyAriaHiddenStyles,
     applyCleanListStyle,
+    applyControl,
     applyGlobalStyle,
-    applyHeaderStyle,
-    applyListItemStyle,
-    applyPopupHeadingStyles,
-    applyPopupMenuStyles,
+    applyLabelStyle,
+    applyRemoveItemStyle,
     colors,
-    localizePadding,
-    minus,
+    insetStrongBoxShadow,
+    lines,
     plus,
 } from "../utilities/form-input.style";
 import { ComponentStyles, CSSRules } from "@microsoft/fast-jss-manager";
@@ -20,59 +18,80 @@ const styles: ComponentStyles<FormItemArrayClassNameContract, {}> = {
         ...applyGlobalStyle(),
     },
     formItemArray: {
-        ...applyPopupHeadingStyles(),
-        "& button": {
-            lineHeight: "1",
-            fontSize: toPx(14),
-            cursor: "pointer",
-            background: "transparent",
-            border: "none",
-            padding: `${toPx(4)}`,
-            "&:focus": {
-                outline: "none",
-            },
-        },
+        position: "relative",
+        display: "flex",
+        flexDirection: "column",
     },
-    formItemArray_actionMenu: {
-        ...applyCleanListStyle(),
-        ...applyAriaHiddenStyles(),
-        ...applyPopupMenuStyles(),
-        "& $formItemArray_actionMenuItem__add, & $formItemArray_actionMenuItem__remove": {
-            ...localizePadding(12, 12, 12, 36),
-            width: "100%",
-            ...ellipsis(),
-            textAlign: "left",
-            color: colors.black,
-            "&::before": {
-                position: "absolute",
-                content: "''",
-                opacity: ".6",
-                pointerEvents: "none",
-                width: toPx(16),
-                height: toPx(16),
-                left: toPx(10),
-            },
-            "&:hover": {
-                backgroundColor: colors.grayBackground,
-            },
-        },
+    formItemArray_control: {
+        width: "100%",
+        verticalAlign: "middle",
+        marginTop: toPx(12),
     },
-    formItemArray_actionMenuItem__add: {
+    formItemArray_controlAddButton: {
+        position: "absolute",
+        right: "0",
+        top: "12px",
+        appearance: "none",
+        background: "none",
+        border: "none",
+        margin: "8px",
+        width: "20px",
+        height: "16px",
+        zIndex: "1",
+        borderRadius: "2px",
+        [`&${focusVisible()}`]: {
+            ...insetStrongBoxShadow(colors.pink),
+            outline: "none",
+        },
         "&::before": {
+            position: "absolute",
+            content: "''",
+            opacity: ".6",
+            pointerEvents: "none",
+            width: toPx(16),
+            height: toPx(16),
+            left: toPx(2),
+            top: "0",
             background: plus,
         },
     },
-    formItemArray_actionMenuItem__remove: {
+    formItemArray_controlLabel: {
+        ...applyLabelStyle(),
+        ...applyControl(),
+        verticalAlign: "middle",
+        lineHeight: "32px",
+    },
+    formItemArray_existingItemList: {
+        ...applyCleanListStyle(),
+    },
+    formItemArray_existingItemListItem: {
+        position: "relative",
+        height: "36px",
+        lineHeight: "36px",
+        paddingLeft: "26px",
         "&::before": {
-            background: minus,
+            position: "absolute",
+            content: "''",
+            opacity: ".6",
+            pointerEvents: "none",
+            top: toPx(11),
+            width: toPx(16),
+            height: toPx(16),
+            background: lines,
+            left: "0",
         },
     },
-    formItemArray_header: {
-        ...applyHeaderStyle(),
+    formItemArray_existingItemListItemLink: {
+        ...ellipsis(),
+        cursor: "pointer",
+        display: "block",
+        height: "36px",
+        lineHeight: "36px",
+        width: "calc(100% - 36px)",
     },
-    formItemArray_linkMenu: {
-        ...applyCleanListStyle(),
-        ...applyListItemStyle(),
+    formItemArray_existingItemRemoveButton: {
+        ...applyRemoveItemStyle(),
+        cursor: "pointer",
     },
 };