Add small headline with margin and wide mode

apps/vr-tests/src/stories/TeachingBubble.stories.tsx

@@ -0,0 +1,54 @@
+/*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
+import * as React from 'react';
+import Screener, { Steps } from 'screener-storybook/src/screener';
+import { storiesOf } from '@storybook/react';
+import { FabricDecoratorTall } from '../utilities';
+import { TeachingBubble } from 'office-ui-fabric-react/lib/TeachingBubble';
+import { IImageProps } from 'office-ui-fabric-react/lib/Image';
+import { IButtonProps } from 'office-ui-fabric-react/lib/Button';
+import { DirectionalHint } from 'office-ui-fabric-react/lib/common/DirectionalHint';
+
+// tslint:disable:max-line-length
+storiesOf('TeachingBubble', module)
+  .addDecorator(FabricDecoratorTall)
+  .addDecorator(story => (
+    <Screener
+      steps={ new Screener.Steps()
+        .snapshot('default', { cropTo: '.ms-TeachingBubble' })
+        .end()
+      }
+    >
+      { story() }
+    </Screener>
+  ))
+  .add('WideIllustration', () => {
+    let exampleImageProps: IImageProps = { src: 'http://placehold.it/364x140' };
+    let examplePrimaryButton: IButtonProps = {
+      children: 'Got it',
+    };
+    return <TeachingBubble
+      illustrationImage={ exampleImageProps }
+      calloutProps={ { directionalHint: DirectionalHint.bottomCenter } }
+      isWide={ true }
+      hasSmallHeadline={ true }
+      hasCloseIcon={ true }
+      primaryButtonProps={ examplePrimaryButton }
+      headline='Discover what’s trending around you'
+    >
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, nulla, ipsum? Molestiae quis aliquam magni harum non?
+      Modal content
+    </TeachingBubble >
+  })
+  .add('SmallHeadline', () => {
+    let examplePrimaryButton: IButtonProps = {
+      children: 'Got it',
+    };
+    return <TeachingBubble
+      hasSmallHeadline={ true }
+      hasCloseIcon={ true }
+      primaryButtonProps={ examplePrimaryButton }
+      headline='Discover what’s trending around you'
+    >
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, nulla, ipsum? Molestiae quis aliquam magni harum non?
+    </TeachingBubble>
+  });

common/changes/office-ui-fabric-react/master_2017-11-21-18-17.json

@@ -0,0 +1,11 @@
+{
+  "changes": [
+    {
+      "packageName": "office-ui-fabric-react",
+      "comment": "Add small headline with margin and wide callout with image on the left side",
+      "type": "patch"
+    }
+  ],
+  "packageName": "office-ui-fabric-react",
+  "email": "johnyan@microsoft.com"
+}

packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubble.scss

@@ -10,6 +10,8 @@
 .root {
   display: block;
   max-width: 364px;
+  border: 0;
+  box-shadow: none !important;
 }
 
 .bodyContent {
@@ -20,6 +22,10 @@
   margin-bottom: 14px;
 }
 
+.headerIsSmall:not(:last-child) {
+  margin-bottom: 14px;
+}
+
 .headline {
   margin: 0;
   color: $ms-color-white;
@@ -29,6 +35,12 @@
     font-weight: $ms-font-weight-light;
   }
 
+  .headerIsCondensed & {
+    @include ms-font-m;
+    @include ms-margin-right(10px);
+    font-weight: $ms-font-weight-semibold;
+  }
+
   .headerIsSmall & {
     @include ms-font-m;
     @include ms-margin-right(10px);
@@ -70,6 +82,25 @@
   }
 }
 
+.wideCallout {
+  max-width: 456px;
+
+  :global(.ms-TeachingBubble-content) {
+    display: flex;
+  }
+
+  :global(.ms-TeachingBubble-image) {
+    display: flex;
+    align-items: center;
+    padding-left: 20px;
+    max-width: 154px;
+  }
+}
+
+.wideCallout .bodyContent {
+  max-width: 302px;
+}
+
 //Primary button style override
 .root .primaryButton {
   background-color: $ms-color-white;
@@ -86,7 +117,7 @@
   }
 
   &:focus {
-    background-color:  $ms-color-themeLighter;
+    background-color: $ms-color-themeLighter;
     border-color: $ms-color-white;
   }
 

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

@@ -39,7 +39,7 @@ export class TeachingBubble extends BaseComponent<ITeachingBubbleProps, ITeachin
 
     return (
       <Callout
-        className={ css('ms-TeachingBubble', styles.root) }
+        className={ css('ms-TeachingBubble', styles.root, this.props.isWide ? styles.wideCallout : null) }
         ref={ this._resolveRef('_callout') }
         target={ targetElement }
         {...calloutProps}

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

@@ -65,4 +65,14 @@ export interface ITeachingBubbleProps extends React.Props<TeachingBubble | Teach
    * Callback when the TeachingBubble tries to close.
    */
   onDismiss?: (ev?: any) => void;
