Button: Add support for adding a divider for Split Buttons (#2780)

* Add a function that allows rendering a divider between the menu button and main button for a split button * Rush change * Get split button classnames * Extract a function for rendering the divider. * Fix tslint. * Extract split button example styles to another file * Remove unused import, add missing semicolon
microsoft · Sep 11, 2017 · ac16133 · ac16133
1 parent 4507629
commit ac16133
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 14 deletions.
diff --git a/common/changes/office-ui-fabric-react/split-button-divider_2017-09-08-00-37.json b/common/changes/office-ui-fabric-react/split-button-divider_2017-09-08-00-37.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Button: Add support for dividers in split buttons",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "christianjordangonzalez@gmail.com"
+}
diff --git a/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx b/packages/office-ui-fabric-react/src/components/Button/BaseButton.tsx
@@ -17,7 +17,7 @@ import { DirectionalHint } from '../../common/DirectionalHint';
 import { ContextualMenu, IContextualMenuProps } from '../../ContextualMenu';
 import { IButtonProps, IButton } from './Button.Props';
 import { IButtonClassNames, getClassNames } from './BaseButton.classNames';
-import { getClassNames as getSplitButtonClassNames } from './SplitButton/SplitButton.classNames';
+import { getClassNames as getSplitButtonClassNames, ISplitButtonClassNames } from './SplitButton/SplitButton.classNames';
 
 export interface IBaseButtonProps extends IButtonProps {
   baseClassName?: string;
@@ -360,9 +360,12 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
   private _onRenderSplitButtonContent(tag: any, buttonProps: IButtonProps): JSX.Element {
     const {
       styles,
-      disabled
+      disabled,
+      checked
     } = this.props;
 
+    const classNames = styles && getSplitButtonClassNames(styles!, !!disabled, !!this.state.menuProps, !!checked);
+
     return (
       <div
         aria-labelledby={ buttonProps.ariaLabel }
@@ -376,21 +379,27 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
         onKeyDown={ this.props.disabled ? undefined : this._onSplitButtonKeyDown }
         ref={ this._resolveRef('_splitButtonContainer') }
       >
+
         <span aria-hidden={ true } style={ { 'display': 'flex' } }>
           { this._onRenderContent(tag, buttonProps) }
-          { this._onRenderSplitButtonMenuButton() }
+          { this._onRenderSplitButtonDivider(classNames) }
+          { this._onRenderSplitButtonMenuButton(classNames) }
         </span>
       </div >
     );
   }
 
-  private _onRenderSplitButtonMenuButton(): JSX.Element {
+  private _onRenderSplitButtonDivider(classNames: ISplitButtonClassNames | undefined): JSX.Element | null {
+    if (classNames && classNames.divider) {
+      return <span className={ classNames.divider } />;
+    }
+    return null;
+  }
+
+  private _onRenderSplitButtonMenuButton(classNames: ISplitButtonClassNames | undefined): JSX.Element {
     let {
       menuIconName,
-      menuIconProps,
-      styles,
-      disabled,
-      checked
+      menuIconProps
     } = this.props;
 
     if (menuIconProps === undefined) {
@@ -399,8 +408,6 @@ export class BaseButton extends BaseComponent<IBaseButtonProps, IBaseButtonState
       };
     }
 
-    const classNames = styles ? getSplitButtonClassNames(styles!, disabled || false, !!this.state.menuProps, checked || false) : undefined;
-
     return (
       <BaseButton
         tabIndex={ -1 }

diff --git a/packages/office-ui-fabric-react/src/components/Button/Button.Props.ts b/packages/office-ui-fabric-react/src/components/Button/Button.Props.ts
@@ -363,6 +363,12 @@ export interface IButtonStyles {
    */
   splitButtonContainerDisabled?: IStyle;
 
+  /**
+   * Style override for the divider element that appears between the button and menu button
+   * for a split button.
+   */
+  splitButtonDivider?: IStyle;
+
   /**
    * Style override for the SplitButton menu button
    */

diff --git a/packages/office-ui-fabric-react/src/components/Button/SplitButton/SplitButton.classNames.ts b/packages/office-ui-fabric-react/src/components/Button/SplitButton/SplitButton.classNames.ts
@@ -6,6 +6,7 @@ export interface ISplitButtonClassNames {
   root?: string;
   icon?: string;
   flexContainer?: string;
+  divider?: string;
 }
 
 export const getClassNames = memoizeFunction((
@@ -28,6 +29,7 @@ export const getClassNames = memoizeFunction((
       ]
     ) as string,
     icon: (disabled ? mergeStyles(styles.splitButtonMenuIcon, styles.splitButtonMenuIconDisabled) : styles.splitButtonMenuIcon) as string,
-    flexContainer: styles.splitButtonFlexContainer as string
+    flexContainer: styles.splitButtonFlexContainer as string,
+    divider: styles.splitButtonDivider as string
   };
 });
diff --git a/...ages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.styles.ts b/...ages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.styles.ts
@@ -0,0 +1,10 @@
+import { memoizeFunction } from 'office-ui-fabric-react/lib/Utilities';
+import { IButtonStyles } from 'office-ui-fabric-react/lib/Button';
+
+export const getCustomSplitButtonStyles = memoizeFunction((): IButtonStyles => {
+  return {
+    splitButtonMenuButton: { backgroundColor: 'white', width: '10px' },
+    splitButtonMenuIcon: { fontSize: '7px' },
+    splitButtonDivider: { borderLeft: '1px solid #c8c8c8' }
+  };
+});
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { DefaultButton, IconButton, IButtonProps, IButtonStyles } from 'office-ui-fabric-react/lib/Button';
+import { DefaultButton, IconButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
 import { Label } from 'office-ui-fabric-react/lib/Label';
+import { getCustomSplitButtonStyles } from './Button.Split.Example.styles';
 
 export class ButtonSplitExample extends React.Component<IButtonProps, {}> {
   public constructor() {
@@ -47,7 +48,7 @@ export class ButtonSplitCustomExample extends React.Component<IButtonProps, {}>
 
   public render() {
     let { disabled, checked } = this.props;
-    const style: IButtonStyles = { splitButtonMenuButton: { backgroundColor: 'white', width: '10px' }, splitButtonMenuIcon: { fontSize: '7px' } };
+    const customSplitButtonStyles = getCustomSplitButtonStyles();
 
     return (
       <div>
@@ -60,7 +61,7 @@ export class ButtonSplitCustomExample extends React.Component<IButtonProps, {}>
           text='Create account'
           onClick={ () => alert('Clicked') }
           split={ true }
-          styles={ style }
+          styles={ customSplitButtonStyles }
           menuProps={ {
             items: [
               {