Fixing bug for issues 4595 - Button slots not working

primefaces · Oct 11, 2023 · 56cfe50 · 56cfe50
1 parent aafc35b
commit 56cfe50
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 9 deletions.
diff --git a/components/lib/button/Button.spec.js b/components/lib/button/Button.spec.js
@@ -79,6 +79,36 @@ describe('Button.vue', () => {
             }
         });
 
-        expect(wrapper.html()).toBe(`<button class="p-button p-component" type="button" data-pc-name="button" data-pc-section="root" data-pd-ripple="true"><span class="ml-2 font-bold">Default PrimeVue Button</span></button>`);
+        expect(wrapper.html()).toBe(`<button class="p-button p-component" type="button" data-pc-name="button" data-pc-section="root">
+  <!--v-if--><span class="ml-2 font-bold">Default PrimeVue Button</span>
+</button>`);
+    });
+
+    it('should render icon slot', () => {
+        const wrapper = mount(Button, {
+            slots: {
+                default: h('span', { class: 'ml-2 font-bold' }, 'Default PrimeVue Button'),
+                icon: h('i', { class: 'pi pi-check' })
+            }
+        });
+
+        expect(wrapper.html()).toBe(`<button class="p-button p-component" type="button" data-pc-name="button" data-pc-section="root"><i class="pi pi-check"></i><span class="ml-2 font-bold">Default PrimeVue Button</span></button>`);
+    });
+
+    it('should render loadingicon slot', () => {
+        const wrapper = mount(Button, {
+            slots: {
+                default: h('span', { class: 'ml-2 font-bold' }, 'Default PrimeVue Button'),
+                icon: h('i', { class: 'pi pi-check' }),
+                loadingicon: h('i', { class: 'pi pi-spin pi-spinner' })
+            },
+            props: {
+                loading: true
+            }
+        });
+
+        expect(wrapper.html()).toBe(
+            `<button class="p-button p-component p-disabled p-button-loading" type="button" disabled="" data-pc-name="button" data-pc-section="root"><i class="pi pi-spin pi-spinner"></i><span class="ml-2 font-bold">Default PrimeVue Button</span></button>`
+        );
     });
 });
diff --git a/components/lib/button/Button.vue b/components/lib/button/Button.vue
@@ -1,13 +1,13 @@
 <template>
     <button v-ripple :class="cx('root')" type="button" :aria-label="defaultAriaLabel" :disabled="disabled" v-bind="getPTOptions('root')" data-pc-name="button" :data-pc-severity="severity">
+        <slot v-if="loading" name="loadingicon" :class="[cx('loadingIcon'), cx('icon')]">
+            <span v-if="loadingIcon" :class="[cx('loadingIcon'), cx('icon'), loadingIcon]" v-bind="ptm('loadingIcon')" />
+            <SpinnerIcon v-else :class="[cx('loadingIcon'), cx('icon')]" spin v-bind="ptm('loadingIcon')" />
+        </slot>
+        <slot v-else name="icon" :class="[cx('icon')]">
+            <span v-if="icon" :class="[cx('icon'), icon, iconClass]" v-bind="ptm('icon')"></span>
+        </slot>
         <slot>
-            <slot v-if="loading" name="loadingicon" :class="[cx('loadingIcon'), cx('icon')]">
-                <span v-if="loadingIcon" :class="[cx('loadingIcon'), cx('icon'), loadingIcon]" v-bind="ptm('loadingIcon')" />
-                <SpinnerIcon v-else :class="[cx('loadingIcon'), cx('icon')]" spin v-bind="ptm('loadingIcon')" />
-            </slot>
-            <slot v-else name="icon" :class="[cx('icon')]">
-                <span v-if="icon" :class="[cx('icon'), icon, iconClass]" v-bind="ptm('icon')"></span>
-            </slot>
             <span :class="cx('label')" v-bind="ptm('label')">{{ label || '&nbsp;' }}</span>
             <Badge v-if="badge" :value="badge" :class="badgeClass" :unstyled="unstyled" v-bind="ptm('badge')"></Badge>
         </slot>
@@ -37,6 +37,9 @@ export default {
         }
     },
     computed: {
+        slots() {
+            return this.$slots;
+        },
         disabled() {
             return this.$attrs.disabled || this.$attrs.disabled === '' || this.loading;
         },

diff --git a/components/lib/button/style/ButtonStyle.js b/components/lib/button/style/ButtonStyle.js
@@ -4,7 +4,7 @@ const classes = {
     root: ({ instance, props }) => [
         'p-button p-component',
         {
-            'p-button-icon-only': instance.hasIcon && !props.label && !props.badge,
+            'p-button-icon-only': instance.hasIcon && !props.label && !props.badge && !instance.slots.default,
             'p-button-vertical': (props.iconPos === 'top' || props.iconPos === 'bottom') && props.label,
             'p-disabled': instance.$attrs.disabled || instance.$attrs.disabled === '' || props.loading,
             'p-button-loading': props.loading,