Contextual Menu: Revert Split Button Alignment to Previous Left Aligntment

common/changes/office-ui-fabric-react/contextualMenuAlignSplitButton_2018-03-27-18-13.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "ContextualMenu / Split Button: Fixed styling problems For centered button content.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "[email protected]"
+}

packages/office-ui-fabric-react/src/components/Button/Button.types.ts

@@ -504,4 +504,9 @@ export interface IButtonStyles {
    * Style override for the SplitButton FlexContainer.
    */
   splitButtonFlexContainer?: IStyle;
+
+  /**
+   * Style override for focus on the the SplitButton Container
+   */
+  splitButtonFlexContainerFocus?: IStyle;
 }

packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.classNames.ts

@@ -22,6 +22,7 @@ export interface IMenuItemClassNames {
   subMenuIcon: string;
   label: string;
   splitContainer: string;
+  splitContainerFocus: string;
   splitPrimary: string;
   splitMenu: string;
   linkContentMenu: string;
@@ -200,11 +201,14 @@ export const getItemClassNames = memoizeFunction((
     ],
     splitContainer: [
       styles.splitButtonFlexContainer,
+    ],
+    splitContainerFocus: [
+      styles.splitButtonFlexContainerFocus,
       !disabled && !checked && [{
         selectors: {
           '.ms-Fabric.is-focusVisible &:focus, .ms-Fabric.is-focusVisible &:focus:hover': styles.rootFocused,
         }
       }]
-    ],
+    ]
   });
 });

packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.styles.ts

@@ -168,15 +168,17 @@ export const getMenuItemStyles = memoizeFunction((
       flexShrink: '0',
       fontSize: FontSizes.mini
     },
-    splitButtonFlexContainer: [
-      getFocusStyle(theme), {
-        display: 'flex',
-        height: ContextualMenuItemHeight,
-        flexWrap: 'nowrap',
-        justifyContent: 'center',
-        alignItems: 'center',
-      }],
-    splitButtonSeparator: {}
+    splitButtonFlexContainer: {
+      display: 'flex',
+      height: ContextualMenuItemHeight,
+      flexWrap: 'nowrap',
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    splitButtonSeparator: {},
+    splitButtonFlexContainerFocus: [
+      getFocusStyle(theme)
+    ]
   };
 
   return concatStyleSets(menuItemStyles);

packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenu.tsx

@@ -597,7 +597,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
         }
         role={ 'button' }
         aria-labelledby={ item.ariaLabel }
-        className={ classNames.splitContainer }
+        className={ classNames.splitContainerFocus }
         aria-disabled={ this._isItemDisabled(item) }
         aria-haspopup={ true }
         aria-describedby={ item.ariaDescription }
@@ -611,7 +611,7 @@ export class ContextualMenu extends BaseComponent<IContextualMenuProps, IContext
       >
         <span
           aria-hidden={ true }
-          style={ { display: 'flex', height: '100%' } }
+          className={ classNames.splitContainer }
         >
           { this._renderSplitPrimaryButton(item, classNames, index, hasCheckmarks!, hasIcons!) }
           { this._renderSplitDivider(item) }

packages/office-ui-fabric-react/src/components/ContextualMenu/ContextualMenuItem.test.tsx

@@ -135,6 +135,7 @@ function getMenuItemClassNames(): IMenuItemClassNames {
     subMenuIcon: 'subMenuIcon',
     label: 'label',
     splitContainer: 'splitContainer',
+    splitContainerFocus: 'splitContainerFocus',
     splitPrimary: 'splitPrimary',
     splitMenu: 'splitMenu',
     linkContentMenu: 'linkContentMenu',

packages/office-ui-fabric-react/src/components/ContextualMenu/__snapshots__/ContextualMenuItem.test.tsx.snap

@@ -16,6 +16,7 @@ ShallowWrapper {
         "linkContentMenu": "linkContentMenu",
         "root": "root",
         "splitContainer": "splitContainer",
+        "splitContainerFocus": "splitContainerFocus",
         "splitMenu": "splitMenu",
         "splitPrimary": "splitPrimary",
         "subMenuIcon": "subMenuIcon",
@@ -141,6 +142,7 @@ ShallowWrapper {
         "linkContentMenu": "linkContentMenu",
         "root": "root",
         "splitContainer": "splitContainer",
+        "splitContainerFocus": "splitContainerFocus",
         "splitMenu": "splitMenu",
         "splitPrimary": "splitPrimary",
         "subMenuIcon": "subMenuIcon",
@@ -287,6 +289,7 @@ ShallowWrapper {
         "linkContentMenu": "linkContentMenu",
         "root": "root",
         "splitContainer": "splitContainer",
+        "splitContainerFocus": "splitContainerFocus",
         "splitMenu": "splitMenu",
         "splitPrimary": "splitPrimary",
         "subMenuIcon": "subMenuIcon",
@@ -404,6 +407,7 @@ ShallowWrapper {
         "linkContentMenu": "linkContentMenu",
         "root": "root",
         "splitContainer": "splitContainer",
+        "splitContainerFocus": "splitContainerFocus",
         "splitMenu": "splitMenu",
         "splitPrimary": "splitPrimary",
         "subMenuIcon": "subMenuIcon",

packages/office-ui-fabric-react/src/components/ContextualMenu/examples/ContextualMenu.Submenu.Example.tsx

@@ -80,6 +80,42 @@ export class ContextualMenuSubmenuExample extends React.Component<any, IContextu
                   ],
                 },
                 name: 'Share'
+              },
+              {
+                key: 'shareSplit',
+                onClick: () => alert('Split buttons!'),
+                split: true,
+                subMenuProps: {
+                  items: [
+                    {
+                      key: 'sharetotwittersplit',
+                      name: 'Share to Twitter',
+                    },
+                    {
+                      key: 'sharetofacebooksplit',
+                      name: 'Share to Facebook',
+                    },
+                    {
+                      key: 'sharetoemailsplit',
+                      name: 'Share to Email',
+                      subMenuProps: {
+                        items: [
+                          {
+                            key: 'sharetooutlooksplit_1',
+                            name: 'Share to Outlook',
+                            title: 'Share to Outlook',
+                          },
+                          {
+                            key: 'sharetogmailsplit_1',
+                            name: 'Share to Gmail',
+                            title: 'Share to Gmail',
+                          }
+                        ],
+                      },
+                    },
+                  ],
+                },
+                name: 'Share w/ Split'
               }
             ]
           }