docs: refactor name attribute use in examples #169

AlaskaAirlines · Jan 14, 2025 · 9f95c36 · 9f95c36
1 parent beb4938
commit 9f95c36
Show file tree

Hide file tree

Showing 12 changed files with 45 additions and 45 deletions.
diff --git a/components/checkbox/README.md b/components/checkbox/README.md
@@ -78,10 +78,10 @@ import "@auro-formkit/-formkit/-formkit/auro-checkbox";
 ```html
 <auro-checkbox-group>
   <span slot="legend">Form label goes here</span>
-  <auro-checkbox value="value1" name="example1" id="checkbox-basic1">Checkbox option</auro-checkbox>
-  <auro-checkbox value="value2" name="example2" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
-  <auro-checkbox value="value3" name="example3" id="checkbox-basic3">Checkbox option</auro-checkbox>
-  <auro-checkbox value="value4" name="example4" id="checkbox-basic4">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
+  <auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
 </auro-checkbox-group>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->
@@ -127,10 +127,10 @@ The `<auro-checkbox>` element should be used in situations where users may:
 ```html
 <auro-checkbox-group>
   <span slot="legend">Form label goes here</span>
-  <auro-checkbox value="value1" name="example1" id="checkbox-basic1">Checkbox option</auro-checkbox>
-  <auro-checkbox value="value2" name="example2" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
-  <auro-checkbox value="value3" name="example3" id="checkbox-basic3">Checkbox option</auro-checkbox>
-  <auro-checkbox value="value4" name="example4" id="checkbox-basic4">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
+  <auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
 </auro-checkbox-group>
 ```
 <!-- AURO-GENERATED-CONTENT:END -->

diff --git a/components/checkbox/apiExamples/basic.html b/components/checkbox/apiExamples/basic.html
@@ -1,7 +1,7 @@
 <auro-checkbox-group>
   <span slot="legend">Form label goes here</span>
-  <auro-checkbox value="value1" name="example1" id="checkbox-basic1">Checkbox option</auro-checkbox>
-  <auro-checkbox value="value2" name="example2" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
-  <auro-checkbox value="value3" name="example3" id="checkbox-basic3">Checkbox option</auro-checkbox>
-  <auro-checkbox value="value4" name="example4" id="checkbox-basic4">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value1" name="basic" id="checkbox-basic1">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value2" name="basic" id="checkbox-basic2" checked>Checkbox option</auro-checkbox>
+  <auro-checkbox value="value3" name="basic" id="checkbox-basic3">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value4" name="basic" id="checkbox-basic4">Checkbox option</auro-checkbox>
 </auro-checkbox-group>
diff --git a/components/checkbox/apiExamples/customCheckbox.html b/components/checkbox/apiExamples/customCheckbox.html
@@ -1,7 +1,7 @@
 <custom-checkbox-group>
   <span slot="legend">Form label goes here</span>
-  <custom-checkbox value="value1" name="example1" id="checkbox-custom1">Custom checkbox option</custom-checkbox>
-  <custom-checkbox value="value2" name="example2" id="checkbox-custom2" checked>Custom checkbox option</custom-checkbox>
-  <custom-checkbox value="value3" name="example3" id="checkbox-custom3">Custom checkbox option</custom-checkbox>
-  <custom-checkbox value="value4" name="example4" id="checkbox-custom4">Custom checkbox option</custom-checkbox>
+  <custom-checkbox value="value1" name="custom" id="checkbox-custom1">Custom checkbox option</custom-checkbox>
+  <custom-checkbox value="value2" name="custom" id="checkbox-custom2" checked>Custom checkbox option</custom-checkbox>
+  <custom-checkbox value="value3" name="custom" id="checkbox-custom3">Custom checkbox option</custom-checkbox>
+  <custom-checkbox value="value4" name="custom" id="checkbox-custom4">Custom checkbox option</custom-checkbox>
 </custom-checkbox-group>
diff --git a/components/checkbox/apiExamples/disabled.html b/components/checkbox/apiExamples/disabled.html
@@ -1,7 +1,7 @@
 <auro-checkbox-group>
   <span slot="legend">Form label goes here</span>
-  <auro-checkbox value="disabled-value1" name="example1" id="checkbox-disabled1">Checkbox option</auro-checkbox>
-  <auro-checkbox value="disabled-value2" name="example2" id="checkbox-disabled2" checked disabled>Disabled checkbox option</auro-checkbox>
-  <auro-checkbox value="disabled-value3" name="example3" id="checkbox-disabled3" disabled>Disabled checkbox option</auro-checkbox>
-  <auro-checkbox value="disabled-value4" name="example4" id="checkbox-disabled4" checked>Checkbox option</auro-checkbox>
+  <auro-checkbox value="disabled-value1" name="disabled" id="checkbox-disabled1">Checkbox option</auro-checkbox>
+  <auro-checkbox value="disabled-value2" name="disabled" id="checkbox-disabled2" checked disabled>Disabled checkbox option</auro-checkbox>
+  <auro-checkbox value="disabled-value3" name="disabled" id="checkbox-disabled3" disabled>Disabled checkbox option</auro-checkbox>
+  <auro-checkbox value="disabled-value4" name="disabled" id="checkbox-disabled4" checked>Checkbox option</auro-checkbox>
 </auro-checkbox-group>
diff --git a/components/checkbox/apiExamples/disabledGroup.html b/components/checkbox/apiExamples/disabledGroup.html
@@ -1,7 +1,7 @@
 <auro-checkbox-group disabled>
   <span slot="legend">Form label goes here</span>
-  <auro-checkbox value="disabled-value1" name="example1" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
-  <auro-checkbox value="disabled-value2" name="example2" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
-  <auro-checkbox value="disabled-value3" name="example3" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
-  <auro-checkbox value="disabled-value4" name="example4" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
+  <auro-checkbox value="disabled-value1" name="disabledGroup" id="checkbox-disabledGroup1">Disabled checkbox option</auro-checkbox>
+  <auro-checkbox value="disabled-value2" name="disabledGroup" id="checkbox-disabledGroup2" checked>Disabled checkbox option</auro-checkbox>
+  <auro-checkbox value="disabled-value3" name="disabledGroup" id="checkbox-disabledGroup3">Disabled checkbox option</auro-checkbox>
+  <auro-checkbox value="disabled-value4" name="disabledGroup" id="checkbox-disabledGroup4">Disabled checkbox option</auro-checkbox>
 </auro-checkbox-group>
diff --git a/components/checkbox/apiExamples/errorGroup.html b/components/checkbox/apiExamples/errorGroup.html
@@ -1,7 +1,7 @@
 <auro-checkbox-group error="custom error">
   <span slot="legend">Form label goes here</span>
-  <auro-checkbox value="error-value1" name="example1" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
-  <auro-checkbox value="error-value2" name="example2" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
-  <auro-checkbox value="error-value3" name="example3" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
-  <auro-checkbox value="error-value4" name="example4" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
+  <auro-checkbox value="error-value1" name="error" id="checkbox-errorGroup1">Error checkbox option</auro-checkbox>
+  <auro-checkbox value="error-value2" name="error" id="checkbox-errorGroup2">Error checkbox option</auro-checkbox>
+  <auro-checkbox value="error-value3" name="error" id="checkbox-errorGroup3">Error checkbox option</auro-checkbox>
+  <auro-checkbox value="error-value4" name="error" id="checkbox-errorGroup4" checked>Error checkbox option</auro-checkbox>
 </auro-checkbox-group>
diff --git a/components/checkbox/apiExamples/horizontal.html b/components/checkbox/apiExamples/horizontal.html
@@ -1,6 +1,6 @@
 <auro-checkbox-group horizontal>
   <span slot="legend">Form label goes here</span>
-  <auro-checkbox value="yes" name="yes" id="checkbox-horizontal1">Yes</auro-checkbox>
-  <auro-checkbox value="no" name="no" id="checkbox-horizontal2">No</auro-checkbox>
-  <auro-checkbox value="maybe" name="maybe" id="checkbox-horizontal3">Maybe</auro-checkbox>
+  <auro-checkbox value="yes" name="horizontal" id="checkbox-horizontal1">Yes</auro-checkbox>
+  <auro-checkbox value="no" name="horizontal" id="checkbox-horizontal2">No</auro-checkbox>
+  <auro-checkbox value="maybe" name="horizontal" id="checkbox-horizontal3">Maybe</auro-checkbox>
 </auro-checkbox-group>
diff --git a/components/checkbox/apiExamples/horizontalLimit.html b/components/checkbox/apiExamples/horizontalLimit.html
@@ -1,7 +1,7 @@
 <auro-checkbox-group horizontal>
   <span slot="legend">Form label goes here</span>
-  <auro-checkbox value="yes" name="yes" id="checkbox-horizontalLimit1">Yes</auro-checkbox>
-  <auro-checkbox value="no" name="no" id="checkbox-horizontalLimit2">No</auro-checkbox>
-  <auro-checkbox value="maybe" name="maybe" id="checkbox-horizontalLimit3">Maybe</auro-checkbox>
-  <auro-checkbox value="not sure" name="not sure" id="checkbox-horizontalLimit4">Not Sure</auro-checkbox>
+  <auro-checkbox value="yes" name="horizontalLimit" id="checkbox-horizontalLimit1">Yes</auro-checkbox>
+  <auro-checkbox value="no" name="horizontalLimit" id="checkbox-horizontalLimit2">No</auro-checkbox>
+  <auro-checkbox value="maybe" name="horizontalLimit" id="checkbox-horizontalLimit3">Maybe</auro-checkbox>
+  <auro-checkbox value="not sure" name="horizontalLimit" id="checkbox-horizontalLimit4">Not Sure</auro-checkbox>
 </auro-checkbox-group>
diff --git a/components/checkbox/apiExamples/required.html b/components/checkbox/apiExamples/required.html
@@ -1,7 +1,7 @@
 <auro-checkbox-group required setCustomValidityValueMissing="Please select an option">
   <span slot="legend">Form label goes here</span>
-  <auro-checkbox value="value1" name="example1" id="checkbox-required1">Checkbox option</auro-checkbox>
-  <auro-checkbox value="value2" name="example2" id="checkbox-required2">Checkbox option</auro-checkbox>
-  <auro-checkbox value="value3" name="example3" id="checkbox-required3">Checkbox option</auro-checkbox>
-  <auro-checkbox value="value4" name="example4" id="checkbox-required4">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value1" name="required" id="checkbox-required1">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value2" name="required" id="checkbox-required2">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value3" name="required" id="checkbox-required3">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value4" name="required" id="checkbox-required4">Checkbox option</auro-checkbox>
 </auro-checkbox-group>
diff --git a/components/checkbox/apiExamples/resetState.html b/components/checkbox/apiExamples/resetState.html
@@ -3,8 +3,8 @@
 
 <auro-checkbox-group id="resetStateExample" required setCustomValidityValueMissing="Please select an option">
   <span slot="legend">Form label goes here</span>
-  <auro-checkbox value="value1" name="example1" id="checkbox-basic1">Checkbox option</auro-checkbox>
-  <auro-checkbox value="value2" name="example2" id="checkbox-basic2">Checkbox option</auro-checkbox>
-  <auro-checkbox value="value3" name="example3" id="checkbox-basic3">Checkbox option</auro-checkbox>
-  <auro-checkbox value="value4" name="example4" id="checkbox-basic4">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value1" name="resetState" id="checkbox-basic1">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value2" name="resetState" id="checkbox-basic2">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value3" name="resetState" id="checkbox-basic3">Checkbox option</auro-checkbox>
+  <auro-checkbox value="value4" name="resetState" id="checkbox-basic4">Checkbox option</auro-checkbox>
 </auro-checkbox-group>
diff --git a/components/checkbox/docs/api.md b/components/checkbox/docs/api.md
@@ -51,7 +51,7 @@ Custom element for the purpose of allowing users to select one or more options o
 | `disabled` | `disabled` | `Boolean` | false   | If set to true, the checkbox will not be clickable. |
 | `error`    | `error`    | `Boolean` | false   | If set to true, sets an error state on the checkbox. |
 | `id`       | `id`       | `String`  |         | Sets the individual `id` per element.            |
-| `name`     | `name`     | `String`  |         | Accepts any string, `DOMString` representing the value of the input. |
+| `name`     | `name`     | `String`  |         | Accepts any string and is used to identify related checkboxes when submitting form data. |
 | `value`    | `value`    | `String`  |         | Sets the element's input value. Must be unique within an auro-checkbox-group element. |
 
 ## Methods

diff --git a/components/checkbox/src/auro-checkbox.js b/components/checkbox/src/auro-checkbox.js
@@ -22,7 +22,7 @@ import AuroLibraryRuntimeUtils from '@aurodesignsystem/auro-library/scripts/util
  * @attr {Boolean} disabled - If set to true, the checkbox will not be clickable.
  * @attr {Boolean} error - If set to true, sets an error state on the checkbox.
  * @attr {String} id - Sets the individual `id` per element.
- * @attr {String} name - Accepts any string, `DOMString` representing the value of the input.
+ * @attr {String} name - Accepts any string and is used to identify related checkboxes when submitting form data.
  * @attr {String} value - Sets the element's input value. Must be unique within an auro-checkbox-group element.
  * @csspart checkbox - apply css to a specific checkbox.
  * @csspart checkbox-input - apply css to a specific checkbox's input.