SplitButton: Fixing some styling bugs related to the divider (#9246)

* SplitButton: Fixing some styling bugs related to the divider. * Making MenuButton and SplitButton inline-flex so that they can render side by side.
microsoft · May 28, 2019 · 1b8b476 · 1b8b476
1 parent b9e3eab
commit 1b8b476
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 7 deletions.
diff --git a/common/changes/@uifabric/experiments/splitButtonStyles_2019-05-28-21-45.json b/common/changes/@uifabric/experiments/splitButtonStyles_2019-05-28-21-45.json
@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/experiments",
+      "comment": "SplitButton: Fixing some styling bugs related to the divider.",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/experiments",
+  "email": "[email protected]"
+}
diff --git a/packages/experiments/src/components/Button/MenuButton/MenuButton.styles.ts b/packages/experiments/src/components/Button/MenuButton/MenuButton.styles.ts
@@ -64,6 +64,9 @@ export const MenuButtonStyles: IMenuButtonComponent['styles'] = (props, theme, t
   const { className } = props;
 
   return {
+    root: {
+      display: 'inline-flex'
+    },
     button: [
       {
         backgroundColor: props.expanded ? tokens.backgroundColorExpanded : tokens.backgroundColor,

diff --git a/packages/experiments/src/components/Button/SplitButton/SplitButton.styles.ts b/packages/experiments/src/components/Button/SplitButton/SplitButton.styles.ts
@@ -65,6 +65,7 @@ export const SplitButtonStyles: ISplitButtonComponent['styles'] = (props, theme,
     root: {
       borderRadius: tokens.borderRadius,
       boxSizing: 'border-box',
+      display: 'inline-flex',
       zIndex: 1,
 
       selectors: {
@@ -136,7 +137,7 @@ export const SplitButtonStyles: ISplitButtonComponent['styles'] = (props, theme,
       borderRightWidth: 0,
       borderTopWidth: props.primaryActionDisabled ? 0 : tokens.borderWidth,
       boxSizing: 'border-box',
-      height: '100%',
+      height: 'auto',
       width: 'auto',
 
       selectors: {
@@ -154,9 +155,8 @@ export const SplitButtonStyles: ISplitButtonComponent['styles'] = (props, theme,
     },
     splitDivider: {
       backgroundColor: props.primaryActionDisabled ? semanticColors.menuDivider : tokens.dividerColor,
-      boxSizing: 'border-box',
       display: 'inline-block',
-      height: 'calc(100% - 14px)',
+      height: '100%',
       margin: '7px 0px',
       width: '1px'
     },

diff --git a/packages/experiments/src/components/Button/SplitButton/SplitButton.types.tsx b/packages/experiments/src/components/Button/SplitButton/SplitButton.types.tsx
@@ -1,4 +1,4 @@
-import { IStackSlot, IStackItemSlot } from 'office-ui-fabric-react';
+import { IStackSlot } from 'office-ui-fabric-react';
 import { IComponent, IComponentStyles, IHTMLSlot, ISlotProp, ISlottableProps, IStyleableComponentProps } from '../../../Foundation';
 import { IBaseProps } from '../../../Utilities';
 import { INativeButtonProps } from '../Button.types';
@@ -50,7 +50,7 @@ export interface ISplitButtonSlots extends IMenuButtonSlots {
   /**
    * Defines the container for the divider that is used for styling purposes.
    */
-  splitDividerContainer?: IStackItemSlot;
+  splitDividerContainer?: IStackSlot;
 
   /**
    * Defines the divider that separates the left and right parts of a SplitButton.

diff --git a/packages/experiments/src/components/Button/SplitButton/SplitButton.view.tsx b/packages/experiments/src/components/Button/SplitButton/SplitButton.view.tsx
@@ -43,7 +43,7 @@ export const SplitButtonView: ISplitButtonComponent['view'] = props => {
     content: Text,
     menu: ContextualMenu,
     menuIcon: Icon,
-    splitDividerContainer: Stack.Item,
+    splitDividerContainer: Stack,
     splitDivider: 'span'
   });
 
@@ -54,12 +54,15 @@ export const SplitButtonView: ISplitButtonComponent['view'] = props => {
     backgroundColor,
     backgroundColorHovered,
     backgroundColorPressed,
+    borderColor,
+    borderColorHovered,
+    borderColorPressed,
     color,
     colorHovered,
     colorPressed,
     ...nonColoredButtonTokens
   } = splitButtonTokens;
-  const buttonTokens = primaryActionDisabled ? { contentPadding, contentPaddingFocused, nonColoredButtonTokens } : tokens;
+  const buttonTokens = primaryActionDisabled ? { contentPadding, contentPaddingFocused, ...nonColoredButtonTokens } : tokens;
   const menuButtonTokens = { contentPadding: secondaryPadding, ...splitButtonTokens };
 
   return (

diff --git a/packages/experiments/src/components/Button/examples/Button.Slots.Example.tsx b/packages/experiments/src/components/Button/examples/Button.Slots.Example.tsx
@@ -105,6 +105,9 @@ const SplitMenuButtonVerticalStyles: ISplitRibbonMenuButtonProps['styles'] = (pr
       borderLeftWidth: tokens.borderWidth,
       borderRightWidth: tokens.borderWidth,
       borderTopWidth: 0
+    },
+    splitDividerContainer: {
+      borderWidth: 0
     }
   };
 };