Moving Breadcrumb to react-next, in preparation for converting to a f…

…unction component (#15054)

* Moving breadcrumb to react-next

* Reverting an accidental file.

* Change files

* Updating the api

* Updating example snapshots.

apps/perf-test/src/scenarios/Breadcrumb.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { Breadcrumb } from 'office-ui-fabric-react';
+
+const items = [{ text: 'test', key: 'f1' }];
+const Scenario = () => <Breadcrumb items={items} />;
+
+export default Scenario;

apps/perf-test/src/scenarios/BreadcrumbNext.tsx

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { Breadcrumb } from '@fluentui/react-next';
+
+const items = [{ text: 'test', key: 'f1' }];
+const Scenario = () => <Breadcrumb items={items} />;
+
+export default Scenario;

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

@@ -0,0 +1,112 @@
+/*! Copyright (c) Microsoft Corporation. All rights reserved. Licensed under the MIT license. */
+import * as React from 'react';
+import Screener from 'screener-storybook/src/screener';
+import { storiesOf } from '@storybook/react';
+import { FabricDecoratorTall } from '../utilities';
+import { Breadcrumb } from '@fluentui/react-next';
+
+const noOp = () => undefined;
+
+storiesOf('Breadcrumb', module)
+  .addDecorator(FabricDecoratorTall)
+  .addDecorator(story => (
+    <Screener
+      steps={new Screener.Steps()
+        .snapshot('default', { cropTo: '.testWrapper' })
+        .executeScript(
+          "document.getElementsByClassName('testWrapper')[0].classList.add('ms-Fabric--isFocusVisible')",
+        )
+        .executeScript("document.getElementsByClassName('ms-Breadcrumb-overflowButton')[0].focus()")
+        .snapshot('overflowButtonFocus', { cropTo: '.testWrapper' })
+        .executeScript("document.getElementsByClassName('ms-Breadcrumb-itemLink')[0].focus()")
+        .snapshot('itemLinkFocus', { cropTo: '.testWrapper' })
+        .executeScript(
+          "document.getElementsByClassName('testWrapper')[0].classList.remove('ms-Fabric--isFocusVisible')",
+        )
+        .hover('.ms-Breadcrumb-overflowButton')
+        .snapshot('hover', { cropTo: '.testWrapper' })
+        .click('.ms-Breadcrumb-overflowButton') // opening the dropdown
+        .hover('.ms-Breadcrumb-overflowButton') // moving the mouse a bit to let dropdown open.
+        .snapshot('click', { cropTo: '.testWrapper' })
+        .click('.ms-Breadcrumb-overflowButton') // closing the dropdown
+        .hover('.ms-Breadcrumb-list li:nth-child(2)')
+        .snapshot('longTitleHover', { cropTo: '.testWrapper' })
+        .hover('.ms-Breadcrumb-list li:nth-child(3)')
+        .snapshot('shortTitleHover', { cropTo: '.testWrapper' })
+        .end()}
+    >
+      {story()}
+    </Screener>
+  ))
+  .addStory(
+    'Root',
+    () => (
+      <Breadcrumb
+        items={[
+          { text: 'Files', key: 'Files', href: '#/examples/breadcrumb' },
+          { text: 'This is link 1', key: 'l1', href: '#/examples/breadcrumb' },
+          { text: 'This is link 2', key: 'l2', href: '#/examples/breadcrumb' },
+          { text: 'This is link 3 with a long name', key: 'l3', href: '#/examples/breadcrumb' },
+          { text: 'This is link 4', key: 'l4', href: '#/examples/breadcrumb' },
+          { text: 'This is link 5', key: 'l5', href: '#/examples/breadcrumb', isCurrentItem: true },
+        ]}
+        maxDisplayedItems={3}
+      />
+    ),
+    { rtl: true },
+  )
+  .addStory(
+    'Button',
+    () => (
+      <Breadcrumb
+        items={[
+          { text: 'Files', key: 'Files', onClick: noOp },
+          { text: 'This is folder 1', key: 'l1', onClick: noOp },
+          { text: 'This is folder 2', key: 'l2', onClick: noOp },
+          { text: 'This is folder 3', key: 'l3', onClick: noOp },
+          { text: 'This is folder 4', key: 'l4', onClick: noOp },
+          { text: 'This is folder 5', key: 'l5', onClick: noOp, isCurrentItem: true },
+        ]}
+        maxDisplayedItems={3}
+      />
+    ),
+    { rtl: true },
+  );
+
+// Stories for hovering over actionable and non-actionable items
+storiesOf('Breadcrumb', module)
+  .addDecorator(FabricDecoratorTall)
+  .addDecorator(story => (
+    <Screener
+      steps={new Screener.Steps()
+        .hover('.ms-Breadcrumb-list li:nth-child(2)')
+        .snapshot('actionable hover', { cropTo: '.testWrapper' })
+        .hover('.ms-Breadcrumb-list li:nth-child(3)')
+        .snapshot('non-actionable hover', { cropTo: '.testWrapper' })
+        .hover('.ms-Breadcrumb-overflowButton')
+        .click('.ms-Breadcrumb-overflowButton') // opening the dropdown
+        .hover('.ms-Breadcrumb-overflowButton') // moving the mouse a bit to let dropdown open.
+        .hover('.ms-ContextualMenu-list li:nth-child(2)')
+        .snapshot('actionable overflow hover', { cropTo: '.testWrapper' })
+        .hover('.ms-ContextualMenu-list li:nth-child(3)')
+        .snapshot('non-actionable overflow hover', { cropTo: '.testWrapper' })
+        .end()}
+    >
+      {story()}
+    </Screener>
+  ))
+  .addStory('Hovering items', () => (
+    <Breadcrumb
+      items={[
+        // overflow
+        { text: 'Files', key: 'Files' },
+        { text: 'Folder 1', key: 'l1', onClick: noOp },
+        { text: 'Folder 2 no action', key: 'l2' },
+        // displayed
+        { text: 'Folder 3', key: 'l3', onClick: noOp },
+        { text: 'Folder 4 no action', key: 'l4' },
+        { text: 'Folder 5', key: 'l5', onClick: noOp, isCurrentItem: true },
+      ]}
+      maxDisplayedItems={3}
+    />
+  ));

change/@fluentui-react-next-2020-09-14-17-40-31-feat-moving-breadcrumb.json

@@ -0,0 +1,8 @@
+{
+  "type": "prerelease",
+  "comment": "Moving Breadcrumb to react-next for future function component conversion.",
+  "packageName": "@fluentui/react-next",
+  "email": "[email protected]",
+  "dependentChangeType": "patch",
+  "date": "2020-09-15T00:40:31.083Z"
+}

packages/react-next/etc/react-next.api.md

@@ -20,6 +20,7 @@ import { IButtonStyles as IButtonStyles_2 } from '@fluentui/react-next/lib/compa
 import { ICalloutPositionedInfo } from 'office-ui-fabric-react/lib/utilities/positioning';
 import { ICheckboxStyleProps } from '@fluentui/react-checkbox/lib/Checkbox';
 import { ICheckboxStyles } from '@fluentui/react-checkbox/lib/Checkbox';
+import { IComponentAs } from 'office-ui-fabric-react/lib/Utilities';
 import { IFocusZoneProps } from 'office-ui-fabric-react/lib/FocusZone';
 import { IIconProps } from 'office-ui-fabric-react/lib/Icon';
 import { IKeytipProps } from 'office-ui-fabric-react/lib/Keytip';
@@ -43,6 +44,7 @@ import { IStyleFunctionOrObject } from 'office-ui-fabric-react/lib/Utilities';
 import { ISuggestionModel } from 'office-ui-fabric-react/lib/Pickers';
 import { ITeachingBubble } from 'office-ui-fabric-react/lib/TeachingBubble';
 import { ITheme } from 'office-ui-fabric-react/lib/Styling';
+import { ITooltipHostProps } from 'office-ui-fabric-react/lib/Tooltip';
 import { IVerticalDividerClassNames } from 'office-ui-fabric-react/src/components/Divider/VerticalDivider.types';
 import { IWithResponsiveModeState } from 'office-ui-fabric-react/lib/utilities/decorators/withResponsiveMode';
 import { Point } from 'office-ui-fabric-react/lib/Utilities';
@@ -109,6 +111,19 @@ export class BaseSelectedItemsList<T, P extends IBaseSelectedItemsListProps<T>>
     updateItems(items: T[], focusIndex?: number): void;
 }
 
