Merge pull request #455 from ambroisemaupate/fix/fieldset

fix(DsfrFieldset): Missing `fr-fieldset__element` elements to wrap Fieldset hint and content

Author: laruiss

src/components/DsfrFieldset/DsfrFieldset.spec.js

@@ -29,17 +29,21 @@ describe('DsfrFieldset', () => {
     const hintByText = getByText(hint)
 
     const hintEl = legendEl.nextElementSibling
+    const hintInnerEl = hintEl.firstElementChild
+
+    const contentEl = hintEl.nextElementSibling
 
     expect(fieldsetEl).not.toBeNull()
     expect(fieldsetEl).toHaveClass('fr-fieldset')
     expect(legendEl).toBe(legendByText)
-    expect(fieldsetByText).toBe(fieldsetEl)
-    expect(hintByText).toBe(hintEl)
+    expect(fieldsetByText).toBe(contentEl)
+    expect(hintByText).toBe(hintInnerEl)
     expect(legendEl).toHaveClass('fr-fieldset__legend')
     expect(legendEl).toHaveClass('test-legend-class')
     expect(legendEl).toHaveAttribute('id', 'legend-id')
-    expect(hintEl).toHaveClass('fr-hint-text')
-    expect(hintEl).toHaveClass('test-hint-class')
+    expect(hintEl).toHaveClass('fr-fieldset__element')
+    expect(hintInnerEl).toHaveClass('fr-hint-text')
+    expect(hintInnerEl).toHaveClass('test-hint-class')
   })
 
   it('should render a complex DsfrFieldset component', () => {
@@ -64,14 +68,18 @@ describe('DsfrFieldset', () => {
     const hintByText = getByText(hint)
 
     const hintEl = legendEl.nextElementSibling
+    const hintInnerEl = hintEl.firstElementChild
+
+    const contentEl = hintEl.nextElementSibling
 
     expect(fieldsetEl).not.toBeNull()
     expect(fieldsetEl).toHaveClass('fr-fieldset')
     expect(legendEl).toBe(legendByText)
-    expect(fieldsetByText).toBe(fieldsetEl)
-    expect(hintByText).toBe(hintEl)
+    expect(fieldsetByText).toBe(contentEl)
+    expect(hintByText).toBe(hintInnerEl)
     expect(legendEl).toHaveClass('fr-fieldset__legend')
     expect(legendEl).toHaveAttribute('id', 'legend-id')
-    expect(hintEl).toHaveClass('fr-hint-text')
+    expect(hintEl).toHaveClass('fr-fieldset__element')
+    expect(hintInnerEl).toHaveClass('fr-hint-text')
   })
 })

src/components/DsfrFieldset/DsfrFieldset.stories.js

@@ -91,7 +91,7 @@ export const EnsemblePersonnaliseDeChamps = (args) => ({
       :hint-class="hintClass"
     >
       <template #legend>
-        {{ legend }} avec <em>de l’italique</em>
+        <h6>{{ legend }} avec <em>de l’italique</em> dans un titre</h6>
       </template>
       <template #hint>
         {{ hint }} avec <strong>du gras</strong>

src/components/DsfrFieldset/DsfrFieldset.vue

@@ -41,17 +41,22 @@ export default defineComponent({
       <!-- @slot Slot pour le contenu du titre du `fieldset` (sera dans `<legend class="fr-fieldset__legend">`). Une props du même nom est utilisable pour du texte simple sans mise en forme. -->
       <slot name="legend" />
     </legend>
-    <span
+    <div
       v-if="hint || $slots.hint?.().length"
-      class="fr-hint-text"
-      :class="hintClass"
+      class="fr-fieldset__element"
     >
+      <span
+        class="fr-hint-text"
+        :class="hintClass"
+      >
       {{ hint }}
-      <!-- @slot Slot pour le contenu de l’indice (sera dans `<span class="fr-hint-text">` qui sera dans `</legend>`). Une **props du même nom est utilisable pour du texte simple** sans mise en forme. -->
+        <!-- @slot Slot pour le contenu de l’indice (sera dans `<span class="fr-hint-text">` qui sera dans `</legend>`). Une **props du même nom est utilisable pour du texte simple** sans mise en forme. -->
       <slot name="hint" />
     </span>
-
+    </div>
     <!-- @slot Slot par défaut pour le contenu du fieldset (sera dans `<fieldset>`, après `</legend>`) -->
-    <slot />
+    <div class="fr-fieldset__element">
+      <slot />
+    </div>
   </fieldset>
 </template>