Skip to content

Commit 9c06d75

Browse files
andreasbalzerandreasbalzer
authored
Add support for Fluent UI Teaching Bubble (#1)
Add support for Fluent UI Teaching Bubble Co-authored-by: Andreas Balzer <anbal@microsoft.com>
1 parent fc5a748 commit 9c06d75

File tree

7 files changed

+150
-3
lines changed

7 files changed

+150
-3
lines changed

‎apps/demo/src/app/app.component.html

+11-1
Original file line numberDiff line numberDiff line change
@@ -257,4 +257,14 @@ <h2>Getting up and running...</h2>
257257
<fab-people-picker [inputProps]="{placeholder: 'Search for a person'}" [pickerSuggestionsOptions]="{noResultsFoundText: 'No results found', loadingText: 'Loading'}" [selectedItems]="peoplePickerSelectedItems" (onChange)="updatePeoplePickerSelectedItems($event)" [resolveSuggestions]="peoplePickerInputChanged"></fab-people-picker>
258258
<div>{{peoplePickerSelectedItems.length}} item(s) selected in the people picker</div>
259259
<fab-progress-indicator bar-height="4" [percentComplete]="0.35" description="Progress indicator description" label="Progress indicator label"></fab-progress-indicator>
260-
</div>
260+
<fab-default-button class="calloutTarget" (click)="onOpenCalloutClicked()">Callout target</fab-default-button>
261+
<fab-callout target=".calloutTarget" [isBeakVisible]="true" [gapSpace]="0" [doNotLayer]="false"
262+
[hidden]="false" role="alert" [beakWidth]="16" (onDismiss)="onCalloutDismiss()" *ngIf="isCalloutVisible">
263+
Callout content
264+
</fab-callout>
265+
<fab-default-button class="teachingBubbleTarget" (click)="onOpenTeachingBubbleClicked()">Teaching Bubble target</fab-default-button>
266+
<fab-teaching-bubble target=".teachingBubbleTarget" [primaryButtonProps]="teachingBubblePrimaryButtonProps" [secondaryButtonProps]="teachingBubbleSecondaryButtonProps" headline="Teaching bubble headline" hasCloseButton={true}
267+
closeButtonAriaLabel="Close" (onDismiss)="onTeachingBubbleDismiss()" *ngIf="isTeachingBubbleVisible">
268+
Teaching bubble content
269+
</fab-teaching-bubble>
270+
</div>

‎apps/demo/src/app/app.component.ts

+32
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,9 @@ import {
99
ICheckboxProps,
1010
IPersonaProps,
1111
IPeoplePickerProps,
12+
IButtonProps,
13+
BaseButton,
14+
Button
1215
} from 'office-ui-fabric-react';
1316
import { RenderPropOptions } from '@angular-react/core';
1417
import { FabDropdownComponent } from '@angular-react/fabric';
@@ -102,6 +105,35 @@ export class AppComponent {
102105
{ field2: 'f2content5' },
103106
];
104107

108+
teachingBubblePrimaryButtonProps: IButtonProps = {
109+
children: 'Primary action',
110+
onClick: (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement | HTMLAnchorElement | BaseButton | Button | HTMLSpanElement, MouseEvent>) => alert('Primary action clicked'),
111+
};
112+
113+
teachingBubbleSecondaryButtonProps: IButtonProps = {
114+
children: 'Maybe later',
115+
onClick: (event: React.MouseEvent<HTMLButtonElement | HTMLDivElement | HTMLAnchorElement | BaseButton | Button | HTMLSpanElement, MouseEvent>) => alert('Maybe later clicked'),
116+
};
117+
118+
isCalloutVisible = false;
119+
isTeachingBubbleVisible = false;
120+
121+
onOpenCalloutClicked() {
122+
this.isCalloutVisible = true;
123+
}
124+
125+
onOpenTeachingBubbleClicked() {
126+
this.isTeachingBubbleVisible = true;
127+
}
128+
129+
onCalloutDismiss(event) {
130+
this.isCalloutVisible = false;
131+
}
132+
133+
onTeachingBubbleDismiss(event) {
134+
this.isTeachingBubbleVisible = false;
135+
}
136+
105137
onNewClicked() {
106138
console.log('New clicked');
107139
}

‎apps/demo/src/app/app.module.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,8 @@ import {
3636
FabTextFieldModule,
3737
FabPeoplePickerModule,
3838
FabTagPickerModule,
39-
FabProgressIndicatorModule
39+
FabProgressIndicatorModule,
40+
FabTeachingBubbleModule
4041
} from '@angular-react/fabric';
4142
import { NgModule } from '@angular/core';
4243
import { NxModule } from '@nrwl/nx';
@@ -84,7 +85,8 @@ import { CounterComponent } from './counter/counter.component';
8485
FabTextFieldModule,
8586
FabPeoplePickerModule,
8687
FabTagPickerModule,
87-
FabProgressIndicatorModule
88+
FabProgressIndicatorModule,
89+
FabTeachingBubbleModule
8890
],
8991
declarations: [AppComponent, CounterComponent],
9092
bootstrap: [AppComponent],

‎libs/fabric/src/lib/components/teaching-bubble/public-api.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
// Copyright (c) Microsoft Corporation. All rights reserved.
2+
// Licensed under the MIT License.
3+
4+
export * from './teaching-bubble.component';
5+
export * from './teaching-bubble.module';

