Fixed #3697 - SplitButton: New Styling properties

api-generator/components/splitbutton.js

@@ -58,6 +58,42 @@ const SplitButtonProps = [
         type: 'string',
         default: 'null',
         description: 'Name of the menu button icon.'
+    },
+    {
+        name: 'severity',
+        type: 'string',
+        default: 'null',
+        description: 'Defines the style of the button, valid values are "secondary", "success", "info", "warning", "help", "danger".'
+    },
+    {
+        name: 'raised',
+        type: 'boolean',
+        default: 'false',
+        description: 'Add a shadow to indicate elevation.'
+    },
+    {
+        name: 'rounded',
+        type: 'boolean',
+        default: 'false',
+        description: 'Add a circular border radius to the button.'
+    },
+    {
+        name: 'text',
+        type: 'boolean',
+        default: 'false',
+        description: 'Add a textual class to the button without a background initially.'
+    },
+    {
+        name: 'outlined',
+        type: 'boolean',
+        default: 'false',
+        description: 'Add a border class without a background initially.'
+    },
+    {
+        name: 'size',
+        type: 'string',
+        default: 'null',
+        description: 'Defines the size of the button, valid values are "small" and "large".'
     }
 ];
 

components/splitbutton/SplitButton.d.ts

@@ -68,6 +68,34 @@ export interface SplitButtonProps {
      * Name of the menu button icon.
      */
     menuButtonIcon?: string | undefined;
+    /**
+     * Defines the style of the button.
+     */
+    severity?: 'secondary' | 'success' | 'info' | 'warning' | 'help' | 'danger' | undefined;
+    /**
+     * Add a shadow to indicate elevation.
+     * @defaultValue false
+     */
+    raised?: boolean | undefined;
+    /**
+     * Add a circular border radius to the button.
+     * @defaultValue false
+     */
+    rounded?: boolean | undefined;
+    /**
+     * Add a textual class to the button without a background initially.
+     * @defaultValue false
+     */
+    text?: boolean | undefined;
+    /**
+     * Add a border class without a background initially.
+     * @defaultValue false
+     */
+    outlined?: boolean | undefined;
+    /**
+     * Defines the size of the button.
+     */
+    size?: 'small' | 'large' | undefined;
 }
 
 /**

components/splitbutton/SplitButton.vue

@@ -76,6 +76,30 @@ export default {
         menuButtonIcon: {
             type: String,
             default: 'pi pi-chevron-down'
+        },
+        severity: {
+            type: String,
+            default: null
+        },
+        raised: {
+            type: Boolean,
+            default: false
+        },
+        rounded: {
+            type: Boolean,
+            default: false
+        },
+        text: {
+            type: Boolean,
+            default: false
+        },
+        outlined: {
+            type: Boolean,
+            default: false
+        },
+        size: {
+            type: String,
+            default: null
         }
     },
     data() {
@@ -105,7 +129,19 @@ export default {
             return UniqueComponentId();
         },
         containerClass() {
-            return ['p-splitbutton p-component', this.class];
+            return [
+                'p-splitbutton p-component',
+                this.class,
+                {
+                    [`p-button-${this.severity}`]: this.severity,
+                    'p-button-raised': this.raised,
+                    'p-button-rounded': this.rounded,
+                    'p-button-text': this.text,
+                    'p-button-outlined': this.outlined,
+                    'p-button-sm': this.size === 'small',
+                    'p-button-lg': this.size === 'large'
+                }
+            ];
         }
     },
     components: {