Fixed #5719 - Fieldset: #legend updates

components/lib/fieldset/Fieldset.d.ts

@@ -177,8 +177,15 @@ export interface FieldsetSlots {
     default: () => VNode[];
     /**
      * Custom legend template.
+     * @param {Object} scope - legend slot's params.
      */
-    legend: () => VNode[];
+    legend(scope: {
+        /**
+         * Toggle function.
+         * @param {Event} event - Browser event
+         */
+        toggleCallback: (event: Event) => void;
+    }): VNode[];
     /**
      * @deprecated since v4.0. Use the 'toggleicon' slot instead.
      * Custom toggler icon template.

components/lib/fieldset/Fieldset.vue

@@ -1,30 +1,27 @@
 <template>
     <fieldset :class="cx('root')" v-bind="ptmi('root')">
         <legend :class="cx('legend')" v-bind="ptm('legend')">
-            <slot v-if="!toggleable" name="legend">
+            <slot name="legend" :toggleCallback="toggle">
-                <span :id="id + '_header'" :class="cx('legendLabel')" v-bind="ptm('legendLabel')">{{ legend }}</span>
+                <span v-if="!toggleable" :id="id + '_header'" :class="cx('legendLabel')" v-bind="ptm('legendLabel')">{{ legend }}</span>
-            </slot>
+                <button
-            <a
+                    v-if="toggleable"
-                v-if="toggleable"
+                    :id="id + '_header'"
-                :id="id + '_header'"
+                    v-ripple
-                v-ripple
+                    type="button"
-                tabindex="0"
+                    :aria-controls="id + '_content'"
-                role="button"
+                    :aria-expanded="!d_collapsed"
-                :aria-controls="id + '_content'"
+                    :aria-label="buttonAriaLabel"
-                :aria-expanded="!d_collapsed"
+                    @click="toggle"
-                :aria-label="buttonAriaLabel"
+                    @keydown="onKeyDown"
-                @click="toggle"
+                    v-bind="{ ...toggleButtonProps, ...ptm('toggler') }"
-                @keydown="onKeyDown"
+                >
-                v-bind="{ ...toggleButtonProps, ...ptm('toggler') }"
+                    <!--TODO: togglericon deprecated since v4.0-->
-            >
+                    <slot :name="$slots.toggleicon ? 'toggleicon' : 'togglericon'" :collapsed="d_collapsed">
-                <!--TODO: togglericon deprecated since v4.0-->
+                        <component :is="d_collapsed ? 'PlusIcon' : 'MinusIcon'" :class="cx('toggleIcon')" v-bind="ptm('toggleIcon')" />
-                <slot :name="$slots.toggleicon ? 'toggleicon' : 'togglericon'" :collapsed="d_collapsed">
+                    </slot>
-                    <component :is="d_collapsed ? 'PlusIcon' : 'MinusIcon'" :class="cx('toggleIcon')" v-bind="ptm('toggleIcon')" />
-                </slot>
-                <slot name="legend">
                     <span :class="cx('legendLabel')" v-bind="ptm('legendLabel')">{{ legend }}</span>
-                </slot>
+                </button>
-            </a>
+            </slot>
         </legend>
         <transition name="p-toggleable-content" v-bind="ptm('transition')">
             <div v-show="!d_collapsed" :id="id + '_content'" :class="cx('contentContainer')" role="region" :aria-labelledby="id + '_header'" v-bind="ptm('contentContainer')">

components/lib/fieldset/style/FieldsetStyle.js

@@ -12,7 +12,6 @@ const theme = ({ dt }) => `
 
 .p-fieldset-legend {
     background: ${dt('fieldset.legend.background')};
-    font-weight: 600;
     border-radius: 6px;
     border: 0 none;
     padding: 0.5rem 0.75rem;
@@ -23,7 +22,7 @@ const theme = ({ dt }) => `
     padding: 0;
 }
 
-.p-fieldset-toggleable > .p-fieldset-legend > a {
+.p-fieldset-toggleable > .p-fieldset-legend > button {
     cursor: pointer;
     user-select: none;
     overflow: hidden;
@@ -34,12 +33,18 @@ const theme = ({ dt }) => `
     align-items: center;
     justify-content: center;
     padding: 0.5rem 0.75rem;
+    background: transparent;
     color: ${dt('fieldset.legend.color')};
+    border: 0 none;
     border-radius: ${dt('border.radius.md')};
     transition: background ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
     outline-color: transparent;
 }
 
+.p-fieldset-legend-label {
+    font-weight: 600;
+}
+
 .p-fieldset-toggleable > .p-fieldset-legend > a:focus-visible {
     outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
     outline-offset: ${dt('focus.ring.offset')};

doc/common/apidoc/index.json

@@ -31719,16 +31719,22 @@
                             "readonly": false,
                             "type": "Function",
                             "default": ""
-                        },
-                        {
-                            "name": "legend",
-                            "optional": false,
-                            "readonly": false,
-                            "type": "Function",
-                            "default": ""
                         }
                     ],
                     "methods": [
+                        {
+                            "name": "legend",
+                            "parameters": [
+                                {
+                                    "name": "scope",
+                                    "optional": false,
+                                    "type": "{\n \t <span class=\"ml-3 doc-option-parameter-name\">toggleCallback</span>: <span class=\"doc-option-parameter-type\">(<span class=\"doc-option-parameter-name\">event</span>: Event) &rArr; void</span>, <span class=\"doc-option-parameter-type\">// Toggle function.</span>\n}",
+                                    "description": "legend slot's params."
+                                }
+                            ],
+                            "returnType": "VNode<RendererNode, RendererElement, Object>[]",
+                            "description": "Custom legend template."
+                        },
                         {
                             "name": "togglericon",
                             "parameters": [
@@ -31918,7 +31924,7 @@
                     "description": "Defines methods that can be accessed by the component's reference.",
                     "values": [
                         {
-                            "name": "basicUpload",
+                            "name": "upload",
                             "parameters": [],
                             "returnType": "void",
                             "description": "Upload file."