Initial set of Keytips work in experiments

common/changes/@uifabric/experiments/features-keytips2_2018-02-21-21-49.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/experiments",
+      "comment": "Add initial set of Keytip work",
+      "type": "patch"
+    }
+  ],
+  "packageName": "@uifabric/experiments",
+  "email": "keyou@microsoft.com"
+}

common/changes/@uifabric/utilities/features-keytips2_2018-02-21-21-49.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "@uifabric/utilities",
+      "comment": "Update KeyCodes enum to include all key codes",
+      "type": "minor"
+    }
+  ],
+  "packageName": "@uifabric/utilities",
+  "email": "keyou@microsoft.com"
+}

package.json

@@ -30,4 +30,4 @@
   "devDependencies": {
     "@microsoft/rush": "4.1.0"
   }
-}
+}

packages/experiments/src/Keytip.ts

@@ -0,0 +1 @@
+export * from './components/Keytip/index';

packages/experiments/src/KeytipLayer.ts

@@ -0,0 +1 @@
+export * from './components/KeytipLayer/index';

packages/experiments/src/Utilities.ts

@@ -1 +1 @@
-export * from 'office-ui-fabric-react/lib/Utilities';
+export * from 'office-ui-fabric-react/lib/Utilities';

packages/experiments/src/components/Keytip/Keytip.styles.ts

@@ -0,0 +1,52 @@
+import { IKeytipStyleProps, IKeytipStyles } from './Keytip.types';
+import { ICalloutContentStyleProps, ICalloutContentStyles } from 'office-ui-fabric-react/lib/Callout';
+
+export const getStyles = (props: IKeytipStyleProps): IKeytipStyles => {
+  const { theme, disabled, visible } = props;
+  return {
+    container: [
+      {
+        backgroundColor: theme.palette.neutralDark
+      },
+      disabled && {
+        opacity: 0.5,
+      },
+      !visible && {
+        visibility: 'hidden'
+      }
+    ],
+    root: [{
+      textAlign: 'center',
+      paddingLeft: 3,
+      paddingRight: 3,
+      backgroundColor: theme.palette.neutralDark,
+      color: theme.palette.neutralLight,
+      minWidth: 11,
+      lineHeight: 17,
+      height: 17,
+      display: 'inline-block'
+    },
+    disabled && {
+      color: '#b1b1b1'
+    }]
+  };
+};
+
+export const getCalloutStyles = (props: ICalloutContentStyleProps): ICalloutContentStyles => {
+  return {
+    container: [
+    ],
+    root: [{
+      border: 'none',
+      boxShadow: 'none'
+    }],
+    beak: [
+    ],
+    beakCurtain: [
+    ],
+    calloutMain: [{
+      backgroundColor: 'transparent'
+    }
+    ]
+  };
+};

packages/experiments/src/components/Keytip/Keytip.tsx

@@ -0,0 +1,46 @@
+import * as React from 'react';
+import { BaseComponent } from '../../Utilities';
+import { Callout } from 'office-ui-fabric-react/lib/Callout';
+import { DirectionalHint } from 'office-ui-fabric-react/lib/ContextualMenu';
+import { IKeytip, IKeytipProps } from './Keytip.types';
+import { KeytipContent } from './KeytipContent';
+import { getCalloutStyles } from './Keytip.styles';
+import { constructKeytipTargetFromSequences } from '../../utilities/keytip/KeytipUtils';
+
+/**
+ * A callout corresponding to another Fabric component to describe a key sequence that will activate that component
+ *
+ * @export
+ * @class Keytip
+ * @extends {BaseComponent<IKeytipProps, {}}>}
+ */
+export class Keytip extends BaseComponent<IKeytipProps, {}> implements IKeytip {
+
+  // tslint:disable-next-line:no-any
+  constructor(props: IKeytipProps, context: any) {
+    super(props, context);
+  }
+
+  public render(): JSX.Element {
+    const {
+      calloutProps,
+      keySequences,
+      offset = 0 // Default value for gap is 0
+    } = this.props;
+
+    return (
+      <Callout
+        { ...calloutProps }
+        gapSpace={ offset }
+        isBeakVisible={ false }
+        doNotLayer={ true }
+        directionalHint={ DirectionalHint.bottomCenter }
+        target={ constructKeytipTargetFromSequences(keySequences) }
+        getStyles={ getCalloutStyles }
+        preventDismissOnScroll={ true }
+      >
+        <KeytipContent {...this.props} />
+      </Callout>
+    );
+  }
+}

packages/experiments/src/components/Keytip/Keytip.types.ts

