Fix #4144: Add new props to SplitButton component (#4145)

* Fix #4144: Add new props to SplitButton component * Update API doc --------- Co-authored-by: GitHub Actions Bot <>
primefaces · Mar 9, 2023 · 57e42cd · 57e42cd
1 parent 6c46d59
commit 57e42cd
Show file tree

Hide file tree

Showing 11 changed files with 269 additions and 173 deletions.
diff --git a/components/doc/common/apidoc/index.json b/components/doc/common/apidoc/index.json
@@ -24753,6 +24753,54 @@
                             "default": "",
                             "description": "MenuModel instance to define the overlay items."
                         },
+                        {
+                            "name": "outlined",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Add a border class without a background initially."
+                        },
+                        {
+                            "name": "raised",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Add a shadow to indicate elevation."
+                        },
+                        {
+                            "name": "rounded",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Add a circular border radius to the button."
+                        },
+                        {
+                            "name": "severity",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"success\" | \"warning\" | \"info\" | \"danger\" | \"secondary\"",
+                            "default": "",
+                            "description": "Defines the style of the button, valid values are \"secondary\", \"success\", \"info\", \"warning\", \"danger\"."
+                        },
+                        {
+                            "name": "size",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "\"small\" | \"large\"",
+                            "default": "",
+                            "description": "Defines the size of the button, valid values are \"small\" and \"large\"."
+                        },
+                        {
+                            "name": "text",
+                            "optional": true,
+                            "readonly": false,
+                            "type": "boolean",
+                            "default": "false",
+                            "description": "Add a textual class to the button without a background initially."
+                        },
                         {
                             "name": "tooltip",
                             "optional": true,

diff --git a/components/doc/splitbutton/outlineddoc.js b/components/doc/splitbutton/outlineddoc.js
@@ -46,13 +46,13 @@ export function OutlinedDoc(props) {
     const code = {
         basic: `
 <Toast ref={toast}></Toast>
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-outlined" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-secondary p-button-outlined" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-success p-button-outlined" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-info p-button-outlined" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-warning p-button-outlined" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-help p-button-outlined" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-danger p-button-outlined" />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} outlined />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" outlined />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" outlined />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" outlined />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" outlined />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" outlined />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" outlined />
         `,
         javascript: `
 import React, { useRef } from 'react';
@@ -101,13 +101,13 @@ export default function OutlinedDemo() {
     return (
         <div className="card flex justify-content-center">
             <Toast ref={toast}></Toast>
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-outlined" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-secondary p-button-outlined" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-success p-button-outlined" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-info p-button-outlined" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-warning p-button-outlined" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-help p-button-outlined" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-danger p-button-outlined" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" outlined />
         </div>
     )
 }
@@ -160,13 +160,13 @@ export default function OutlinedDemo() {
     return (
         <div className="card flex justify-content-center">
             <Toast ref={toast}></Toast>
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-outlined" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-secondary p-button-outlined" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-success p-button-outlined" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-info p-button-outlined" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-warning p-button-outlined" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-help p-button-outlined" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-danger p-button-outlined" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" outlined />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" outlined />
         </div>
     )
 }
@@ -180,13 +180,13 @@ export default function OutlinedDemo() {
             </DocSectionText>
             <div className="card flex flex-wrap justify-content-center gap-3">
                 <Toast ref={toast}></Toast>
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-outlined" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-secondary p-button-outlined" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-success p-button-outlined" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-info p-button-outlined" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-warning p-button-outlined" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-help p-button-outlined" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-danger p-button-outlined" />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} outlined />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" outlined />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" outlined />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" outlined />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" outlined />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" outlined />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" outlined />
             </div>
             <DocSectionCode code={code} />
         </>

diff --git a/components/doc/splitbutton/raiseddoc.js b/components/doc/splitbutton/raiseddoc.js
@@ -46,13 +46,13 @@ export function RaisedDoc(props) {
     const code = {
         basic: `
 <Toast ref={toast}></Toast>
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-raised" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-secondary p-button-raised" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-success p-button-raised" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-info p-button-raised" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-warning p-button-raised" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-help p-button-raised" />
-<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-danger p-button-raised" />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} raised />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" raised />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" raised />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" raised />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" raised />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" raised />
+<SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" raised />
         `,
         javascript: `
 import React, { useRef } from 'react';
@@ -101,13 +101,13 @@ export default function RaisedDemo() {
     return (
         <div className="card flex justify-content-center">
             <Toast ref={toast}></Toast>
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-raised" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-secondary p-button-raised" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-success p-button-raised" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-info p-button-raised" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-warning p-button-raised" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-help p-button-raised" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-danger p-button-raised" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" raised />
         </div>
     )
 }
@@ -160,13 +160,13 @@ export default function RaisedDemo() {
     return (
         <div className="card flex justify-content-center">
             <Toast ref={toast}></Toast>
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-raised" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-secondary p-button-raised" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-success p-button-raised" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-info p-button-raised" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-warning p-button-raised" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-help p-button-raised" />
-            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-danger p-button-raised" />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" raised />
+            <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" raised />
         </div>
     )
 }
@@ -180,13 +180,13 @@ export default function RaisedDemo() {
             </DocSectionText>
             <div className="card flex flex-wrap justify-content-center gap-3">
                 <Toast ref={toast}></Toast>
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-raised" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-secondary p-button-raised" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-success p-button-raised" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-info p-button-raised" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-warning p-button-raised" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-help p-button-raised" />
-                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} className="p-button-danger p-button-raised" />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} raised />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="secondary" raised />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="success" raised />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="info" raised />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="warning" raised />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="help" raised />
+                <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items} severity="danger" raised />
             </div>
             <DocSectionCode code={code} />
         </>