diff --git a/apps/fabric-website/src/pages/Controls/ButtonPage/docs/ios/ButtonImplementation.md b/apps/fabric-website/src/pages/Controls/ButtonPage/docs/ios/ButtonImplementation.md
new file mode 100644
index 00000000000000..1c795a76e84c0c
--- /dev/null
+++ b/apps/fabric-website/src/pages/Controls/ButtonPage/docs/ios/ButtonImplementation.md
@@ -0,0 +1,13 @@
+### Designs
+
+Coming soon
+
+### Control name
+
+`MSButton`
+
+### Library
+
+[UI Fabric iOS](https://github.com/OfficeDev/ui-fabric-ios)
+
+[Sample Code](https://github.com/OfficeDev/ui-fabric-ios/blob/master/OfficeUIFabric.Demo/OfficeUIFabric.Demo/Demos/MSButtonDemoController.swift)
diff --git a/apps/fabric-website/src/pages/Controls/ButtonPage/docs/ios/ButtonOverview.md b/apps/fabric-website/src/pages/Controls/ButtonPage/docs/ios/ButtonOverview.md
new file mode 100644
index 00000000000000..ee8ade1be9bff4
--- /dev/null
+++ b/apps/fabric-website/src/pages/Controls/ButtonPage/docs/ios/ButtonOverview.md
@@ -0,0 +1,3 @@
+Buttons are one of the core controls that make an app feel native to the platform it's on. It’s important to respect the platform's paradigms in order to help the user feel at home on iOS and keep the experience quality high.
+
+
diff --git a/apps/fabric-website/src/pages/NotFoundPage/NotFoundPage.tsx b/apps/fabric-website/src/pages/NotFoundPage/NotFoundPage.tsx
new file mode 100644
index 00000000000000..a59098e19bfa27
--- /dev/null
+++ b/apps/fabric-website/src/pages/NotFoundPage/NotFoundPage.tsx
@@ -0,0 +1,129 @@
+import * as React from 'react';
+import { Link, DefaultButton, mergeStyles } from 'office-ui-fabric-react';
+import {
+ trackEvent,
+ EventNames,
+ randomEntry,
+ getSiteArea,
+ Page,
+ IPageProps,
+ IPageSectionProps
+} from '@uifabric/example-app-base/lib/index2';
+import { SiteDefinition } from '../../SiteDefinition/index';
+import { topNavHeight, mediaQuery } from '../../styles/constants';
+
+const illustrations = [
+ 'https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/images/error/error1.svg',
+ 'https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/images/error/error2.svg',
+ 'https://static2.sharepointonline.com/files/fabric/office-ui-fabric-react-assets/images/error/error3.svg'
+];
+
+const rootClass = mergeStyles({
+ backgroundRepeat: 'no-repeat',
+ backgroundSize: '480px',
+ backgroundPosition: '80% 80%',
+ backgroundImage: `url(${randomEntry(illustrations)})`,
+ minHeight: `calc(100vh - ${topNavHeight}px)`,
+
+ selectors: {
+ [mediaQuery.maxMobile]: {
+ backgroundSize: '80%'
+ }
+ }
+});
+
+export interface INotFoundPageProps extends IPageProps {}
+
+export class NotFoundPage extends React.Component
+
+ )
+ }
+ ];
+
+ /** Gets the top level page from the current URL and returns a link to it. */
+ private _getAreaLink = (): JSX.Element => {
+ const area = getSiteArea(SiteDefinition.pages);
+ const pageForArea = SiteDefinition.pages.filter(page => page.title === area)[0];
+ if (pageForArea) {
+ const { title, url } = pageForArea;
+
+ return (
+ The URL may be misspelled or the page you are looking for is no longer available.
+-
+
- + this._onInternalLinkClick(ev, '#/') + } + > + UI Fabric Home + + + {this._getAreaLink()} +
+
-
+
- [Release notes and demos](https://aka.ms/FabricDemo) +
SharePoint Framework
SharePoint uses Fabric, so if you’re building on top of or within a SharePoint experience, you can be sure that your UI will blend in. diff --git a/apps/fabric-website/src/root.tsx b/apps/fabric-website/src/root.tsx index f587e18300dff9..c992ec33be0641 100644 --- a/apps/fabric-website/src/root.tsx +++ b/apps/fabric-website/src/root.tsx @@ -5,6 +5,7 @@ import { createSite } from './utilities/createSite'; import * as platformPickerStyles from '@uifabric/example-app-base/lib/components/PlatformPicker/PlatformPicker.module.scss'; import { SiteDefinition } from './SiteDefinition/index'; import { HomePage } from './pages/HomePage/HomePage'; +import { NotFoundPage } from './pages/NotFoundPage/NotFoundPage'; import { AndroidLogo, AppleLogo, WebLogo } from './utilities/index'; // TODO: handle redirects @@ -25,4 +26,4 @@ registerIcons({ } }); -createSite(SiteDefinition, HomePage); +createSite(SiteDefinition, [NotFoundPage, HomePage]); diff --git a/apps/fabric-website/src/styles/constants.ts b/apps/fabric-website/src/styles/constants.ts index 069f97fcc018d6..ab9d0920e5f4b8 100644 --- a/apps/fabric-website/src/styles/constants.ts +++ b/apps/fabric-website/src/styles/constants.ts @@ -35,6 +35,7 @@ export const PageHeaderFullHeight = 136; export const navWidthSm = 252; export const navWidthLg = 302; export const navPadding = appPaddingSm; +export const topNavHeight = 52; // We want the text to appear the same distance from the body and the nav. It include 8 padding already. export const sideRailPaddingLeft = appPaddingMd - 8; diff --git a/apps/fabric-website/src/version.ts b/apps/fabric-website/src/version.ts index 3817eacf96233a..a3d9d28b5b15c5 100644 --- a/apps/fabric-website/src/version.ts +++ b/apps/fabric-website/src/version.ts @@ -1,4 +1,4 @@ -// @uifabric/fabric-website@6.18.1 +// @uifabric/fabric-website@6.18.4 // Do not modify this file, the file is generated as part of publish. The checked in version is a placeholder only. import { setVersion } from '@uifabric/set-version'; - setVersion('@uifabric/fabric-website', '6.18.1'); \ No newline at end of file + setVersion('@uifabric/fabric-website', '6.18.4'); \ No newline at end of file diff --git a/apps/perf-test/package.json b/apps/perf-test/package.json index 4d4d13af03a7b1..d879b34c7f3ecb 100644 --- a/apps/perf-test/package.json +++ b/apps/perf-test/package.json @@ -28,7 +28,7 @@ "@microsoft/load-themed-styles": "^1.7.13", "es6-promise": "^4.1.0", "immutability-helper": "~2.8.1", - "office-ui-fabric-react": "^6.181.1", + "office-ui-fabric-react": "^6.182.1", "react": ">=16.8.0 <17.0.0", "react-dom": ">=16.8.0 <17.0.0", "tslib": "^1.7.1" diff --git a/apps/pr-deploy-site/chiclet-test.html b/apps/pr-deploy-site/chiclet-test.html new file mode 100644 index 00000000000000..00a9925fd9f17a --- /dev/null +++ b/apps/pr-deploy-site/chiclet-test.html @@ -0,0 +1,18 @@ + + + + + + + + + + + + +
+
+ );
+ }
+}
diff --git a/packages/lists/src/demo/index.scss b/packages/lists/src/demo/index.scss
new file mode 100644
index 00000000000000..77cebee061ee60
--- /dev/null
+++ b/packages/lists/src/demo/index.scss
@@ -0,0 +1,8 @@
+@import '~office-ui-fabric-react/dist/sass/References';
+
+:global {
+ html,
+ body {
+ -webkit-tap-highlight-color: transparent;
+ }
+}
diff --git a/packages/lists/src/demo/index.tsx b/packages/lists/src/demo/index.tsx
new file mode 100644
index 00000000000000..12659a38067b26
--- /dev/null
+++ b/packages/lists/src/demo/index.tsx
@@ -0,0 +1,89 @@
+/* tslint:disable:no-unused-variable */
+import * as React from 'react';
+/* tslint:enable:no-unused-variable */
+import * as ReactDOM from 'react-dom';
+import { App, AppDefinition } from './AppDefinition';
+import { IAppLink, IAppLinkGroup } from '@uifabric/example-app-base';
+import { Router, Route } from 'office-ui-fabric-react/lib/utilities/router/index';
+import { initializeIcons } from 'office-ui-fabric-react/lib/Icons';
+import { setBaseUrl, Fabric } from 'office-ui-fabric-react';
+import { GettingStartedPage } from './GettingStartedPage';
+
+import './index.scss';
+import './ColorStyles.scss';
+
+setBaseUrl('./dist/');
+
+// Initialize all icons.
+initializeIcons();
+
+let rootElement: HTMLElement | null;
+
+// Return the anchor link from the URL without the hash
+function _extractAnchorLink(path: string): string {
+ const index = path.lastIndexOf('#');
+ if (index >= 0) {
+ path = path.substr(index + 1, path.length - index);
+ }
+ return path;
+}
+
+function _scrollAnchorLink(): void {
+ if ((window.location.hash.match(/#/g) || []).length > 1) {
+ const anchor = _extractAnchorLink(window.location.hash);
+ document.getElementById(anchor)!.scrollIntoView();
+ }
+}
+
+function _onLoad(): void {
+ rootElement = rootElement || document.getElementById('content');
+
+ ReactDOM.render(
+
+
+
+ Office UI Fabric React Lists!
+A library of reusable, generic React components
+Overview
+ ++ Fabric React components are built as production-ready, generalized, documented, and reusable components to be used in Microsoft + products. This enables us and our partners to more easily build great applications without spending a ton of time implementing the + same things over and over. +
+ ++ Each component is designed to be RTL-friendly, keyboard accessible, screen reader-friendly, themeable, and generalized. TypeScript + definition files are also included, so if you use TypeScript (which isn't a requirement), you will get compiler validation and + using an editor like VS Code, you'll get intellisense. Each component is exported as a named module that can be easily imported in + your code, allowing your external bundler to create small bundles that include just what you need. +
+ +Getting started
+ ++ Integrating components into your project depends heavily on your setup. The recommended setup is to use a bundler such as + + Webpack + + which can resolve NPM package imports in your code and can bundle the specific things you import. +
+ +Within an npm project, you should install the package and save it as a dependency:
+ +
+ npm install --save office-ui-fabric-react
+
+
+ + This will add the fabric-react project as a dependency in your package.json file, and will drop the project under + node_modules/office-ui-fabric-react. +
+ ++ The library includes commonjs entry points under the lib folder. To use a control, you should be able to import it and use it in + your render method. Note that wrapping your application in the Fabric component is required to support RTL, keyboard focus and + other features. +
+ +
+ {`
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import { Fabric } from 'office-ui-fabric-react/lib/Fabric';
+import { DefaultButton } from 'office-ui-fabric-react/lib/Button';
+
+const MyPage = () => (I am a button.
+
+
+ Notes on module vs path-based imports
++ While it is possible to import all components as named imports from the main module entry point, it is not recommended to do so + without using a bundler that supports es6 tree shaking. In other words, if you import the Button component like this: } +
+ +
+ {`import { Button } from 'office-ui-fabric-react';`}
+
+
+ + ...this would work, but then unless you are using a tree-shaking bundler such as Rollup.js or Webpack 2, Webpack will assume you + want every module exported from the main entry file to be included in your final bundle, which produces unnecessary large bundles + and slows your page load down. Instead you can import the specific paths to trim down your bundle size: +
+ +
+ {`
+import { Button } from 'office-ui-fabric-react/lib/Button';
+import { Dropdown } from 'office-ui-fabric-react/lib/Dropdown';
+import { List } from 'office-ui-fabric-react/lib/List';`}
+
+
+ Using an AMD bundler like r.js
+ ++ If your project relies on AMD modules, they are dropped in the lib-amd folder. You will need to set up your bundler to handle the + imports correctly. This may require you to symlink or copy the folder into your pre-bundle location. +
+ implement
className={this._classNames.closeButton}
onClick={this._onPanelClick}
ariaLabel={closeButtonAriaLabel}
+ title={closeButtonAriaLabel}
data-is-visible={true}
iconProps={{ iconName: 'Cancel' }}
/>
diff --git a/packages/office-ui-fabric-react/src/components/TextField/TextField.base.tsx b/packages/office-ui-fabric-react/src/components/TextField/TextField.base.tsx
index f2ce4e62a57293..9a1bcc2bff3c3f 100644
--- a/packages/office-ui-fabric-react/src/components/TextField/TextField.base.tsx
+++ b/packages/office-ui-fabric-react/src/components/TextField/TextField.base.tsx
@@ -32,7 +32,7 @@ export interface ITextFieldState {
* - If there is no validation error or we have not validated the input value, errorMessage is an empty string.
* - If we have done the validation and there is validation error, errorMessage is the validation error message.
*/
- errorMessage: string;
+ errorMessage: string | JSX.Element;
}
const DEFAULT_STATE_VALUE = '';
@@ -418,7 +418,7 @@ export class TextFieldBase extends React.Component{suffix};
}
- private get _errorMessage(): string | undefined {
+ private get _errorMessage(): string | JSX.Element | undefined {
let { errorMessage } = this.state;
if (!errorMessage && this.props.errorMessage) {
errorMessage = this.props.errorMessage;
@@ -524,13 +524,13 @@ export class TextFieldBase extends React.Component {
+ result.then((errorMessage: string | JSX.Element) => {
if (this._isMounted && currentValidation === this._lastValidation) {
this.setState({ errorMessage } as ITextFieldState);
}
@@ -542,7 +542,7 @@ export class TextFieldBase extends React.Component {
describe('error message', () => {
const errorMessage = 'The string is too long, should not exceed 3 characters.';
+ const errorMessageJSX = (
+
+ The string is too long,
+
+ should not exceed 3 characters. + + ); - function assertErrorMessage(renderedDOM: Element, expectedErrorMessage: string | boolean): void { + function assertErrorMessage(renderedDOM: Element, expectedErrorMessage: string | JSX.Element | boolean): void { const errorMessageDOM = renderedDOM.querySelector('[data-automation-id=error-message]'); if (expectedErrorMessage === false) { expect(errorMessageDOM).toBeNull(); // element not exists - } else { + } else if (typeof expectedErrorMessage === 'string') { expect(errorMessageDOM!.textContent).toEqual(expectedErrorMessage); + } else if (typeof expectedErrorMessage !== 'boolean') { + const xhtml = errorMessageDOM!.innerHTML.replace(/
/g, '
'); + expect(xhtml).toEqual(renderToStaticMarkup(expectedErrorMessage)); } } @@ -233,6 +244,22 @@ describe('TextField', () => { return delay(20).then(() => assertErrorMessage(textField.getDOMNode(), errorMessage)); }); + it('should render error message when onGetErrorMessage returns a JSX.Element', () => { + function validator(value: string): string | JSX.Element { + return value.length > 3 ? errorMessageJSX : ''; + } + + const textField = mount( +', () => {
function validator(value: string): Promise {
return Promise.resolve(value.length > 3 ? errorMessage : '');
@@ -249,6 +276,22 @@ describe('TextField', () => {
return delay(20).then(() => assertErrorMessage(textField.getDOMNode(), errorMessage));
});
+ it('should render error message when onGetErrorMessage returns a Promise', () => {
+ function validator(value: string): Promise {
+ return Promise.resolve(value.length > 3 ? errorMessageJSX : '');
+ }
+
+ const textField = mount(
+ void;
+ onNotifyValidationResult?: (errorMessage: string | JSX.Element, value: string | undefined) => void;
/**
* Function used to determine whether the input value is valid and get an error message if not.
* Mutually exclusive with the static string `errorMessage` (it will take precedence over this).
*
- * When it returns string:
+ * When it returns string | JSX.Element:
* - If valid, it returns empty string.
- * - If invalid, it returns the error message string and the text field will
+ * - If invalid, it returns the error message and the text field will
* show a red border and show an error message below the text field.
*
- * When it returns Promise:
+ * When it returns Promise\:
* - The resolved value is displayed as the error message.
* - If rejected, the value is thrown away.
*/
- onGetErrorMessage?: (value: string) => string | PromiseLike | undefined;
+ onGetErrorMessage?: (value: string) => string | JSX.Element | PromiseLike | undefined;
/**
* Text field will start to validate after users stop typing for `deferredValidationTime` milliseconds.
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Callout.Directional.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Callout.Directional.Example.tsx.shot
index 7b71b9f2d2df38..605c1f179d5596 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/Callout.Directional.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Callout.Directional.Example.tsx.shot
@@ -26,11 +26,11 @@ exports[`Component Examples renders Callout.Directional.Example.tsx correctly 1`
opacity: 0;
position: absolute;
}
- .ms-Fabric--isFocusVisible &:focus + label::before {
+ .ms-Fabric--isFocusVisible &:focus + label {
outline-offset: 2px;
outline: 1px solid #666666;
}
- @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus + label::before {
+ @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus + label {
outline: 1px solid ActiveBorder;
}
id="checkbox-0"
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Checkbox.Basic.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Checkbox.Basic.Example.tsx.shot
index 8444b3766d7e68..47d88056d64de8 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/Checkbox.Basic.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Checkbox.Basic.Example.tsx.shot
@@ -19,11 +19,11 @@ exports[`Component Examples renders Checkbox.Basic.Example.tsx correctly 1`] = `
opacity: 0;
position: absolute;
}
- .ms-Fabric--isFocusVisible &:focus + label::before {
+ .ms-Fabric--isFocusVisible &:focus + label {
outline-offset: 2px;
outline: 1px solid #666666;
}
- @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus + label::before {
+ @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus + label {
outline: 1px solid ActiveBorder;
}
id="checkbox-0"
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Checkbox.Other.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Checkbox.Other.Example.tsx.shot
index 569f7c40c25a78..40e1002232dcdb 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/Checkbox.Other.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Checkbox.Other.Example.tsx.shot
@@ -20,11 +20,11 @@ exports[`Component Examples renders Checkbox.Other.Example.tsx correctly 1`] = `
opacity: 0;
position: absolute;
}
- .ms-Fabric--isFocusVisible &:focus + label::before {
+ .ms-Fabric--isFocusVisible &:focus + label {
outline-offset: 2px;
outline: 1px solid #666666;
}
- @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus + label::before {
+ @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus + label {
outline: 1px solid ActiveBorder;
}
id="checkbox-0"
@@ -151,11 +151,11 @@ exports[`Component Examples renders Checkbox.Other.Example.tsx correctly 1`] = `
opacity: 0;
position: absolute;
}
- .ms-Fabric--isFocusVisible &:focus + label::before {
+ .ms-Fabric--isFocusVisible &:focus + label {
outline-offset: 2px;
outline: 1px solid #666666;
}
- @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus + label::before {
+ @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus + label {
outline: 1px solid ActiveBorder;
}
defaultChecked={true}
@@ -296,11 +296,11 @@ exports[`Component Examples renders Checkbox.Other.Example.tsx correctly 1`] = `
opacity: 0;
position: absolute;
}
- .ms-Fabric--isFocusVisible &:focus + label::before {
+ .ms-Fabric--isFocusVisible &:focus + label {
outline-offset: 2px;
outline: 1px solid #666666;
}
- @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus + label::before {
+ @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus + label {
outline: 1px solid ActiveBorder;
}
disabled={true}
@@ -413,11 +413,11 @@ exports[`Component Examples renders Checkbox.Other.Example.tsx correctly 1`] = `
opacity: 0;
position: absolute;
}
- .ms-Fabric--isFocusVisible &:focus + label::before {
+ .ms-Fabric--isFocusVisible &:focus + label {
outline-offset: 2px;
outline: 1px solid #666666;
}
- @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus + label::before {
+ @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus + label {
outline: 1px solid ActiveBorder;
}
defaultChecked={true}
@@ -531,11 +531,11 @@ exports[`Component Examples renders Checkbox.Other.Example.tsx correctly 1`] = `
opacity: 0;
position: absolute;
}
- .ms-Fabric--isFocusVisible &:focus + label::before {
+ .ms-Fabric--isFocusVisible &:focus + label {
outline-offset: 2px;
outline: 1px solid #666666;
}
- @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus + label::before {
+ @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus + label {
outline: 1px solid ActiveBorder;
}
id="checkbox-4"
@@ -662,11 +662,11 @@ exports[`Component Examples renders Checkbox.Other.Example.tsx correctly 1`] = `
opacity: 0;
position: absolute;
}
- .ms-Fabric--isFocusVisible &:focus + label::before {
+ .ms-Fabric--isFocusVisible &:focus + label {
outline-offset: 2px;
outline: 1px solid #666666;
}
- @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus + label::before {
+ @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus + label {
outline: 1px solid ActiveBorder;
}
id="checkbox-5"
@@ -794,11 +794,11 @@ exports[`Component Examples renders Checkbox.Other.Example.tsx correctly 1`] = `
opacity: 0;
position: absolute;
}
- .ms-Fabric--isFocusVisible &:focus + label::before {
+ .ms-Fabric--isFocusVisible &:focus + label {
outline-offset: 2px;
outline: 1px solid #666666;
}
- @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus + label::before {
+ @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus + label {
outline: 1px solid ActiveBorder;
}
id="checkbox-6"
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/ContextualMenu.Directional.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/ContextualMenu.Directional.Example.tsx.shot
index 741e6c12d2617c..917197d0163e19 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/ContextualMenu.Directional.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/ContextualMenu.Directional.Example.tsx.shot
@@ -25,11 +25,11 @@ exports[`Component Examples renders ContextualMenu.Directional.Example.tsx corre
opacity: 0;
position: absolute;
}
- .ms-Fabric--isFocusVisible &:focus + label::before {
+ .ms-Fabric--isFocusVisible &:focus + label {
outline-offset: 2px;
outline: 1px solid #666666;
}
- @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus + label::before {
+ @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus + label {
outline: 1px solid ActiveBorder;
}
id="checkbox-0"
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Dialog.Basic.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Dialog.Basic.Example.tsx.shot
index 44a9236d573e0c..062a64fc1b5ca8 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/Dialog.Basic.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Dialog.Basic.Example.tsx.shot
@@ -20,11 +20,11 @@ exports[`Component Examples renders Dialog.Basic.Example.tsx correctly 1`] = `
opacity: 0;
position: absolute;
}
- .ms-Fabric--isFocusVisible &:focus + label::before {
+ .ms-Fabric--isFocusVisible &:focus + label {
outline-offset: 2px;
outline: 1px solid #666666;
}
- @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus + label::before {
+ @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus + label {
outline: 1px solid ActiveBorder;
}
id="checkbox-2"
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Dialog.Modeless.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Dialog.Modeless.Example.tsx.shot
index 235aa10ed393d0..b9f9fd6e366c17 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/Dialog.Modeless.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Dialog.Modeless.Example.tsx.shot
@@ -26,11 +26,11 @@ exports[`Component Examples renders Dialog.Modeless.Example.tsx correctly 1`] =
opacity: 0;
position: absolute;
}
- .ms-Fabric--isFocusVisible &:focus + label::before {
+ .ms-Fabric--isFocusVisible &:focus + label {
outline-offset: 2px;
outline: 1px solid #666666;
}
- @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus + label::before {
+ @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus + label {
outline: 1px solid ActiveBorder;
}
disabled={false}
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Facepile.Basic.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Facepile.Basic.Example.tsx.shot
index 652f900dd306a3..c4e955a9d998be 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/Facepile.Basic.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Facepile.Basic.Example.tsx.shot
@@ -943,11 +943,11 @@ exports[`Component Examples renders Facepile.Basic.Example.tsx correctly 1`] = `
opacity: 0;
position: absolute;
}
- .ms-Fabric--isFocusVisible &:focus + label::before {
+ .ms-Fabric--isFocusVisible &:focus + label {
outline-offset: 2px;
outline: 1px solid #666666;
}
- @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus + label::before {
+ @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus + label {
outline: 1px solid ActiveBorder;
}
id="checkbox-6"
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/MarqueeSelection.Basic.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/MarqueeSelection.Basic.Example.tsx.shot
index f5c5e4f5e70d29..2e9cabc8dd53d8 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/MarqueeSelection.Basic.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/MarqueeSelection.Basic.Example.tsx.shot
@@ -27,11 +27,11 @@ exports[`Component Examples renders MarqueeSelection.Basic.Example.tsx correctly
opacity: 0;
position: absolute;
}
- .ms-Fabric--isFocusVisible &:focus + label::before {
+ .ms-Fabric--isFocusVisible &:focus + label {
outline-offset: 2px;
outline: 1px solid #666666;
}
- @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus + label::before {
+ @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus + label {
outline: 1px solid ActiveBorder;
}
defaultChecked={true}
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Modal.Basic.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Modal.Basic.Example.tsx.shot
index 642a88d1eb6137..ef52e704a402dc 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/Modal.Basic.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Modal.Basic.Example.tsx.shot
@@ -20,11 +20,11 @@ exports[`Component Examples renders Modal.Basic.Example.tsx correctly 1`] = `
opacity: 0;
position: absolute;
}
- .ms-Fabric--isFocusVisible &:focus + label::before {
+ .ms-Fabric--isFocusVisible &:focus + label {
outline-offset: 2px;
outline: 1px solid #666666;
}
- @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus + label::before {
+ @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus + label {
outline: 1px solid ActiveBorder;
}
id="checkbox-2"
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Modal.Modeless.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Modal.Modeless.Example.tsx.shot
index 335fb4107dbab2..7ca881016b619f 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/Modal.Modeless.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Modal.Modeless.Example.tsx.shot
@@ -21,11 +21,11 @@ exports[`Component Examples renders Modal.Modeless.Example.tsx correctly 1`] = `
opacity: 0;
position: absolute;
}
- .ms-Fabric--isFocusVisible &:focus + label::before {
+ .ms-Fabric--isFocusVisible &:focus + label {
outline-offset: 2px;
outline: 1px solid #666666;
}
- @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus + label::before {
+ @media screen and (-ms-high-contrast: active){.ms-Fabric--isFocusVisible &:focus + label {
outline: 1px solid ActiveBorder;
}
disabled={false}
diff --git a/packages/office-ui-fabric-react/src/components/__snapshots__/Nav.Basic.Example.tsx.shot b/packages/office-ui-fabric-react/src/components/__snapshots__/Nav.Basic.Example.tsx.shot
index f13b68bdbcdbb9..a5dc7c89f6c0ef 100644
--- a/packages/office-ui-fabric-react/src/components/__snapshots__/Nav.Basic.Example.tsx.shot
+++ b/packages/office-ui-fabric-react/src/components/__snapshots__/Nav.Basic.Example.tsx.shot
@@ -196,7 +196,7 @@ exports[`Component Examples renders Nav.Basic.Example.tsx correctly 1`] = `
outline: transparent;
overflow: hidden;
padding-bottom: 0;
- padding-left: 3px;
+ padding-left: 27px;
padding-right: 20px;
padding-top: 0;
position: relative;
@@ -276,28 +276,6 @@ exports[`Component Examples renders Nav.Basic.Example.tsx correctly 1`] = `
justify-content: flex-start;
}
>
-
+ should not exceed 3 characters. + + ); - function assertErrorMessage(renderedDOM: Element, expectedErrorMessage: string | boolean): void { + function assertErrorMessage(renderedDOM: Element, expectedErrorMessage: string | JSX.Element | boolean): void { const errorMessageDOM = renderedDOM.querySelector('[data-automation-id=error-message]'); if (expectedErrorMessage === false) { expect(errorMessageDOM).toBeNull(); // element not exists - } else { + } else if (typeof expectedErrorMessage === 'string') { expect(errorMessageDOM!.textContent).toEqual(expectedErrorMessage); + } else if (typeof expectedErrorMessage !== 'boolean') { + const xhtml = errorMessageDOM!.innerHTML.replace(/
/g, '
'); + expect(xhtml).toEqual(renderToStaticMarkup(expectedErrorMessage)); } } @@ -233,6 +244,22 @@ describe('TextField', () => { return delay(20).then(() => assertErrorMessage(textField.getDOMNode(), errorMessage)); }); + it('should render error message when onGetErrorMessage returns a JSX.Element', () => { + function validator(value: string): string | JSX.Element { + return value.length > 3 ? errorMessageJSX : ''; + } + + const textField = mount( +
-
-
-
-
-
-
-
-
-
-
-
-
jestTask({
...(process.env.TF_BUILD && { runInBand: true }),
- ...(process.env.TF_BUILD || argv().production ? { coverage: true } : undefined),
...(argv().u || argv().updateSnapshot ? { updateSnapshot: true } : undefined)
});
@@ -15,7 +14,6 @@ exports.jestWatch = () => {
const args = argv();
return jestTask({
...(process.env.TF_BUILD && { runInBand: true }),
- ...(process.env.TF_BUILD || args.production ? { coverage: true } : undefined),
...(args.u || args.updateSnapshot ? { updateSnapshot: true } : undefined),
watch: true,
_: ['-i', ...(args._ || []).filter(arg => arg !== 'jest-watch')]