Cherry pick Coachmark accessibility and positioning fixes into 5.0

common/changes/office-ui-fabric-react/coachmarkAccessibility_2018-06-15-16-49.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Coachmark: Add accessibility features to component, ARIA props, narrator support, and keyboarding controls",
+      "type": "minor"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "edwl@microsoft.com"
+}

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"
+}

common/changes/office-ui-fabric-react/coachmarkTeachingBubbleFix_2018-06-06-20-52.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "TeachingBubble: Fix content from wrapping to next line unncessarily",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "edwl@microsoft.com"
+}

common/changes/office-ui-fabric-react/fixImportPaths_2018-06-25-22-09.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Fix import paths to use relative paths for office-ui-fabric-react",
+      "type": "patch"
+    }
+  ],
+  "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 '../../../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 '../../../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;
 }