office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
42 lines • 2.21 kB
JavaScript
define(["require", "exports", "tslib", "react", "office-ui-fabric-react/lib/TextField", "./TextField.Examples.scss", "./TextField.Styled.Example.scss"], function (require, exports, tslib_1, React, TextField_1) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
function getStyles(props) {
var required = props.required;
return {
fieldGroup: [
required && {
borderTopColor: props.theme.semanticColors.errorText
}
],
subComponentStyles: {
label: getLabelStyles
}
};
}
function getLabelStyles(props) {
var required = props.required;
return {
root: [
required && {
color: props.theme.palette.themePrimary
}
]
};
}
var TextFieldStyledExample = /** @class */ (function (_super) {
tslib_1.__extends(TextFieldStyledExample, _super);
function TextFieldStyledExample() {
return _super !== null && _super.apply(this, arguments) || this;
}
TextFieldStyledExample.prototype.render = function () {
return (React.createElement("div", { className: "docs-TextFieldExample" },
React.createElement("p", null, "These examples show how components that used to be styled using CSS can be styled using JS styling. The preferred method is JS styling for several reasons: type safety for styling, more predictable behavior, and clear feedback via typing when component changes affect existing styling code."),
React.createElement(TextField_1.TextField, { label: "Theme Primary Label, Red Top Border (JS):", required: true, styles: getStyles }),
React.createElement(TextField_1.TextField, { label: "Theme Primary Label, Red Top Border (CSS):", required: true, className: "textField-cssStyled" })));
};
return TextFieldStyledExample;
}(React.Component));
exports.TextFieldStyledExample = TextFieldStyledExample;
});
//# sourceMappingURL=TextField.Styled.Example.js.map