Add option to set custom component for tabset min/max buttons

README.md

@@ -71,7 +71,9 @@ The `<Layout>` component renders the tabsets and splitters, it takes the followi
 | factory         | required          | a factory function for creating React components |
 | iconFactory     | optional          | a factory function for creating icon components for tab bar buttons |
 | titleFactory    | optional          | a factory function for creating title components for tab bar buttons |
-| closeIcon       | optional          | a icon to use in place of the default close icon |
+| closeIcon       | optional          | a component to use in place of the default close icon |
+| minimizeIcon    | optional          | a component to use in place of the default tabset minimize button |
+| maximizeIcon    | optional          | a component to use in place of the default tabset maximize button |
 | onAction        | optional          | function called whenever the layout generates an action to update the model (allows for intercepting actions before they are dispatched to the model, for example, asking the user to confirm a tab close.) Returning `undefined` from the function will halt the action, otherwise return the action to continue |
 | onRenderTab     | optional          | function called when rendering a tab, allows leading (icon) and content sections to be customized |
 | onRenderTabSet  | optional          | function called when rendering a tabset, allows header and buttons to be customized |

src/view/Layout.tsx

@@ -27,6 +27,8 @@ export interface ILayoutProps {
   iconFactory?: (node: TabNode) => React.ReactNode | undefined;
   titleFactory?: (node: TabNode) => React.ReactNode | undefined;
   closeIcon?: React.ReactNode;
+  minimizeIcon?: React.ReactNode;
+  maximizeIcon?: React.ReactNode;
   onAction?: (action: Action) => Action | undefined;
   onRenderTab?: (
     node: TabNode,
@@ -297,6 +299,8 @@ export class Layout extends React.Component<ILayoutProps, any> {
             iconFactory={this.props.iconFactory}
             titleFactory={this.props.titleFactory}
             closeIcon={this.props.closeIcon}
+            minimizeIcon={this.props.minimizeIcon}
+            maximizeIcon={this.props.maximizeIcon}
           />
         );
         this.renderChildren(

src/view/TabSet.tsx

@@ -14,6 +14,8 @@ export interface ITabSetProps {
     iconFactory?: (node: TabNode) => React.ReactNode | undefined;
     titleFactory?: (node: TabNode) => React.ReactNode | undefined;
     closeIcon?: React.ReactNode;
+    minimizeIcon?: React.ReactNode;
+    maximizeIcon?: React.ReactNode;
 }
 
 /** @hidden @internal */
@@ -132,10 +134,25 @@ export class TabSet extends React.Component<ITabSetProps, any> {
         let toolbar;
         if (this.showToolbar === true) {
             if (this.props.node.isEnableMaximize()) {
-                buttons.push(<button key="max"
-                    aria-label={node.isMaximized() ? "Minimize" : "Maximize"}
-                    className={cm("flexlayout__tab_toolbar_button-" + (node.isMaximized() ? "max" : "min"))}
-                    onClick={this.onMaximizeToggle}/>);
+                if (node.isMaximized()) {
+                    buttons.push(this.props.minimizeIcon ?
+                      <div key="min" aria-label="Minimize" onClick={this.onMaximizeToggle}>
+                          {this.props.minimizeIcon}
+                      </div>
+                      : <button key="min" aria-label="Minimize"
+                                className={cm("flexlayout__tab_toolbar_button-max")}
+                                onClick={this.onMaximizeToggle}>
+                        </button>)
+                } else {
+                    buttons.push(this.props.maximizeIcon ?
+                      <div key="max" aria-label="Maximize" onClick={this.onMaximizeToggle}>
+                          {this.props.maximizeIcon}
+                      </div>
+                      : <button key="max" aria-label="Maximize"
+                                className={cm("flexlayout__tab_toolbar_button-min")}
+                                onClick={this.onMaximizeToggle}>
+                        </button>)
+                }
             }
             toolbar = <div key="toolbar" ref={ref => this.toolbarRef = (ref === null) ? undefined : ref} className={cm("flexlayout__tab_toolbar")}
                 onMouseDown={this.onInterceptMouseDown}>
@@ -232,7 +249,7 @@ export class TabSet extends React.Component<ITabSetProps, any> {
         const message = this.props.layout.i18nName(I18nLabel.Move_Tabset, name);
         this.props.layout.dragStart(event, message, this.props.node, this.props.node.isEnableDrag(), (event2: Event) => undefined, this.onDoubleClick);
     }
-    
+
     onInterceptMouseDown = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | React.MouseEvent<HTMLButtonElement, MouseEvent> | React.TouchEvent<HTMLButtonElement>) => {
         event.stopPropagation();
     }