Button class style and dropdown icon customization

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 {

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: {