office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
45 lines • 2.05 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var TextField_1 = require("office-ui-fabric-react/lib/TextField");
require("./TextField.Examples.scss");
require("./TextField.Styled.Example.scss");
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