diff --git a/apps/vr-tests/src/stories/Button.stories.tsx b/apps/vr-tests/src/stories/Button.stories.tsx index bc51fdbfb90226..ce9b0125a00877 100644 --- a/apps/vr-tests/src/stories/Button.stories.tsx +++ b/apps/vr-tests/src/stories/Button.stories.tsx @@ -22,12 +22,16 @@ const commandProps: IButtonProps = { { key: 'emailMessage', name: 'Email message', - icon: 'Mail' + iconProps: { + iconName: 'Mail' + } }, { key: 'calendarEvent', name: 'Calendar event', - icon: 'Calendar' + iconProps: { + iconName: 'Calendar' + } } ] } diff --git a/apps/vr-tests/src/stories/CommandBar.stories.tsx b/apps/vr-tests/src/stories/CommandBar.stories.tsx index 4915dc68c62070..7fd8133cd4fbaf 100644 --- a/apps/vr-tests/src/stories/CommandBar.stories.tsx +++ b/apps/vr-tests/src/stories/CommandBar.stories.tsx @@ -9,18 +9,24 @@ const items = [ { key: 'newItem', name: 'New', - icon: 'Add', + iconProps: { + iconName: 'Add' + }, subMenuProps: { items: [ { key: 'emailMessage', name: 'Email message', - icon: 'Mail' + iconProps: { + iconName: 'Mail' + } }, { key: 'calendarEvent', name: 'Calendar event', - icon: 'Calendar' + iconProps: { + iconName: 'Calendar' + } } ], }, @@ -28,22 +34,30 @@ const items = [ { key: 'upload', name: 'Upload', - icon: 'Upload' + iconProps: { + iconName: 'Upload' + } }, { key: 'share', name: 'Share', - icon: 'Share' + iconProps: { + iconName: 'Share' + } }, { key: 'download', name: 'Download', - icon: 'Download' + iconProps: { + iconName: 'Download' + } }, { key: 'disabled', name: 'Disabled...', - icon: 'Cancel', + iconProps: { + iconName: 'Cancel' + }, disabled: true } ]; @@ -52,17 +66,23 @@ const farItems = [ { key: 'sort', name: 'Sort', - icon: 'SortLines' + iconProps: { + iconName: 'SortLines' + } }, { key: 'tile', name: 'Grid view', - icon: 'Tiles' + iconProps: { + iconName: 'Tiles' + } }, { key: 'info', name: 'Info', - icon: 'Info' + iconProps: { + iconName: 'Info' + } } ]; @@ -100,8 +120,8 @@ storiesOf('CommandBar', module) .add('Text only', () => ( ({ ...item, icon: '' })) } - farItems={ farItems.map(item => ({ ...item, icon: '' })) } + items={ items.map(item => ({ ...item, iconProps: undefined })) } + farItems={ farItems.map(item => ({ ...item, iconProps: undefined })) } /> )) .add('Icons only', () => ( diff --git a/common/changes/@uifabric/example-app-base/misc-changes_2018-02-20-17-19.json b/common/changes/@uifabric/example-app-base/misc-changes_2018-02-20-17-19.json new file mode 100644 index 00000000000000..7ef0035e98ee85 --- /dev/null +++ b/common/changes/@uifabric/example-app-base/misc-changes_2018-02-20-17-19.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/example-app-base", + "comment": "Tweaking css for example pages.", + "type": "patch" + } + ], + "packageName": "@uifabric/example-app-base", + "email": "dzearing@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/@uifabric/merge-styles/misc-changes_2018-02-20-17-19.json b/common/changes/@uifabric/merge-styles/misc-changes_2018-02-20-17-19.json new file mode 100644 index 00000000000000..2630dcaeb2a2b3 --- /dev/null +++ b/common/changes/@uifabric/merge-styles/misc-changes_2018-02-20-17-19.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/merge-styles", + "comment": "Adding test coverage for media queries.", + "type": "patch" + } + ], + "packageName": "@uifabric/merge-styles", + "email": "dzearing@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/misc-changes_2018-02-20-17-19.json b/common/changes/office-ui-fabric-react/misc-changes_2018-02-20-17-19.json new file mode 100644 index 00000000000000..d76ed12d0b88b7 --- /dev/null +++ b/common/changes/office-ui-fabric-react/misc-changes_2018-02-20-17-19.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Buttons: moving className lower in the merge list so that it has more precedence than default rules.", + "type": "patch" + } + ], + "packageName": "office-ui-fabric-react", + "email": "dzearing@microsoft.com" +} \ No newline at end of file diff --git a/packages/example-app-base/src/components/ComponentPage/ComponentPage.scss b/packages/example-app-base/src/components/ComponentPage/ComponentPage.scss index d7ef28480b82ea..9e4557531f4f9a 100644 --- a/packages/example-app-base/src/components/ComponentPage/ComponentPage.scss +++ b/packages/example-app-base/src/components/ComponentPage/ComponentPage.scss @@ -11,6 +11,7 @@ $dontColor: #A61E22; .ComponentPage { background-color: $ms-color-white; + overflow: hidden; } .ComponentPage-header { diff --git a/packages/example-app-base/src/components/ExampleCard/ExampleCard.scss b/packages/example-app-base/src/components/ExampleCard/ExampleCard.scss index 1446d102617eea..b20740c1080815 100644 --- a/packages/example-app-base/src/components/ExampleCard/ExampleCard.scss +++ b/packages/example-app-base/src/components/ExampleCard/ExampleCard.scss @@ -57,7 +57,7 @@ max-height: 80vh; overflow-x: hidden; overflow-y: auto; - padding: 20px 0; + padding: 20px 4px; position: relative; } diff --git a/packages/example-app-base/src/components/Header/Header.tsx b/packages/example-app-base/src/components/Header/Header.tsx index 4ad1bd3331cfc6..5e75803c20ae4e 100644 --- a/packages/example-app-base/src/components/Header/Header.tsx +++ b/packages/example-app-base/src/components/Header/Header.tsx @@ -125,7 +125,7 @@ export class Header extends React.Component { return [{ key: 'isRTL', name: `Render in ${this._isRTLEnabled ? 'LTR' : 'RTL'}`, - icon: 'Settings', + iconProps: { iconName: 'Settings' }, onClick: this._onRTLToggled }]; } diff --git a/packages/merge-styles/src/mergeStyles.test.ts b/packages/merge-styles/src/mergeStyles.test.ts index 7aba032d6df4e6..ba07949b4e7000 100644 --- a/packages/merge-styles/src/mergeStyles.test.ts +++ b/packages/merge-styles/src/mergeStyles.test.ts @@ -80,4 +80,20 @@ describe('mergeStyles', () => { ); }); + it('can register media queries', () => { + mergeStyles({ + background: 'red', + selectors: { + '@media screen and (max-width: 100px)': { + background: 'green' + } + } + }); + + expect(_stylesheet.getRules()).toEqual( + '.css-0{background:red;}' + + '@media screen and (max-width: 100px){.css-0{background:green;}}' + ); + }); + }); diff --git a/packages/office-ui-fabric-react/src/components/Button/BaseButton.classNames.ts b/packages/office-ui-fabric-react/src/components/Button/BaseButton.classNames.ts index 7d1ad3759b2be0..65da87a32c14c9 100644 --- a/packages/office-ui-fabric-react/src/components/Button/BaseButton.classNames.ts +++ b/packages/office-ui-fabric-react/src/components/Button/BaseButton.classNames.ts @@ -31,7 +31,6 @@ export const getBaseButtonClassNames = memoizeFunction(( 'ms-Button', styles.root, variantClassName, - className, checked && [ 'is-checked', styles.rootChecked @@ -72,7 +71,8 @@ export const getBaseButtonClassNames = memoizeFunction(( ':hover': styles.rootCheckedHovered, ':active': styles.rootCheckedPressed } - } + }, + className ], flexContainer: [ 'ms-Button-flexContainer', diff --git a/packages/office-ui-fabric-react/src/demo/ComponentStatus/ComponentStatus.tsx b/packages/office-ui-fabric-react/src/demo/ComponentStatus/ComponentStatus.tsx index a54fa106029997..70e8c9b23e9980 100644 --- a/packages/office-ui-fabric-react/src/demo/ComponentStatus/ComponentStatus.tsx +++ b/packages/office-ui-fabric-react/src/demo/ComponentStatus/ComponentStatus.tsx @@ -59,6 +59,7 @@ export class ComponentStatus extends React.Component private _colorForComponentStateStatus(testCoverageStatus: ChecklistStatus | undefined): string { switch (testCoverageStatus) { case ChecklistStatus.unknown: + case ChecklistStatus.notApplicable: return 'lightgrey'; case ChecklistStatus.fail: case ChecklistStatus.none: diff --git a/packages/office-ui-fabric-react/src/demo/ComponentStatus/ComponentStatus.types.ts b/packages/office-ui-fabric-react/src/demo/ComponentStatus/ComponentStatus.types.ts index 7388bad06d88d5..31320904cd1df8 100644 --- a/packages/office-ui-fabric-react/src/demo/ComponentStatus/ComponentStatus.types.ts +++ b/packages/office-ui-fabric-react/src/demo/ComponentStatus/ComponentStatus.types.ts @@ -8,9 +8,10 @@ export interface IComponentStatusProps { export enum ChecklistStatus { unknown = 'Unknown', + notApplicable = 'Not applicable', pass = 'Pass', fail = 'Fail', - none = 'No Tests', + none = 'No tests', poor = 'Poor', fair = 'Fair', good = 'Good'