Fixed #1495 - Change button/maskClassName properties with button/mask…

…Class properties on SpeedDial
primefaces · Sep 1, 2021 · 2b3e461 · 2b3e461
1 parent a6f0505
commit 2b3e461
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 14 deletions.
diff --git a/api-generator/components/speeddial.js b/api-generator/components/speeddial.js
@@ -54,13 +54,13 @@ const SpeedDialProps = [
         description: "Whether the actions close when clicked outside."
     },
     {
-        name: "buttonClassName",
+        name: "buttonClass",
         type: "string",
         default: "null",
         description: "Style class of the button element."
     },
     {
-        name: "maskClassName",
+        name: "maskClass",
         type: "string",
         default: "null",
         description: "Style class of the mask element."

diff --git a/src/components/speeddial/SpeedDial.d.ts b/src/components/speeddial/SpeedDial.d.ts
@@ -10,9 +10,9 @@ interface SpeedDialProps {
     mask?: boolean;
     disabled?: boolean;
     hideOnClickOutside?: boolean;
-    buttonClassName?: string;
+    buttonClass?: string;
     maskStyle?: string;
-    maskClassName?: string;
+    maskClass?: string;
     showIcon?: string;
     hideIcon?: string;
     rotateAnimation?: boolean;

diff --git a/src/components/speeddial/SpeedDial.vue b/src/components/speeddial/SpeedDial.vue
@@ -1,7 +1,7 @@
 <template>
     <div :ref="containerRef" :class="containerClass" :style="style">
         <slot name="button" :toggle="onClick">
-            <SDButton type="button" :class="buttonClass" :icon="iconClassName" @click="onClick($event)" :disabled="disabled" />
+            <SDButton type="button" :class="buttonClassName" :icon="iconClassName" @click="onClick($event)" :disabled="disabled" />
         </slot>
         <ul :ref="listRef" class="p-speeddial-list" role="menu">
             <li v-for="(item, index) of model" :key="index" class="p-speeddial-item" :style="getItemStyle(index)" role="none">
@@ -16,7 +16,7 @@
         </ul>
     </div>
     <template v-if="mask">
-        <div :class="maskClass" :style="maskStyle"></div>
+        <div :class="maskClassName" :style="maskStyle"></div>
     </template>
 </template>
 
@@ -61,9 +61,9 @@ export default {
             type: Boolean,
             default: true
         },
-        buttonClassName: null,
+        buttonClass: null,
         maskStyle: null,
-        maskClassName: null,
+        maskClass: null,
         showIcon: {
             type: String,
             default: 'pi pi-plus'
@@ -243,18 +243,18 @@ export default {
                 'p-disabled': this.disabled
             }, this.class];
         },
-        buttonClass() {
+        buttonClassName() {
             return ['p-speeddial-button p-button-rounded', {
                 'p-speeddial-rotate': this.rotateAnimation && !this.hideIcon
-            }, this.buttonClassName];
+            }, this.buttonClass];
         },
         iconClassName() {
             return this.d_visible && !!this.hideIcon ? this.hideIcon : this.showIcon;
         },
-        maskClass() {
+        maskClassName() {
             return ['p-speeddial-mask', {
                 'p-speeddial-mask-visible': this.d_visible
-            }, this.maskClassName];
+            }, this.maskClass];
         }
     },
     components: {

diff --git a/src/views/speeddial/SpeedDialDoc.vue b/src/views/speeddial/SpeedDialDoc.vue
@@ -132,13 +132,13 @@ items: [
                         <td>Whether the actions close when clicked outside.</td>
                     </tr>
                     <tr>
-                        <td>buttonClassName</td>
+                        <td>buttonClass</td>
                         <td>string</td>
                         <td>null</td>
                         <td>Style class of the button element.</td>
                     </tr>
                     <tr>
-                        <td>maskClassName</td>
+                        <td>maskClass</td>
                         <td>string</td>
                         <td>null</td>
                         <td>Style class of the mask element.</td>