office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
87 lines • 9.5 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { ExampleCard, ComponentPage, PropertiesTableSet } from '@uifabric/example-app-base';
import { ComponentStatus } from '../../demo/ComponentStatus/ComponentStatus';
import { TextFieldBasicExample } from './examples/TextField.Basic.Example';
import { TextFieldBorderlessExample } from './examples/TextField.Borderless.Example';
import { TextFieldCustomRenderExample } from './examples/TextField.CustomRender.Example';
import { TextFieldErrorMessageExample } from './examples/TextField.ErrorMessage.Example';
import { TextFieldIconExample } from './examples/TextField.Icon.Example';
import { TextFieldMultilineExample } from './examples/TextField.Multiline.Example';
import { TextFieldPlaceholderExample } from './examples/TextField.Placeholder.Example';
import { TextFieldPrefixExample } from './examples/TextField.Prefix.Example';
import { TextFieldPrefixAndSuffixExample } from './examples/TextField.PrefixAndSuffix.Example';
import { TextFieldStatus } from './TextField.checklist';
import { TextFieldSuffixExample } from './examples/TextField.Suffix.Example';
import { TextFieldUnderlinedExample } from './examples/TextField.Underlined.Example';
import { TextFieldAutoCompleteExample } from './examples/TextField.AutoComplete.Example';
var TextFieldBasicExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.Basic.Example.tsx');
var TextFieldBorderlessExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.Borderless.Example.tsx');
var TextFieldCustomRenderExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.CustomRender.Example.tsx');
var TextFieldErrorMessageExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.ErrorMessage.Example.tsx');
var TextFieldIconExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.Icon.Example.tsx');
var TextFieldMultilineExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.Multiline.Example.tsx');
var TextFieldPlaceholderExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.Placeholder.Example.tsx');
var TextFieldPrefixExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.Prefix.Example.tsx');
var TextFieldPrefixAndSuffixExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.PrefixAndSuffix.Example.tsx');
var TextFieldSuffixExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.Suffix.Example.tsx');
var TextFieldUnderlinedExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.Underlined.Example.tsx');
var TextFieldAutoCompleteExampleCode = require('!raw-loader!office-ui-fabric-react/src/components/TextField/examples/TextField.AutoComplete.Example.tsx');
var TextFieldPage = /** @class */ (function (_super) {
tslib_1.__extends(TextFieldPage, _super);
function TextFieldPage() {
return _super !== null && _super.apply(this, arguments) || this;
}
TextFieldPage.prototype.render = function () {
return (React.createElement(ComponentPage, { title: 'TextField', componentName: 'TextFieldExample', exampleCards: React.createElement("div", null,
React.createElement(ExampleCard, { title: 'Default TextField with Label', code: TextFieldBasicExampleCode },
React.createElement(TextFieldBasicExample, null)),
React.createElement(ExampleCard, { title: 'TextField with Placeholder', code: TextFieldPlaceholderExampleCode },
React.createElement(TextFieldPlaceholderExample, null)),
React.createElement(ExampleCard, { title: 'Multiline TextField', code: TextFieldMultilineExampleCode },
React.createElement(TextFieldMultilineExample, null)),
React.createElement(ExampleCard, { title: 'Underlined TextField', code: TextFieldUnderlinedExampleCode },
React.createElement(TextFieldUnderlinedExample, null)),
React.createElement(ExampleCard, { title: 'Borderless TextField', code: TextFieldBorderlessExampleCode },
React.createElement(TextFieldBorderlessExample, null)),
React.createElement(ExampleCard, { title: 'TextField with browser AutoComplete', code: TextFieldAutoCompleteExampleCode },
React.createElement(TextFieldAutoCompleteExample, null))), implementationExampleCards: React.createElement("div", null,
React.createElement(ExampleCard, { title: 'Textfield with a prefix', code: TextFieldPrefixExampleCode },
React.createElement(TextFieldPrefixExample, null)),
React.createElement(ExampleCard, { title: 'Textfield with a suffix', code: TextFieldSuffixExampleCode },
React.createElement(TextFieldSuffixExample, null)),
React.createElement(ExampleCard, { title: 'Textfield with a prefix and a suffix', code: TextFieldPrefixAndSuffixExampleCode },
React.createElement(TextFieldPrefixAndSuffixExample, null)),
React.createElement(ExampleCard, { title: 'TextField with an icon', code: TextFieldIconExampleCode },
React.createElement(TextFieldIconExample, null)),
React.createElement(ExampleCard, { title: 'TextField with custom Label', code: TextFieldCustomRenderExampleCode },
React.createElement(TextFieldCustomRenderExample, null)),
React.createElement(ExampleCard, { title: 'TextField error message variations', code: TextFieldErrorMessageExampleCode },
React.createElement(TextFieldErrorMessageExample, null))), propertiesTables: React.createElement(PropertiesTableSet, { sources: [
require('!raw-loader!office-ui-fabric-react/src/components/TextField/TextField.types.ts')
] }), overview: React.createElement("div", null,
React.createElement("p", null, "The TextField component enables a user to type text into an app. It's typically used to capture a single line of text, but can be configured to capture multiple lines of text. The text displays on the screen in a simple, uniform format.")), bestPractices: React.createElement("div", null), dos: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Use the TextField to accept data input on a form or page."),
React.createElement("li", null, "Label the TextField with a helpful name. "),
React.createElement("li", null, "Provide concise helper text that specifies what content is expected to be entered."),
React.createElement("li", null, "Provide all appropriate states for the control (static, hover, focus, engaged, unavailable, error)."),
React.createElement("li", null, "When part of a form, provide clear designations for which fields are required vs. optional."),
React.createElement("li", null, "Provide all appropriate methods for submitting provided data (onEnter or a dedicated \u2018Submit\u2019 button)."),
React.createElement("li", null, "Provide all appropriate methods of clearing provided data (\u2018X\u2019 or something similar)."),
React.createElement("li", null, "Allow for selection, copy and paste of field data."),
React.createElement("li", null, "Whenever possible, format TextField relative to the expected entry (4-digit PIN, 10-digit phone number (3 separate fields), etc)."),
React.createElement("li", null, "When long entries are expected, provide a mechanism for overflow or expansion of the control itself."),
React.createElement("li", null, "Ensure that the TextField is functional through use of mouse/keyboard or touch when available."),
React.createElement("li", null, "Ensure that the TextField is accessible through screen reader and/or other accessibility tools."))), donts: React.createElement("div", null,
React.createElement("ul", null,
React.createElement("li", null, "Don\u2019t use a TextField to render basic copy as part of a body element of a page."),
React.createElement("li", null, "Don\u2019t provide an unlabeled TextField and expect that users will know what to do with it."),
React.createElement("li", null, "Don\u2019t place a TextField inline with body copy. "),
React.createElement("li", null, "Don\u2019t be overly verbose with helper text."),
React.createElement("li", null, "Don\u2019t occlude the entry or allow entry when the active content is not visible."))), isHeaderVisible: this.props.isHeaderVisible, componentStatus: React.createElement(ComponentStatus, tslib_1.__assign({}, TextFieldStatus)) }));
};
return TextFieldPage;
}(React.Component));
export { TextFieldPage };
//# sourceMappingURL=TextFieldPage.js.map