‎libs/fabric/src/lib/components/teaching-bubble/teaching-bubble.component.ts

+74
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
// Copyright (c) Microsoft Corporation. All rights reserved.
2+
// Licensed under the MIT License.
3+
4+
import { ReactWrapperComponent, JsxRenderFunc, InputRendererOptions } from '@angular-react/core';
5+
import {
6+
ChangeDetectionStrategy,
7+
ChangeDetectorRef,
8+
Component,
9+
ElementRef,
10+
EventEmitter,
11+
Input,
12+
Output,
13+
Renderer2,
14+
ViewChild,
15+
OnInit,
16+
} from '@angular/core';
17+
import { ITeachingBubbleProps } from 'office-ui-fabric-react/lib/TeachingBubble';
18+
19+
@Component({
20+
selector: 'fab-teaching-bubble',
21+
exportAs: 'fabTeachingBubble',
22+
template: `
23+
<TeachingBubble
24+
#reactNode
25+
[ariaDescribedBy]="ariaDescribedBy"
26+
[ariaLabelledBy]="ariaLabelledBy"
27+
[calloutProps]="calloutProps"
28+
[componentRef]="componentRef"
29+
[footerContent]="footerContent"
30+
[hasCloseButton]="hasCloseButton"
31+
[hasCondensedHeadline]="hasCondensedHeadline"
32+
[hasSmallHeadline]="hasSmallHeadline"
33+
[headline]="headline"
34+
[illustrationImage]="illustrationImage"
35+
[isWide]="isWide"
36+
(onDismiss)="onDismiss.emit($event)"
37+
[primaryButtonProps]="primaryButtonProps"
38+
[secondaryButtonProps]="secondaryButtonProps"
39+
[styles]="styles"
40+
[target]="target"
41+
[theme]="theme"
42+
>
43+
<ReactContent><ng-content></ng-content></ReactContent>
44+
</TeachingBubble>
45+
`,
46+
styles: ['react-renderer'],
47+
changeDetection: ChangeDetectionStrategy.OnPush,
48+
})
49+
export class FabTeachingBubbleComponent extends ReactWrapperComponent<ITeachingBubbleProps> {
50+
@ViewChild('reactNode', { static: true }) protected reactNodeRef: ElementRef;
51+
52+
@Input() ariaDescribedBy?: ITeachingBubbleProps['ariaDescribedBy'];
53+
@Input() ariaLabelledBy?: ITeachingBubbleProps['ariaLabelledBy'];
54+
@Input() calloutProps?: ITeachingBubbleProps['calloutProps'];
55+
@Input() componentRef?: ITeachingBubbleProps['componentRef'];
56+
@Input() footerContent?: ITeachingBubbleProps['footerContent'];
57+
@Input() hasCloseButton?: ITeachingBubbleProps['hasCloseButton'];
58+
@Input() hasCondensedHeadline?: ITeachingBubbleProps['hasCondensedHeadline'];
59+
@Input() hasSmallHeadline?: ITeachingBubbleProps['hasSmallHeadline'];
60+
@Input() headline?: ITeachingBubbleProps['headline'];
61+
@Input() illustrationImage?: ITeachingBubbleProps['illustrationImage'];
62+
@Input() isWide?: ITeachingBubbleProps['isWide'];
63+
@Input() primaryButtonProps?: ITeachingBubbleProps['primaryButtonProps'];
64+
@Input() secondaryButtonProps?: ITeachingBubbleProps['secondaryButtonProps'];
65+
@Input() styles?: ITeachingBubbleProps['styles'];
66+
@Input() target?: ITeachingBubbleProps['target'];
67+
@Input() theme?: ITeachingBubbleProps['theme'];
68+
69+
@Output() readonly onDismiss = new EventEmitter<{ ev?: any }>();
70+
71+
constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, renderer: Renderer2) {
72+
super(elementRef, changeDetectorRef, renderer);
73+
}
74+
}

‎libs/fabric/src/lib/components/teaching-bubble/teaching-bubble.module.ts

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
// Copyright (c) Microsoft Corporation. All rights reserved.
2+
// Licensed under the MIT License.
3+
4+
import { registerElement } from '@angular-react/core';
5+
import { CommonModule } from '@angular/common';
6+
import { NgModule, NO_ERRORS_SCHEMA } from '@angular/core';
7+
import { TeachingBubble } from 'office-ui-fabric-react';
8+
import { FabTeachingBubbleComponent } from './teaching-bubble.component';
9+
10+
const components = [FabTeachingBubbleComponent];
11+
12+
@NgModule({
13+
imports: [CommonModule],
14+
declarations: components,
15+
exports: components,
16+
schemas: [NO_ERRORS_SCHEMA],
17+
})
18+
export class FabTeachingBubbleModule {
19+
constructor() {
20+
// Add any React elements to the registry (used by the renderer).
21+
registerElement('TeachingBubble', () => TeachingBubble);
22+
}
23+
}

‎libs/fabric/src/public-api.ts

+1
Original file line numberDiff line numberDiff line change
@@ -39,3 +39,4 @@ export * from './lib/components/tooltip/public-api';
3939
export * from './lib/components/nav/public-api';
4040
export * from './lib/components/pickers/public-api';
4141
export * from './lib/components/progress-indicator/public-api';
42+
export * from './lib/components/teaching-bubble/public-api';

0 commit comments

Comments
 (0)