@uifabric/experiments
Version:
Experimental React components for building experiences for Office 365.
121 lines • 8.68 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { Button, MenuButton } from '@uifabric/experiments';
import { createTheme, mergeStyles, Stack } from 'office-ui-fabric-react';
var testTheme = createTheme({
semanticColors: {
buttonText: 'red'
},
fonts: {
medium: {
color: 'purple'
}
}
});
var sectionGap = 32;
var headingGap = 16;
var buttonGap = 12;
var menuItems = [{ key: 'a', name: 'Item a' }, { key: 'b', name: 'Item b' }];
var buttonMenu = function (render) { return render(function (MenuType, props) { return React.createElement(MenuType, tslib_1.__assign({}, props, { items: menuItems })); }); };
var ButtonStack = function (props) { return (React.createElement(Stack, { horizontal: true, disableShrink: true, gap: buttonGap }, props.children)); };
// tslint:disable:jsx-no-lambda
var ButtonStylesExample = /** @class */ (function (_super) {
tslib_1.__extends(ButtonStylesExample, _super);
function ButtonStylesExample() {
return _super !== null && _super.apply(this, arguments) || this;
}
ButtonStylesExample.prototype.render = function () {
var testClassName = mergeStyles({ color: 'blue' });
return (React.createElement(Stack, { gap: sectionGap },
React.createElement(Stack, { gap: headingGap, padding: 8 },
React.createElement("div", null,
React.createElement(Stack, { gap: buttonGap },
React.createElement(ButtonStack, null,
React.createElement(Button, { icon: "PeopleAdd", content: "Button Theme: Red Icon and Text", theme: testTheme }),
React.createElement(Button, { icon: "PeopleAdd", content: { children: 'Slot Theme: Purple Text', theme: testTheme } })),
React.createElement(ButtonStack, null,
React.createElement(Button, { icon: "PeopleAdd", content: "Button Styles Object: Red Text (root)", styles: { root: { color: 'red' } } }),
React.createElement(Button, { icon: "PeopleAdd", content: "Button Styles Object: Red Text (stack)", styles: { stack: { color: 'red' } } })),
React.createElement(ButtonStack, null,
React.createElement(Button, { icon: "PeopleAdd", content: "Stack Styles Object: Red Text", stack: { styles: { root: { color: 'red' } } } })),
React.createElement(ButtonStack, null,
React.createElement(Button, { icon: "PeopleAdd", content: "Button Styles Object: Pink Icon", styles: { icon: { color: 'pink ' } } }),
React.createElement(Button, { icon: { iconName: 'PeopleAdd', styles: { root: { color: 'pink ' } } }, content: "Icon Styles Object: Pink Icon" })),
React.createElement(ButtonStack, null,
React.createElement(Button, { icon: "PeopleAdd", content: "Button Styles Function: Theme.warningHighlight Content", styles: function (props, theme) { return ({ content: { color: theme.semanticColors.warningHighlight } }); } })),
React.createElement(ButtonStack, null,
React.createElement(Button, { icon: "PeopleAdd", content: "Button Styles Function: Purple Icon via Button Theme", styles: function (props, theme) { return ({ icon: { color: theme.fonts.medium.color } }); }, theme: testTheme })),
React.createElement(ButtonStack, null,
React.createElement(Button, { icon: "PeopleAdd", content: {
children: 'Content Styles Function: Theme.warningHighlight Text',
styles: function (props, theme) { return ({ root: { color: theme.semanticColors.warningHighlight } }); }
} })),
React.createElement(ButtonStack, null,
React.createElement(Button, { icon: "PeopleAdd", content: {
children: 'Content Styles Function: Red Text via Content Theme',
styles: function (props, theme) { return ({ root: { color: theme.semanticColors.buttonText } }); },
theme: testTheme
} })),
React.createElement(ButtonStack, null,
React.createElement(Button, { icon: {
iconName: 'PeopleAdd',
styles: function (props) { return ({ root: { color: props.theme.semanticColors.warningHighlight } }); }
}, content: "Icon Styles Function: Theme.warningHighlight Icon" })),
React.createElement(ButtonStack, null,
React.createElement(Button, { icon: {
iconName: 'PeopleAdd',
styles: function (props) { return ({ root: { color: props.theme.semanticColors.buttonText } }); },
theme: testTheme
}, content: "Icon Styles Function: Red Icon via Icon Theme" })),
React.createElement(ButtonStack, null,
React.createElement(Button, { content: "Button Classname", className: "button-classname" }),
React.createElement(Button, { content: "Icon Classname", icon: {
iconName: 'PeopleAdd',
className: 'icon-classname'
} }),
React.createElement(Button, { content: {
children: 'Content Classname',
className: 'content-classname'
} }),
React.createElement(MenuButton, { content: "All Classnames", icon: "PeopleAdd", menu: buttonMenu, styles: {
root: 'root-classname',
stack: 'stack-classname',
content: 'content-classname',
icon: 'icon-classname',
menu: 'menu-classname',
menuIcon: 'menuIcon-classname'
} })),
React.createElement(ButtonStack, null,
React.createElement(Button, { content: "Icon ClassName Overrides Button Styles: Blue Icon", styles: {
icon: {
color: 'red'
}
}, icon: {
iconName: 'PeopleAdd',
className: testClassName
} })),
React.createElement(ButtonStack, null,
React.createElement(Button, { icon: "PeopleAdd", content: {
children: 'Text ClassName: Blue Text',
className: testClassName
} }),
React.createElement(Button, { icon: "PeopleAdd", content: {
children: 'Text Styles Overrides ClassName: Red Text',
styles: { root: { color: 'red' } },
className: testClassName
} })),
React.createElement(ButtonStack, null,
React.createElement(Button, { content: "Icon ClassName: Blue Icon", icon: {
iconName: 'PeopleAdd',
className: testClassName
} }),
React.createElement(Button, { content: "Icon Styles Overrides ClassName: Red Icon", icon: {
iconName: 'PeopleAdd',
styles: { root: { color: 'red' } },
className: testClassName
} })))))));
};
return ButtonStylesExample;
}(React.Component));
export { ButtonStylesExample };
//# sourceMappingURL=Button.Styles.Example.js.map