chore: removed circular devdeps fieldset/form

packages/fieldset/package.json

@@ -37,9 +37,8 @@
     "@lion/validate": "0.5.4"
   },
   "devDependencies": {
-    "@lion/input": "0.4.2",
     "@lion/localize": "0.7.2",
-    "@open-wc/demoing-storybook": "^1.1.1",
+    "@open-wc/demoing-storybook": "^1.6.1",
     "@open-wc/testing": "^2.3.4",
     "sinon": "^7.2.2"
   }

packages/fieldset/test/lion-fieldset.test.js

@@ -1,13 +1,31 @@
-import { expect, fixture, html, unsafeStatic, triggerFocusFor, nextFrame } from '@open-wc/testing';
+import {
+  expect,
+  fixture,
+  html,
+  unsafeStatic,
+  triggerFocusFor,
+  nextFrame,
+  defineCE,
+} from '@open-wc/testing';
 import sinon from 'sinon';
 import { Validator, IsNumber } from '@lion/validate';
 import { localizeTearDown } from '@lion/localize/test-helpers.js';
-import '@lion/input/lion-input.js';
 import '../lion-fieldset.js';
+import { LionField } from '@lion/field';
+import '@lion/field/lion-field.js';
+
+const childTagString = defineCE(
+  class extends LionField {
+    get slots() {
+      return {
+        input: () => document.createElement('input'),
+      };
+    }
+  },
+);
 
 const tagString = 'lion-fieldset';
 const tag = unsafeStatic(tagString);
-const childTagString = 'lion-input';
 const childTag = unsafeStatic(childTagString);
 const inputSlots = html`
   <${childTag} name="gender[]"></${childTag}>
@@ -768,14 +786,14 @@ describe('<lion-fieldset>', () => {
     });
   });
 
-  describe('reset', () => {
+  describe('Reset', () => {
     it('restores default values if changes were made', async () => {
       const el = await fixture(html`
         <${tag}>
           <${childTag} id="firstName" name="firstName" .modelValue="${'Foo'}"></${childTag}>
         </${tag}>
       `);
-      await el.querySelector('lion-input').updateComplete;
+      await el.querySelector(childTagString).updateComplete;
 
       const input = el.querySelector('#firstName');
 
@@ -794,7 +812,7 @@ describe('<lion-fieldset>', () => {
           <${childTag} id="firstName" name="firstName[]" .modelValue="${'Foo'}"></${childTag}>
         </${tag}>
       `);
-      await el.querySelector('lion-input').updateComplete;
+      await el.querySelector(childTagString).updateComplete;
 
       const input = el.querySelector('#firstName');
 
