Coachmark: Positioning fixes

common/changes/office-ui-fabric-react/coachmarkFixes_2018-05-30-22-04.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Coachmark: Fix positioning bugs and add in support for different Coachmark directions.",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "edwl@microsoft.com"
+}

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

@@ -1,4 +1,4 @@
-import { IStyle, DefaultPalette } from '../../../Styling';
+import { IStyle } from '../../../Styling';
 import { IBeakStylesProps } from './Beak.types';
 
 export interface IBeakStyles {
@@ -17,18 +17,18 @@ export function getStyles(props: IBeakStylesProps): IBeakStyles {
         boxShadow: 'inherit',
         border: 'none',
         boxSizing: 'border-box',
-        transform: 'translateY(-50%)',
-        left: '50%',
+        transform: props.transform,
         width: props.width,
-        height: props.height
-      },
-      (props.left && props.top) && {
+        height: props.height,
         left: props.left,
-        top: props.top
+        top: props.top,
+        right: props.right,
+        bottom: props.bottom,
+
       }
     ],
     beak: {
-      fill: DefaultPalette.themePrimary,
+      fill: props.color,
       display: 'block'
     }
   };

packages/office-ui-fabric-react/src/components/Coachmark/Beak/Beak.tsx

@@ -7,44 +7,89 @@ import {
 import { IBeakProps } from './Beak.types';
 import { getStyles, IBeakStyles } from './Beak.styles';
 import { IBeakStylesProps } from './Beak.types';
+import { RectangleEdge } from 'office-ui-fabric-react/lib/utilities/positioning';
 
-export interface IBeakState {
-  left: string | null;
-  top: string | null;
-}
+export const BEAK_HEIGHT = 10;
+export const BEAK_WIDTH = 18;
 
-export class Beak extends BaseComponent<IBeakProps, IBeakState> {
+export class Beak extends BaseComponent<IBeakProps, {}> {
   constructor(props: IBeakProps) {
     super(props);
   }
 
   public render(): JSX.Element {
     const {
-      height = 18,
-      width = 18,
       left,
-      top
+      top,
+      bottom,
+      right,
+      color,
+      direction = RectangleEdge.top
     } = this.props;
 
+    let svgHeight: number;
+    let svgWidth: number;
+
+    if (direction === RectangleEdge.top || direction === RectangleEdge.bottom) {
+      svgHeight = BEAK_HEIGHT;
+      svgWidth = BEAK_WIDTH;
+    } else {
+      svgHeight = BEAK_WIDTH;
+      svgWidth = BEAK_HEIGHT;
+    }
+
+    let pointOne: string;
+    let pointTwo: string;
+    let pointThree: string;
+    let transform: string;
+
+    switch (direction) {
+      case RectangleEdge.top:
+      default:
+        pointOne = `${BEAK_WIDTH / 2}, 0`;
+        pointTwo = `${BEAK_WIDTH}, ${BEAK_HEIGHT}`;
+        pointThree = `0, ${BEAK_HEIGHT}`;
+        transform = 'translateY(-100%)';
+        break;
+      case RectangleEdge.right:
+        pointOne = `0, 0`;
+        pointTwo = `${BEAK_HEIGHT}, ${BEAK_HEIGHT}`;
+        pointThree = `0, ${BEAK_WIDTH}`;
+        transform = 'translateX(100%)';
+        break;
+      case RectangleEdge.bottom:
+        pointOne = `0, 0`;
+        pointTwo = `${BEAK_WIDTH}, 0`;
+        pointThree = `${BEAK_WIDTH / 2}, ${BEAK_HEIGHT}`;
+        transform = 'translateY(100%)';
+        break;
+      case RectangleEdge.left:
+        pointOne = `${BEAK_HEIGHT}, 0`;
+        pointTwo = `0, ${BEAK_HEIGHT}`;
+        pointThree = `${BEAK_HEIGHT}, ${BEAK_WIDTH}`;
+        transform = 'translateX(-100%)';
+        break;
+    }
+
     const getClassNames = classNamesFunction<IBeakStylesProps, IBeakStyles>();
     const classNames = getClassNames(getStyles, {
       left,
       top,
-      height: height + 'px',
-      width: width + 'px'
+      bottom,
+      right,
+      height: `${svgHeight}px`,
+      width: `${svgWidth}px`,
+      transform: transform,
+      color
     });
 
-    const pointOne = width / 2 + ',' + 0;
-    const pointTwo = width + ',' + height;
-    const pointThree = 0 + ',' + height;
-
     return (
       <div
         className={ css('ms-Beak', classNames.root) }
       >
         <svg
-          height={ height }
-          width={ width }
+          height={ svgHeight }
+          width={ svgWidth }
           className={ classNames.beak }
         >
           <polygon points={ pointOne + ' ' + pointTwo + ' ' + pointThree } />

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Beak } from './Beak';
+import { RectangleEdge } from 'office-ui-fabric-react/lib/utilities/positioning';
 
 export interface IBeak { }
 
@@ -12,12 +13,14 @@ export interface IBeakProps extends React.Props<Beak> {
   /**
    * Beak width.
    * @default 18
+   * @deprecated
    */
   width?: number;
 
   /**
    * Beak height.
    * @default 18
+   * @deprecated
    */
   height?: number;
 
@@ -29,17 +32,36 @@ export interface IBeakProps extends React.Props<Beak> {
   /**
    * Left position of the beak
    */
-  left?: string | null;
+  left?: string;
 
   /**
    * Top position of the beak
    */
-  top?: string | null;
+  top?: string;
+
+  /**
+   * Right position of the beak
+   */
+  right?: string;
+
+  /**
+   * Bottom position of the beak
+   */
+  bottom?: string;
+
+  /**
+   * Direction of beak
+   */
+  direction?: RectangleEdge;
 }
 
 export interface IBeakStylesProps {
-  left?: string | null;
-  top?: string | null;
+  left?: string | undefined;
+  top?: string | undefined;
+  bottom?: string | undefined;
+  right?: string | undefined;
   width?: string;
   height?: string;
+  transform?: string;
+  color?: string;
 }

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

@@ -6,11 +6,20 @@ import {
   getTheme
 } from '../../Styling';
 
+export const COACHMARK_WIDTH = 32;
+export const COACHMARK_HEIGHT = 32;
+
 export interface ICoachmarkStyleProps {
+  /**
+   * Is the Coachmark collapsed.  Deprecated: use isCollapsed instead.
+   * @deprecated
+   */
+  collapsed?: boolean;
+
   /**
    * Is the Coachmark collapsed
    */
-  collapsed: boolean;
+  isCollapsed: boolean;
 
   /**
    * Is the beacon currently animating.
@@ -57,6 +66,11 @@ export interface ICoachmarkStyleProps {
    * Beacon color two
    */
   beaconColorTwo?: string;
+
+  /**
+   * Transform origin for teaching bubble content
+   */
+  transformOrigin?: string;
 }
 
 export interface ICoachmarkStyles {
@@ -252,15 +266,15 @@ export function getStyles(props: ICoachmarkStyleProps, theme: ITheme = getTheme(
         borderStyle: 'solid',
         opacity: '0'
       },
-      (props.collapsed && props.isBeaconAnimating) && ContinuousPulseAnimation
+      (props.isCollapsed && props.isBeaconAnimating) && ContinuousPulseAnimation
     ],
     // Translate Animation Layer
     translateAnimationContainer: [
       {
         width: '100%',
         height: '100%'
       },
-      props.collapsed && {
+      props.isCollapsed && {
         animationDuration: '14s',
         animationTimingFunction: 'linear',
         animationDirection: 'normal',
@@ -270,7 +284,7 @@ export function getStyles(props: ICoachmarkStyleProps, theme: ITheme = getTheme(
         animationName: translateOne,
         transition: 'opacity 0.5s ease-in-out'
       },
-      (!props.collapsed) && {
+      (!props.isCollapsed) && {
         opacity: '1'
       }
     ],
@@ -280,7 +294,7 @@ export function getStyles(props: ICoachmarkStyleProps, theme: ITheme = getTheme(
         width: '100%',
         height: '100%'
       },
-      props.collapsed && {
+      props.isCollapsed && {
         animationDuration: '14s',
         animationTimingFunction: 'linear',
         animationDirection: 'normal',
@@ -294,10 +308,9 @@ export function getStyles(props: ICoachmarkStyleProps, theme: ITheme = getTheme(
     rotateAnimationLayer: [
       {
         width: '100%',
-        height: '100%',
-        opacity: '0.8'
+        height: '100%'
       },
-      props.collapsed && {
+      props.isCollapsed && {
         animationDuration: '14s',
         animationTimingFunction: 'linear',
         animationDirection: 'normal',
@@ -306,7 +319,7 @@ export function getStyles(props: ICoachmarkStyleProps, theme: ITheme = getTheme(
         animationFillMode: 'forwards',
         animationName: rotateOne
       },
-      !props.collapsed && {
+      !props.isCollapsed && {
         opacity: '1'
       }
     ],
@@ -317,16 +330,16 @@ export function getStyles(props: ICoachmarkStyleProps, theme: ITheme = getTheme(
         outline: 'none',
         overflow: 'hidden',
         backgroundColor: props.color,
-        borderRadius: props.width,
+        borderRadius: COACHMARK_WIDTH,
         transition: 'border-radius 250ms, width 500ms, height 500ms cubic-bezier(0.5, 0, 0, 1)',
         visibility: 'hidden'
       },
       !props.isMeasuring && {
-        width: props.width,
-        height: props.height,
+        width: COACHMARK_WIDTH,
+        height: COACHMARK_HEIGHT,
         visibility: 'visible'
       },
-      !props.collapsed && {
+      !props.isCollapsed && {
         borderRadius: '1px',
         opacity: '1',
         width: props.entityHostWidth,
@@ -336,10 +349,10 @@ export function getStyles(props: ICoachmarkStyleProps, theme: ITheme = getTheme(
     entityInnerHost: [
       {
         transition: 'transform 500ms cubic-bezier(0.5, 0, 0, 1)',
-        transformOrigin: 'top left',
+        transformOrigin: props.transformOrigin,
         transform: 'scale(0)'
       },
-      (!props.collapsed) && {
+      (!props.isCollapsed) && {
         width: props.entityHostWidth,
         height: props.entityHostHeight,
         transform: 'scale(1)'