forked from microsoft/fluentui
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Coachmark: Migrate Coachmark and associated components to function co…
…mponents (microsoft#13626) * Copy Coachmark code to react-next to stage migration * Change files * Migrate Beak to function component * Add stub function component for PositioningContainer * Hoist default props and contentHost ref * Hoist several refs * Fix lint issues * Hoist event logic * Update API * Cleanup * Hoist heightOffset logic * Finish migration (with issues) * Revert to LKG, fixing example import * Hoist positionedHost ref * Hoist target refs * Hoist positions state * Hoist setInitialFocus * Hoist maxHeight * Hoist auto-dismiss events * Hoist heightOffset * Complete PositioningContainer migration * Remove extraneous shouldComponentUpdate * Hoist generic function * Create stub function component * Hoist entityInnerHostElementRef * Hoist isCollapsed state * Hoist positioned data * Hoist beak positioning logic * Hoist dismiss public method * Hoist document event logic * Hoist proximity handlers * Hoist aria text logic * Cleanup unused state * Hoist autofocus logic * Hoist last of state * Finish migration * Forward ref * Update API * Change files * Add Screener test * Fix lint error * Fix cropping of Coachmark story * Fix case where Coahmark starts expanded * Fix API file * Pull from react-next * Fix bad merge * Duplicate Coachamrk Screener test for OUFR * Remove headers * Handle removed props * Deprecate Beak componentRef * Update packages/react-next/src/components/Coachmark/Coachmark.base.tsx Co-authored-by: Elizabeth Craig <ecraig12345@gmail.com> * Fix eslint deprecation errors * Change files * Update API * Fix build error * Fix build issues * Remove rejected screener story Co-authored-by: Elizabeth Craig <ecraig12345@gmail.com>
- Loading branch information
2 people
authored and
Trip Master
committed
Aug 10, 2020
1 parent
8294497
commit d8fc677
Showing
19 changed files
with
987 additions
and
979 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import * as React from 'react'; | ||
| import Screener from 'screener-storybook/src/screener'; | ||
| import { storiesOf } from '@storybook/react'; | ||
| import { FabricDecorator } from '../utilities'; | ||
| import { Coachmark, DirectionalHint, TeachingBubbleContent, Fabric } from 'office-ui-fabric-react'; | ||
| import { useId } from '@uifabric/react-hooks'; | ||
| import { DefaultButton } from 'office-ui-fabric-react'; | ||
|
|
||
| const CoachmarkUsage = ({ isCollapsed = true }: { isCollapsed?: boolean }) => { | ||
| const targetId = useId(); | ||
| return ( | ||
| <> | ||
| <div id={targetId}> | ||
| <DefaultButton text="Click me!" /> | ||
| </div> | ||
| <Coachmark | ||
| target={`#${targetId}`} | ||
| positioningContainerProps={{ | ||
| directionalHint: DirectionalHint.rightTopEdge, | ||
| doNotLayer: false, | ||
| }} | ||
| ariaAlertText="A Coachmark has appeared" | ||
| ariaDescribedBy={'coachmark-desc1'} | ||
| ariaLabelledBy={'coachmark-label1'} | ||
| ariaDescribedByText={'Press enter or alt + C to open the Coachmark notification'} | ||
| ariaLabelledByText={'Coachmark notification'} | ||
| isCollapsed={isCollapsed} | ||
| > | ||
| <TeachingBubbleContent | ||
| headline="Example Title" | ||
| hasCloseButton={true} | ||
| closeButtonAriaLabel="Close" | ||
| primaryButtonProps={{ | ||
| text: 'Try it', | ||
| }} | ||
| secondaryButtonProps={{ | ||
| text: 'Try it', | ||
| }} | ||
| ariaDescribedBy={'example-description1'} | ||
| ariaLabelledBy={'example-label1'} | ||
| > | ||
| Welcome to the land of Coachmarks! | ||
| </TeachingBubbleContent> | ||
| </Coachmark> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| storiesOf('Coachmark', module) | ||
| .addDecorator(FabricDecorator) | ||
| .addDecorator(story => | ||
| // prettier-ignore | ||
| <Screener | ||
| steps={new Screener.Steps() | ||
| .snapshot('default', { cropTo: '.ms-PositioningContainer' }) | ||
| .end()} | ||
| > | ||
| {story()} | ||
| </Screener>, | ||
| ) | ||
| .addStory('Collapsed', () => ( | ||
| <Fabric> | ||
| <CoachmarkUsage /> | ||
| </Fabric> | ||
| )); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| import * as React from 'react'; | ||
| import Screener from 'screener-storybook/src/screener'; | ||
| import { storiesOf } from '@storybook/react'; | ||
| import { FabricDecorator } from '../utilities'; | ||
| import { Coachmark, DirectionalHint, TeachingBubbleContent, Fabric } from '@fluentui/react-next'; | ||
| import { useId } from '@uifabric/react-hooks'; | ||
| import { DefaultButton } from 'office-ui-fabric-react'; | ||
|
|
||
| const CoachmarkUsage = ({ isCollapsed = true }: { isCollapsed?: boolean }) => { | ||
| const targetId = useId(); | ||
| return ( | ||
| <> | ||
| <div id={targetId}> | ||
| <DefaultButton text="Click me!" /> | ||
| </div> | ||
| <Coachmark | ||
| target={`#${targetId}`} | ||
| positioningContainerProps={{ | ||
| directionalHint: DirectionalHint.rightTopEdge, | ||
| doNotLayer: false, | ||
| }} | ||
| ariaAlertText="A Coachmark has appeared" | ||
| ariaDescribedBy={'coachmark-desc1'} | ||
| ariaLabelledBy={'coachmark-label1'} | ||
| ariaDescribedByText={'Press enter or alt + C to open the Coachmark notification'} | ||
| ariaLabelledByText={'Coachmark notification'} | ||
| isCollapsed={isCollapsed} | ||
| > | ||
| <TeachingBubbleContent | ||
| headline="Example Title" | ||
| hasCloseButton={true} | ||
| closeButtonAriaLabel="Close" | ||
| primaryButtonProps={{ | ||
| text: 'Try it', | ||
| }} | ||
| secondaryButtonProps={{ | ||
| text: 'Try it', | ||
| }} | ||
| ariaDescribedBy={'example-description1'} | ||
| ariaLabelledBy={'example-label1'} | ||
| > | ||
| Welcome to the land of Coachmarks! | ||
| </TeachingBubbleContent> | ||
| </Coachmark> | ||
| </> | ||
| ); | ||
| }; | ||
|
|
||
| storiesOf('Coachmark Next', module) | ||
| .addDecorator(FabricDecorator) | ||
| .addDecorator(story => | ||
| // prettier-ignore | ||
| <Screener | ||
| steps={new Screener.Steps() | ||
| .snapshot('default', { cropTo: '.ms-PositioningContainer' }) | ||
| .end()} | ||
| > | ||
| {story()} | ||
| </Screener>, | ||
| ) | ||
| .addStory('Collapsed', () => ( | ||
| <Fabric> | ||
| <CoachmarkUsage /> | ||
| </Fabric> | ||
| )) | ||
| .addStory('Expanded', () => ( | ||
| <Fabric> | ||
| <CoachmarkUsage isCollapsed={false} /> | ||
| </Fabric> | ||
| )); |
8 changes: 8 additions & 0 deletions
8
change/@fluentui-react-next-2020-06-16-19-31-01-functional-Coachmark.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| { | ||
| "type": "prerelease", | ||
| "comment": "Migrate Coachmark and associated components to function components", | ||
| "packageName": "@fluentui/react-next", | ||
| "email": "miclo@microsoft.com", | ||
| "dependentChangeType": "patch", | ||
| "date": "2020-06-16T19:31:01.423Z" | ||
| } |
8 changes: 8 additions & 0 deletions
8
change/office-ui-fabric-react-2020-07-15-18-41-40-functional-Coachmark.json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| { | ||
| "type": "patch", | ||
| "comment": "Add deprecation notices", | ||
| "packageName": "office-ui-fabric-react", | ||
| "email": "miclo@microsoft.com", | ||
| "dependentChangeType": "patch", | ||
| "date": "2020-07-15T18:41:40.248Z" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.