@@ -817,7 +835,7 @@ describe('<lion-fieldset>', () => {
       `);
       await Promise.all([
         el.querySelector('lion-fieldset').updateComplete,
-        el.querySelector('lion-input').updateComplete,
+        el.querySelector(childTagString).updateComplete,
       ]);
 
       const input = el.querySelector('#firstName');

packages/form/package.json

@@ -36,11 +36,9 @@
     "@lion/fieldset": "0.5.7"
   },
   "devDependencies": {
-    "@lion/input": "0.4.2",
-    "@lion/input-iban": "0.4.2",
-    "@lion/textarea": "0.4.2",
+    "@lion/field": "0.7.0",
     "@lion/validate": "0.5.4",
-    "@open-wc/demoing-storybook": "^1.1.1",
+    "@open-wc/demoing-storybook": "^1.6.1",
     "@open-wc/testing": "^2.3.4",
     "sinon": "^7.2.2"
   }

packages/form/test/lion-form.test.js

@@ -1,19 +1,40 @@
-import { expect, fixture, html, oneEvent, aTimeout } from '@open-wc/testing';
+import {
+  expect,
+  fixture,
+  html,
+  oneEvent,
+  aTimeout,
+  unsafeStatic,
+  defineCE,
+} from '@open-wc/testing';
 import { spy } from 'sinon';
-
-import '@lion/input/lion-input.js';
+import { LionField } from '@lion/field';
+import '@lion/field/lion-field.js';
 import '@lion/fieldset/lion-fieldset.js';
-
 import '../lion-form.js';
 
+const childTagString = defineCE(
+  class extends LionField {
+    get slots() {
+      return {
+        input: () => document.createElement('input'),
+      };
+    }
+  },
+);
+const childTag = unsafeStatic(childTagString);
+const formTagString = 'lion-form';
+const formTag = unsafeStatic(formTagString);
+
 describe('<lion-form>', () => {
   it('has a custom reset that gets triggered by native reset', async () => {
     const withDefaults = await fixture(html`
-      <lion-form
-        ><form>
-          <lion-input name="firstName" .modelValue="${'Foo'}"></lion-input>
-          <input type="reset" value="reset-button" /></form
-      ></lion-form>
+      <${formTag}>
+        <form>
+          <${childTag} name="firstName" .modelValue="${'Foo'}"></${childTag}>
+          <input type="reset" value="reset-button" />
+        </form>
+      </${formTag}>
     `);
     const resetButton = withDefaults.querySelector('input[type=reset]');
 
@@ -41,11 +62,11 @@ describe('<lion-form>', () => {
 
   it('dispatches reset events', async () => {
     const el = await fixture(html`
-      <lion-form>
+      <${formTag}>
         <form>
-          <lion-input name="firstName" .modelValue="${'Foo'}"></lion-input>
+          <${childTag} name="firstName" .modelValue="${'Foo'}"></${childTag}>
         </form>
-      </lion-form>
+      </${formTag}>
     `);
 
     setTimeout(() => el.reset());
@@ -60,11 +81,11 @@ describe('<lion-form>', () => {
   it('works with the native submit event (triggered via a button)', async () => {
     const submitSpy = spy();
     const el = await fixture(html`
-      <lion-form @submit=${submitSpy}>
+      <${formTag} @submit=${submitSpy}>
         <form>
           <button type="submit">submit</button>
         </form>
-      </lion-form>
+      </${formTag}>
     `);
 
     const button = el.querySelector('button');
@@ -74,11 +95,11 @@ describe('<lion-form>', () => {
 
   it('dispatches submit events', async () => {
     const el = await fixture(html`
-      <lion-form>
+      <${formTag}>
         <form>
           <button type="submit">submit</button>
         </form>
-      </lion-form>
+      </${formTag}>
     `);
     const button = el.querySelector('button');
     setTimeout(() => button.click());
@@ -92,11 +113,11 @@ describe('<lion-form>', () => {
 
   it('handles internal submit handler before dispatch', async () => {
     const el = await fixture(html`
-      <lion-form>
+      <${formTag}>
         <form>
           <button type="submit">submit</button>
         </form>
-      </lion-form>
+      </${formTag}>
     `);
     const button = el.querySelector('button');
     const internalHandlerSpy = spy(el, 'submitGroup');
@@ -108,11 +129,11 @@ describe('<lion-form>', () => {
 
   it('handles internal submit handler before dispatch', async () => {
     const el = await fixture(html`
-      <lion-form>
+      <${formTag}>
         <form>
           <button type="submit">submit</button>
         </form>
-      </lion-form>
+      </${formTag}>
     `);
     const button = el.querySelector('button');
     const internalHandlerSpy = spy(el, 'submitGroup');
@@ -124,11 +145,11 @@ describe('<lion-form>', () => {
 
   it('handles internal reset handler before dispatch', async () => {
     const el = await fixture(html`
-      <lion-form>
+      <${formTag}>
         <form>
           <button type="reset">submit</button>
         </form>
-      </lion-form>
+      </${formTag}>
     `);
     const button = el.querySelector('button');
     const internalHandlerSpy = spy(el, 'resetGroup');