chore(form-element): Update Examples, Add Missing Examples to Storybook (#4748)

Author: Alexis Córdova

ui/components/form-element/__tests__/__snapshots__/snapshot.spec.js.snap

@@ -144,7 +144,7 @@ exports[`Compound Form Element render deprecated compound form element 1`] = `
         >
           <label
             className="slds-form-element__label"
-            htmlFor="location-latitude-01"
+            htmlFor="location-latitude-02"
           >
             Latitude
           </label>
@@ -154,7 +154,7 @@ exports[`Compound Form Element render deprecated compound form element 1`] = `
             <input
               className="slds-input"
               defaultValue="54.293"
-              id="location-latitude-01"
+              id="location-latitude-02"
               type="text"
             />
           </div>
@@ -188,7 +188,7 @@ exports[`Compound Form Element renders address compound form element 1`] = `
         >
           <label
             className="slds-form-element__label"
-            htmlFor="form-element-id-04"
+            htmlFor="form-element-id-01"
           >
             Billing Street
           </label>
@@ -198,7 +198,7 @@ exports[`Compound Form Element renders address compound form element 1`] = `
             <textarea
               className="slds-textarea"
               defaultValue="525 S. Lexington Ave"
-              id="form-element-id-04"
+              id="form-element-id-01"
               placeholder="Placeholder text…"
               required={true}
             />
@@ -217,7 +217,7 @@ exports[`Compound Form Element renders address compound form element 1`] = `
         >
           <label
             className="slds-form-element__label"
-            htmlFor="form-element-id-05"
+            htmlFor="form-element-id-02"
           >
             Billing City
           </label>
@@ -227,7 +227,7 @@ exports[`Compound Form Element renders address compound form element 1`] = `
             <input
               className="slds-input"
               defaultValue="Burlington"
-              id="form-element-id-05"
+              id="form-element-id-02"
               required={true}
               type="text"
             />
@@ -242,7 +242,7 @@ exports[`Compound Form Element renders address compound form element 1`] = `
         >
           <label
             className="slds-form-element__label"
-            htmlFor="form-element-id-06"
+            htmlFor="form-element-id-03"
           >
             Billing State/Province
           </label>
@@ -252,7 +252,7 @@ exports[`Compound Form Element renders address compound form element 1`] = `
             <input
               className="slds-input"
               defaultValue="NC"
-              id="form-element-id-06"
+              id="form-element-id-03"
               required={true}
               type="text"
             />
@@ -271,7 +271,7 @@ exports[`Compound Form Element renders address compound form element 1`] = `
         >
           <label
             className="slds-form-element__label"
-            htmlFor="form-element-id-07"
+            htmlFor="form-element-id-04"
           >
             Billing Zip/Postal Code
           </label>
@@ -281,7 +281,7 @@ exports[`Compound Form Element renders address compound form element 1`] = `
             <input
               className="slds-input"
               defaultValue="27215"
-              id="form-element-id-07"
+              id="form-element-id-04"
               required={true}
               type="text"
             />
@@ -296,7 +296,7 @@ exports[`Compound Form Element renders address compound form element 1`] = `
         >
           <label
             className="slds-form-element__label"
-            htmlFor="form-element-id-08"
+            htmlFor="form-element-id-05"
           >
             Billing Country
           </label>
@@ -306,7 +306,7 @@ exports[`Compound Form Element renders address compound form element 1`] = `
             <input
               className="slds-input"
               defaultValue="USA"
-              id="form-element-id-08"
+              id="form-element-id-05"
               required={true}
               type="text"
             />

ui/components/form-element/__tests__/snapshot.spec.js

@@ -244,9 +244,13 @@ describe('Horizontal Form Element', () => {
 
 describe('Compound Form Element', () => {
   it('renders simple compound form element', () =>
-    matchesMarkup(CompoundExamples.default));
+    matchesMarkup(
+      getDisplayElementById(CompoundExamples.default)
+    ));
   it('renders address compound form element', () =>
-    matchesMarkup(AddressExamples.default));
+    matchesMarkup(
+      getDisplayElementById(AddressExamples.default)
+    ));
   it('render compound form element wrapper', () =>
     matchesMarkup(<CompoundFormElement>content</CompoundFormElement>));
   it('render compound form element wrapper with legend', () =>

ui/components/form-element/_doc.scss

@@ -14,7 +14,7 @@
  *
  * Every field requires an associated, non-empty `<label>` element. The label should have a `for` attribute that references the `id` of the field. For example, `<label for="emailAddress">Enter email address:</label>` and `<input id="emailAddress">`. This association ensures that assistive technology informs users what information to enter where.
  *
- * If the field is required, the `<input>` element should have the HTML attribute `required` or `required=""`. Similarily, if it is disabled, it should have the `disabled` or `disabled=""` attribute. Do not use true/false values inside the `required` or `disabled` because the mere presence of these attributes signifies the field is required or disabled.
+ * If the field is required, the `<input>` element should have the HTML attribute `required` or `required=""`. Similarly, if it is disabled, it should have the `disabled` or `disabled=""` attribute. Do not use true/false values inside the `required` or `disabled` because the mere presence of these attributes signifies the field is required or disabled.
  *
  * If the field is invalid and displays an error message, the `<input>` element should have an `aria-describedby` attribute that references the `id` of the error message. This configuration allows screen readers to read the associated error message when the invalid field is focused.
  *