Fix alignment on additional properties (#251)

# Pull Request ## 📖 Description Some fixes for the dictionary control (`additionalProperties` keyword): - Styling alignment fixes - Allow `true` to generate an un-typed control - Add tests for the dictionary control ### 🎫 Issues Closes #134 ## 👩‍💻 Reviewer Notes Currently I do not have access to a recent macos version so the snapshots check will fail. This will be updated in future. ## ✅ Checklist ### General  - [x] I have added tests for my changes. - [x] I have tested my changes. - [ ] I have updated the project documentation to reflect my changes.
janechu · Mar 21, 2024 · 6e28830 · 6e28830
1 parent c13624f
commit 6e28830
Show file tree

Hide file tree

Showing 17 changed files with 197 additions and 25 deletions.
diff --git a/change/design-to-code-3c4419df-feac-4786-a2c8-4a78107af448.json b/change/design-to-code-3c4419df-feac-4786-a2c8-4a78107af448.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Styling alignment fixes for the form additionalProperties keyword",
+  "packageName": "design-to-code",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/change/design-to-code-react-c4fed146-d4f5-4af9-92f1-9e8e4f3b3e6b.json b/change/design-to-code-react-c4fed146-d4f5-4af9-92f1-9e8e4f3b3e6b.json
@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Styling alignment fixes for the form additionalProperties keyword",
+  "packageName": "design-to-code-react",
+  "email": "7559015+janechu@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/design-to-code-react/app/pages/form/index.ts b/packages/design-to-code-react/app/pages/form/index.ts
@@ -65,6 +65,9 @@ import {
     disabledSchema,
     generalSchema,
     invalidDataSchema,
+    keywordAdditionalPropertiesAsFalseSchema,
+    keywordAdditionalPropertiesAsObjectSchema,
+    keywordAdditionalPropertiesAsTrueSchema,
     mergedOneOfSchema,
     nestedOneOfSchema,
     nullSchema as nullKeywordSchema,
@@ -402,6 +405,18 @@ export const controlEmailDefault: ExampleComponent = {
     schema: controlFormatEmailDefaultSchema,
     data: undefined,
 };
+// Additional Properties As Object
+export const keywordAdditionalPropertiesAsObject: ExampleComponent = {
+    schema: keywordAdditionalPropertiesAsObjectSchema,
+};
+// Additional Properties As True
+export const keywordAdditionalPropertiesAsTrue: ExampleComponent = {
+    schema: keywordAdditionalPropertiesAsTrueSchema,
+};
+// Additional Properties As False
+export const keywordAdditionalPropertiesAsFalse: ExampleComponent = {
+    schema: keywordAdditionalPropertiesAsFalseSchema,
+};
 
 /**
  * Common use case schemas

diff --git a/packages/design-to-code-react/src/__tests__/schemas/index.ts b/packages/design-to-code-react/src/__tests__/schemas/index.ts
@@ -85,6 +85,13 @@ import controlFormatTimeSchema from "./control.format.time.schema";
 import controlFormatTimeDisabledSchema from "./control.format.time.disabled.schema";
 import controlFormatTimeDefaultSchema from "./control.format.time.default.schema";
 
+/**
+ * Keyword Schemas
+ */
+import keywordAdditionalPropertiesAsFalseSchema from "./keyword.additional-properties.as-false.schema";
+import keywordAdditionalPropertiesAsTrueSchema from "./keyword.additional-properties.as-true.schema";
+import keywordAdditionalPropertiesAsObjectSchema from "./keyword.additional-properties.as-object.schema";
+
 /**
  * Invalid schema
  */
@@ -150,6 +157,9 @@ export {
     controlUntypedSchema,
     controlUntypedDefaultSchema,
     controlUntypedDisabledSchema,
+    keywordAdditionalPropertiesAsFalseSchema,
+    keywordAdditionalPropertiesAsTrueSchema,
+    keywordAdditionalPropertiesAsObjectSchema,
     defaultsSchema,
     definitionsSchema,
     dictionarySchema,

diff --git a/...sign-to-code-react/src/__tests__/schemas/keyword.additional-properties.as-false.schema.ts b/...sign-to-code-react/src/__tests__/schemas/keyword.additional-properties.as-false.schema.ts
@@ -0,0 +1,7 @@
+export default {
+    $schema: "http://json-schema.org/schema#",
+    $id: "typeObjectAdditionalPropertiesAsFalse",
+    title: "Object with additional properties",
+    type: "object",
+    additionalProperties: false
+};
diff --git a/...ign-to-code-react/src/__tests__/schemas/keyword.additional-properties.as-object.schema.ts b/...ign-to-code-react/src/__tests__/schemas/keyword.additional-properties.as-object.schema.ts
@@ -0,0 +1,10 @@
+export default {
+    $schema: "http://json-schema.org/schema#",
+    $id: "typeObjectAdditionalPropertiesAsObject",
+    title: "Object with additional properties",
+    type: "object",
+    additionalProperties: {
+        title: "Additional property",
+        type: "boolean"
+    }
+};
diff --git a/...esign-to-code-react/src/__tests__/schemas/keyword.additional-properties.as-true.schema.ts b/...esign-to-code-react/src/__tests__/schemas/keyword.additional-properties.as-true.schema.ts
@@ -0,0 +1,7 @@
+export default {
+    $schema: "http://json-schema.org/schema#",
+    $id: "typeObjectAdditionalPropertiesAsTrue",
+    title: "Object with additional properties",
+    type: "object",
+    additionalProperties: true
+};
diff --git a/packages/design-to-code-react/src/form/controls/type/control.section.tsx b/packages/design-to-code-react/src/form/controls/type/control.section.tsx
@@ -343,7 +343,7 @@ function SectionControl(props: SectionControlProps) {
 
         if (
             typeof navigationItem.schema.additionalProperties === "object" ||
-            navigationItem.schema.additionalProperties === false
+            navigationItem.schema.additionalProperties === true
         ) {
             return (
                 <FormDictionary
@@ -387,6 +387,7 @@ function SectionControl(props: SectionControlProps) {
                     messageSystemOptions={props.messageSystemOptions}
                     categories={props.categories}
                     validate={props.validate}
+                    untitled={props.untitled}
                 />
             );
         }

diff --git a/packages/design-to-code-react/src/form/controls/utilities/dictionary.spec.pw.snapshot.ts b/packages/design-to-code-react/src/form/controls/utilities/dictionary.spec.pw.snapshot.ts
@@ -0,0 +1,18 @@
+import { expect, test } from "../../../__tests__/base-fixtures.js";
+
+test.describe("additionalProperties", () => {
+    test.describe("snapshot", () => {
+        test("object", async ({ page }) => {
+            await page.goto("/form?schema=keywordAdditionalPropertiesAsObject");
+            await expect(page).toHaveScreenshot();
+        });
+        test("true", async ({ page }) => {
+            await page.goto("/form?schema=keywordAdditionalPropertiesAsTrue");
+            await expect(page).toHaveScreenshot();
+        });
+        test("false", async ({ page }) => {
+            await page.goto("/form?schema=keywordAdditionalPropertiesAsFalse");
+            await expect(page).toHaveScreenshot();
+        });
+    });
+});
diff --git a/packages/design-to-code-react/src/form/controls/utilities/dictionary.spec.pw.ts b/packages/design-to-code-react/src/form/controls/utilities/dictionary.spec.pw.ts
@@ -0,0 +1,77 @@
+import { expect, test } from "../../../__tests__/base-fixtures.js";
+
+test.describe("KeywordAdditionalProperties", () => {
+    test("should generate an add control if additionalProperties is an object with type is specified", async ({
+        page,
+    }) => {
+        await page.goto("/form?schema=keywordAdditionalPropertiesAsObject");
+
+        await page.waitForSelector(".dtc-form .dtc-dictionary_control-region");
+
+        const dictionary = await page.locator(".dtc-form .dtc-dictionary_control-region");
+
+        await expect(await dictionary.count()).toEqual(1);
+
+        await expect(
+            await dictionary.locator("button.dtc-dictionary_control-add-trigger").count()
+        ).toEqual(1);
+    });
+    test("should add a control if the object with type is specified", async ({
+        page,
+    }) => {
+        await page.goto("/form?schema=keywordAdditionalPropertiesAsObject");
+
+        await page.waitForSelector(".dtc-form .dtc-dictionary_control-region");
+
+        const dictionaryItems = page.locator(".dtc-dictionary_item-control-region");
+
+        await expect(await dictionaryItems.count()).toEqual(0);
+
+        await page.locator("button.dtc-dictionary_control-add-trigger").click();
+
+        await expect(await dictionaryItems.count()).toEqual(1);
+    });
+    test("should generate an add control if additionalProperties is true", async ({
+        page,
+    }) => {
+        await page.goto("/form?schema=keywordAdditionalPropertiesAsTrue");
+
+        await page.waitForSelector(".dtc-form .dtc-dictionary_control-region");
+
+        const dictionary = await page.locator(".dtc-form .dtc-dictionary_control-region");
+
+        await expect(await dictionary.count()).toEqual(1);
+
+        await expect(
+            await dictionary.locator("button.dtc-dictionary_control-add-trigger").count()
+        ).toEqual(1);
+    });
+    test("should add an untyped control if additionalProperties is true", async ({
+        page,
+    }) => {
+        await page.goto("/form?schema=keywordAdditionalPropertiesAsTrue");
+
+        await page.waitForSelector(".dtc-form .dtc-dictionary_control-region");
+
+        const dictionaryItems = page.locator(".dtc-dictionary_item-control-region");
+
+        await expect(await dictionaryItems.count()).toEqual(0);
+
+        await page.locator("button.dtc-dictionary_control-add-trigger").click();
+
+        await expect(await dictionaryItems.count()).toEqual(1);
+
+        await expect(await page.locator(".dtc-untyped-control").count()).toEqual(1);
+    });
+    test("should not generate controls if additionalProperties is false", async ({
+        page,
+    }) => {
+        await page.goto("/form?schema=keywordAdditionalPropertiesAsFalse");
+
+        const dictionaryControl = await page.locator(
+            ".dtc-form .dtc-dictionary_control-region"
+        );
+
+        await expect(await dictionaryControl.count()).toEqual(0);
+    });
+});
diff --git a/packages/design-to-code-react/src/form/controls/utilities/dictionary.style.css b/packages/design-to-code-react/src/form/controls/utilities/dictionary.style.css
@@ -17,10 +17,20 @@
 }
 
 .dtc-dictionary_item-control-remove-trigger {
-    bottom: 6px;
+    bottom: 16px;
     top: unset;
 }
 
+.dtc-dictionary_control {
+    flex-grow: 1;
+}
+
+.dtc-dictionary_control-region {
+    position: relative;
+    height: 30px;
+    padding-bottom: 5px;
+}
+
 .dtc-dictionary_control-label {
     width: 100%;
 }
diff --git a/packages/design-to-code-react/src/form/controls/utilities/dictionary.tsx b/packages/design-to-code-react/src/form/controls/utilities/dictionary.tsx
@@ -50,26 +50,24 @@ function Dictionary(props: DictionaryProps) {
     }
 
     function renderControl(): React.ReactNode {
-        if (isPlainObject(props.additionalProperties)) {
-            return (
-                <div
-                    className={`dtc-dictionary_control-region ${dtcClassName.commonControlRegion}`}
-                >
-                    <div className={`dtc-dictionary_control`}>
-                        <label
-                            className={`dtc-dictionary_control-label ${dtcClassName.commonLabel}`}
-                        >
-                            {props.label}
-                        </label>
-                    </div>
-                    <button
-                        className={`dtc-dictionary_control-add-trigger ${dtcClassName.commonAddItem}`}
-                        aria-label={"Select to add item"}
-                        onClick={handleOnAddItem}
-                    />
+        return (
+            <div
+                className={`dtc-dictionary_control-region ${dtcClassName.commonLabelRegion}`}
+            >
+                <div className={`dtc-dictionary_control`}>
+                    <label
+                        className={`dtc-dictionary_control-label ${dtcClassName.commonLabel}`}
+                    >
+                        {props.label}
+                    </label>
                 </div>
-            );
-        }
+                <button
+                    className={`dtc-dictionary_control-add-trigger ${dtcClassName.commonAddItem}`}
+                    aria-label={"Select to add item"}
+                    onClick={handleOnAddItem}
+                />
+            </div>
+        );
     }
 
     function renderItemControl(propertyName: string): React.ReactNode {
@@ -201,7 +199,9 @@ function Dictionary(props: DictionaryProps) {
                     props.schemaDictionary[
                         props.dataDictionary[0][props.dictionaryId].schemaId
                     ],
-                    props.additionalProperties,
+                    props.additionalProperties === true
+                        ? { title: props.untitled, type: "string" }
+                        : props.additionalProperties,
                     ""
                 ),
             });

diff --git a/packages/design-to-code/src/web-components/style/common.add-item.css b/packages/design-to-code/src/web-components/style/common.add-item.css
@@ -1,4 +1,5 @@
 .dtc-common-add-item {
+    cursor: pointer;
     position: relative;
     appearance: none;
     background: none;

diff --git a/packages/design-to-code/src/web-components/style/common.label-region.css b/packages/design-to-code/src/web-components/style/common.label-region.css
@@ -1,5 +1,6 @@
 .dtc-common-label-region {
     display: flex;
+    justify-content: space-between;
     align-items: center;
     column-gap: 8px;
     width: 100%;

diff --git a/packages/design-to-code/src/web-components/style/common.remove-input.css b/packages/design-to-code/src/web-components/style/common.remove-input.css
@@ -5,7 +5,7 @@
     padding: 2px;
     position: absolute;
     border: none;
-    width: 18px;
+    width: 20px;
     margin: 0;
     height: 18px;
     z-index: 1;

diff --git a/packages/design-to-code/src/web-components/style/common.remove-item.css b/packages/design-to-code/src/web-components/style/common.remove-item.css
@@ -1,7 +1,8 @@
 .dtc-common-remove-item {
+    cursor: pointer;
     position: absolute;
     top: 5px;
-    right: 2px;
+    right: 0;
     appearance: none;
     background: none;
     border: none;

diff --git a/packages/design-to-code/src/web-components/style/common.remove.css b/packages/design-to-code/src/web-components/style/common.remove.css
@@ -2,6 +2,6 @@
     display: flex;
     height: 18px;
     min-width: var(--dtc-gutter);
-    justify-content: center;
+    justify-content: flex-end;
     align-items: center;
 }