Fix primefaces#1939/primefaces#1882: SplitButton buttonClassName, men…

…uButtonClassName
melloware · Nov 23, 2021 · f1152ae · f1152ae
1 parent 8461882
commit f1152ae
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 7 deletions.
diff --git a/src/components/splitbutton/SplitButton.d.ts b/src/components/splitbutton/SplitButton.d.ts
@@ -14,8 +14,10 @@ export interface SplitButtonProps {
     disabled?: boolean;
     style?: object;
     className?: string;
+    buttonClassName?: string;
     menuStyle?: object;
     menuClassName?: string;
+    menuButtonClassName?: string;
     tabIndex?: number;
     appendTo?: SplitButtonAppendToType;
     tooltip?: string;

diff --git a/src/components/splitbutton/SplitButton.js b/src/components/splitbutton/SplitButton.js
@@ -18,8 +18,10 @@ export class SplitButton extends Component {
         disabled: null,
         style: null,
         className: null,
+        buttonClassName: null,
         menuStyle: null,
         menuClassName: null,
+        menuButtonClassName: null,
         tabIndex: null,
         appendTo: null,
         tooltip: null,
@@ -40,8 +42,10 @@ export class SplitButton extends Component {
         disabled: PropTypes.bool,
         style: PropTypes.object,
         className: PropTypes.string,
+        buttonClassName: PropTypes.string,
         menuStyle: PropTypes.object,
         menuClassName: PropTypes.string,
+        menuButtonClassName: PropTypes.string,
         tabIndex: PropTypes.number,
         appendTo: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
         tooltip: PropTypes.string,
@@ -241,15 +245,17 @@ export class SplitButton extends Component {
 
     render() {
         let className = classNames('p-splitbutton p-component', this.props.className, { 'p-disabled': this.props.disabled });
+        let buttonClassName = classNames('p-splitbutton-defaultbutton', this.props.buttonClassName);
+        let menuButtonClassName = classNames('p-splitbutton-menubutton', this.props.menuButtonClassName);
         let items = this.renderItems();
         const buttonContent = this.props.buttonTemplate ? ObjectUtils.getJSXElement(this.props.buttonTemplate, this.props) : null;
 
         return (
             <div id={this.state.id} className={className} style={this.props.style} ref={el => this.container = el}>
-                <Button ref={(el) => this.defaultButton = el} type="button" className="p-splitbutton-defaultbutton" icon={this.props.icon} label={this.props.label} onClick={this.props.onClick} disabled={this.props.disabled} tabIndex={this.props.tabIndex}>
+                <Button ref={(el) => this.defaultButton = el} type="button" className={buttonClassName} icon={this.props.icon} label={this.props.label} onClick={this.props.onClick} disabled={this.props.disabled} tabIndex={this.props.tabIndex}>
                     {buttonContent}
                 </Button>
-                <Button type="button" className="p-splitbutton-menubutton" icon={this.props.dropdownIcon} onClick={this.onDropdownButtonClick} disabled={this.props.disabled}
+                <Button type="button" className={menuButtonClassName} icon={this.props.dropdownIcon} onClick={this.onDropdownButtonClick} disabled={this.props.disabled}
                     aria-expanded={this.state.overlayVisible} aria-haspopup aria-owns={this.state.id + '_overlay'} />
                 <SplitButtonPanel ref={this.overlayRef} appendTo={this.props.appendTo} id={this.state.id + '_overlay'}
                     menuStyle={this.props.menuStyle} menuClassName={this.props.menuClassName} onClick={this.onPanelClick}

diff --git a/src/showcase/splitbutton/SplitButtonDemo.js b/src/showcase/splitbutton/SplitButtonDemo.js
@@ -66,7 +66,7 @@ export class SplitButtonDemo extends Component {
                         <SplitButton label="Save" icon="pi pi-plus" onClick={this.save} model={this.items}></SplitButton>
 
                         <h5>Severities</h5>
-                        <SplitButton label="Save" icon="pi pi-plus" model={this.items} className="p-mr-2"></SplitButton>
+                        <SplitButton label="Save" icon="pi pi-plus" model={this.items} className="p-mr-2" buttonClassName="p-button-outlined" menuButtonClassName="p-button-outlined"></SplitButton>
                         <SplitButton label="Save" icon="pi pi-plus" model={this.items} className="p-button-secondary p-mr-2"></SplitButton>
                         <SplitButton label="Save" icon="pi pi-plus" model={this.items} className="p-button-success p-mr-2"></SplitButton>
                         <SplitButton label="Save" icon="pi pi-plus" model={this.items} className="p-button-info p-mr-2"></SplitButton>

diff --git a/src/showcase/splitbutton/SplitButtonDoc.js b/src/showcase/splitbutton/SplitButtonDoc.js
@@ -69,7 +69,7 @@ export class SplitButtonDemo extends Component {
                     <SplitButton label="Save" icon="pi pi-plus" onClick={this.save} model={this.items}></SplitButton>
 
                     <h5>Severities</h5>
-                    <SplitButton label="Save" icon="pi pi-plus" model={this.items} className="p-mr-2"></SplitButton>
+                    <SplitButton label="Save" icon="pi pi-plus" model={this.items} className="p-mr-2" buttonClassName="p-button-outlined" menuButtonClassName="p-button-outlined"></SplitButton>
                     <SplitButton label="Save" icon="pi pi-plus" model={this.items} className="p-button-secondary p-mr-2"></SplitButton>
                     <SplitButton label="Save" icon="pi pi-plus" model={this.items} className="p-button-success p-mr-2"></SplitButton>
                     <SplitButton label="Save" icon="pi pi-plus" model={this.items} className="p-button-info p-mr-2"></SplitButton>
@@ -135,7 +135,7 @@ const SplitButtonDemo = () => {
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items}></SplitButton>
 
                 <h5>Severities</h5>
-                <SplitButton label="Save" icon="pi pi-plus" model={items} className="p-mr-2"></SplitButton>
+                <SplitButton label="Save" icon="pi pi-plus" model={items} className="p-mr-2" buttonClassName="p-button-outlined" menuButtonClassName="p-button-outlined"></SplitButton>
                 <SplitButton label="Save" icon="pi pi-plus" model={items} className="p-button-secondary p-mr-2"></SplitButton>
                 <SplitButton label="Save" icon="pi pi-plus" model={items} className="p-button-success p-mr-2"></SplitButton>
                 <SplitButton label="Save" icon="pi pi-plus" model={items} className="p-button-info p-mr-2"></SplitButton>
@@ -200,7 +200,7 @@ const SplitButtonDemo = () => {
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items}></SplitButton>
 
                 <h5>Severities</h5>
-                <SplitButton label="Save" icon="pi pi-plus" model={items} className="p-mr-2"></SplitButton>
+                <SplitButton label="Save" icon="pi pi-plus" model={items} className="p-mr-2" buttonClassName="p-button-outlined" menuButtonClassName="p-button-outlined"></SplitButton>
                 <SplitButton label="Save" icon="pi pi-plus" model={items} className="p-button-secondary p-mr-2"></SplitButton>
                 <SplitButton label="Save" icon="pi pi-plus" model={items} className="p-button-success p-mr-2"></SplitButton>
                 <SplitButton label="Save" icon="pi pi-plus" model={items} className="p-button-info p-mr-2"></SplitButton>
@@ -269,7 +269,7 @@ const SplitButtonDemo = () => {
                 <SplitButton label="Save" icon="pi pi-plus" onClick={save} model={items}></SplitButton>
 
                 <h5>Severities</h5>
-                <SplitButton label="Save" icon="pi pi-plus" model={items} className="p-mr-2"></SplitButton>
+                <SplitButton label="Save" icon="pi pi-plus" model={items} className="p-mr-2" buttonClassName="p-button-outlined" menuButtonClassName="p-button-outlined"></SplitButton>
                 <SplitButton label="Save" icon="pi pi-plus" model={items} className="p-button-secondary p-mr-2"></SplitButton>
                 <SplitButton label="Save" icon="pi pi-plus" model={items} className="p-button-success p-mr-2"></SplitButton>
                 <SplitButton label="Save" icon="pi pi-plus" model={items} className="p-button-info p-mr-2"></SplitButton>
@@ -438,6 +438,12 @@ export const SplitButtonDemo = () => {
                                         <td>null</td>
                                         <td>ClassName of the component.</td>
                                     </tr>
+                                    <tr>
+                                        <td>buttonClassName</td>
+                                        <td>string</td>
+                                        <td>null</td>
+                                        <td>ClassName of the button.</td>
+                                    </tr>
                                     <tr>
                                         <td>menuStyle</td>
                                         <td>string</td>
@@ -450,6 +456,12 @@ export const SplitButtonDemo = () => {
                                         <td>null</td>
                                         <td>ClassName class of the overlay menu.</td>
                                     </tr>
+                                    <tr>
+                                        <td>menuButtonClassName</td>
+                                        <td>string</td>
+                                        <td>null</td>
+                                        <td>ClassName of the menu dropdown button.</td>
+                                    </tr>
                                     <tr>
                                         <td>tabIndex</td>
                                         <td>number</td>