From 3825bf7c600f77e3cc409ae0f8b97c220e0f6dd5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bahad=C4=B1r=20Sofuo=C4=9Flu?= <bahadirsofuoglu@gmail.com>
Date: Mon, 2 Jan 2023 11:40:36 +0300
Subject: [PATCH] Button class style and dropdown icon customization

---
 api-generator/components/splitbutton.js | 36 +++++++++++++++++++++++++
 components/splitbutton/SplitButton.d.ts | 20 ++++++++++++++
 components/splitbutton/SplitButton.vue  | 34 ++++++++++++++++++++---
 pages/splitbutton/SplitButtonDoc.vue    | 30 +++++++++++++++++++++
 4 files changed, 116 insertions(+), 4 deletions(-)

diff --git a/api-generator/components/splitbutton.js b/api-generator/components/splitbutton.js
index 8fc5ec1bf..1a5c40dcc 100644
--- a/api-generator/components/splitbutton.js
+++ b/api-generator/components/splitbutton.js
@@ -35,6 +35,12 @@ const SplitButtonProps = [
         default: 'body',
         description: 'A valid query selector or an HTMLElement to specify where the overlay gets attached.'
     },
+    {
+        name: 'disabled',
+        type: 'boolean',
+        default: 'false',
+        description: 'When present, it specifies that the element should be disabled.'
+    },
     {
         name: 'class',
         type: 'string',
@@ -46,6 +52,36 @@ const SplitButtonProps = [
         type: 'any',
         default: 'null',
         description: 'Inline of the component.'
+    },
+    {
+        name: 'buttonClass',
+        type: 'string',
+        default: 'null',
+        description: 'Style class of the button.'
+    },
+    {
+        name: 'menuButtonIcon',
+        type: 'string',
+        default: 'null',
+        description: 'Name of the menu button icon.'
+    },
+    {
+        name: 'menuButtonClass',
+        type: 'string',
+        default: 'null',
+        description: 'Style class of the menu button.'
+    },
+    {
+        name: 'menuClass',
+        type: 'string',
+        default: 'null',
+        description: 'Style class of the menu.'
+    },
+    {
+        name: 'menuStyle',
+        type: 'any',
+        default: 'null',
+        description: 'Inline style of the menu.'
     }
 ];
 
diff --git a/components/splitbutton/SplitButton.d.ts b/components/splitbutton/SplitButton.d.ts
index 64f479a20..bab84671e 100755
--- a/components/splitbutton/SplitButton.d.ts
+++ b/components/splitbutton/SplitButton.d.ts
@@ -53,6 +53,26 @@ export interface SplitButtonProps {
      * Uses to pass all properties of the HTMLButtonElement to the menu button.
      */
     menuButtonProps?: ButtonHTMLAttributes | undefined;
+    /**
+     * Style class of the button.
+     */
+    buttonClass?: string | undefined;
+    /**
+     * Name of the menu button icon.
+     */
+    menuButtonIcon?: string | undefined;
+    /**
+     * Style class of the menu button.
+     */
+    menuButtonClass?: string | undefined;
+    /**
+     * Style class of the menu.
+     */
+    menuClass?: string | undefined;
+    /**
+     * Inline style of the menu.
+     */
+    menuStyle?: any | undefined;
 }
 
 export interface SplitButtonSlots {
diff --git a/components/splitbutton/SplitButton.vue b/components/splitbutton/SplitButton.vue
index edb5a174f..6d4d59192 100755
--- a/components/splitbutton/SplitButton.vue
+++ b/components/splitbutton/SplitButton.vue
@@ -1,13 +1,13 @@
 <template>
     <div :class="containerClass" :style="style">
         <slot>
-            <PVSButton type="button" class="p-splitbutton-defaultbutton" :icon="icon" :label="label" :disabled="disabled" :aria-label="label" @click="onDefaultButtonClick" v-bind="buttonProps" />
+            <PVSButton type="button" :class="buttonClasses" :icon="icon" :label="label" :disabled="disabled" :aria-label="label" @click="onDefaultButtonClick" v-bind="buttonProps" />
         </slot>
         <PVSButton
             ref="button"
             type="button"
-            class="p-splitbutton-menubutton"
-            icon="pi pi-chevron-down"
+            :class="menuButtonClasses"
+            :icon="menuButtonIcon"
             :disabled="disabled"
             aria-haspopup="true"
             :aria-expanded="isExpanded"
@@ -16,7 +16,7 @@
             @keydown="onDropdownKeydown"
             v-bind="menuButtonProps"
         />
-        <PVSMenu ref="menu" :id="ariaId + '_overlay'" :model="model" :popup="true" :autoZIndex="autoZIndex" :baseZIndex="baseZIndex" :appendTo="appendTo" />
+        <PVSMenu ref="menu" :id="ariaId + '_overlay'" :model="model" :popup="true" :autoZIndex="autoZIndex" :baseZIndex="baseZIndex" :appendTo="appendTo" :style="menuStyle" :class="menuClass" />
     </div>
 </template>
 
@@ -68,9 +68,29 @@ export default {
             type: null,
             default: null
         },
+        buttonClass: {
+            type: String,
+            default: null
+        },
         menuButtonProps: {
             type: null,
             default: null
+        },
+        menuButtonIcon: {
+            type: String,
+            default: 'pi pi-chevron-down'
+        },
+        menuButtonClass: {
+            type: String,
+            default: null
+        },
+        menuClass: {
+            type: String,
+            default: null
+        },
+        menuStyle: {
+            type: null,
+            default: null
         }
     },
     data() {
@@ -99,6 +119,12 @@ export default {
         },
         containerClass() {
             return ['p-splitbutton p-component', this.class];
+        },
+        menuButtonClasses() {
+            return ['p-splitbutton-menubutton', this.menuButtonClass];
+        },
+        buttonClasses() {
+            return ['p-splitbutton-defaultbutton', this.buttonClass];
         }
     },
     components: {
diff --git a/pages/splitbutton/SplitButtonDoc.vue b/pages/splitbutton/SplitButtonDoc.vue
index 5bac82abc..9ec855d6a 100755
--- a/pages/splitbutton/SplitButtonDoc.vue
+++ b/pages/splitbutton/SplitButtonDoc.vue
@@ -182,6 +182,36 @@ export default {
                         <td>null</td>
                         <td>Uses to pass all properties of the HTMLButtonElement to the menu button.</td>
                     </tr>
+                    <tr>
+                        <td>buttonClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the button.</td>
+                    </tr>
+                    <tr>
+                        <td>menuButtonIcon</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Name of the menu button icon.</td>
+                    </tr>
+                    <tr>
+                        <td>menuButtonClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the menu button.</td>
+                    </tr>
+                    <tr>
+                        <td>menuClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the menu.</td>
+                    </tr>
+                    <tr>
+                        <td>menuStyle</td>
+                        <td>any</td>
+                        <td>null</td>
+                        <td>Inline style of the menu.</td>
+                    </tr>
                 </tbody>
             </table>
         </div>