feat: add reset functionality to radio

AlaskaAirlines · Dec 24, 2024 · 5aef36e · 5aef36e
1 parent a1f6eb9
commit 5aef36e
Show file tree

Hide file tree

Showing 8 changed files with 60 additions and 8 deletions.
diff --git a/components/radio/apiExamples/resetState.html b/components/radio/apiExamples/resetState.html
@@ -0,0 +1,9 @@
+<auro-button id="resetStateBtn">Reset</auro-button>
+<br/><br/>
+
+<auro-radio-group id="resetStateExample" required setCustomValidityValueMissing="Please select an option">
+  <span slot="legend">Form label goes here</span>
+  <auro-radio id="resetGroupRadio1" label="Yes" name="radioDemo" value="yes"></auro-radio>
+  <auro-radio id="resetGroupRadio2" label="No" name="radioDemo" value="no"></auro-radio>
+  <auro-radio id="resetGroupRadio3" label="Maybe" name="radioDemo" value="maybe"></auro-radio>
+</auro-radio-group>
diff --git a/components/radio/apiExamples/resetState.js b/components/radio/apiExamples/resetState.js
@@ -0,0 +1,7 @@
+export function resetStateExample() {
+  const elem = document.querySelector('#resetStateExample');
+
+  document.querySelector('#resetStateBtn').addEventListener('click', () => {
+    elem.reset();
+  });
+}
diff --git a/components/radio/demo/api.html b/components/radio/demo/api.html
@@ -46,5 +46,6 @@
 
     <!-- If additional elements are needed for the demo, add them here. -->
     <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-accordion@latest/dist/auro-accordion__bundled.js" type="module"></script>
+    <script src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-button@latest/dist/auro-button__bundled.js" type="module"></script>
   </body>
 </html>
diff --git a/components/radio/demo/api.js b/components/radio/demo/api.js
@@ -1,11 +1,13 @@
 import { dynamicExample } from "../apiExamples/dynamic";
+import { resetStateExample } from "../apiExamples/resetState";
 import './index.js';
 
 export function initExamples(initCount) {
   initCount = initCount || 0;
 
   try {
     dynamicExample();
+    resetStateExample();
   } catch (error) {
     if (initCount <= 20) {
       // setTimeout handles issue where content is sometimes loaded after the functions get called

diff --git a/components/radio/docs/api.md b/components/radio/docs/api.md
@@ -18,9 +18,9 @@
 
 ## Methods
 
-| Method  | Type       | Description                                    |
-|---------|------------|------------------------------------------------|
-| `reset` | `(): void` | Method for a total reset of the radio element. |
+| Method  | Type       | Description                        |
+|---------|------------|------------------------------------|
+| `reset` | `(): void` | Resets component to initial state. |
 
 ## Events
 
@@ -59,6 +59,12 @@
 | `tabIndex` | `tabIndex` | `number`  | -1      |                                                  |
 | `value`    | `value`    | `string`  |         |                                                  |
 
+## Methods
+
+| Method  | Type       | Description                        |
+|---------|------------|------------------------------------|
+| `reset` | `(): void` | Resets component to initial state. |
+
 ## Events
 
 | Event                | Type               | Description                                      |

diff --git a/components/radio/docs/partials/api.md b/components/radio/docs/partials/api.md
@@ -141,6 +141,24 @@ The `<auro-radio-group>` supports an `optionalLabel` slot, where users can can o
 
 </auro-accordion>
 
+### Reset Example
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/resetState.html) -->
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/resetState.html) -->
+<!-- AURO-GENERATED-CONTENT:END -->
+
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/resetState.js) -->
+<!-- AURO-GENERATED-CONTENT:END -->
+
+</auro-accordion>
+
 ### Dynamic Example
 
 This example demonstrates a data drive approach to rendering `<auro-radio>` buttons.

diff --git a/components/radio/src/auro-radio-group.js b/components/radio/src/auro-radio-group.js
@@ -216,20 +216,19 @@ export class AuroRadioGroup extends LitElement {
   }
 
   /**
-   * Method for a total reset of the radio element.
+   * Resets component to initial state.
    * @returns {void}
    */
   reset() {
-    this.value = undefined;
     this.index = 0;
-    this.optionSelected = undefined;
+
     const buttons = this.querySelectorAll('auro-radio, [auro-radio]');
 
     buttons.forEach((button) => {
-      button.checked = false;
+      button.reset();
     });
 
-    this.validation.validate(this);
+    this.validation.reset(this);
   }
 
   /**
@@ -238,6 +237,7 @@ export class AuroRadioGroup extends LitElement {
    * @returns {void}
    */
   resetRadio() {
+    console.log('resetRadio');
     if (this.items.length === 0) {
       this.handleItems();
     }

diff --git a/components/radio/src/auro-radio.js b/components/radio/src/auro-radio.js
@@ -151,6 +151,15 @@ export class AuroRadio extends LitElement {
     }));
   }
 
+  /**
+   * Resets component to initial state.
+   * @returns {void}
+   */
+  reset() {
+    this.checked = false;
+    this.error = false;
+  }
+
   updated(changedProperties) {
     if (changedProperties.has('checked')) {
       this.dispatchEvent(new CustomEvent('resetRadio', {