docs: Change example in checkbox field set (#2047)

* docs: Change example in checkbox field set * update tests
SAP · Jan 14, 2021 · 20e8a12 · 20e8a12
1 parent 4e54fe7
commit 20e8a12
Show file tree

Hide file tree

Showing 2 changed files with 112 additions and 18 deletions.
diff --git a/stories/form-fieldset/__snapshots__/form-fieldset.stories.storyshot b/stories/form-fieldset/__snapshots__/form-fieldset.stories.storyshot
@@ -38,7 +38,15 @@ exports[`Storyshots Components/Forms/Field Set Checkbox Groups 1`] = `
           for="Ai4ez611"
         >
 
-                    Field label
+
+          <span
+            class="fd-checkbox__text"
+          >
+
+                        Field label
+
+          </span>
+
 
         </label>
 
@@ -64,7 +72,15 @@ exports[`Storyshots Components/Forms/Field Set Checkbox Groups 1`] = `
           for="Ai4ez612"
         >
 
-                    Selected State
+
+          <span
+            class="fd-checkbox__text"
+          >
+
+                        Selected State
+
+          </span>
+
 
         </label>
 
@@ -88,7 +104,17 @@ exports[`Storyshots Components/Forms/Field Set Checkbox Groups 1`] = `
           class="fd-checkbox__label"
           for="Ai4ez613"
         >
-          TriState Text
+
+
+          <span
+            class="fd-checkbox__text"
+          >
+
+                        TriState Text
+
+          </span>
+
+
         </label>
 
 
@@ -137,7 +163,15 @@ exports[`Storyshots Components/Forms/Field Set Checkbox Groups 1`] = `
           for="Ai4ez614"
         >
 
-                    Field label
+
+          <span
+            class="fd-checkbox__text"
+          >
+
+                        Field label
+
+          </span>
+
 
         </label>
 
@@ -163,7 +197,15 @@ exports[`Storyshots Components/Forms/Field Set Checkbox Groups 1`] = `
           for="Ai4ez615"
         >
 
-                    Field label
+
+          <span
+            class="fd-checkbox__text"
+          >
+
+                        Field label
+
+          </span>
+
 
         </label>
 
@@ -189,7 +231,15 @@ exports[`Storyshots Components/Forms/Field Set Checkbox Groups 1`] = `
           for="Ai4ez616"
         >
 
-                    Field label
+
+          <span
+            class="fd-checkbox__text"
+          >
+
+                        Field label
+
+          </span>
+
 
         </label>
 
@@ -238,7 +288,15 @@ exports[`Storyshots Components/Forms/Field Set Checkbox Groups 1`] = `
           for="Ai4ez617"
         >
 
-                    Field label
+
+          <span
+            class="fd-checkbox__text"
+          >
+
+                        Field label
+
+          </span>
+
 
         </label>
 
@@ -263,7 +321,15 @@ exports[`Storyshots Components/Forms/Field Set Checkbox Groups 1`] = `
           for="Ai4ez618"
         >
 
-                    Field label
+
+          <span
+            class="fd-checkbox__text"
+          >
+
+                        Field label
+
+          </span>
+
 
         </label>
 
@@ -288,7 +354,15 @@ exports[`Storyshots Components/Forms/Field Set Checkbox Groups 1`] = `
           for="Ai4ez619"
         >
 
-                    Field label
+
+          <span
+            class="fd-checkbox__text"
+          >
+
+                        Field label
+
+          </span>
+
 
         </label>
 

diff --git a/stories/form-fieldset/form-fieldset.stories.js b/stories/form-fieldset/form-fieldset.stories.js
@@ -16,18 +16,26 @@ export const checkboxGroups = () => `
             <div class="fd-form-item">
                 <input type="checkbox" class="fd-checkbox" id="Ai4ez611">
                 <label class="fd-checkbox__label" for="Ai4ez611">
-                    Field label
+                    <span class="fd-checkbox__text">
+                        Field label
+                    </span>
                 </label>
             </div>
             <div class="fd-form-item">
                 <input type="checkbox" class="fd-checkbox" id="Ai4ez612" checked>
                 <label class="fd-checkbox__label" for="Ai4ez612">
-                    Selected State
+                    <span class="fd-checkbox__text">
+                        Selected State
+                    </span>
                 </label>
             </div>
             <div class="fd-form-item">
                 <input type="checkbox" class="fd-checkbox" id="Ai4ez613">
-                <label class="fd-checkbox__label" for="Ai4ez613">TriState Text</label>
+                <label class="fd-checkbox__label" for="Ai4ez613">
+                    <span class="fd-checkbox__text">
+                        TriState Text
+                    </span>
+                </label>
             </div>
         </div>
     </fieldset>
@@ -38,19 +46,25 @@ export const checkboxGroups = () => `
             <div class="fd-form-item">
                 <input type="checkbox" class="fd-checkbox" id="Ai4ez614" disabled>
                 <label class="fd-checkbox__label" for="Ai4ez614">
-                    Field label
+                    <span class="fd-checkbox__text">
+                        Field label
+                    </span>
                 </label>
             </div>
             <div class="fd-form-item">
                 <input type="checkbox" class="fd-checkbox" id="Ai4ez615" disabled>
                 <label class="fd-checkbox__label" for="Ai4ez615">
-                    Field label
+                    <span class="fd-checkbox__text">
+                        Field label
+                    </span>
                 </label>
             </div>
             <div class="fd-form-item">
                 <input type="checkbox" class="fd-checkbox" id="Ai4ez616" disabled>
                 <label class="fd-checkbox__label" for="Ai4ez616">
-                    Field label
+                    <span class="fd-checkbox__text">
+                        Field label
+                    </span>
                 </label>
             </div>
         </div>
@@ -62,19 +76,25 @@ export const checkboxGroups = () => `
             <div class="fd-form-group__item fd-form-item">
                 <input type="checkbox" class="fd-checkbox" id="Ai4ez617">
                 <label class="fd-checkbox__label" for="Ai4ez617">
-                    Field label
+                    <span class="fd-checkbox__text">
+                        Field label
+                    </span>
                 </label>
             </div>
             <div class="fd-form-group__item fd-form-item">
                 <input type="checkbox" class="fd-checkbox" id="Ai4ez618">
                 <label class="fd-checkbox__label" for="Ai4ez618">
-                    Field label
+                    <span class="fd-checkbox__text">
+                        Field label
+                    </span>
                 </label>
             </div>
             <div class="fd-form-group__item fd-form-item">
                 <input type="checkbox" class="fd-checkbox" id="Ai4ez619">
                 <label class="fd-checkbox__label" for="Ai4ez619">
-                    Field label
+                    <span class="fd-checkbox__text">
+                        Field label
+                    </span>
                 </label>
             </div>
         </div>