@@ -0,0 +1,156 @@
+import { ICalloutProps } from 'office-ui-fabric-react/lib/Callout';
+import { IStyle, ITheme } from '../../Styling';
+import { IStyleFunction } from '../../Utilities';
+import { IKeySequence } from '../../utilities/keysequence/IKeySequence';
+
+export interface IKeytip {
+}
+
+export interface IKeytipProps {
+  /**
+   * Optional callback to access the Keytip component. Use this instead of ref for accessing
+   * the public methods and properties of the component.
+   */
+  componentRef?: (component: IKeytip) => void;
+
+  /**
+   * Content to put inside the keytip
+   *
+   * @type {string}
+   */
+  content: string;
+
+  /**
+   * Theme for the component
+   *
+   * @type {ITheme}
+   */
+  theme?: ITheme;
+
+  /**
+   * T/F if the corresponding control is disabled
+   *
+   * @type {boolean}
+   */
+  disabled?: boolean;
+
+  /**
+   * T/F if the keytip is visible
+   *
+   * @type {boolean}
+   */
+  visible?: boolean;
+
+  /**
+   * Function to call when this keytip is activated
+   * 'el' is the DOM element that the keytip is attached to
+   *
+   * @type {(HTMLElement) => void}
+   */
+  onExecute?: (el: HTMLElement) => void;
+
+  /**
+   * Function to call when the keytip is returned to
+   * 'el' is the DOM element that the keytip is attached to
+   *
+   * @type {(HTMLElement) => void}
+   */
+  onReturn?: (el: HTMLElement) => void;
+
+  /**
+   * Array of KeySequences which is the full key sequence to trigger this keytip
+   * Should not include initial 'start' key sequence
+   *
+   * @type {IKeySequence[]}
+   */
+  keySequences: IKeySequence[];
+
+  /**
+   * KeySequence of overflow set which will trigger the keytip.
+   *
+   * @type {IKeySequence}
+   */
+  overflowSetSequence?: IKeySequence;
+
+  /**
+   * ICalloutProps to pass to the callout element
+   *
+   * @type {string}
+   */
+  calloutProps?: ICalloutProps;
+
+  /**
+   * Optional styles for the component.
+   *
+   * @type {IStyleFunction<IKeytipStyleProps, IKeytipStyles>}
+   */
+  getStyles?: IStyleFunction<IKeytipStyleProps, IKeytipStyles>;
+
+  /**
+   * Offset distance in px between the target element and the positioning of the keytip.this keytip
+   *
+   * @type {number}
+   * @default 0
+   */
+  offset?: number;
+
+  /**
+   * Whether or not this node has children nodes or not. Should be used for menus/overflow components, that have
+   * their children registered after the initial rendering of the DOM.
+   *
+   * @type {boolean}
+   */
+  hasChildrenNodes?: boolean;
+}
+
+/**
+ * Props to style Keytip component
+ */
+export interface IKeytipStyleProps {
+
+  /**
+   * The theme for the keytip.
+   *
+   * @type {ITheme}
+   */
+  theme: ITheme;
+
+  /**
+   * Whether the keytip is disabled or not.
+   *
+   * @type {boolean}
+   */
+  disabled?: boolean;
+
+  /**
+   * T/F if the keytip is visible
+   *
+   * @type {boolean}
+   */
+  visible?: boolean;
+}
+
+export interface IKeytipStyles {
+
+  /**
+   * Style for the div container surrounding the keytip content.
+   *
+   * @type {IStyle}
+   */
+  container: IStyle;
+
+  /**
+   * Style for the keytip content element.
+   *
+   * @type {IStyle}
+   */
+  root: IStyle;
+}
+
+export enum KeytipTransitionModifier {
+  shift = 16,
+  ctrl = 17,
+  alt = 18,
+  leftWindow = 91,
+  rightWindow = 92
+}

packages/experiments/src/components/Keytip/KeytipContent.base.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { BaseComponent, classNamesFunction, customizable } from '../../Utilities';
+import { convertSequencesToKeytipID } from '../../utilities/keysequence/IKeySequence';
+import { IKeytipProps, IKeytipStyleProps, IKeytipStyles } from './Keytip.types';
+
+/**
+ * A component corresponding the the content rendered inside the callout of the keytip component.
+ *
+ * @export
+ * @class KeytipContent
+ * @extends {BaseComponent<IKeytipProps>}
+ */
+@customizable('KeytipContent', ['theme'])
+export class KeytipContentBase extends BaseComponent<IKeytipProps, {}> {
+
+  public render(): JSX.Element {
+    let {
+      content,
+      getStyles,
+      theme,
+      disabled,
+      keySequences,
+      visible
+      } = this.props;
+
+    const getClassNames = classNamesFunction<IKeytipStyleProps, IKeytipStyles>();
+    let classNames = getClassNames(
+      getStyles!,
+      {
+        theme: theme!,
+        disabled,
+        visible
+      }
+    );
+
+    return (
+      <div className={ classNames.container } >
+        <span id={ convertSequencesToKeytipID(keySequences) } className={ classNames.root }>{ content }</span>
+      </div >
+    );
+  }
+}

packages/experiments/src/components/Keytip/KeytipContent.test.tsx

@@ -0,0 +1,33 @@
+import * as React from 'react';
+import * as renderer from 'react-test-renderer';
+import { IKeySequence } from '../../utilities/keysequence/IKeySequence';
+import { KeytipContent } from './KeytipContent';
+
+const sequence: IKeySequence[] = [{ keys: ['a'] }];
+const keyCont = 'A';
+
+describe('Keytip', () => {
+  it('renders visible Keytip correctly', () => {
+    const componentContent = renderer.create(<KeytipContent visible={ true } content={ keyCont } keySequences={ sequence } />);
+    let tree = componentContent.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders visible disabled Keytip correctly', () => {
+    const componentContent = renderer.create(
+      <KeytipContent
+        visible={ true }
+        disabled={ true }
+        content={ keyCont }
+        keySequences={ sequence }
+      />);
+    let tree = componentContent.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders invisible Keytip correctly', () => {
+    const componentContent = renderer.create(<KeytipContent visible={ false } content={ keyCont } keySequences={ sequence } />);
+    let tree = componentContent.toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+});

packages/experiments/src/components/Keytip/KeytipContent.tsx

@@ -0,0 +1,9 @@
+import { styled } from '../../Utilities';
+import { IKeytipProps, IKeytipStyleProps, IKeytipStyles } from './Keytip.types';
+import { KeytipContentBase } from './KeytipContent.base';
+import { getStyles } from './Keytip.styles';
+
+export const KeytipContent = styled<IKeytipProps, IKeytipStyleProps, IKeytipStyles>(
+  KeytipContentBase,
+  getStyles
+);