+
+  /**
+   * Whether or not the Teaching Bubble is wide, with image on the left side.
+   */
+  isWide?: boolean;
+
+  /**
+   * A variation with smaller bold headline and margins to the body (hasCondensedHeadline takes precedence if it is also set to true).
+   */
+  hasSmallHeadline?: boolean;
 }

packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubbleContent.tsx

@@ -38,7 +38,7 @@ export class TeachingBubbleContent extends BaseComponent<ITeachingBubbleProps, I
   }
 
   public render() {
-    let { illustrationImage, primaryButtonProps, secondaryButtonProps, headline, hasCondensedHeadline, hasCloseIcon, onDismiss, closeButtonAriaLabel } = this.props;
+    let { illustrationImage, primaryButtonProps, secondaryButtonProps, headline, hasCondensedHeadline, hasCloseIcon, onDismiss, closeButtonAriaLabel, hasSmallHeadline } = this.props;
 
     let imageContent;
     let headerContent;
@@ -48,7 +48,7 @@ export class TeachingBubbleContent extends BaseComponent<ITeachingBubbleProps, I
 
     if (illustrationImage && illustrationImage.src) {
       imageContent = (
-        <div className={ 'ms-TeachingBubble-header' }>
+        <div className={ 'ms-TeachingBubble-header ms-TeachingBubble-image' }>
           <Image { ...illustrationImage as any } />
         </div>
       );
@@ -60,8 +60,10 @@ export class TeachingBubbleContent extends BaseComponent<ITeachingBubbleProps, I
           className={ css(
             'ms-TeachingBubble-header',
             hasCondensedHeadline ?
-              'ms-TeachingBubble-header--small ' + styles.headerIsSmall :
-              'ms-TeachingBubble-header--large ' + styles.headerIsLarge
+              'ms-TeachingBubble-header--condensed ' + styles.headerIsCondensed
+              : hasSmallHeadline
+                ? 'ms-TeachingBubble-header--small ' + styles.headerIsSmall
+                : 'ms-TeachingBubble-header--large ' + styles.headerIsLarge
           ) }
         >
           <p className={ css('ms-TeachingBubble-headline', styles.headline) } >

packages/office-ui-fabric-react/src/components/TeachingBubble/TeachingBubblePage.tsx

@@ -9,12 +9,16 @@ import {
 import { TeachingBubbleBasicExample } from './examples/TeachingBubble.Basic.Example';
 import { TeachingBubbleCondensedExample } from './examples/TeachingBubble.Condensed.Example';
 import { TeachingBubbleIllustrationExample } from './examples/TeachingBubble.Illustration.Example';
+import { TeachingBubbleWideIllustrationExample } from './examples/TeachingBubble.WideIllustration.Example';
+import { TeachingBubbleSmallHeadlineExample } from './examples/TeachingBubble.SmallHeadline.Example';
 import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus';
 import { TeachingBubbleStatus } from './TeachingBubble.checklist';
 
 const TeachingBubbleBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Basic.Example.tsx') as string;
 const TeachingBubbleCondensedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Condensed.Example.tsx') as string;
 const TeachingBubbleIllustrationExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.Basic.Example.tsx') as string;
+const TeachingBubbleWideIllustrationExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.WideIllustration.Example.tsx') as string;
+const TeachingBubbleSmallHeadlineExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.SmallHeadline.Example.tsx') as string;
 
 export class TeachingBubblePage extends React.Component<any, any> {
   public render() {
@@ -33,6 +37,12 @@ export class TeachingBubblePage extends React.Component<any, any> {
             <ExampleCard title='TeachingBubble with Illustration' code={ TeachingBubbleIllustrationExampleCode }>
               <TeachingBubbleIllustrationExample />
             </ExampleCard>
+            <ExampleCard title='TeachingBubble wide with Illustration' code={ TeachingBubbleWideIllustrationExampleCode }>
+              <TeachingBubbleWideIllustrationExample />
+            </ExampleCard>
+            <ExampleCard title='TeachingBubble with small headline' code={ TeachingBubbleSmallHeadlineExampleCode }>
+              <TeachingBubbleSmallHeadlineExample />
+            </ExampleCard>
           </LayerHost>
         }
         propertiesTables={

packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.SmallHeadline.Example.tsx

@@ -0,0 +1,61 @@
+/* tslint:disable:no-unused-variable */
+import * as React from 'react';
+/* tslint:enable:no-unused-variable */
+import { DefaultButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
+import { TeachingBubble } from 'office-ui-fabric-react/lib/TeachingBubble';
+
+export interface ITeachingBubbleSmallHeadlineExampleState {
+  isTeachingBubbleVisible?: boolean;
+}
+
+export class TeachingBubbleSmallHeadlineExample extends React.Component<any, ITeachingBubbleSmallHeadlineExampleState> {
+  private _menuButtonElement: HTMLElement;
+
+  public constructor() {
+    super();
+
+    this._onDismiss = this._onDismiss.bind(this);
+
+    this.state = {
+      isTeachingBubbleVisible: false,
+    };
+  }
+
+  public render() {
+    let { isTeachingBubbleVisible } = this.state;
+    let examplePrimaryButton: IButtonProps = {
+      children: 'Try it out',
+    };
+
+    return (
+      <div className='ms-TeachingBubbleExample'>
+        <span className='ms-TeachingBubbleBasicExample-buttonArea' ref={ (menuButton) => this._menuButtonElement = menuButton! }>
+          <DefaultButton
+            onClick={ this._onDismiss }
+            text={ isTeachingBubbleVisible ? 'Hide TeachingBubble' : 'Show TeachingBubble' }
+          />
+        </span>
+        { isTeachingBubbleVisible ? (
+          <div>
+            <TeachingBubble
+              targetElement={ this._menuButtonElement }
+              hasSmallHeadline={ true }
+              onDismiss={ this._onDismiss }
+              hasCloseIcon={ true }
+              primaryButtonProps={ examplePrimaryButton }
+              headline='Discover what’s trending around you'
+            >
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, nulla, ipsum? Molestiae quis aliquam magni harum non?
+            </TeachingBubble>
+          </div>
+        ) : (null) }
+      </div>
+    );
+  }
+
+  private _onDismiss(ev: any) {
+    this.setState({
+      isTeachingBubbleVisible: !this.state.isTeachingBubbleVisible
+    });
+  }
+}

packages/office-ui-fabric-react/src/components/TeachingBubble/examples/TeachingBubble.WideIllustration.Example.tsx

@@ -0,0 +1,73 @@
+/* tslint:disable:no-unused-variable */
+import * as React from 'react';
+/* tslint:enable:no-unused-variable */
+
+import { IImageProps } from 'office-ui-fabric-react/lib/Image';
+import { DefaultButton, IButtonProps } from 'office-ui-fabric-react/lib/Button';
+import { TeachingBubble } from 'office-ui-fabric-react/lib/TeachingBubble';
+import { DirectionalHint } from 'office-ui-fabric-react/lib/common/DirectionalHint';
+
+export interface ITeachingBubbleWideIllustrationExampleState {
+  isTeachingBubbleVisible?: boolean;
+}
+
+export class TeachingBubbleWideIllustrationExample extends React.Component<any, ITeachingBubbleWideIllustrationExampleState> {
+  private _menuButtonElement: HTMLElement;
+
+  public constructor() {
+    super();
+
+    this._onDismiss = this._onDismiss.bind(this);
+
+    this.state = {
+      isTeachingBubbleVisible: false,
+    };
+  }
+
+  public render() {
+    let { isTeachingBubbleVisible } = this.state;
+    let exampleImageProps: IImageProps = { src: 'http://placehold.it/364x140' };
+    let examplePrimaryButton: IButtonProps = {
+      children: 'Try it out',
+    };
+    let exampleSecondaryButtonProps: IButtonProps = {
+      children: 'May be later',
+      onClick: this._onDismiss
+    };
+
+    return (
+      <div className='ms-TeachingBubbleExample'>
+        <span className='ms-TeachingBubbleBasicExample-buttonArea' ref={ (menuButton) => this._menuButtonElement = menuButton! }>
+          <DefaultButton
+            onClick={ this._onDismiss }
+            text={ isTeachingBubbleVisible ? 'Hide TeachingBubble' : 'Show TeachingBubble' }
+          />
+        </span>
+        { isTeachingBubbleVisible ? (
+          <div>
+            <TeachingBubble
+              illustrationImage={ exampleImageProps }
+              calloutProps={ { directionalHint: DirectionalHint.bottomCenter } }
+              isWide={ true }
+              hasSmallHeadline={ true }
+              hasCloseIcon={ true }
+              targetElement={ this._menuButtonElement }
+              primaryButtonProps={ examplePrimaryButton }
+              secondaryButtonProps={ exampleSecondaryButtonProps }
+              onDismiss={ this._onDismiss }
+              headline='Discover what’s trending around you'
+            >
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere, nulla, ipsum? Molestiae quis aliquam magni harum non?
+            </TeachingBubble>
+          </div>
+        ) : (null) }
+      </div>
+    );
+  }
+
+  private _onDismiss(ev: any) {
+    this.setState({
+      isTeachingBubbleVisible: !this.state.isTeachingBubbleVisible
+    });
+  }
+}