feat(fieldset): add clearGroup method (#723)

packages/fieldset/src/FormGroupMixin.js

@@ -229,6 +229,18 @@ export const FormGroupMixin = dedupeMixin(
         this.resetInteractionState();
       }
 
+      clearGroup() {
+        this.formElements.forEach(child => {
+          if (typeof child.clearGroup === 'function') {
+            child.clearGroup();
+          } else if (typeof child.clear === 'function') {
+            child.clear();
+          }
+        });
+
+        this.resetInteractionState();
+      }
+
       resetInteractionState() {
         this.submitted = false;
         this.touched = false;

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

@@ -1010,6 +1010,51 @@ describe('<lion-fieldset>', () => {
         expect(resetSpy.callCount).to.equal(1);
       });
     });
+
+    describe('clearGroup method', () => {
+      it('calls clearGroup on children fieldset', async () => {
+        const el = await fixture(html`
+          <${tag} name="parentFieldset">
+          <${tag} name="childFieldset">
+              <${childTag} name="child[]" .modelValue="${'foo1'}">
+              </${childTag}>
+            </${tag}>
+          </${tag}>
+        `);
+        const childFieldsetEl = el.querySelector(tagString);
+        const clearGroupSpy = sinon.spy(childFieldsetEl, 'clearGroup');
+        el.clearGroup();
+        expect(clearGroupSpy.callCount).to.equal(1);
+      });
+
+      it('calls clear on children fields', async () => {
+        const el = await fixture(html`
+          <${tag} name="parentFieldset">
+          <${tag} name="childFieldset">
+              <${childTag} name="child[]" .modelValue="${'foo1'}">
+              </${childTag}>
+            </${tag}>
+          </${tag}>
+        `);
+        const childFieldsetEl = el.querySelector(childTagString);
+        const clearSpy = sinon.spy(childFieldsetEl, 'clear');
+        el.clearGroup();
+        expect(clearSpy.callCount).to.equal(1);
+      });
+
+      it('should clear the value of  fields', async () => {
+        const el = await fixture(html`
+          <${tag} name="parentFieldset">
+          <${tag} name="childFieldset">
+              <${childTag} name="child" .modelValue="${'foo1'}">
+              </${childTag}>
+            </${tag}>
+          </${tag}>
+        `);
+        el.clearGroup();
+        expect(el.querySelector('[name="child"]').modelValue).to.equal('');
+      });
+    });
   });
 
   describe('Accessibility', () => {

packages/form-system/stories/form-examples.stories.mdx

@@ -101,6 +101,47 @@ This button is only used here to demonstrate the `serializeGroup()` method.
 </Story>
 </Preview>
 
+# clearGroup of form
+
+To clear the values of the values of the fields use clearGroup().
+
+<Preview>
+<Story name="clearGroup">
+  {() => {
+    return html`
+      <lion-form id="form3" 
+        ><form>
+          <lion-fieldset label="Name" name="name">
+            <lion-input
+              name="firstName"
+              label="First Name"
+              .modelValue=${'Foo'}
+            >
+            </lion-input>
+            <lion-input
+              name="lastName"
+              label="Last Name"
+            >
+            </lion-input>
+         
+          </lion-fieldset>
+          <button type="button" @click=${() => {
+            document.querySelector('#form3').clearGroup();
+            const form = document.querySelector('#form3');
+            document.getElementById('form3_output').innerText = JSON.stringify(form.serializedValue);
+          }}>
+            Clear
+          </button>
+          <pre id="form3_output">
+          </pre>
+        </form></lion-form
+      >
+    `;
+  }}
+</Story>
+</Preview>
+
+
 
 
 ## Serialize in a multistep form