@aurodesignsystem/auro-formkit 1.6.0-beta.9 → 2.0.0-beta.10

package/components/combobox/demo/api.md

@@ -5,26 +5,29 @@
 
 ## Properties
 
-| Property            | Attribute           | Type      | Default     | Description                                      |
-|---------------------|---------------------|-----------|-------------|--------------------------------------------------|
-| [checkmark](#checkmark)         | `checkmark`         | `Boolean` |             | When attribute is present auro-menu will apply checkmarks to selected options. |
-| [disabled](#disabled)          | `disabled`          | `Boolean` |             | If set, disables the combobox.                   |
-| [error](#error)             | `error`             | `Boolean` |             | Sets a persistent error state (e.g. an error state returned from the server). |
-| [noFilter](#noFilter)          | `noFilter`          | `Boolean` | false       | If set, combobox will not filter menuoptions based in input. |
-| [noValidate](#noValidate)        | `noValidate`        | `Boolean` |             | If set, disables auto-validation on blur.        |
-| [optionSelected](#optionSelected)    | `optionSelected`    | `Object`  | null        | Specifies the current selected option.           |
-| [required](#required)          | `required`          | `Boolean` |             | Populates the `required` attribute on the input. Used for client-side validation. |
-| [setCustomValidity](#setCustomValidity) | `setCustomValidity` | `String`  |             | Sets a custom help text message to display for all validityStates. |
-| [triggerIcon](#triggerIcon)       | `triggerIcon`       | `Boolean` |             | If set, the `icon` attribute will be applied to the trigger `auro-input` element. |
-| [type](#type)              | `type`              | `String`  |             | Applies the defined value as the type attribute on auro-input. |
-| [validity](#validity)          | `validity`          | `String`  | "undefined" | Specifies the `validityState` this element is in. |
-| [value](#value)             | `value`             | `String`  | null        | Value selected for the dropdown menu.            |
+| Property                        | Attribute                       | Type      | Default     | Description                                      |
+|---------------------------------|---------------------------------|-----------|-------------|--------------------------------------------------|
+| [checkmark](#checkmark)                     | `checkmark`                     | `Boolean` |             | When attribute is present auro-menu will apply checkmarks to selected options. |
+| [disabled](#disabled)                      | `disabled`                      | `Boolean` |             | If set, disables the combobox.                   |
+| [error](#error)                         | `error`                         | `String`  |             | When defined, sets persistent validity to `customError` and sets the validation message to the attribute value. |
+| [noFilter](#noFilter)                      | `noFilter`                      | `Boolean` | false       | If set, combobox will not filter menuoptions based in input. |
+| [noValidate](#noValidate)                    | `noValidate`                    | `Boolean` |             | If set, disables auto-validation on blur.        |
+| [optionSelected](#optionSelected)                | `optionSelected`                | `Object`  | null        | Specifies the current selected option.           |
+| [required](#required)                      | `required`                      | `Boolean` |             | Populates the `required` attribute on the input. Used for client-side validation. |
+| [setCustomValidity](#setCustomValidity)             | `setCustomValidity`             | `String`  |             | Sets a custom help text message to display for all validityStates. |
+| [setCustomValidityCustomError](#setCustomValidityCustomError)  | `setCustomValidityCustomError`  | `String`  |             | Custom help text message to display when validity = `customError`. |
+| [setCustomValidityValueMissing](#setCustomValidityValueMissing) | `setCustomValidityValueMissing` | `String`  |             | Custom help text message to display when validity = `valueMissing`. |
+| [triggerIcon](#triggerIcon)                   | `triggerIcon`                   | `Boolean` |             | If set, the `icon` attribute will be applied to the trigger `auro-input` element. |
+| [type](#type)                          | `type`                          | `String`  |             | Applies the defined value as the type attribute on auro-input. |
+| [validity](#validity)                      | `validity`                      | `String`  | "undefined" | Specifies the `validityState` this element is in. |
+| [value](#value)                         | `value`                         | `String`  | null        | Value selected for the dropdown menu.            |
 
 ## Methods
 
 | Method  | Type       | Description                         |
 |---------|------------|-------------------------------------|
-| [focus](#focus) | `(): void` | Focuses the combobox trigger input. |
+| [focus](#focus) | `(): void` | Focuses the combobox trigger input. |
+| [reset](#reset) | `(): void` | Resets component to initial state.  |
 
 ## Events
 
@@ -293,7 +296,7 @@ Sets a persistent error state (e.g. an error state returned from the server).
     </auro-menu>
   </auro-combobox>
   <!-- AURO-GENERATED-CONTENT:END -->
-</div>
+</div>
 <auro-accordion alignRight>
   <span slot="trigger">See code</span>
 <!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/error.html) -->
@@ -626,6 +629,64 @@ export function focusExample() {
 <!-- AURO-GENERATED-CONTENT:END -->
 </auro-accordion>
 
+#### reset
+
+Use the `reset()` method to reset the `<auro-combobox>`'s `value` and `validity` state. Doing so will preserve all other attributes and properties.
+
+<div class="exampleWrapper">
+  <!-- AURO-GENERATED-CONTENT:START (FILE:src=./../apiExamples/resetState.html) -->
+  <!-- The below content is automatically added from ./../apiExamples/resetState.html -->
+  <auro-button id="resetStateBtn">Reset</auro-button>
+  <br /><br />
+  <auro-combobox id="resetStateExample" required>
+    <span slot="label">Name</span>
+    <auro-menu>
+      <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+      <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+      <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+      <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+      <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+      <auro-menuoption static nomatch>No matching option</auro-menuoption>
+    </auro-menu>
+  </auro-combobox>
+  <!-- AURO-GENERATED-CONTENT:END -->
+</div>
+<auro-accordion alignRight>
+  <span slot="trigger">See code</span>
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/resetState.html) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/resetState.html -->
+
+```html
+<auro-button id="resetStateBtn">Reset</auro-button>
+<br /><br />
+<auro-combobox id="resetStateExample" required>
+  <span slot="label">Name</span>
+  <auro-menu>
+    <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
+    <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
+    <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
+    <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
+    <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
+    <auro-menuoption static nomatch>No matching option</auro-menuoption>
+  </auro-menu>
+</auro-combobox>
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+<!-- AURO-GENERATED-CONTENT:START (CODE:src=./../apiExamples/resetState.js) -->
+<!-- The below code snippet is automatically added from ./../apiExamples/resetState.js -->
+
+```js
+export function resetStateExample() {
+  const elem = document.querySelector('#resetStateExample');
+
+  document.querySelector('#resetStateBtn').addEventListener('click', () => {
+    elem.reset();
+  });
+}
+```
+<!-- AURO-GENERATED-CONTENT:END -->
+</auro-accordion>
+
 ### Slot Examples
 
 #### helpText