+// @public (undocumented)
+export const Breadcrumb: React.FunctionComponent<IBreadcrumbProps>;
+
+// @public (undocumented)
+export class BreadcrumbBase extends React.Component<IBreadcrumbProps, any> {
+    constructor(props: IBreadcrumbProps);
+    // (undocumented)
+    static defaultProps: IBreadcrumbProps;
+    focus(): void;
+    // (undocumented)
+    render(): JSX.Element;
+    }
+
 // @public (undocumented)
 export const ButtonGrid: React.FunctionComponent<IButtonGridProps>;
 
@@ -308,6 +323,84 @@ export interface IBaseSelectedItemsListState<T> {
     items: T[];
 }
 
+// @public (undocumented)
+export interface IBreadcrumb {
+    focus(): void;
+}
+
+// @public @deprecated (undocumented)
+export type IBreadCrumbData = IBreadcrumbData;
+
+// @public (undocumented)
+export interface IBreadcrumbData {
+    // (undocumented)
+    props: IBreadcrumbProps;
+    // (undocumented)
+    renderedItems: IBreadcrumbItem[];
+    // (undocumented)
+    renderedOverflowItems: IBreadcrumbItem[];
+}
+
+// @public (undocumented)
+export interface IBreadcrumbItem {
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'a';
+    href?: string;
+    isCurrentItem?: boolean;
+    key: string;
+    onClick?: (ev?: React.MouseEvent<HTMLElement>, item?: IBreadcrumbItem) => void;
+    text: string;
+}
+
+// @public (undocumented)
+export interface IBreadcrumbProps extends React.HTMLAttributes<HTMLElement> {
+    ariaLabel?: string;
+    className?: string;
+    componentRef?: IRefObject<IBreadcrumb>;
+    dividerAs?: IComponentAs<IDividerAsProps>;
+    focusZoneProps?: IFocusZoneProps;
+    items: IBreadcrumbItem[];
+    maxDisplayedItems?: number;
+    onGrowData?: (data: IBreadcrumbData) => IBreadcrumbData | undefined;
+    onReduceData?: (data: IBreadcrumbData) => IBreadcrumbData | undefined;
+    onRenderItem?: IRenderFunction<IBreadcrumbItem>;
+    onRenderOverflowIcon?: IRenderFunction<IButtonProps>;
+    overflowAriaLabel?: string;
+    overflowIndex?: number;
+    // (undocumented)
+    styles?: IStyleFunctionOrObject<IBreadcrumbStyleProps, IBreadcrumbStyles>;
+    // (undocumented)
+    theme?: ITheme;
+    tooltipHostProps?: ITooltipHostProps;
+}
+
+// @public (undocumented)
+export interface IBreadcrumbStyleProps {
+    // (undocumented)
+    className?: string;
+    // (undocumented)
+    theme: ITheme;
+}
+
+// @public (undocumented)
+export interface IBreadcrumbStyles {
+    // (undocumented)
+    chevron: IStyle;
+    // (undocumented)
+    item: IStyle;
+    // (undocumented)
+    itemLink: IStyle;
+    // (undocumented)
+    list: IStyle;
+    // (undocumented)
+    listItem: IStyle;
+    // (undocumented)
+    overflow: IStyle;
+    // (undocumented)
+    overflowButton: IStyle;
+    // (undocumented)
+    root: IStyle;
+}
+
 // @public (undocumented)
 export interface IButtonGrid {
 }
@@ -947,6 +1040,11 @@ export interface IDialogState {
     y: number;
 }
 
+// @public (undocumented)
+export interface IDividerAsProps extends IIconProps {
+    item?: IBreadcrumbItem;
+}
+
 // @public (undocumented)
 export interface IDragOptions {
     closeMenuItemText: string;
@@ -2610,7 +2708,6 @@ export * from "@uifabric/date-time/lib/DatePicker";
 export * from "office-ui-fabric-react/lib/ActivityItem";
 export * from "office-ui-fabric-react/lib/Announced";
 export * from "office-ui-fabric-react/lib/Autofill";
-export * from "office-ui-fabric-react/lib/Breadcrumb";
 export * from "office-ui-fabric-react/lib/Check";
 export * from "office-ui-fabric-react/lib/ChoiceGroup";
 export * from "office-ui-fabric-react/lib/Color";

packages/react-next/src/Breadcrumb.ts

@@ -1 +1 @@
-export * from 'office-ui-fabric-react/lib/Breadcrumb';
+export * from './components/Breadcrumb/index';