diff --git a/apps/todo-app/package.json b/apps/todo-app/package.json index 28d4131a6c0f58..44c03471a8b540 100644 --- a/apps/todo-app/package.json +++ b/apps/todo-app/package.json @@ -23,7 +23,7 @@ "office-ui-fabric-react": ">=6.33.1 <7.0.0", "react": ">=16.3.2-0 <17.0.0", "react-dom": ">=16.3.2-0 <17.0.0", - "typescript": "2.9.2", + "typescript": "2.8.1", "tslib": "^1.7.1" } } \ No newline at end of file diff --git a/apps/vr-tests/package.json b/apps/vr-tests/package.json index 9ec2799e881f4b..64e4d36bc5ebbb 100644 --- a/apps/vr-tests/package.json +++ b/apps/vr-tests/package.json @@ -32,7 +32,7 @@ "office-ui-fabric-react": ">=6.33.1 <7.0.0", "react": ">=16.3.2-0 <17.0.0", "react-dom": ">=16.3.2-0 <17.0.0", - "typescript": "2.9.2", + "typescript": "2.8.1", "tslib": "^1.7.1" } } \ No newline at end of file diff --git a/common/changes/@uifabric/charting/backout-change_2018-07-13-19-36.json b/common/changes/@uifabric/charting/backout-change_2018-07-13-19-36.json new file mode 100644 index 00000000000000..8a9ca701b23eee --- /dev/null +++ b/common/changes/@uifabric/charting/backout-change_2018-07-13-19-36.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/charting", + "comment": "Reverting the TypeScript bump, to un", + "type": "minor" + } + ], + "packageName": "@uifabric/charting", + "email": "dzearing@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/@uifabric/charting/cliffkoh-styleFunctionsV2_2018-07-12-01-26.json b/common/changes/@uifabric/charting/cliffkoh-styleFunctionsV2_2018-07-12-01-26.json deleted file mode 100644 index 80aa1bf6ea8699..00000000000000 --- a/common/changes/@uifabric/charting/cliffkoh-styleFunctionsV2_2018-07-12-01-26.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/charting", - "comment": "Update typings to not use deprecated types.", - "type": "patch" - } - ], - "packageName": "@uifabric/charting", - "email": "cliff.koh@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/example-app-base/cliffkoh-styleFunctionsV2_2018-07-12-01-26.json b/common/changes/@uifabric/example-app-base/backout-change_2018-07-13-19-36.json similarity index 53% rename from common/changes/@uifabric/example-app-base/cliffkoh-styleFunctionsV2_2018-07-12-01-26.json rename to common/changes/@uifabric/example-app-base/backout-change_2018-07-13-19-36.json index 808ce47c96a9c1..c5c3ce3eae057b 100644 --- a/common/changes/@uifabric/example-app-base/cliffkoh-styleFunctionsV2_2018-07-12-01-26.json +++ b/common/changes/@uifabric/example-app-base/backout-change_2018-07-13-19-36.json @@ -2,10 +2,10 @@ "changes": [ { "packageName": "@uifabric/example-app-base", - "comment": "Fix typing bugs in example-app-base", - "type": "patch" + "comment": "Reverting the TypeScript bump, to un", + "type": "minor" } ], "packageName": "@uifabric/example-app-base", - "email": "cliff.koh@microsoft.com" + "email": "dzearing@microsoft.com" } \ No newline at end of file diff --git a/common/changes/@uifabric/experiments/cliffkoh-styleFunctionsV2_2018-07-12-07-54.json b/common/changes/@uifabric/experiments/backout-change_2018-07-13-19-36.json similarity index 60% rename from common/changes/@uifabric/experiments/cliffkoh-styleFunctionsV2_2018-07-12-07-54.json rename to common/changes/@uifabric/experiments/backout-change_2018-07-13-19-36.json index 2a7a10a3751362..ab7c82e211574e 100644 --- a/common/changes/@uifabric/experiments/cliffkoh-styleFunctionsV2_2018-07-12-07-54.json +++ b/common/changes/@uifabric/experiments/backout-change_2018-07-13-19-36.json @@ -2,10 +2,10 @@ "changes": [ { "packageName": "@uifabric/experiments", - "comment": "Fix typing errors", + "comment": "Reverting the TypeScript bump, to un", "type": "minor" } ], "packageName": "@uifabric/experiments", - "email": "cliff.koh@microsoft.com" + "email": "dzearing@microsoft.com" } \ No newline at end of file diff --git a/common/changes/@uifabric/merge-styles/cliffkoh-styleFunctionsV2_2018-07-11-01-10.json b/common/changes/@uifabric/merge-styles/backout-change_2018-07-13-19-36.json similarity index 54% rename from common/changes/@uifabric/merge-styles/cliffkoh-styleFunctionsV2_2018-07-11-01-10.json rename to common/changes/@uifabric/merge-styles/backout-change_2018-07-13-19-36.json index ac9d953d69cca2..5f17bd947abb82 100644 --- a/common/changes/@uifabric/merge-styles/cliffkoh-styleFunctionsV2_2018-07-11-01-10.json +++ b/common/changes/@uifabric/merge-styles/backout-change_2018-07-13-19-36.json @@ -1,11 +1,11 @@ { "changes": [ { - "comment": "Add support for style functions and improve documentation/typings.", "packageName": "@uifabric/merge-styles", + "comment": "Reverting the TypeScript bump, to un", "type": "minor" } ], "packageName": "@uifabric/merge-styles", - "email": "cliff.koh@microsoft.com" + "email": "dzearing@microsoft.com" } \ No newline at end of file diff --git a/common/changes/@uifabric/styling/backout-change_2018-07-13-19-36.json b/common/changes/@uifabric/styling/backout-change_2018-07-13-19-36.json new file mode 100644 index 00000000000000..e44b71c2e66f83 --- /dev/null +++ b/common/changes/@uifabric/styling/backout-change_2018-07-13-19-36.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "@uifabric/styling", + "comment": "Reverting the TypeScript bump, to un", + "type": "minor" + } + ], + "packageName": "@uifabric/styling", + "email": "dzearing@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/@uifabric/styling/cliffkoh-styleFunctionsV2_2018-07-11-01-10.json b/common/changes/@uifabric/styling/cliffkoh-styleFunctionsV2_2018-07-11-01-10.json deleted file mode 100644 index 8d36f5e6a76c33..00000000000000 --- a/common/changes/@uifabric/styling/cliffkoh-styleFunctionsV2_2018-07-11-01-10.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "@uifabric/styling", - "comment": "Move certain types into `@uifabric/merge-styles` and export more types as well from that package.", - "type": "minor" - } - ], - "packageName": "@uifabric/styling", - "email": "cliff.koh@microsoft.com" -} \ No newline at end of file diff --git a/common/changes/@uifabric/utilities/cliffkoh-styleFunctionsV2_2018-07-11-01-10.json b/common/changes/@uifabric/utilities/backout-change_2018-07-13-19-36.json similarity index 54% rename from common/changes/@uifabric/utilities/cliffkoh-styleFunctionsV2_2018-07-11-01-10.json rename to common/changes/@uifabric/utilities/backout-change_2018-07-13-19-36.json index 538061f09bc150..ea845868cb3297 100644 --- a/common/changes/@uifabric/utilities/cliffkoh-styleFunctionsV2_2018-07-11-01-10.json +++ b/common/changes/@uifabric/utilities/backout-change_2018-07-13-19-36.json @@ -2,10 +2,10 @@ "changes": [ { "packageName": "@uifabric/utilities", - "comment": "Tighten typings of APIs around merge-styles to be more correct", + "comment": "Reverting the TypeScript bump, to un", "type": "minor" } ], "packageName": "@uifabric/utilities", - "email": "cliff.koh@microsoft.com" + "email": "dzearing@microsoft.com" } \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/backout-change_2018-07-13-19-36.json b/common/changes/office-ui-fabric-react/backout-change_2018-07-13-19-36.json new file mode 100644 index 00000000000000..c292446abdc328 --- /dev/null +++ b/common/changes/office-ui-fabric-react/backout-change_2018-07-13-19-36.json @@ -0,0 +1,11 @@ +{ + "changes": [ + { + "packageName": "office-ui-fabric-react", + "comment": "Reverting the TypeScript bump, to unbreak DetailsList d.ts changes.", + "type": "minor" + } + ], + "packageName": "office-ui-fabric-react", + "email": "dzearing@microsoft.com" +} \ No newline at end of file diff --git a/common/changes/office-ui-fabric-react/cliffkoh-styleFunctionsV2_2018-07-11-01-10.json b/common/changes/office-ui-fabric-react/cliffkoh-styleFunctionsV2_2018-07-11-01-10.json deleted file mode 100644 index 50812b99e4d05e..00000000000000 --- a/common/changes/office-ui-fabric-react/cliffkoh-styleFunctionsV2_2018-07-11-01-10.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "changes": [ - { - "packageName": "office-ui-fabric-react", - "comment": "Fix various typings/code bugs.", - "type": "patch" - } - ], - "packageName": "office-ui-fabric-react", - "email": "cliff.koh@microsoft.com" -} \ No newline at end of file diff --git a/common/config/rush/npm-shrinkwrap.json b/common/config/rush/npm-shrinkwrap.json index 2be337400fddf6..d5ffbf9d93e96e 100644 --- a/common/config/rush/npm-shrinkwrap.json +++ b/common/config/rush/npm-shrinkwrap.json @@ -53,16 +53,16 @@ } }, "@microsoft/load-themed-styles": { - "version": "1.7.67", - "resolved": "https://registry.npmjs.org/@microsoft/load-themed-styles/-/load-themed-styles-1.7.67.tgz", - "integrity": "sha1-Gfa2BF8Hq8HPCQSoWrV/sQ4Byeo=" + "version": "1.7.68", + "resolved": "https://registry.npmjs.org/@microsoft/load-themed-styles/-/load-themed-styles-1.7.68.tgz", + "integrity": "sha1-0LecUgP/Sy3SeHUNxXQ8roI70v4=" }, "@microsoft/loader-load-themed-styles": { - "version": "1.7.50", - "resolved": "https://registry.npmjs.org/@microsoft/loader-load-themed-styles/-/loader-load-themed-styles-1.7.50.tgz", - "integrity": "sha1-otC6iewaOdS8CU0VFvKgAGANeHg=", + "version": "1.7.51", + "resolved": "https://registry.npmjs.org/@microsoft/loader-load-themed-styles/-/loader-load-themed-styles-1.7.51.tgz", + "integrity": "sha1-ndGg63FI/NmZc+gbhJYiouRBT/U=", "requires": { - "@microsoft/load-themed-styles": "1.7.67", + "@microsoft/load-themed-styles": "1.7.68", "loader-utils": "1.1.0" } }, @@ -120,11 +120,11 @@ }, "@rush-temp/build": { "version": "file:projects/build.tgz", - "integrity": "sha1-7nNADNdCDUOYEK7P95wu1a6ovqI=", + "integrity": "sha1-XTIzbgbTdzs2m8BigLOTjen1zwM=", "requires": { "@microsoft/api-extractor": "4.3.7", - "@microsoft/load-themed-styles": "1.7.67", - "@microsoft/loader-load-themed-styles": "1.7.50", + "@microsoft/load-themed-styles": "1.7.68", + "@microsoft/loader-load-themed-styles": "1.7.51", "autoprefixer": "7.2.6", "bundlesize": "0.15.3", "chalk": "2.4.1", @@ -135,7 +135,7 @@ "github": "7.3.2", "glob": "7.1.2", "gzip-size": "3.0.0", - "jest": "23.4.0", + "jest": "23.4.1", "json-loader": "0.5.7", "mustache": "2.3.0", "node-sass": "4.9.2", @@ -154,7 +154,7 @@ "ts-loader": "4.4.2", "tslint": "5.10.0", "tslint-microsoft-contrib": "5.0.3", - "typescript": "2.9.2", + "typescript": "2.8.1", "webpack": "4.7.0", "webpack-bundle-analyzer": "2.13.1", "webpack-cli": "2.1.2", @@ -724,9 +724,9 @@ }, "@rush-temp/charting": { "version": "file:projects/charting.tgz", - "integrity": "sha1-7plY69bt898pYyM2hgEikQA8VlY=", + "integrity": "sha1-OIUG27g9lF/D77LyC6MpwBeJsD8=", "requires": { - "@microsoft/load-themed-styles": "1.7.67", + "@microsoft/load-themed-styles": "1.7.68", "@types/d3-array": "1.2.1", "@types/d3-axis": "1.0.10", "@types/d3-scale": "2.0.0", @@ -761,15 +761,16 @@ }, "@rush-temp/dashboard": { "version": "file:projects/dashboard.tgz", - "integrity": "sha1-grpPJvo7rf1hB8+mY5u3EMyAqMM=", + "integrity": "sha1-hqcrF+8B1+UDfnWuwYojSlyWAEs=", "requires": { - "@microsoft/load-themed-styles": "1.7.67", + "@microsoft/load-themed-styles": "1.7.68", "@types/jest": "23.0.0", "@types/react": "16.3.16", "@types/react-dom": "16.0.5", "@types/react-grid-layout": "0.16.4", "@types/react-test-renderer": "16.0.1", "@types/webpack-env": "1.13.0", + "@uifabric/charting": "0.0.4", "css-loader": "0.15.6", "react": "16.4.1", "react-dom": "16.4.1", @@ -1138,9 +1139,9 @@ }, "@rush-temp/example-app-base": { "version": "file:projects/example-app-base.tgz", - "integrity": "sha1-tDbrk37rIxC4DWSjfBDG2bH1vV4=", + "integrity": "sha1-p+jSEgXAZKFyVl08CaWYzCJS1K4=", "requires": { - "@microsoft/load-themed-styles": "1.7.67", + "@microsoft/load-themed-styles": "1.7.68", "@types/es6-promise": "0.0.32", "@types/highlight.js": "9.12.2", "@types/react": "16.3.16", @@ -1159,9 +1160,9 @@ }, "@rush-temp/experiments": { "version": "file:projects/experiments.tgz", - "integrity": "sha1-UUxvYKga2EkQANh558iFt+Ip0aA=", + "integrity": "sha1-cHa7KEPowIUKQWQSlj4urMSmCb4=", "requires": { - "@microsoft/load-themed-styles": "1.7.67", + "@microsoft/load-themed-styles": "1.7.68", "@types/deep-assign": "0.1.1", "@types/enzyme": "3.1.5", "@types/enzyme-adapter-react-16": "1.0.1", @@ -1175,6 +1176,7 @@ "@types/resemblejs": "1.3.28", "@types/sinon": "2.2.2", "@types/webpack-env": "1.13.0", + "@uifabric/charting": "0.0.4", "deep-assign": "2.0.0", "enzyme": "3.3.0", "enzyme-adapter-react-16": "1.1.1", @@ -1190,9 +1192,9 @@ }, "@rush-temp/fabric-website": { "version": "file:projects/fabric-website.tgz", - "integrity": "sha1-aakJ1EdXy0MthScJw7v+FWclM/c=", + "integrity": "sha1-janehZwxFBDKQmRPAzSRTkIGrWg=", "requires": { - "@microsoft/load-themed-styles": "1.7.67", + "@microsoft/load-themed-styles": "1.7.68", "@types/es6-promise": "0.0.32", "@types/node": "8.0.26", "@types/prop-types": "15.5.2", @@ -1215,9 +1217,9 @@ }, "@rush-temp/fabric-website-resources": { "version": "file:projects/fabric-website-resources.tgz", - "integrity": "sha1-qcAuWOA8jD5LYahq9eOd7He/Gns=", + "integrity": "sha1-ux+i5A5IS3EY48/E9MBFQT4s8l8=", "requires": { - "@microsoft/load-themed-styles": "1.7.67", + "@microsoft/load-themed-styles": "1.7.68", "@types/enzyme": "3.1.5", "@types/enzyme-adapter-react-16": "1.0.1", "@types/es6-promise": "0.0.32", @@ -1249,7 +1251,7 @@ }, "@rush-temp/file-type-icons": { "version": "file:projects/file-type-icons.tgz", - "integrity": "sha1-/e3vd142DyFeyDOA6mwgn6Htkbw=", + "integrity": "sha1-3DbM26fbQ+KrOXTZNPRbtRtQxE8=", "requires": { "@types/react": "16.3.16", "@types/react-dom": "16.0.5", @@ -1260,7 +1262,7 @@ }, "@rush-temp/foundation": { "version": "file:projects/foundation.tgz", - "integrity": "sha1-6Mt/FE75C7z+FOWZSK2sO2s/2uE=", + "integrity": "sha1-eLV/ksP8kfklli53Zm2LLq8jXoA=", "requires": { "@types/enzyme": "3.1.5", "@types/enzyme-adapter-react-16": "1.0.1", @@ -1280,21 +1282,21 @@ }, "@rush-temp/icons": { "version": "file:projects/icons.tgz", - "integrity": "sha1-9jhEnL2VeMqVS6L/K6PBB+6j580=", + "integrity": "sha1-BiA0s55wXv9jWUnNk9BdNybMZpA=", "requires": { "tslib": "1.9.3" } }, "@rush-temp/jest-serializer-merge-styles": { "version": "file:projects/jest-serializer-merge-styles.tgz", - "integrity": "sha1-M4GtZh/zldj1TbB6EQYR5s63iXw=", + "integrity": "sha1-VwSZJbifR1ghNlMBTx1fOfLHZXg=", "requires": { "@types/jest": "23.0.0" } }, "@rush-temp/merge-styles": { "version": "file:projects/merge-styles.tgz", - "integrity": "sha1-5skgc2NhWeJsF4mHhq4/VOxCFBw=", + "integrity": "sha1-FKr6ki8cdz5DuevoZ07NqQ38WMg=", "requires": { "@types/jest": "23.0.0", "tslib": "1.9.3" @@ -1302,9 +1304,9 @@ }, "@rush-temp/office-ui-fabric-react": { "version": "file:projects/office-ui-fabric-react.tgz", - "integrity": "sha1-dCWYPTWLxDiybcKjcrhe1+tycJ0=", + "integrity": "sha1-42B5kYYexkMSDB9xiWVe8eJ4p4I=", "requires": { - "@microsoft/load-themed-styles": "1.7.67", + "@microsoft/load-themed-styles": "1.7.68", "@types/enzyme": "3.1.5", "@types/enzyme-adapter-react-16": "1.0.1", "@types/es6-promise": "0.0.32", @@ -1336,16 +1338,16 @@ }, "@rush-temp/office-ui-fabric-react-tslint": { "version": "file:projects/office-ui-fabric-react-tslint.tgz", - "integrity": "sha1-Qa0alsKG5DaDkaP+vdqxnL5liX0=", + "integrity": "sha1-B/6lHMwq4Y+KvgVRHk3G8ZNkeHI=", "requires": { "tslint-react": "3.6.0" } }, "@rush-temp/server-rendered-app": { "version": "file:projects/server-rendered-app.tgz", - "integrity": "sha1-d+KDbBSiBFzskkpKT3tmzBx82rk=", + "integrity": "sha1-bGKcn1It/WMa0pMVB5Vlrtz6VDE=", "requires": { - "@microsoft/load-themed-styles": "1.7.67", + "@microsoft/load-themed-styles": "1.7.68", "@types/es6-promise": "0.0.32", "@types/react": "16.3.16", "@types/react-dom": "16.0.5", @@ -1361,9 +1363,9 @@ }, "@rush-temp/ssr-tests": { "version": "file:projects/ssr-tests.tgz", - "integrity": "sha1-G7fkR0Dx5eDAv8fgGuqL6TjI0Tk=", + "integrity": "sha1-GGeS8b0M0saa1aS2ZpaWu7Jhe3k=", "requires": { - "@microsoft/load-themed-styles": "1.7.67", + "@microsoft/load-themed-styles": "1.7.68", "@types/es6-promise": "0.0.32", "@types/mocha": "2.2.39", "@types/webpack-env": "1.13.0", @@ -1697,9 +1699,9 @@ }, "@rush-temp/styling": { "version": "file:projects/styling.tgz", - "integrity": "sha1-1PcFTNBQYsUgpbcjjHHlYzZQ89o=", + "integrity": "sha1-YXCaigalOYhe/ypyvTFrYgSM+Vg=", "requires": { - "@microsoft/load-themed-styles": "1.7.67", + "@microsoft/load-themed-styles": "1.7.68", "@types/jest": "23.0.0", "@types/react": "16.3.16", "@types/webpack-env": "1.13.0", @@ -1712,7 +1714,7 @@ }, "@rush-temp/test-bundle-button": { "version": "file:projects/test-bundle-button.tgz", - "integrity": "sha1-L8nMS9PRUA9BMJVMfwlgA/voIJ8=", + "integrity": "sha1-FqHPi5YkGpKNao40KkEwqWLIacg=", "requires": { "@types/prop-types": "15.5.2", "@types/react": "16.3.16", @@ -1725,9 +1727,9 @@ }, "@rush-temp/todo-app": { "version": "file:projects/todo-app.tgz", - "integrity": "sha1-7oCrL0W3xlPNR4J56SxxSHC6zg0=", + "integrity": "sha1-OIOP1Li/4knVMqSBvg2BKPBRdIo=", "requires": { - "@microsoft/load-themed-styles": "1.7.67", + "@microsoft/load-themed-styles": "1.7.68", "@types/es6-promise": "0.0.32", "@types/react": "16.3.16", "@types/react-dom": "16.0.5", @@ -1737,12 +1739,12 @@ "react": "16.4.1", "react-dom": "16.4.1", "tslib": "1.9.3", - "typescript": "2.9.2" + "typescript": "2.8.1" } }, "@rush-temp/utilities": { "version": "file:projects/utilities.tgz", - "integrity": "sha1-LZFqwQgkhd19P4OmgfESVM9WKCA=", + "integrity": "sha1-ZDOGv1EBeApIIJ0tfN691UHRSqA=", "requires": { "@types/enzyme": "3.1.5", "@types/enzyme-adapter-react-16": "1.0.1", @@ -1764,7 +1766,7 @@ }, "@rush-temp/variants": { "version": "file:projects/variants.tgz", - "integrity": "sha1-WV4N2Oy24uLlvpk9UmYjN6DskOs=", + "integrity": "sha1-VN/z+hgKhkfbCqqxfU3PSus+h+E=", "requires": { "@types/jest": "23.0.0", "tslib": "1.9.3" @@ -1772,7 +1774,7 @@ }, "@rush-temp/vr-tests": { "version": "file:projects/vr-tests.tgz", - "integrity": "sha1-gEmAr7X1dBEs5WG8lWB9xkJ0KBQ=", + "integrity": "sha1-1PK5mhW6IZhjGl2I1ePqtTNQPnw=", "requires": { "@storybook/addon-options": "3.2.3", "@storybook/react": "3.4.8", @@ -1791,12 +1793,12 @@ "storybook-readme": "3.0.6", "style-loader": "0.19.1", "tslib": "1.9.3", - "typescript": "2.9.2" + "typescript": "2.8.1" } }, "@rush-temp/webpack-utils": { "version": "file:projects/webpack-utils.tgz", - "integrity": "sha1-pk9SHUaiJb5oHC4o8Rp/vKBSBkI=", + "integrity": "sha1-a2SrPji8VzamFPVhwvHBTtB0Nzg=", "requires": { "@types/jest": "23.0.0", "@types/loader-utils": "1.1.3", @@ -2623,6 +2625,64 @@ "resolved": "https://registry.npmjs.org/@types/z-schema/-/z-schema-3.16.31.tgz", "integrity": "sha1-LrHQCl5Ow/pYx2r94S4YK2bcXBw=" }, + "@uifabric/charting": { + "version": "0.0.4", + "resolved": "https://registry.npmjs.org/@uifabric/charting/-/charting-0.0.4.tgz", + "integrity": "sha512-oVJXxP4g1tfqHea2lCkbYXQjF4f9h20qIaTtF75iJqvG42rm1vl+a91bdsb1kFC7YM7K3qmM1M/IQFQuvbNG8A==", + "requires": { + "@microsoft/load-themed-styles": "1.7.68", + "@types/d3-array": "1.2.1", + "@types/d3-axis": "1.0.10", + "@types/d3-scale": "2.0.0", + "@types/d3-selection": "1.3.0", + "@uifabric/icons": "6.0.2", + "d3-array": "1.2.1", + "d3-axis": "1.0.8", + "d3-scale": "2.0.0", + "d3-selection": "1.3.0", + "office-ui-fabric-react": "6.33.1", + "prop-types": "15.6.2", + "tslib": "1.9.3" + } + }, + "@uifabric/icons": { + "version": "6.0.2", + "resolved": "https://registry.npmjs.org/@uifabric/icons/-/icons-6.0.2.tgz", + "integrity": "sha512-M8xfGdxEOUQJ8XQnviFFvystaiy1Ox08ml1WVw+IWhycG7s6eh/vy/WU5kYlECCHcDmGGR0laGT5Jd60Jrfdsg==", + "requires": { + "@uifabric/styling": "6.7.0", + "tslib": "1.9.3" + } + }, + "@uifabric/merge-styles": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/@uifabric/merge-styles/-/merge-styles-6.3.0.tgz", + "integrity": "sha512-zS6YX08FbIAv31FbyVv7brRh7cMWOepXzlHg/qUg8lasUJ5VjoSAa4X8O4vjjxH6QBnhG65rcKg+nzJL6UAJsQ==", + "requires": { + "tslib": "1.9.3" + } + }, + "@uifabric/styling": { + "version": "6.7.0", + "resolved": "https://registry.npmjs.org/@uifabric/styling/-/styling-6.7.0.tgz", + "integrity": "sha512-hJF/5RcwMl9L5JZyNb5W2rCVlcBsYPrWIEu7B9Eha4+TfdunHh0XSQsC9gQCzhrqJtj30dLy7LEwWKAiu+g5yw==", + "requires": { + "@microsoft/load-themed-styles": "1.7.68", + "@uifabric/merge-styles": "6.3.0", + "@uifabric/utilities": "6.8.0", + "tslib": "1.9.3" + } + }, + "@uifabric/utilities": { + "version": "6.8.0", + "resolved": "https://registry.npmjs.org/@uifabric/utilities/-/utilities-6.8.0.tgz", + "integrity": "sha512-CDRzvPOoj5EJNJITMEa2fElKuLddHNcgH6s+YLe2kqE2zhZP9SSUF/MId1diI2ftKW5EjsEqihggzENEV3YyoQ==", + "requires": { + "@uifabric/merge-styles": "6.3.0", + "prop-types": "15.6.2", + "tslib": "1.9.3" + } + }, "@webassemblyjs/ast": { "version": "1.5.13", "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.5.13.tgz", @@ -5835,11 +5895,6 @@ "readable-stream": "2.3.6" } }, - "clorox": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/clorox/-/clorox-1.0.3.tgz", - "integrity": "sha512-w3gKAUKMJYmmaJyc+p+iDrDtLvsFasrx/y6/zWo2U1TZfsz3y4Vl4T9PHCZrOwk1eMTOSRI6xHdpDR4PhTdy8Q==" - }, "co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -6165,9 +6220,9 @@ }, "dependencies": { "esprima": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.0.tgz", - "integrity": "sha512-oftTcaMu/EGrEIu904mWteKIv8vMuOgGYo7EhVJJN00R/EED9DCua/xxHRdYnKtcECzVg7xOWhflvJMnqcFZjw==" + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", + "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==" }, "js-yaml": { "version": "3.12.0", @@ -6175,7 +6230,7 @@ "integrity": "sha512-PIt2cnwmPfL4hKNwqeiuz4bKfnzHTBv6HyVgjahA6mPLwPDzjDWrplJBMjHUFxku/N3FlmrbyPclad+I+4mJ3A==", "requires": { "argparse": "1.0.10", - "esprima": "4.0.0" + "esprima": "4.0.1" } }, "parse-json": { @@ -9277,15 +9332,15 @@ "requires": { "es6-templates": "0.2.3", "fastparse": "1.1.1", - "html-minifier": "3.5.18", + "html-minifier": "3.5.19", "loader-utils": "1.1.0", "object-assign": "4.1.1" } }, "html-minifier": { - "version": "3.5.18", - "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-3.5.18.tgz", - "integrity": "sha512-sczoq/9zeXiKZMj8tsQzHJE7EyjrpMHvblTLuh9o8h5923a6Ts5uQ/3YdY+xIqJYRjzHQPlrHjfjh0BtwPJG0g==", + "version": "3.5.19", + "resolved": "https://registry.npmjs.org/html-minifier/-/html-minifier-3.5.19.tgz", + "integrity": "sha512-Qr2JC9nsjK8oCrEmuB430ZIA8YWbF3D5LSjywD75FTuXmeqacwHgIM8wp3vHYzzPbklSjp53RdmDuzR4ub2HzA==", "requires": { "camel-case": "3.0.0", "clean-css": "4.1.11", @@ -9318,7 +9373,7 @@ "integrity": "sha1-f5xCG36pHsRg9WUn1430hO51N9U=", "requires": { "bluebird": "3.5.1", - "html-minifier": "3.5.18", + "html-minifier": "3.5.19", "loader-utils": "0.2.17", "lodash": "4.17.10", "pretty-error": "2.1.1", @@ -10450,12 +10505,12 @@ "integrity": "sha1-+eIwPUUH9tdDVac2ZNFED7Wg71k=" }, "jest": { - "version": "23.4.0", - "resolved": "https://registry.npmjs.org/jest/-/jest-23.4.0.tgz", - "integrity": "sha1-685j9lKcJ8ZG2AxhCGbwMG9m3L8=", + "version": "23.4.1", + "resolved": "https://registry.npmjs.org/jest/-/jest-23.4.1.tgz", + "integrity": "sha512-HTOuA9epknN7RKdzhmp9qrbP0z3TibAMXI+sluLOcrEoF54ZCG8/urFB2DK/sOINcMeyX6epMUqka8i0+d0xOA==", "requires": { "import-local": "1.0.0", - "jest-cli": "23.4.0" + "jest-cli": "23.4.1" }, "dependencies": { "ansi-escapes": { @@ -10469,9 +10524,9 @@ "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=" }, "jest-cli": { - "version": "23.4.0", - "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-23.4.0.tgz", - "integrity": "sha1-0f3R28Qdaa6L1D0AcM4jmI6s2G8=", + "version": "23.4.1", + "resolved": "https://registry.npmjs.org/jest-cli/-/jest-cli-23.4.1.tgz", + "integrity": "sha512-Cmd7bex+kYmMGwGrIh/crwUieUFr+4PCTaK32tEA0dm0wklXV8zGgWh8n+8WbhsFPNzacolxdtcfBKIorcV5FQ==", "requires": { "ansi-escapes": "3.1.0", "chalk": "2.4.1", @@ -10485,23 +10540,23 @@ "istanbul-lib-instrument": "1.10.1", "istanbul-lib-source-maps": "1.2.5", "jest-changed-files": "23.4.0", - "jest-config": "23.4.0", + "jest-config": "23.4.1", "jest-environment-jsdom": "23.4.0", "jest-get-type": "22.4.3", - "jest-haste-map": "23.4.0", + "jest-haste-map": "23.4.1", "jest-message-util": "23.4.0", "jest-regex-util": "23.3.0", - "jest-resolve-dependencies": "23.4.0", - "jest-runner": "23.4.0", - "jest-runtime": "23.4.0", - "jest-snapshot": "23.4.0", + "jest-resolve-dependencies": "23.4.1", + "jest-runner": "23.4.1", + "jest-runtime": "23.4.1", + "jest-snapshot": "23.4.1", "jest-util": "23.4.0", "jest-validate": "23.4.0", "jest-watcher": "23.4.0", "jest-worker": "23.2.0", "micromatch": "2.3.11", "node-notifier": "5.2.1", - "prompts": "0.1.11", + "prompts": "0.1.12", "realpath-native": "1.0.1", "rimraf": "2.6.2", "slash": "1.0.0", @@ -10549,9 +10604,9 @@ } }, "jest-config": { - "version": "23.4.0", - "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-23.4.0.tgz", - "integrity": "sha1-ecz41oqg5I+eO+uBuDqlh1xj+j8=", + "version": "23.4.1", + "resolved": "https://registry.npmjs.org/jest-config/-/jest-config-23.4.1.tgz", + "integrity": "sha512-OT29qlcw9Iw7u0PC04wD9tjLJL4vpGdMZrrHMFwYSO3HxOikbHywjmtQ7rntW4qvBcpbi7iCMTPPRmpDjImQEw==", "requires": { "babel-core": "6.26.3", "babel-jest": "23.4.0", @@ -10560,9 +10615,9 @@ "jest-environment-jsdom": "23.4.0", "jest-environment-node": "23.4.0", "jest-get-type": "22.4.3", - "jest-jasmine2": "23.4.0", + "jest-jasmine2": "23.4.1", "jest-regex-util": "23.3.0", - "jest-resolve": "23.4.0", + "jest-resolve": "23.4.1", "jest-util": "23.4.0", "jest-validate": "23.4.0", "pretty-format": "23.2.0" @@ -10621,9 +10676,9 @@ "integrity": "sha512-/jsz0Y+V29w1chdXVygEKSz2nBoHoYqNShPe+QgxSNjAuP1i8+k4LbQNrfoliKej0P45sivkSCh7yiD6ubHS3w==" }, "jest-haste-map": { - "version": "23.4.0", - "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-23.4.0.tgz", - "integrity": "sha1-8qDqpBr3Zs1RAebCkf3GQ1yT7hw=", + "version": "23.4.1", + "resolved": "https://registry.npmjs.org/jest-haste-map/-/jest-haste-map-23.4.1.tgz", + "integrity": "sha512-PGQxOEGAfRbTyJkmZeOKkVSs+KVeWgG625p89KUuq+sIIchY5P8iPIIc+Hw2tJJPBzahU3qopw1kF/qyhDdNBw==", "requires": { "fb-watchman": "2.0.0", "graceful-fs": "4.1.11", @@ -10635,9 +10690,9 @@ } }, "jest-jasmine2": { - "version": "23.4.0", - "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-23.4.0.tgz", - "integrity": "sha1-F85Tn+YI74mNaYZRgUSs8nC+yo8=", + "version": "23.4.1", + "resolved": "https://registry.npmjs.org/jest-jasmine2/-/jest-jasmine2-23.4.1.tgz", + "integrity": "sha512-nHmRgTtM9fuaK3RBz2z4j9mYVEJwB7FdoflQSvrwHV8mCT5z4DeHoKCvPp2R27F8fZTYJUYVMb36xn+ydg0tfA==", "requires": { "chalk": "2.4.1", "co": "4.6.0", @@ -10647,7 +10702,7 @@ "jest-each": "23.4.0", "jest-matcher-utils": "23.2.0", "jest-message-util": "23.4.0", - "jest-snapshot": "23.4.0", + "jest-snapshot": "23.4.1", "jest-util": "23.4.0", "pretty-format": "23.2.0" } @@ -10693,9 +10748,9 @@ "integrity": "sha1-X4ZylUfCeFxAAs6qj4Sf6MpHG8U=" }, "jest-resolve": { - "version": "23.4.0", - "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-23.4.0.tgz", - "integrity": "sha1-tAYdvNY5G15EXV/YTJ2tX/H/VmI=", + "version": "23.4.1", + "resolved": "https://registry.npmjs.org/jest-resolve/-/jest-resolve-23.4.1.tgz", + "integrity": "sha512-VNk4YRNR5gsHhNS0Lp46/DzTT11e+ecbUC61ikE593cKbtdrhrMO+zXkOJaE8YDD5sHxH9W6OfssNn4FkZBzZQ==", "requires": { "browser-resolve": "1.11.3", "chalk": "2.4.1", @@ -10703,28 +10758,28 @@ } }, "jest-resolve-dependencies": { - "version": "23.4.0", - "resolved": "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-23.4.0.tgz", - "integrity": "sha1-5z785wJipuK/UmPQsjAJoJhnhiA=", + "version": "23.4.1", + "resolved": "https://registry.npmjs.org/jest-resolve-dependencies/-/jest-resolve-dependencies-23.4.1.tgz", + "integrity": "sha512-Jp0wgNJg3OYPvXJfNVX4k4/niwGS6ARuKacum/vue48+4A1XPJ2H3aVFuNb3gUaiB/6Le7Zyl8AUb4MELBfcmg==", "requires": { "jest-regex-util": "23.3.0", - "jest-snapshot": "23.4.0" + "jest-snapshot": "23.4.1" } }, "jest-runner": { - "version": "23.4.0", - "resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-23.4.0.tgz", - "integrity": "sha1-GFmyEaJk6lpDt6MCLhGZBnxN/lc=", + "version": "23.4.1", + "resolved": "https://registry.npmjs.org/jest-runner/-/jest-runner-23.4.1.tgz", + "integrity": "sha512-78KyhObsx0VEuUQ74ikGt68NpP6PApTjGpJPSyZ7AvwOFRqFlxdHpCU/lFPQxW/fLEghl4irz9OHjRLGcGFNyQ==", "requires": { "exit": "0.1.2", "graceful-fs": "4.1.11", - "jest-config": "23.4.0", + "jest-config": "23.4.1", "jest-docblock": "23.2.0", - "jest-haste-map": "23.4.0", - "jest-jasmine2": "23.4.0", + "jest-haste-map": "23.4.1", + "jest-jasmine2": "23.4.1", "jest-leak-detector": "23.2.0", "jest-message-util": "23.4.0", - "jest-runtime": "23.4.0", + "jest-runtime": "23.4.1", "jest-util": "23.4.0", "jest-worker": "23.2.0", "source-map-support": "0.5.6", @@ -10743,9 +10798,9 @@ } }, "jest-runtime": { - "version": "23.4.0", - "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-23.4.0.tgz", - "integrity": "sha1-ww72Gd71h7k7rUpJONqazLmTa00=", + "version": "23.4.1", + "resolved": "https://registry.npmjs.org/jest-runtime/-/jest-runtime-23.4.1.tgz", + "integrity": "sha512-fnInrsEAbLpNctQa+RLnKZyQLMmb5u4YdoT9CbRKWhjMY7q6ledOu+x+ORZ3glQOK/vJIS701RaJRp1pc5ziaA==", "requires": { "babel-core": "6.26.3", "babel-plugin-istanbul": "4.1.6", @@ -10754,12 +10809,12 @@ "exit": "0.1.2", "fast-json-stable-stringify": "2.0.0", "graceful-fs": "4.1.11", - "jest-config": "23.4.0", - "jest-haste-map": "23.4.0", + "jest-config": "23.4.1", + "jest-haste-map": "23.4.1", "jest-message-util": "23.4.0", "jest-regex-util": "23.3.0", - "jest-resolve": "23.4.0", - "jest-snapshot": "23.4.0", + "jest-resolve": "23.4.1", + "jest-snapshot": "23.4.1", "jest-util": "23.4.0", "jest-validate": "23.4.0", "micromatch": "2.3.11", @@ -10797,9 +10852,9 @@ "integrity": "sha1-o3dq6zEekP6D+rnlM+hRAr0WQWU=" }, "jest-snapshot": { - "version": "23.4.0", - "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-23.4.0.tgz", - "integrity": "sha1-dGPQNXyr3+HGOZTV4y9wfRAz1hY=", + "version": "23.4.1", + "resolved": "https://registry.npmjs.org/jest-snapshot/-/jest-snapshot-23.4.1.tgz", + "integrity": "sha512-oMjaQ4vB4uT211zx00X0R7hg+oLVRDvhVKiC6+vSg7Be9S/AmkDMCVUoaPcLRK/0NkZBTzrh4WCzrSZgUEZW3g==", "requires": { "babel-traverse": "6.26.0", "babel-types": "6.26.0", @@ -10807,7 +10862,7 @@ "jest-diff": "23.2.0", "jest-matcher-utils": "23.2.0", "jest-message-util": "23.4.0", - "jest-resolve": "23.4.0", + "jest-resolve": "23.4.1", "mkdirp": "0.5.1", "natural-compare": "1.4.0", "pretty-format": "23.2.0", @@ -11108,6 +11163,11 @@ "graceful-fs": "4.1.11" } }, + "kleur": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/kleur/-/kleur-1.0.1.tgz", + "integrity": "sha512-8srIZ5BK5PCJw1L/JN741xgNfSjuQNK9ImYbYzv7ZUD3WPfuywaY+yd7lQOphJ+2vwXnMLnRZoAh5X+orRt4LQ==" + }, "lazy-cache": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz", @@ -12935,6 +12995,20 @@ "resolved": "https://registry.npmjs.org/office-ui-fabric-core/-/office-ui-fabric-core-9.6.0.tgz", "integrity": "sha1-KhZgU8ye+wlWUGPn/Td8yKywNBw=" }, + "office-ui-fabric-react": { + "version": "6.33.1", + "resolved": "https://registry.npmjs.org/office-ui-fabric-react/-/office-ui-fabric-react-6.33.1.tgz", + "integrity": "sha512-kMZafZksaac4fBnK9m5N85PAnwVz+aY0Fsa7P50g+ILW8IArqnG7dD/H8CZH2+rTdLmo0uA8Ttk6O38RwKdGIQ==", + "requires": { + "@microsoft/load-themed-styles": "1.7.68", + "@uifabric/icons": "6.0.2", + "@uifabric/merge-styles": "6.3.0", + "@uifabric/styling": "6.7.0", + "@uifabric/utilities": "6.8.0", + "prop-types": "15.6.2", + "tslib": "1.9.3" + } + }, "on-finished": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.3.0.tgz", @@ -15414,11 +15488,11 @@ } }, "prompts": { - "version": "0.1.11", - "resolved": "https://registry.npmjs.org/prompts/-/prompts-0.1.11.tgz", - "integrity": "sha512-6ZFzPasWMEgZ/cDpQQshV/l/fWISILGjq4VctCipG6RVfaO4FAafGR8iKXSFxoHIYgPcPYuDupyLtVNc/aDG8Q==", + "version": "0.1.12", + "resolved": "https://registry.npmjs.org/prompts/-/prompts-0.1.12.tgz", + "integrity": "sha512-pgR1GE1JM8q8UsHVIgjdK62DPwvrf0kvaKWJ/mfMoCm2lwfIReX/giQ1p0AlMoUXNhQap/8UiOdqi3bOROm/eg==", "requires": { - "clorox": "1.0.3", + "kleur": "1.0.1", "sisteransi": "0.1.1" } }, @@ -15827,9 +15901,9 @@ "integrity": "sha512-6lm2mV3S51yEnKmQQNnswoABL1U1H1KHoCCVwdwI3hvIv+W7ya4ki7Aw4o4KxtUHjNKkK5WpZb22rrMMOcJXJQ==" }, "esprima": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.0.tgz", - "integrity": "sha512-oftTcaMu/EGrEIu904mWteKIv8vMuOgGYo7EhVJJN00R/EED9DCua/xxHRdYnKtcECzVg7xOWhflvJMnqcFZjw==" + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", + "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==" }, "node-dir": { "version": "0.1.17", @@ -15846,7 +15920,7 @@ "requires": { "ast-types": "0.10.1", "core-js": "2.5.7", - "esprima": "4.0.0", + "esprima": "4.0.1", "private": "0.1.8", "source-map": "0.6.1" } @@ -16156,15 +16230,15 @@ "integrity": "sha512-L4f/GqxjlEJ5IZ+tdll/l+6dVi2ylysWbkgFJbMuldD6Jklgfv6zJnCpuAZDfjwHhfcd/De0dDKelsTEPQ29qA==", "requires": { "ast-types": "0.11.5", - "esprima": "4.0.0", + "esprima": "4.0.1", "private": "0.1.8", "source-map": "0.6.1" }, "dependencies": { "esprima": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.0.tgz", - "integrity": "sha512-oftTcaMu/EGrEIu904mWteKIv8vMuOgGYo7EhVJJN00R/EED9DCua/xxHRdYnKtcECzVg7xOWhflvJMnqcFZjw==" + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", + "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==" } } }, @@ -20108,9 +20182,9 @@ "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=" }, "typescript": { - "version": "2.9.2", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.9.2.tgz", - "integrity": "sha512-Gr4p6nFNaoufRIY4NMdpQRNmgxVIGMs4Fcu/ujdYk3nAZqk7supzBE9idmvfZIlH/Cuj//dvi+019qEue9lV0w==" + "version": "2.8.1", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-2.8.1.tgz", + "integrity": "sha512-Ao/f6d/4EPLq0YwzsQz8iXflezpTkQzqAyenTiw4kCUGr1uPiFLC3+fZ+gMZz6eeI/qdRUqvC+HxIJzUAzEFdg==" }, "typical": { "version": "2.6.1", @@ -21156,9 +21230,9 @@ "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo=" }, "esprima": { - "version": "4.0.0", - "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.0.tgz", - "integrity": "sha512-oftTcaMu/EGrEIu904mWteKIv8vMuOgGYo7EhVJJN00R/EED9DCua/xxHRdYnKtcECzVg7xOWhflvJMnqcFZjw==" + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz", + "integrity": "sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==" }, "jscodeshift": { "version": "0.4.1", @@ -21189,7 +21263,7 @@ "requires": { "ast-types": "0.10.1", "core-js": "2.5.7", - "esprima": "4.0.0", + "esprima": "4.0.1", "private": "0.1.8", "source-map": "0.6.1" } diff --git a/packages/charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx b/packages/charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx index d9c39048772a46..7dd9e23076a051 100644 --- a/packages/charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx +++ b/packages/charting/src/components/HorizontalBarChart/HorizontalBarChart.base.tsx @@ -3,8 +3,7 @@ import { max as d3Max } from 'd3-array'; import { axisLeft as d3AxisLeft, axisBottom as d3AxisBottom, Axis as D3Axis } from 'd3-axis'; import { scaleBand as d3ScaleBand, scaleLinear as d3ScaleLinear, ScaleLinear as D3ScaleLinear } from 'd3-scale'; import { select as d3Select } from 'd3-selection'; -import { classNamesFunction } from '../../Utilities'; -import { IProcessedStyleSet } from '../../Styling'; +import { classNamesFunction, IClassNames } from '../../Utilities'; import { IHorizontalBarChartProps, IHorizontalBarChartStyleProps, @@ -25,7 +24,7 @@ export class HorizontalBarChartBase extends React.Component; + private _classNames: IClassNames; constructor(props: IHorizontalBarChartProps) { super(props); diff --git a/packages/charting/src/components/LineChart/LineChart.base.tsx b/packages/charting/src/components/LineChart/LineChart.base.tsx index f833d5f521cce2..6ff6a30f0f2f8e 100644 --- a/packages/charting/src/components/LineChart/LineChart.base.tsx +++ b/packages/charting/src/components/LineChart/LineChart.base.tsx @@ -3,8 +3,7 @@ import { max as d3Max } from 'd3-array'; import { axisLeft as d3AxisLeft, axisBottom as d3AxisBottom, Axis as D3Axis } from 'd3-axis'; import { scaleBand as d3ScaleBand, scaleLinear as d3ScaleLinear } from 'd3-scale'; import { select as d3Select } from 'd3-selection'; -import { classNamesFunction, customizable } from '../../Utilities'; -import { IProcessedStyleSet } from '../../Styling'; +import { classNamesFunction, customizable, IClassNames } from '../../Utilities'; import { ILineChartProps, ILineChartStyleProps, ILineChartStyles, IDataPoint } from './LineChart.types'; const getClassNames = classNamesFunction(); @@ -20,7 +19,7 @@ export class LineChartBase extends React.Component { private _strokeWidth: number; private _yAxisTickCount: number; private _color: string; - private _classNames: IProcessedStyleSet; + private _classNames: IClassNames; constructor(props: ILineChartProps) { super(props); diff --git a/packages/charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx b/packages/charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx index 48b78f84ad9d3a..786d7f213936c1 100644 --- a/packages/charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx +++ b/packages/charting/src/components/VerticalBarChart/VerticalBarChart.base.tsx @@ -3,9 +3,7 @@ import { max as d3Max } from 'd3-array'; import { axisLeft as d3AxisLeft, axisBottom as d3AxisBottom, Axis as D3Axis } from 'd3-axis'; import { scaleBand as d3ScaleBand, scaleLinear as d3ScaleLinear, ScaleLinear as D3ScaleLinear } from 'd3-scale'; import { select as d3Select } from 'd3-selection'; -import { classNamesFunction, customizable } from '../../Utilities'; -import { IProcessedStyleSet } from '../../Styling'; - +import { classNamesFunction, customizable, IClassNames } from '../../Utilities'; import { IVerticalBarChartProps, IVerticalBarChartStyleProps, @@ -25,7 +23,7 @@ export class VerticalBarChartBase extends React.Component; + private _classNames: IClassNames; constructor(props: IVerticalBarChartProps) { super(props); diff --git a/packages/example-app-base/src/components/templates/PageContent.tsx b/packages/example-app-base/src/components/templates/PageContent.tsx index a6be4acba17196..d554a3a461f9b0 100644 --- a/packages/example-app-base/src/components/templates/PageContent.tsx +++ b/packages/example-app-base/src/components/templates/PageContent.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; -import { BaseComponent, IBaseProps, customizable } from 'office-ui-fabric-react/lib/Utilities'; -import { ITheme, IStyle, mergeStyleSets, IProcessedStyleSet } from 'office-ui-fabric-react/lib/Styling'; +import { BaseComponent, IBaseProps, IClassNames, customizable } from 'office-ui-fabric-react/lib/Utilities'; +import { ITheme, IStyle, mergeStyleSets } from 'office-ui-fabric-react/lib/Styling'; export interface IPageContentProps extends React.Props, IBaseProps { theme?: ITheme; @@ -20,7 +20,7 @@ const getDefaultStyles = (props: IPageContentProps): IPageContentStyles => ({ export class PageContent extends BaseComponent { public render(): JSX.Element { const { children } = this.props; - const classNames: IProcessedStyleSet = mergeStyleSets(getDefaultStyles(this.props)); + const classNames: IClassNames = mergeStyleSets(getDefaultStyles(this.props)); return
{children}
; } diff --git a/packages/example-app-base/src/components/templates/PageExampleCard.tsx b/packages/example-app-base/src/components/templates/PageExampleCard.tsx index 2019a1b51f84ca..3ec768aff6592a 100644 --- a/packages/example-app-base/src/components/templates/PageExampleCard.tsx +++ b/packages/example-app-base/src/components/templates/PageExampleCard.tsx @@ -1,5 +1,5 @@ -import { BaseComponent, IBaseProps, autobind, customizable } from 'office-ui-fabric-react/lib/Utilities'; -import { ITheme, IStyle, mergeStyleSets, getFocusStyle, IProcessedStyleSet } from 'office-ui-fabric-react/lib/Styling'; +import { BaseComponent, IBaseProps, IClassNames, autobind, customizable } from 'office-ui-fabric-react/lib/Utilities'; +import { ITheme, IStyle, mergeStyleSets, getFocusStyle } from 'office-ui-fabric-react/lib/Styling'; import * as React from 'react'; import { TypeScriptSnippet } from './TypeScriptSnippet'; import { PageHeader } from './PageHeader'; @@ -79,7 +79,7 @@ export class PageExampleCard extends BaseComponent = mergeStyleSets(getDefaultStyles(styleProps)); + const classNames: IClassNames = mergeStyleSets(getDefaultStyles(styleProps)); return (
diff --git a/packages/example-app-base/src/components/templates/PageHeader.base.tsx b/packages/example-app-base/src/components/templates/PageHeader.base.tsx index 5a68c970e78987..19da679e07365f 100644 --- a/packages/example-app-base/src/components/templates/PageHeader.base.tsx +++ b/packages/example-app-base/src/components/templates/PageHeader.base.tsx @@ -8,8 +8,7 @@ export class PageHeaderBase extends BaseComponent { public render(): JSX.Element { const { theme, children, getStyles } = this.props; const stylesProps: IPageHeaderStylesProps = { theme: theme! }; - - const classNames = getStyles ? mergeStyleSets(getStyles(stylesProps)) : { root: '' }; + const classNames: IClassNames = mergeStyleSets(getStyles && getStyles(stylesProps)); return

{children}

; } diff --git a/packages/example-app-base/src/components/templates/PageImageSet.tsx b/packages/example-app-base/src/components/templates/PageImageSet.tsx index 8cb6a028f421f0..24c57e59966c08 100644 --- a/packages/example-app-base/src/components/templates/PageImageSet.tsx +++ b/packages/example-app-base/src/components/templates/PageImageSet.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import { BaseComponent, IBaseProps, IClassNames, customizable } from 'office-ui-fabric-react/lib/Utilities'; -import { ITheme, IStyle, mergeStyleSets, IStyleSet } from 'office-ui-fabric-react/lib/Styling'; +import { ITheme, IStyle, mergeStyleSets } from 'office-ui-fabric-react/lib/Styling'; import { IImageProps } from 'office-ui-fabric-react/lib/Image'; export interface IPageImageSetStyles { @@ -20,7 +20,7 @@ export interface IPageImageSetProps extends React.Props, IBaseProp images: IImageProps[]; } -const getDefaultStyles = (props: IPageImageSetStyleProps): IStyleSet => ({ +const getDefaultStyles = (props: IPageImageSetStyleProps): IPageImageSetStyles => ({ root: { display: 'flex', flexFlow: 'row nowrap', @@ -41,9 +41,10 @@ export class PageImageSet extends BaseComponent { public render(): JSX.Element { const { theme, getStyles, images } = this.props; const styleProps: IPageImageSetStyleProps = { theme: theme! }; - const classNames = getStyles - ? mergeStyleSets(getDefaultStyles(styleProps), getStyles(styleProps)) - : mergeStyleSets(getDefaultStyles(styleProps)); + const classNames: IClassNames = mergeStyleSets( + getDefaultStyles(styleProps), + getStyles && getStyles(styleProps) + ); return (
diff --git a/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.styles.ts b/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.styles.ts index dafd07563ea34f..4f7649d88ea5f8 100644 --- a/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.styles.ts +++ b/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.styles.ts @@ -1,5 +1,5 @@ import { IShimmerCircleStyleProps, IShimmerCircleStyles } from './ShimmerCircle.types'; -import { IStyle, getGlobalClassNames, HighContrastSelector } from '../../../Styling'; +import { IStyleSet, getGlobalClassNames, HighContrastSelector } from '../../../Styling'; const GlobalClassNames = { root: 'ms-ShimmerCircle-root', @@ -12,7 +12,7 @@ export function getStyles(props: IShimmerCircleStyleProps): IShimmerCircleStyles const { palette } = theme; const classNames = getGlobalClassNames(GlobalClassNames, theme); - const styles: IStyle = !!borderStyle ? borderStyle : {}; + const styles: IStyleSet = !!borderStyle ? borderStyle : {}; return { root: [ diff --git a/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.types.ts b/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.types.ts index 3ae075e12dcb5d..e47b75731a261c 100644 --- a/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.types.ts +++ b/packages/experiments/src/components/Shimmer/ShimmerCircle/ShimmerCircle.types.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { IStyle, ITheme } from '../../../Styling'; +import { IStyle, IStyleSet, ITheme } from '../../../Styling'; import { IStyleFunctionOrObject } from '../../../Utilities'; export interface IShimmerCircle {} @@ -23,7 +23,7 @@ export interface IShimmerCircleProps extends React.AllHTMLAttributes { + private _getBorderStyles = (elem: IShimmerElement, rowHeight?: number): IStyleSet | undefined => { const elemHeight: number | undefined = elem.height; const dif: number = rowHeight && elemHeight ? rowHeight - elemHeight : 0; - let borderStyle: IStyle | undefined; + let borderStyle: IStyleSet | undefined; if (!elem.verticalAlign || elem.verticalAlign === ShimmerElementVerticalAlign.center) { borderStyle = { diff --git a/packages/experiments/src/components/Shimmer/ShimmerGap/ShimmerGap.styles.ts b/packages/experiments/src/components/Shimmer/ShimmerGap/ShimmerGap.styles.ts index 6babe29cfe79cd..53fa12b8effcda 100644 --- a/packages/experiments/src/components/Shimmer/ShimmerGap/ShimmerGap.styles.ts +++ b/packages/experiments/src/components/Shimmer/ShimmerGap/ShimmerGap.styles.ts @@ -1,5 +1,5 @@ import { IShimmerGapStyleProps, IShimmerGapStyles } from './ShimmerGap.types'; -import { IStyle, getGlobalClassNames, HighContrastSelector } from '../../../Styling'; +import { IStyleSet, getGlobalClassNames, HighContrastSelector } from '../../../Styling'; const GlobalClassNames = { root: 'ms-ShimmerGap-root' @@ -11,7 +11,7 @@ export function getStyles(props: IShimmerGapStyleProps): IShimmerGapStyles { const { palette } = theme; const classNames = getGlobalClassNames(GlobalClassNames, theme); - const styles: IStyle = !!borderStyle ? borderStyle : {}; + const styles: IStyleSet = !!borderStyle ? borderStyle : {}; const ACTUAL_WIDTH = widthInPercentage ? widthInPercentage + '%' : widthInPixel ? widthInPixel + 'px' : '10px'; return { diff --git a/packages/experiments/src/components/Shimmer/ShimmerGap/ShimmerGap.types.ts b/packages/experiments/src/components/Shimmer/ShimmerGap/ShimmerGap.types.ts index 8aec1ca2493d72..89898af096ba50 100644 --- a/packages/experiments/src/components/Shimmer/ShimmerGap/ShimmerGap.types.ts +++ b/packages/experiments/src/components/Shimmer/ShimmerGap/ShimmerGap.types.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { IStyle, ITheme } from '../../../Styling'; +import { IStyle, IStyleSet, ITheme } from '../../../Styling'; import { IStyleFunctionOrObject } from '../../../Utilities'; export interface IShimmerGap {} @@ -35,7 +35,7 @@ export interface IShimmerGapProps extends React.AllHTMLAttributes { /** * Sets custom styling of the gap. */ - borderStyle?: IStyle; + borderStyle?: IStyleSet; /** * Theme provided by High-Order Component. @@ -52,7 +52,7 @@ export interface IShimmerGapStyleProps { height?: number; widthInPercentage?: number; widthInPixel?: number; - borderStyle?: IStyle; + borderStyle?: IStyleSet; theme: ITheme; } diff --git a/packages/experiments/src/components/Shimmer/ShimmerLine/ShimmerLine.styles.ts b/packages/experiments/src/components/Shimmer/ShimmerLine/ShimmerLine.styles.ts index 84ee7062ad5b50..3c35fe1d81cfc3 100644 --- a/packages/experiments/src/components/Shimmer/ShimmerLine/ShimmerLine.styles.ts +++ b/packages/experiments/src/components/Shimmer/ShimmerLine/ShimmerLine.styles.ts @@ -1,5 +1,5 @@ import { IShimmerLineStyleProps, IShimmerLineStyles } from './ShimmerLine.types'; -import { IStyle, getGlobalClassNames, HighContrastSelector } from '../../../Styling'; +import { IStyleSet, getGlobalClassNames, HighContrastSelector } from '../../../Styling'; const GlobalClassNames = { root: 'ms-ShimmerLine-root', @@ -15,10 +15,10 @@ export function getStyles(props: IShimmerLineStyleProps): IShimmerLineStyles { const { palette } = theme; const classNames = getGlobalClassNames(GlobalClassNames, theme); - const styles: IStyle = !!borderStyle ? borderStyle : { borderWidth: '0px' }; + const styles: IStyleSet = !!borderStyle ? borderStyle : { borderWidth: '0px' }; const ACTUAL_WIDTH = widthInPercentage ? widthInPercentage + '%' : widthInPixel ? widthInPixel + 'px' : '100%'; - const sharedCornerStyles: IStyle = { + const sharedCornerStyles: IStyleSet = { position: 'absolute', fill: palette.white }; diff --git a/packages/experiments/src/components/Shimmer/ShimmerLine/ShimmerLine.types.ts b/packages/experiments/src/components/Shimmer/ShimmerLine/ShimmerLine.types.ts index d049b129af1ded..f7f2986d9cb337 100644 --- a/packages/experiments/src/components/Shimmer/ShimmerLine/ShimmerLine.types.ts +++ b/packages/experiments/src/components/Shimmer/ShimmerLine/ShimmerLine.types.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { IStyle, ITheme } from '../../../Styling'; +import { IStyle, IStyleSet, ITheme } from '../../../Styling'; import { IStyleFunctionOrObject } from '../../../Utilities'; export interface IShimmerLine {} @@ -35,7 +35,7 @@ export interface IShimmerLineProps extends React.AllHTMLAttributes /** * Sets custom styling of the rectangle. */ - borderStyle?: IStyle; + borderStyle?: IStyleSet; /** * Theme provided by High-Order Component. @@ -52,7 +52,7 @@ export interface IShimmerLineStyleProps { height?: number; widthInPercentage?: number; widthInPixel?: number; - borderStyle?: IStyle; + borderStyle?: IStyleSet; theme: ITheme; } diff --git a/packages/experiments/src/components/Text/createComponent.tsx b/packages/experiments/src/components/Text/createComponent.tsx index 9914eddfff6969..756d0666c327d5 100644 --- a/packages/experiments/src/components/Text/createComponent.tsx +++ b/packages/experiments/src/components/Text/createComponent.tsx @@ -1,16 +1,16 @@ -import { IClassNames, IStyleFunction, mergeStyleSets, IStyleSet } from 'office-ui-fabric-react'; +import { IClassNames, IStyleFunction, mergeStyleSets } from 'office-ui-fabric-react'; import * as React from 'react'; import { ITheme } from './theming/ITheme'; import { ThemeConsumer } from './theming/ThemeProvider'; export type IStyleFunction = (props: TProps) => Partial; -export interface IPropsWithStyles> { +export interface IPropsWithStyles { styles?: IStyleFunction | Partial; } // Components should accept styling. -export type IComponentProps> = TProps & { +export type IComponentProps = TProps & { styles?: IStyleFunction, TStyles> | Partial; }; @@ -26,7 +26,7 @@ export type IViewProps = TProps & { // tslint:disable-next-line:no-any const augmentations: any = {}; -export interface IComponentOptions, TStatics> { +export interface IComponentOptions { displayName: string; state?: React.ComponentType>; styles?: IStyleFunction, TStyles> | Partial; @@ -34,7 +34,7 @@ export interface IComponentOptions, T statics?: TStatics; } -function evaluateStyle>( +function evaluateStyle( props: TProps, styles?: IStyleFunction | Partial | undefined ): Partial | undefined { @@ -46,7 +46,7 @@ function evaluateStyle>( } // Helper function to tie them together. -export function createComponent, TStatics = {}>( +export function createComponent( options: IComponentOptions ): React.StatelessComponent> & TStatics { const result: React.StatelessComponent = (userProps: TProps) => { @@ -65,15 +65,13 @@ export function createComponent, TSta {(theme: ITheme) => { const styleProps = { theme, ...(processedProps as {}) }; - const styleSets: Array = [ - evaluateStyle(styleProps, componentStyles), - // tslint:disable-next-line:no-any - evaluateStyle(styleProps, styles as any) - ].filter((elem: Partial | undefined) => !!elem) as Array; - return ComponentView({ ...(processedProps as {}), - classNames: mergeStyleSets(...styleSets) + classNames: mergeStyleSets( + evaluateStyle(styleProps, componentStyles), + // tslint:disable-next-line:no-any + evaluateStyle(styleProps, styles as any) + ) }); }} @@ -93,7 +91,7 @@ export function createComponent, TSta } // Helper function to augment existing components that have been created. -export function augmentComponent, TStatics>( +export function augmentComponent( options: IComponentOptions ): void { augmentations[options.displayName] = { diff --git a/packages/merge-styles/src/IStyle.ts b/packages/merge-styles/src/IStyle.ts index 7735148a929e06..5fc3c158746f44 100644 --- a/packages/merge-styles/src/IStyle.ts +++ b/packages/merge-styles/src/IStyle.ts @@ -20,6 +20,7 @@ export interface IRawStyle extends IRawStyleBase { } export type IStyleBase = IRawStyle | string | false | null | undefined; + export interface IStyleBaseArray extends Array {} /** diff --git a/packages/merge-styles/src/IStyleFunction.ts b/packages/merge-styles/src/IStyleFunction.ts deleted file mode 100644 index 38bc5bcd1254aa..00000000000000 --- a/packages/merge-styles/src/IStyleFunction.ts +++ /dev/null @@ -1,16 +0,0 @@ -import { IStyleSet } from './IStyleSet'; - -/** - * A style function takes in styleprops and returns a partial styleset. - */ -export type IStyleFunction> = ( - props: TStylesProps -) => Partial; - -/** - * Represents either a style function that takes in style props and returns a partial styleset, - * or a partial styleset object. - */ -export type IStyleFunctionOrObject> = - | IStyleFunction - | Partial; diff --git a/packages/merge-styles/src/IStyleSet.ts b/packages/merge-styles/src/IStyleSet.ts index 98062d4b7d0483..82926ab5b49a81 100644 --- a/packages/merge-styles/src/IStyleSet.ts +++ b/packages/merge-styles/src/IStyleSet.ts @@ -1,37 +1,5 @@ import { IStyle } from './IStyle'; -import { IStyleFunctionOrObject, IStyleFunction } from './IStyleFunction'; -export type Diff = ({ [P in T]: P } & - { [P in U]: never } & { [x: string]: never })[T]; - -export type Omit = Pick>; - -/** - * A style set is a dictionary of display areas to IStyle objects. - * It may optionally contain style functions for sub components in the special `subComponentStyles` - * property. - */ -export type IStyleSet> = { - [P in keyof Omit]: IStyle -} & { - subComponentStyles?: { [P in keyof TStyleSet['subComponentStyles']]: IStyleFunctionOrObject> }; -}; - -/** - * A concatenated style set differs from `IStyleSet` in that subComponentStyles will always be a style function. - */ -export type IConcatenatedStyleSet> = { - [P in keyof Omit]: IStyle -} & { - subComponentStyles?: { [P in keyof TStyleSet['subComponentStyles']]: IStyleFunction> }; -}; - -/** - * A processed style set is one which the set of styles associated with each area has been converted - * into a class name. Additionally, all subComponentStyles are style functions. - */ -export type IProcessedStyleSet> = { - [P in keyof Omit]: string -} & { - subComponentStyles?: { [P in keyof TStyleSet['subComponentStyles']]: IStyleFunction> }; +export type IStyleSet = { + [key: string]: IStyle; }; diff --git a/packages/merge-styles/src/concatStyleSets.test.ts b/packages/merge-styles/src/concatStyleSets.test.ts index 4300812c8a8353..f075d311b047cf 100644 --- a/packages/merge-styles/src/concatStyleSets.test.ts +++ b/packages/merge-styles/src/concatStyleSets.test.ts @@ -1,8 +1,9 @@ import { concatStyleSets } from './concatStyleSets'; +import { IStyle } from './IStyle'; describe('concatStyleSets', () => { it('can concat style sets', () => { - const result = concatStyleSets( + const result = concatStyleSets<{ root?: IStyle; a?: IStyle; b?: IStyle }>( { root: { background: 'red' }, a: { background: 'green' } @@ -33,108 +34,4 @@ describe('concatStyleSets', () => { b: { background: 'blue' } }); }); - - it('can concat mixed style sets with style functions on both ends', () => { - const fn1 = jest.fn().mockReturnValue({ - root: { background: 'green', fontSize: 12 } - }); - - const fn2 = jest.fn().mockReturnValue({ - root: { - background: 'yellow', - color: 'pink' - } - }); - - const result = concatStyleSets( - { - root: { background: 'red' }, - a: { background: 'green' }, - subComponentStyles: { - a: fn1 - } - }, - { - a: { background: 'white' }, - b: { background: 'blue' }, - subComponentStyles: { - a: fn2 - } - }, - { - root: { - selectors: { - ':hover': { background: 'yellow' } - } - } - } - ); - - expect(result.root).toEqual([ - { background: 'red' }, - { - selectors: { - ':hover': { background: 'yellow' } - } - } - ]); - - expect(result.b).toEqual({ background: 'blue' }); - expect(result.a).toEqual([{ background: 'green' }, { background: 'white' }]); - expect(result.subComponentStyles).toBeDefined(); - expect(typeof result.subComponentStyles!.a === 'function').toBe(true); - const aExpanded = result.subComponentStyles!.a({}); - expect(aExpanded).toEqual({ - root: [{ background: 'green', fontSize: 12 }, { background: 'yellow', color: 'pink' }] - }); - }); - - it('can handle falsy values and sub component styles that has objects', () => { - const fn1 = jest.fn().mockReturnValue({ - root: { - background: 'green', - fontSize: 12 - } - }); - - const fn2 = jest.fn().mockReturnValue({ - root: { - background: 'yellow', - color: 'pink' - } - }); - - const result = concatStyleSets( - false, - { - subComponentStyles: { - a: fn1 - } - }, - { - subComponentStyles: { - a: fn2 - } - }, - undefined, - undefined, - false, - { - subComponentStyles: { - a: { - root: { - fontSize: 14 - } - } - } - } - ); - - expect(result.subComponentStyles).toBeDefined(); - expect(typeof result.subComponentStyles!.a === 'function').toBe(true); - const aExpanded = result.subComponentStyles!.a({}); - expect(aExpanded).toEqual({ - root: [{ background: 'green', fontSize: 12 }, { background: 'yellow', color: 'pink' }, { fontSize: 14 }] - }); - }); }); diff --git a/packages/merge-styles/src/concatStyleSets.ts b/packages/merge-styles/src/concatStyleSets.ts index 186257ea8ccdb0..7230dd7306bc74 100644 --- a/packages/merge-styles/src/concatStyleSets.ts +++ b/packages/merge-styles/src/concatStyleSets.ts @@ -1,177 +1,24 @@ -import { IStyleSet, IConcatenatedStyleSet } from './IStyleSet'; -import { IStyleBase, IStyle } from './IStyle'; -import { IStyleFunctionOrObject } from './IStyleFunction'; - -/** - * Combine a set of styles together (but does not register css classes). - * @param styleSet The first style set to be concatenated. - */ -export function concatStyleSets>( - styleSet: TStyleSet | false | null | undefined -): IConcatenatedStyleSet; - -/** - * Combine a set of styles together (but does not register css classes). - * @param styleSet1 The first style set to be concatenated. - * @param styleSet2 The second style set to be concatenated. - */ -export function concatStyleSets, TStyleSet2 extends IStyleSet>( - styleSet1: TStyleSet1 | false | null | undefined, - styleSet2: TStyleSet2 | false | null | undefined -): IConcatenatedStyleSet; - -/** - * Combine a set of styles together (but does not register css classes). - * @param styleSet1 The first style set to be concatenated. - * @param styleSet2 The second style set to be concatenated. - * @param styleSet3 The third style set to be concatenated. - */ -export function concatStyleSets< - TStyleSet1 extends IStyleSet, - TStyleSet2 extends IStyleSet, - TStyleSet3 extends IStyleSet ->( - styleSet1: TStyleSet1 | false | null | undefined, - styleSet2: TStyleSet2 | false | null | undefined, - styleSet3: TStyleSet3 | false | null | undefined -): IConcatenatedStyleSet; - /** - * Combine a set of styles together (but does not register css classes). - * @param styleSet1 The first style set to be concatenated. - * @param styleSet2 The second style set to be concatenated. - * @param styleSet3 The third style set to be concatenated. - * @param styleSet4 The fourth style set to be concatenated. + * Combine a set of styles together (but does not register css classes.) + * @public */ -export function concatStyleSets< - TStyleSet1 extends IStyleSet, - TStyleSet2 extends IStyleSet, - TStyleSet3 extends IStyleSet, - TStyleSet4 extends IStyleSet ->( - styleSet1: TStyleSet1 | false | null | undefined, - styleSet2: TStyleSet2 | false | null | undefined, - styleSet3: TStyleSet3 | false | null | undefined, - styleSet4: TStyleSet3 | false | null | undefined -): IConcatenatedStyleSet; +export function concatStyleSets(...args: (T | false | null | undefined)[]): T { + // tslint:disable-next-line:no-any + const mergedSet = {} as any; -/** - * Combine a set of styles together (but does not register css classes). - * @param styleSet1 The first style set to be concatenated. - * @param styleSet2 The second style set to be concatenated. - * @param styleSet3 The third style set to be concatenated. - * @param styleSet4 The fourth style set to be concatenated. - */ -export function concatStyleSets< - TStyleSet1 extends IStyleSet, - TStyleSet2 extends IStyleSet, - TStyleSet3 extends IStyleSet, - TStyleSet4 extends IStyleSet ->( - styleSet1: TStyleSet1 | false | null | undefined, - styleSet2: TStyleSet2 | false | null | undefined, - styleSet3: TStyleSet3 | false | null | undefined, - styleSet4: TStyleSet4 | false | null | undefined -): IConcatenatedStyleSet; - -/** - * Combine a set of styles together (but does not register css classes). - * @param styleSet1 The first style set to be concatenated. - * @param styleSet2 The second style set to be concatenated. - * @param styleSet3 The third style set to be concatenated. - * @param styleSet4 The fourth style set to be concatenated. - * @param styleSet5 The fifth set to be concatenated. - */ -export function concatStyleSets< - TStyleSet1 extends IStyleSet, - TStyleSet2 extends IStyleSet, - TStyleSet3 extends IStyleSet, - TStyleSet4 extends IStyleSet, - TStyleSet5 extends IStyleSet ->( - styleSet1: TStyleSet1 | false | null | undefined, - styleSet2: TStyleSet2 | false | null | undefined, - styleSet3: TStyleSet3 | false | null | undefined, - styleSet4: TStyleSet4 | false | null | undefined, - styleSet5: TStyleSet5 | false | null | undefined -): IConcatenatedStyleSet; - -/** - * Combine a set of styles together (but does not register css classes). - * @param styleSet1 The first style set to be concatenated. - * @param styleSet2 The second style set to be concatenated. - * @param styleSet3 The third style set to be concatenated. - * @param styleSet4 The fourth style set to be concatenated. - * @param styleSet5 The fifth set to be concatenated. - * @param styleSet6 The sixth set to be concatenated. - */ -export function concatStyleSets< - TStyleSet1 extends IStyleSet, - TStyleSet2 extends IStyleSet, - TStyleSet3 extends IStyleSet, - TStyleSet4 extends IStyleSet, - TStyleSet5 extends IStyleSet, - TStyleSet6 extends IStyleSet ->( - styleSet1: TStyleSet1 | false | null | undefined, - styleSet2: TStyleSet2 | false | null | undefined, - styleSet3: TStyleSet3 | false | null | undefined, - styleSet4: TStyleSet4 | false | null | undefined, - styleSet5: TStyleSet5 | false | null | undefined, - styleSet6: TStyleSet6 | false | null | undefined -): IConcatenatedStyleSet; - -/** - * Combine a set of styles together (but does not register css classes). - * @param styleSets One or more stylesets to be merged (each param can also be falsy). - */ -export function concatStyleSets( - ...styleSets: (IStyleSet | false | null | undefined)[] -): IConcatenatedStyleSet; - -/** - * Combine a set of styles together (but does not register css classes). - * @param styleSets One or more stylesets to be merged (each param can also be falsy). - */ -export function concatStyleSets( - ...styleSets: (IStyleSet | false | null | undefined)[] -): IConcatenatedStyleSet { - const mergedSet: IConcatenatedStyleSet = {}; - - // We process sub component styles in two phases. First we collect them, then we combine them into 1 style function. - const workingSubcomponentStyles: { [key: string]: Array> } = {}; - - for (const currentSet of styleSets) { + for (const currentSet of args) { if (currentSet) { for (const prop in currentSet) { if (currentSet.hasOwnProperty(prop)) { - if (prop === 'subComponentStyles' && currentSet.subComponentStyles !== undefined) { - // subcomponent styles - style functions or objects - - const currentComponentStyles = currentSet.subComponentStyles; - for (const subCompProp in currentComponentStyles) { - if (currentComponentStyles.hasOwnProperty(subCompProp)) { - if (workingSubcomponentStyles.hasOwnProperty(subCompProp)) { - workingSubcomponentStyles[subCompProp].push(currentComponentStyles[subCompProp]); - } else { - workingSubcomponentStyles[subCompProp] = [currentComponentStyles[subCompProp]]; - } - } - } - - continue; - } - - const mergedValue: IStyle = mergedSet[prop]; + const mergedValue = mergedSet[prop]; const currentValue = currentSet[prop]; if (mergedValue === undefined) { mergedSet[prop] = currentValue; } else { mergedSet[prop] = [ - // https://github.com/Microsoft/TypeScript/issues/25474 - ...(Array.isArray(mergedValue) ? mergedValue : [mergedValue as IStyleBase]), - ...(Array.isArray(currentValue) ? currentValue : [currentValue as IStyleBase]) + ...(Array.isArray(mergedValue) ? mergedValue : [mergedValue]), + ...(Array.isArray(currentValue) ? currentValue : [currentValue]) ]; } } @@ -179,25 +26,5 @@ export function concatStyleSets( } } - if (Object.keys(workingSubcomponentStyles).length > 0) { - mergedSet.subComponentStyles = {}; - const mergedSubStyles = mergedSet.subComponentStyles; - - // now we process the subcomponent styles if there are any - for (const subCompProp in workingSubcomponentStyles) { - if (workingSubcomponentStyles.hasOwnProperty(subCompProp)) { - const workingSet = workingSubcomponentStyles[subCompProp]; - mergedSubStyles[subCompProp] = (styleProps: any) => { - return concatStyleSets( - ...workingSet.map( - (styleFunctionOrObject: IStyleFunctionOrObject) => - typeof styleFunctionOrObject === 'function' ? styleFunctionOrObject(styleProps) : styleFunctionOrObject - ) - ); - }; - } - } - } - - return mergedSet; + return mergedSet as T; } diff --git a/packages/merge-styles/src/extractStyleParts.ts b/packages/merge-styles/src/extractStyleParts.ts index 3de7f84c4abeb2..25b6bbe9d50ab1 100644 --- a/packages/merge-styles/src/extractStyleParts.ts +++ b/packages/merge-styles/src/extractStyleParts.ts @@ -1,4 +1,4 @@ -import { IStyle, IStyleBaseArray } from './IStyle'; +import { IStyle } from './IStyle'; import { Stylesheet } from './Stylesheet'; /** @@ -7,7 +7,7 @@ import { Stylesheet } from './Stylesheet'; */ export function extractStyleParts( ...args: (IStyle | IStyle[] | false | null | undefined)[] -): { classes: string[]; objects: IStyleBaseArray } { +): { classes: string[]; objects: IStyle[] } { const classes: string[] = []; const objects: {}[] = []; const stylesheet = Stylesheet.getInstance(); diff --git a/packages/merge-styles/src/index.ts b/packages/merge-styles/src/index.ts index 43e6719e901880..c5401019fed3dd 100644 --- a/packages/merge-styles/src/index.ts +++ b/packages/merge-styles/src/index.ts @@ -1,8 +1,6 @@ export { IRawStyle, IStyle } from './IStyle'; -export { IStyleFunction, IStyleFunctionOrObject } from './IStyleFunction'; - -export { IConcatenatedStyleSet, IProcessedStyleSet, IStyleSet } from './IStyleSet'; +export { IStyleSet } from './IStyleSet'; export { IFontFace, IFontWeight } from './IRawStyleBase'; diff --git a/packages/merge-styles/src/mergeStyleSets.test.ts b/packages/merge-styles/src/mergeStyleSets.test.ts index 4594be52c5c9ce..ee1c2b66c5f47a 100644 --- a/packages/merge-styles/src/mergeStyleSets.test.ts +++ b/packages/merge-styles/src/mergeStyleSets.test.ts @@ -15,26 +15,12 @@ describe('mergeStyleSets', () => { }); it('can merge style sets', () => { - const fn1 = jest.fn().mockReturnValue({ - root: { background: 'green', fontSize: 12 } - }); - - const fn2 = jest.fn().mockReturnValue({ - root: { - background: 'yellow', - color: 'pink' - } - }); - const empty: { c?: string } = {}; - const result = mergeStyleSets( + const result: { root: string; a: string; b: string } = mergeStyleSets( empty, { root: { background: 'red' }, - a: { background: 'green' }, - subComponentStyles: { - labelStyles: fn1 - } + a: { background: 'green' } }, { a: { background: 'white' }, @@ -45,20 +31,14 @@ describe('mergeStyleSets', () => { selectors: { ':hover': { background: 'yellow' } } - }, - subComponentStyles: { - labelStyles: fn2 } } ); - expect(result.root).toBe('root-0'); - expect(result.a).toBe('a-1'); - expect(result.b).toBe('b-2'); - expect(result.subComponentStyles).toBeDefined(); - const mergedLabelStyles = result.subComponentStyles!.labelStyles({}); - expect(mergedLabelStyles).toEqual({ - root: [{ background: 'green', fontSize: 12 }, { background: 'yellow', color: 'pink' }] + expect(result).toEqual({ + root: 'root-0', + a: 'a-1', + b: 'b-2' }); expect(_stylesheet.getRules()).toEqual( diff --git a/packages/merge-styles/src/mergeStyleSets.ts b/packages/merge-styles/src/mergeStyleSets.ts index 662416d0c4bee6..17e5043c0e5d26 100644 --- a/packages/merge-styles/src/mergeStyleSets.ts +++ b/packages/merge-styles/src/mergeStyleSets.ts @@ -2,126 +2,42 @@ import { extractStyleParts } from './extractStyleParts'; import { concatStyleSets } from './concatStyleSets'; import { IStyle } from './IStyle'; import { styleToRegistration, applyRegistration } from './styleToClassName'; -import { IStyleSet, IProcessedStyleSet } from './IStyleSet'; /** - * Takes in one or more style set objects, each consisting of a set of areas, - * each which will produce a class name. Using this is analogous to calling - * `mergeStyles` for each property in the object, but ensures we maintain the - * set ordering when multiple style sets are merged. + * Allows you to pass in 1 or more sets of areas which will return a merged + * set of classes. * - * @param styleSet The first style set to be merged and reigstered. + * @public */ -export function mergeStyleSets>( - styleSet: TStyleSet -): IProcessedStyleSet; - -/** - * Takes in one or more style set objects, each consisting of a set of areas, - * each which will produce a class name. Using this is analogous to calling - * `mergeStyles` for each property in the object, but ensures we maintain the - * set ordering when multiple style sets are merged. - * - * @param styleSet1 The first style set to be merged. - * @param styleSet2 The second style set to be merged. - */ -export function mergeStyleSets, TStyleSet2 extends IStyleSet>( - styleSet1: TStyleSet1, - styleSet2: TStyleSet2 -): IProcessedStyleSet; - -/** - * Takes in one or more style set objects, each consisting of a set of areas, - * each which will produce a class name. Using this is analogous to calling - * `mergeStyles` for each property in the object, but ensures we maintain the - * set ordering when multiple style sets are merged. - * - * @param styleSet1 The first style set to be merged. - * @param styleSet2 The second style set to be merged. - * @param styleSet3 The third style set to be merged. - */ -export function mergeStyleSets< - TStyleSet1 extends IStyleSet, - TStyleSet2 extends IStyleSet, - TStyleSet3 extends IStyleSet ->( - styleSet1: TStyleSet1, - styleSet2: TStyleSet2, - styleSet3: TStyleSet3 -): IProcessedStyleSet; - -/** - * Takes in one or more style set objects, each consisting of a set of areas, - * each which will produce a class name. Using this is analogous to calling - * `mergeStyles` for each property in the object, but ensures we maintain the - * set ordering when multiple style sets are merged. - * - * @param styleSet1 The first style set to be merged. - * @param styleSet2 The second style set to be merged. - * @param styleSet3 The third style set to be merged. - * @param styleSet4 The fourth style set to be merged. - */ -export function mergeStyleSets< - TStyleSet1 extends IStyleSet, - TStyleSet2 extends IStyleSet, - TStyleSet3 extends IStyleSet, - TStyleSet4 extends IStyleSet ->( - styleSet1: TStyleSet1, - styleSet2: TStyleSet2, - styleSet3: TStyleSet3, - styleSet4: TStyleSet4 -): IProcessedStyleSet; - -/** - * Takes in one or more style set objects, each consisting of a set of areas, - * each which will produce a class name. Using this is analogous to calling - * `mergeStyles` for each property in the object, but ensures we maintain the - * set ordering when multiple style sets are merged. - * - * @param styleSets One or more style sets to be merged. - */ -export function mergeStyleSets(...styleSets: IStyleSet[]): IProcessedStyleSet; - -/** - * Takes in one or more style set objects, each consisting of a set of areas, - * each which will produce a class name. Using this is analogous to calling - * `mergeStyles` for each property in the object, but ensures we maintain the - * set ordering when multiple style sets are merged. - * - * @param styleSets One or more style sets to be merged. - */ -export function mergeStyleSets(...styleSets: IStyleSet[]): IProcessedStyleSet { +export function mergeStyleSets( + ...cssSets: ({ [P in K]?: IStyle } | null | undefined)[] +): { [P in K]: string } { // tslint:disable-next-line:no-any const classNameSet: any = {}; const classMap: { [key: string]: string } = {}; - let styleSet = styleSets[0]; + let cssSet = cssSets[0]; - if (styleSet) { - if (styleSets.length > 1) { - styleSet = concatStyleSets(...styleSets); + if (cssSet) { + if (cssSets.length > 1) { + cssSet = concatStyleSets(...cssSets); } const registrations = []; - for (const styleSetArea in styleSet) { - if (styleSet.hasOwnProperty(styleSetArea)) { - if (styleSetArea === 'subComponentStyles') { - classNameSet.subComponentStyles = styleSet.subComponentStyles; - continue; - } - - const styles: IStyle = styleSet[styleSetArea]; + for (const prop in cssSet) { + if (cssSet.hasOwnProperty(prop)) { + const args: IStyle = cssSet[prop]; - const { classes, objects } = extractStyleParts(styles); - const registration = styleToRegistration({ displayName: styleSetArea }, objects); + // tslint:disable-next-line:no-any + const { classes, objects } = extractStyleParts(args as any); + const registration = styleToRegistration({ displayName: prop }, objects); registrations.push(registration); if (registration) { - classMap[styleSetArea] = registration.className; - classNameSet[styleSetArea] = classes.concat([registration.className]).join(' '); + classMap[prop] = registration.className; + classNameSet[prop] = classes.concat([registration.className]).join(' '); } } } diff --git a/packages/merge-styles/src/mergeStyles.ts b/packages/merge-styles/src/mergeStyles.ts index 68cb3a74c3dea5..65e06274fe1817 100644 --- a/packages/merge-styles/src/mergeStyles.ts +++ b/packages/merge-styles/src/mergeStyles.ts @@ -1,4 +1,4 @@ -import { IStyle, IStyleBaseArray } from './IStyle'; +import { IStyle } from './IStyle'; import { styleToClassName } from './styleToClassName'; import { extractStyleParts } from './extractStyleParts'; @@ -7,7 +7,7 @@ import { extractStyleParts } from './extractStyleParts'; * * @public */ -export function mergeStyles(...args: (IStyle | IStyleBaseArray | false | null | undefined)[]): string { +export function mergeStyles(...args: (IStyle | IStyle[] | false | null | undefined)[]): string { const { classes, objects } = extractStyleParts(args); if (objects.length) { diff --git a/packages/merge-styles/tslint.json b/packages/merge-styles/tslint.json index 753df4fa78b33b..40ab7504688566 100644 --- a/packages/merge-styles/tslint.json +++ b/packages/merge-styles/tslint.json @@ -1,6 +1,4 @@ { "extends": ["office-ui-fabric-react-tslint"], - "rules": { - "no-any": false - } + "rules": {} } diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Basic.Example.tsx index d0f2b9710e0c1e..4a52f296285360 100644 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Basic.Example.tsx @@ -8,7 +8,7 @@ import { Link } from '../../../Link'; export class ActivityItemBasicExample extends React.Component, {}> { public render(): JSX.Element { const getClassNames = classNamesFunction(); - const classNames = getClassNames(getStyles, {}); + const classNames = getClassNames(getStyles); // tslint:disable:jsx-no-lambda const activityItemExamples = [ diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Compact.Example.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Compact.Example.tsx index 878dc3d5e8da89..2ad4833ab17fd1 100644 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Compact.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Compact.Example.tsx @@ -9,7 +9,7 @@ import { Icon } from '../../../Icon'; export class ActivityItemCompactExample extends React.Component, {}> { public render(): JSX.Element { const getClassNames = classNamesFunction(); - const classNames = getClassNames(getStyles, {}); + const classNames = getClassNames(getStyles); const activityItemExamples: Partial>[] = [ { diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Example.styles.ts b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Example.styles.ts index 9ac841dbc265a3..b406a10dde3765 100644 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Example.styles.ts +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Example.styles.ts @@ -1,6 +1,10 @@ import { IStyle } from '../../../Styling'; -export type IActivityItemExampleStyleProps = {}; +export interface IActivityItemExampleStyleProps { + /** + * 404 No Style Props Found + */ +} export interface IActivityItemExampleStyles { exampleRoot?: IStyle; diff --git a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Persona.Example.tsx b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Persona.Example.tsx index 4d91daf5cff1dd..7f375598cdb08a 100644 --- a/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Persona.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/ActivityItem/examples/ActivityItem.Persona.Example.tsx @@ -8,7 +8,7 @@ import { Link } from '../../../Link'; export class ActivityItemPersonaExample extends React.Component, {}> { public render(): JSX.Element { const getClassNames = classNamesFunction(); - const classNames = getClassNames(getStyles, {}); + const classNames = getClassNames(getStyles); // tslint:disable:jsx-no-lambda const activityItemExamples: (IActivityItemProps & { key: string | number })[] = [ diff --git a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx index dc424a4d759432..8670dd368baa1b 100644 --- a/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Breadcrumb/Breadcrumb.base.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; -import { BaseComponent, getRTL, createRef, classNamesFunction } from '../../Utilities'; -import { IProcessedStyleSet } from '../../Styling'; +import { BaseComponent, getRTL, createRef, classNamesFunction, IClassNames } from '../../Utilities'; import { FocusZone, FocusZoneDirection } from '../../FocusZone'; import { Link } from '../../Link'; import { Icon } from '../../Icon'; @@ -29,7 +28,7 @@ export class BreadcrumbBase extends BaseComponent { overflowIndex: 0 }; - private _classNames: IProcessedStyleSet; + private _classNames: IClassNames; private _focusZone = createRef(); constructor(props: IBreadcrumbProps) { diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Action.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Action.Example.tsx index 2e1d24b70a357f..ba1564ff0cd818 100644 --- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Action.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Action.Example.tsx @@ -12,7 +12,7 @@ export class ButtonActionExample extends React.Component { const { disabled, checked } = this.props; const getClassNames = classNamesFunction(); - const classNames = getClassNames(getStyles, {}); + const classNames = getClassNames(getStyles); return (
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Anchor.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Anchor.Example.tsx index db131e8619eba4..d223ab78adda9b 100644 --- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Anchor.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Anchor.Example.tsx @@ -8,7 +8,7 @@ export class ButtonAnchorExample extends React.Component { const { disabled, checked } = this.props; const getClassNames = classNamesFunction(); - const classNames = getClassNames(getStyles, {}); + const classNames = getClassNames(getStyles); return (
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Basic.Example.styles.ts b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Basic.Example.styles.ts index a9620f4e165994..7a2abdb3c36b9a 100644 --- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Basic.Example.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Basic.Example.styles.ts @@ -1,6 +1,10 @@ import { IStyle } from '../../../Styling'; -export type IButtonBasicExampleStyleProps = {}; +export interface IButtonBasicExampleStyleProps { + /** + * 404 No Style Props Found + */ +} export interface IButtonBasicExampleStyles { example?: IStyle; diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Compound.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Compound.Example.tsx index feb52e5caf15e4..e29714bf6e5f8d 100644 --- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Compound.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Compound.Example.tsx @@ -13,7 +13,7 @@ export class ButtonCompoundExample extends React.Component { const { disabled, checked } = this.props; const getClassNames = classNamesFunction(); - const classNames = getClassNames(getStyles, {}); + const classNames = getClassNames(getStyles); return (
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Default.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Default.Example.tsx index 84c0f745fe1620..e454509bdc6a48 100644 --- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Default.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Default.Example.tsx @@ -9,7 +9,7 @@ export class ButtonDefaultExample extends React.Component { const { disabled, checked } = this.props; const getClassNames = classNamesFunction(); - const classNames = getClassNames(getStyles, {}); + const classNames = getClassNames(getStyles); return (
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Icon.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Icon.Example.tsx index e6f22080e2f844..ec2b1b9c28cb62 100644 --- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Icon.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Icon.Example.tsx @@ -8,7 +8,7 @@ export class ButtonIconExample extends React.Component { const { disabled, checked } = this.props; const getClassNames = classNamesFunction(); - const classNames = getClassNames(getStyles, {}); + const classNames = getClassNames(getStyles); return (
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Primary.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Primary.Example.tsx index 9077ae67c334e4..2ff49524397cbf 100644 --- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Primary.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Primary.Example.tsx @@ -8,7 +8,7 @@ export class ButtonPrimaryExample extends React.Component { const { disabled, checked } = this.props; const getClassNames = classNamesFunction(); - const classNames = getClassNames(getStyles, {}); + const classNames = getClassNames(getStyles); return (
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.ScreenReader.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.ScreenReader.Example.tsx index 36d2e272e0b11d..70573ca0c1f664 100644 --- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.ScreenReader.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.ScreenReader.Example.tsx @@ -8,7 +8,7 @@ export class ButtonScreenReaderExample extends React.Component const { disabled, checked } = this.props; const getClassNames = classNamesFunction(); - const classNames = getClassNames(getStyles, {}); + const classNames = getClassNames(getStyles); return (
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx index 3917da925f177b..5ec946aefc5a19 100644 --- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Split.Example.tsx @@ -14,7 +14,7 @@ export class ButtonSplitExample extends React.Component { const { disabled, checked } = this.props; const getClassNames = classNamesFunction(); - const classNames = getClassNames(getStyles, {}); + const classNames = getClassNames(getStyles); return (
diff --git a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Swap.Example.tsx b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Swap.Example.tsx index 9115ff93a28a4e..81c87e1be18a87 100644 --- a/packages/office-ui-fabric-react/src/components/Button/examples/Button.Swap.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Button/examples/Button.Swap.Example.tsx @@ -52,7 +52,7 @@ export class ButtonSwapExample extends React.Component(); - const classNames = getClassNames(getStyles, {}); + const classNames = getClassNames(getStyles); return
{button}
; } diff --git a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.base.tsx b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.base.tsx index 212383af3c29b4..83bc5a898f5787 100644 --- a/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.base.tsx +++ b/packages/office-ui-fabric-react/src/components/ChoiceGroup/ChoiceGroupOption/ChoiceGroupOption.base.tsx @@ -1,19 +1,19 @@ import * as React from 'react'; import { Image } from '../../Image'; import { Icon } from '../../Icon'; +import { IClassNames } from '@uifabric/utilities/lib/IClassNames'; import { IChoiceGroupOptionProps, IChoiceGroupOptionStyleProps, IChoiceGroupOptionStyles } from './ChoiceGroupOption.types'; import { BaseComponent, classNamesFunction, getNativeProps, inputProperties, createRef } from '../../../Utilities'; -import { IProcessedStyleSet } from '../../../Styling'; const getClassNames = classNamesFunction(); export class ChoiceGroupOptionBase extends BaseComponent { private _inputElement = createRef(); - private _classNames: IProcessedStyleSet; + private _classNames: IClassNames; constructor(props: IChoiceGroupOptionProps) { super(props); diff --git a/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.tsx b/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.tsx index fcf68a04ee466d..b757084da51fee 100644 --- a/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.tsx +++ b/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.tsx @@ -10,7 +10,7 @@ import { Beak, BEAK_HEIGHT, BEAK_WIDTH } from './Beak/Beak'; import { DirectionalHint } from '../../common/DirectionalHint'; // Coachmark -import { ICoachmarkProps } from './Coachmark.types'; +import { ICoachmarkTypes } from './Coachmark.types'; import { COACHMARK_HEIGHT, COACHMARK_WIDTH, @@ -102,8 +102,8 @@ export interface ICoachmarkState { alertText?: string; } -export class Coachmark extends BaseComponent { - public static defaultProps: Partial = { +export class Coachmark extends BaseComponent { + public static defaultProps: Partial = { isCollapsed: true, mouseProximityOffset: 10, delayBeforeMouseOpen: 3600, // The approximate time the coachmark shows up @@ -129,7 +129,7 @@ export class Coachmark extends BaseComponent { */ private _targetElementRect: ClientRect; - constructor(props: ICoachmarkProps) { + constructor(props: ICoachmarkTypes) { super(props); // Set defaults for state @@ -267,18 +267,18 @@ export class Coachmark extends BaseComponent { ); } - public componentWillReceiveProps(newProps: ICoachmarkProps): void { + public componentWillReceiveProps(newProps: ICoachmarkTypes): void { if (this.props.isCollapsed && !newProps.isCollapsed) { // The coachmark is about to open this._openCoachmark(); } } - public shouldComponentUpdate(newProps: ICoachmarkProps, newState: ICoachmarkState): boolean { + public shouldComponentUpdate(newProps: ICoachmarkTypes, newState: ICoachmarkState): boolean { return !shallowCompare(newProps, this.props) || !shallowCompare(newState, this.state); } - public componentDidUpdate(prevProps: ICoachmarkProps, prevState: ICoachmarkState): void { + public componentDidUpdate(prevProps: ICoachmarkTypes, prevState: ICoachmarkState): void { if ( prevState.targetAlignment !== this.state.targetAlignment || prevState.targetPosition !== this.state.targetPosition diff --git a/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.types.ts b/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.types.ts index f56d8c03409737..b7afd92feeb55a 100644 --- a/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.types.ts +++ b/packages/office-ui-fabric-react/src/components/Coachmark/Coachmark.types.ts @@ -7,10 +7,7 @@ import { ITeachingBubble } from '../../TeachingBubble'; export interface ICoachmark {} -/** @deprecated */ -export type ICoachmarkTypes = ICoachmarkProps; - -export interface ICoachmarkProps extends React.Props { +export interface ICoachmarkTypes extends React.Props { /** * Optional callback to access the ICoachmark interface. Use this instead of ref for accessing * the public methods and properties of the component. diff --git a/packages/office-ui-fabric-react/src/components/Coachmark/examples/Coachmark.Basic.Example.tsx b/packages/office-ui-fabric-react/src/components/Coachmark/examples/Coachmark.Basic.Example.tsx index fc1676cfe8a470..e123732700766b 100644 --- a/packages/office-ui-fabric-react/src/components/Coachmark/examples/Coachmark.Basic.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Coachmark/examples/Coachmark.Basic.Example.tsx @@ -56,7 +56,7 @@ export class CoachmarkBasicExample extends BaseComponent<{}, ICoachmarkBasicExam display: 'inline-block' } }; - }, {}); + }); const buttonProps: IButtonProps = { text: 'Try it' diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.styles.ts b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.styles.ts index f759cf97975d5c..fd94be01df94f9 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.styles.ts +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.styles.ts @@ -1,12 +1,12 @@ import { IDetailsRowStyleProps, IDetailsRowStyles } from './DetailsRow.types'; import { - AnimationClassNames, - FontSizes, - HighContrastSelector, - IStyle, + getGlobalClassNames, getFocusStyle, - getGlobalClassNames + HighContrastSelector, + FontSizes, + AnimationClassNames } from '../../Styling'; +import { IStyleBaseArray, IStyle } from '../../../../merge-styles/lib/IStyle'; const GlobalClassNames = { root: 'ms-DetailsRow', @@ -104,7 +104,7 @@ export const getStyles = (props: IDetailsRowStyleProps): IDetailsRowStyles => { const thickBorderStyle = `${values.rowShimmerHorizontalBorder * 4}px solid ${colors.defaultBackgroundColor}`; const thinBorderStyle = `${values.rowShimmerHorizontalBorder}px solid ${colors.defaultBackgroundColor}`; - const selectedStyles: IStyle = [ + const selectedStyles: IStyleBaseArray = [ getFocusStyle(theme, -1, undefined, undefined, themePrimary, white), classNames.isSelected, { @@ -189,7 +189,7 @@ export const getStyles = (props: IDetailsRowStyleProps): IDetailsRowStyles => { } ]; - const cannotSelectStyles: IStyle = [ + const cannotSelectStyles: IStyleBaseArray = [ classNames.isContentUnselectable, { userSelect: 'none', diff --git a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.types.ts b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.types.ts index 21667125c8f75b..112045649fa932 100644 --- a/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.types.ts +++ b/packages/office-ui-fabric-react/src/components/DetailsList/DetailsRow.types.ts @@ -162,7 +162,7 @@ export type IDetailsRowStyleProps = Required> & /** Whether this row can be selected */ canSelect?: boolean; - /** Class name of when this becomes a drop target. */ + /** Class name of when this becomes a drop taget */ droppingClassName?: string; /** Is the checkbox visible */ diff --git a/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.base.tsx b/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.base.tsx index 85049295d979e4..0b651380eeab99 100644 --- a/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Dialog/DialogFooter.base.tsx @@ -1,13 +1,12 @@ import * as React from 'react'; import { IDialogFooterProps, IDialogFooterStyleProps, IDialogFooterStyles } from './DialogFooter.types'; -import { BaseComponent, classNamesFunction, customizable } from '../../Utilities'; -import { IProcessedStyleSet } from '../../Styling'; +import { BaseComponent, classNamesFunction, customizable, IClassNames } from '../../Utilities'; const getClassNames = classNamesFunction(); @customizable('DialogFooter', ['theme', 'styles']) export class DialogFooterBase extends BaseComponent { - private _classNames: IProcessedStyleSet; + private _classNames: IClassNames; public render(): JSX.Element { const { className, styles, theme } = this.props; diff --git a/packages/office-ui-fabric-react/src/components/HoverCard/HoverCard.styles.ts b/packages/office-ui-fabric-react/src/components/HoverCard/HoverCard.styles.ts index c0f1c31a2ad033..a95d649cdc590a 100644 --- a/packages/office-ui-fabric-react/src/components/HoverCard/HoverCard.styles.ts +++ b/packages/office-ui-fabric-react/src/components/HoverCard/HoverCard.styles.ts @@ -3,11 +3,11 @@ import { memoizeFunction } from '../../Utilities'; import { mergeStyleSets } from '../../Styling'; export const getStyles = memoizeFunction( - (customStyles: IHoverCardStyles = {}): IHoverCardStyles => { + (customStyles?: IHoverCardStyles): IHoverCardStyles => { const styles: IHoverCardStyles = { host: {} }; - return mergeStyleSets(styles, customStyles); + return mergeStyleSets(styles, customStyles)!; } ); diff --git a/packages/office-ui-fabric-react/src/components/KeytipLayer/KeytipLayer.base.tsx b/packages/office-ui-fabric-react/src/components/KeytipLayer/KeytipLayer.base.tsx index fdb987e951aa36..8150dc73ae6048 100644 --- a/packages/office-ui-fabric-react/src/components/KeytipLayer/KeytipLayer.base.tsx +++ b/packages/office-ui-fabric-react/src/components/KeytipLayer/KeytipLayer.base.tsx @@ -105,7 +105,7 @@ export class KeytipLayerBase extends BaseComponent diff --git a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.base.tsx b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.base.tsx index a6f07593d14d1c..9bb4c0e3536ce4 100644 --- a/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.base.tsx +++ b/packages/office-ui-fabric-react/src/components/OverflowSet/OverflowSet.base.tsx @@ -9,9 +9,9 @@ import { divProperties, elementContains, focusFirstChild, - getNativeProps + getNativeProps, + IClassNames } from '../../Utilities'; -import { IProcessedStyleSet } from '../../Styling'; import { KeytipManager } from '../../utilities/keytips/KeytipManager'; import { IOverflowSet, @@ -33,7 +33,7 @@ export class OverflowSetBase extends BaseComponent implem private _persistedKeytips: { [uniqueID: string]: IKeytipProps } = {}; private _keytipManager: KeytipManager = KeytipManager.getInstance(); private _divContainer = createRef(); - private _classNames: IProcessedStyleSet; + private _classNames: IClassNames; constructor(props: IOverflowSetProps) { super(props); diff --git a/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Dark.Example.tsx b/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Dark.Example.tsx index b96eb066ac58a4..eedd49c9bdef07 100644 --- a/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Dark.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Dark.Example.tsx @@ -25,7 +25,7 @@ export class OverlayDarkExample extends React.Component< public render(): JSX.Element { const { isOverlayVisible } = this.state; const getClassNames = classNamesFunction<{}, IOverlayExampleStyles>(); - const classNames = getClassNames(getStyles, {}); + const classNames = getClassNames(getStyles); return (
diff --git a/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Light.Example.tsx b/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Light.Example.tsx index 164b5c5659dd9e..6b17e01a7e5f0d 100644 --- a/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Light.Example.tsx +++ b/packages/office-ui-fabric-react/src/components/Overlay/examples/Overlay.Light.Example.tsx @@ -25,7 +25,7 @@ export class OverlayLightExample extends React.Component< public render(): JSX.Element { const { isOverlayVisible } = this.state; const getClassNames = classNamesFunction<{}, IOverlayExampleStyles>(); - const classNames = getClassNames(getStyles, {}); + const classNames = getClassNames(getStyles); return (
diff --git a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.base.tsx b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.base.tsx index 9a2351fefeae4d..68a7d6b44a1e48 100644 --- a/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Persona/PersonaPresence/PersonaPresence.base.tsx @@ -1,5 +1,6 @@ import * as React from 'react'; import { BaseComponent, classNamesFunction, customizable } from '../../../Utilities'; +import { IStyleSet } from '../../../Styling'; import { Icon } from '../../../Icon'; import { IPersonaPresenceProps, @@ -76,8 +77,8 @@ export class PersonaPresenceBase extends BaseComponent ( - + private _onRenderIcon = (className?: string, styles?: IStyleSet): JSX.Element => ( + ); private _determineIcon = (): string | undefined => { diff --git a/packages/office-ui-fabric-react/src/components/Rating/Rating.base.tsx b/packages/office-ui-fabric-react/src/components/Rating/Rating.base.tsx index 34bddad5ebc880..00c3df21103cf9 100644 --- a/packages/office-ui-fabric-react/src/components/Rating/Rating.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Rating/Rating.base.tsx @@ -1,6 +1,5 @@ import * as React from 'react'; -import { BaseComponent, classNamesFunction, css, customizable, format, getId } from '../../Utilities'; -import { IProcessedStyleSet } from '../../Styling'; +import { BaseComponent, IClassNames, classNamesFunction, css, customizable, format, getId } from '../../Utilities'; import { Icon } from '../../Icon'; import { FocusZone, FocusZoneDirection } from '../../FocusZone'; import { IRatingProps, RatingSize, IRatingStyleProps, IRatingStyles } from './Rating.types'; @@ -11,7 +10,7 @@ interface IRatingStarProps extends React.AllHTMLAttributes { fillPercentage: number; disabled: boolean; readOnly: boolean; - classNames: IProcessedStyleSet; + classNames: IClassNames; } export interface IRatingState { diff --git a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.styles.ts b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.styles.ts index e99d038a740ccc..ed521005031fb6 100644 --- a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.styles.ts @@ -1,5 +1,5 @@ import { IShimmerCircleStyleProps, IShimmerCircleStyles } from './ShimmerCircle.types'; -import { getGlobalClassNames, HighContrastSelector, IRawStyle } from '../../../Styling'; +import { IStyleSet, getGlobalClassNames, HighContrastSelector } from '../../../Styling'; const GlobalClassNames = { root: 'ms-ShimmerCircle-root', @@ -12,7 +12,7 @@ export function getStyles(props: IShimmerCircleStyleProps): IShimmerCircleStyles const { palette } = theme; const classNames = getGlobalClassNames(GlobalClassNames, theme); - const styles: IRawStyle = !!borderStyle ? borderStyle : {}; + const styles: IStyleSet = !!borderStyle ? borderStyle : {}; return { root: [ diff --git a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.types.ts b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.types.ts index 38c5dc4f48bcab..e47b75731a261c 100644 --- a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.types.ts +++ b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerCircle/ShimmerCircle.types.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { IStyle, ITheme, IRawStyle } from '../../../Styling'; +import { IStyle, IStyleSet, ITheme } from '../../../Styling'; import { IStyleFunctionOrObject } from '../../../Utilities'; export interface IShimmerCircle {} @@ -23,7 +23,7 @@ export interface IShimmerCircleProps extends React.AllHTMLAttributes { + private _getBorderStyles = (elem: IShimmerElement, rowHeight?: number): IStyleSet | undefined => { const elemHeight: number | undefined = elem.height; const dif: number = rowHeight && elemHeight ? rowHeight - elemHeight : 0; - let borderStyle: IRawStyle | undefined; + let borderStyle: IStyleSet | undefined; if (!elem.verticalAlign || elem.verticalAlign === 'center') { borderStyle = { diff --git a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerGap/ShimmerGap.styles.ts b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerGap/ShimmerGap.styles.ts index 53f846490de932..7133b1e438a48b 100644 --- a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerGap/ShimmerGap.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerGap/ShimmerGap.styles.ts @@ -1,5 +1,5 @@ import { IShimmerGapStyleProps, IShimmerGapStyles } from './ShimmerGap.types'; -import { IRawStyle, getGlobalClassNames, HighContrastSelector } from '../../../Styling'; +import { IStyleSet, getGlobalClassNames, HighContrastSelector } from '../../../Styling'; const GlobalClassNames = { root: 'ms-ShimmerGap-root' @@ -11,7 +11,7 @@ export function getStyles(props: IShimmerGapStyleProps): IShimmerGapStyles { const { palette } = theme; const classNames = getGlobalClassNames(GlobalClassNames, theme); - const styles: IRawStyle = !!borderStyle ? borderStyle : {}; + const styles: IStyleSet = !!borderStyle ? borderStyle : {}; return { root: [ diff --git a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerGap/ShimmerGap.types.ts b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerGap/ShimmerGap.types.ts index 3eaa94158d4117..03f362143de62b 100644 --- a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerGap/ShimmerGap.types.ts +++ b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerGap/ShimmerGap.types.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { IStyle, IRawStyle, ITheme } from '../../../Styling'; +import { IStyle, IStyleSet, ITheme } from '../../../Styling'; import { IStyleFunctionOrObject } from '../../../Utilities'; export interface IShimmerGap {} @@ -29,7 +29,7 @@ export interface IShimmerGapProps extends React.AllHTMLAttributes { /** * Sets custom styling of the gap. */ - borderStyle?: IRawStyle; + borderStyle?: IStyleSet; /** * Theme provided by High-Order Component. @@ -44,7 +44,7 @@ export interface IShimmerGapProps extends React.AllHTMLAttributes { export interface IShimmerGapStyleProps { height?: number; - borderStyle?: IRawStyle; + borderStyle?: IStyleSet; theme: ITheme; } diff --git a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerLine/ShimmerLine.styles.ts b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerLine/ShimmerLine.styles.ts index d02c980f853708..03e8d7a1c77ce5 100644 --- a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerLine/ShimmerLine.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerLine/ShimmerLine.styles.ts @@ -1,5 +1,5 @@ import { IShimmerLineStyleProps, IShimmerLineStyles } from './ShimmerLine.types'; -import { IRawStyle, getGlobalClassNames, HighContrastSelector } from '../../../Styling'; +import { IStyleSet, getGlobalClassNames, HighContrastSelector } from '../../../Styling'; const GlobalClassNames = { root: 'ms-ShimmerLine-root', @@ -15,9 +15,9 @@ export function getStyles(props: IShimmerLineStyleProps): IShimmerLineStyles { const { palette } = theme; const classNames = getGlobalClassNames(GlobalClassNames, theme); - const styles: IRawStyle = !!borderStyle ? borderStyle : { borderWidth: '0px' }; + const styles: IStyleSet = !!borderStyle ? borderStyle : { borderWidth: '0px' }; - const sharedCornerStyles: IRawStyle = { + const sharedCornerStyles: IStyleSet = { position: 'absolute', fill: palette.white }; diff --git a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerLine/ShimmerLine.types.ts b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerLine/ShimmerLine.types.ts index 00b672747f4f81..564f24d05c8545 100644 --- a/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerLine/ShimmerLine.types.ts +++ b/packages/office-ui-fabric-react/src/components/Shimmer/ShimmerLine/ShimmerLine.types.ts @@ -1,5 +1,5 @@ import * as React from 'react'; -import { IStyle, IRawStyle, ITheme } from '../../../Styling'; +import { IStyle, IStyleSet, ITheme } from '../../../Styling'; import { IStyleFunctionOrObject } from '../../../Utilities'; export interface IShimmerLine {} @@ -29,7 +29,7 @@ export interface IShimmerLineProps extends React.AllHTMLAttributes /** * Sets custom styling of the rectangle. */ - borderStyle?: IRawStyle; + borderStyle?: IStyleSet; /** * Theme provided by High-Order Component. @@ -44,7 +44,7 @@ export interface IShimmerLineProps extends React.AllHTMLAttributes export interface IShimmerLineStyleProps { height?: number; - borderStyle?: IRawStyle; + borderStyle?: IStyleSet; theme: ITheme; } diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.base.tsx b/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.base.tsx index 599447866fa58f..9ca4fd3b293f06 100644 --- a/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.base.tsx +++ b/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.base.tsx @@ -1,6 +1,12 @@ import * as React from 'react'; -import { BaseComponent, classNamesFunction, customizable, divProperties, getNativeProps } from '../../Utilities'; -import { IProcessedStyleSet } from '../../Styling'; +import { + BaseComponent, + classNamesFunction, + customizable, + divProperties, + getNativeProps, + IClassNames +} from '../../Utilities'; import { ITooltipProps, ITooltipStyleProps, ITooltipStyles, TooltipDelay } from './Tooltip.types'; import { Callout } from '../../Callout'; import { DirectionalHint } from '../../common/DirectionalHint'; @@ -23,7 +29,7 @@ export class TooltipBase extends BaseComponent { } }; - private _classNames: IProcessedStyleSet; + private _classNames: IClassNames; public render(): JSX.Element { const { diff --git a/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.styles.ts b/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.styles.ts index 2965b2394327dc..336a9ff4614646 100644 --- a/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.styles.ts +++ b/packages/office-ui-fabric-react/src/components/Tooltip/Tooltip.styles.ts @@ -15,12 +15,16 @@ export const getStyles = (props: ITooltipStyleProps): ITooltipStyles => { animationDelay: '300ms', maxWidth: maxWidth }, - delay === TooltipDelay.zero && { - animationDelay: '0s' - }, - delay === TooltipDelay.long && { - animationDelay: '500ms' - }, + delay === TooltipDelay.zero && [ + { + animationDelay: '0s' + } + ], + delay === TooltipDelay.long && [ + { + animationDelay: '500ms' + } + ], className ], content: [ diff --git a/packages/styling/src/MergeStyles.ts b/packages/styling/src/MergeStyles.ts index 1e438a7c8b1286..23e5b0c90cec7e 100644 --- a/packages/styling/src/MergeStyles.ts +++ b/packages/styling/src/MergeStyles.ts @@ -4,7 +4,6 @@ export { IRawStyle, IStyle, IStyleSet, - IProcessedStyleSet, IStyleSheetConfig, InjectionMode, Stylesheet, diff --git a/packages/utilities/jest.config.js b/packages/utilities/jest.config.js index 3e8f1ab9a5e628..75777beb26672a 100644 --- a/packages/utilities/jest.config.js +++ b/packages/utilities/jest.config.js @@ -4,3 +4,5 @@ module.exports = createConfig({ setupFiles: [path.resolve(path.join(__dirname, 'config', 'tests.js'))], snapshotSerializers: [path.resolve(__dirname, './node_modules/@uifabric/jest-serializer-merge-styles')] }); + +console.log(module.exports.setupFiles); diff --git a/packages/utilities/src/IClassNames.ts b/packages/utilities/src/IClassNames.ts index 8c77fcb5bc086b..da7501f6c408f9 100644 --- a/packages/utilities/src/IClassNames.ts +++ b/packages/utilities/src/IClassNames.ts @@ -1,4 +1 @@ -/** - * @deprecated Use `IProcessedStyleSet` from @uifabric/styling or @uifabric/merge-styles instead. - */ export type IClassNames = { [key in keyof T]: string }; diff --git a/packages/utilities/src/IStyleFunction.ts b/packages/utilities/src/IStyleFunction.ts index cf598645419f3d..291ca7c6c03d9c 100644 --- a/packages/utilities/src/IStyleFunction.ts +++ b/packages/utilities/src/IStyleFunction.ts @@ -1 +1 @@ -export { IStyleFunction } from '@uifabric/merge-styles'; +export type IStyleFunction = (props: TStylesProps) => Partial; diff --git a/packages/utilities/src/classNamesFunction.ts b/packages/utilities/src/classNamesFunction.ts index 958ec037cad66f..bcbed39b6fe696 100644 --- a/packages/utilities/src/classNamesFunction.ts +++ b/packages/utilities/src/classNamesFunction.ts @@ -1,34 +1,17 @@ -import { mergeStyleSets, IStyle, IStyleSet, IProcessedStyleSet } from '@uifabric/merge-styles'; -import { IStyleFunctionOrObject } from '@uifabric/merge-styles'; +import { mergeStyleSets, IStyle } from '@uifabric/merge-styles'; +import { IClassNames } from './IClassNames'; +import { IStyleFunction } from './IStyleFunction'; +import { IStyleFunctionOrObject } from './styled'; /** * Creates a getClassNames function which calls getStyles given the props, and injects them * into mergeStyleSets. */ -export function classNamesFunction>(): ( - getStyles: IStyleFunctionOrObject | undefined, +export function classNamesFunction(): ( + getStyles?: IStyleFunctionOrObject, styleProps?: TStyleProps -) => IProcessedStyleSet { +) => IClassNames { // TODO: memoize. - - const getClassNames = ( - styleFunctionOrObject: IStyleFunctionOrObject | undefined, - styleProps: TStyleProps = {} as TStyleProps - ): IProcessedStyleSet => { - // styleSet might be undefined if styleFunctionOrObject is undefined, but getStyles should never - // ordinarily be undefined (it would hardly make any sense). - // However, because we usually use `props.styles` as the argument to an invocation of this method, and - // `props.styles` itself is defined as optional, this avoids the need to use `!` at all invocation points. - if (styleFunctionOrObject === undefined) { - return {} as IProcessedStyleSet; - } - - const styleSet = - styleFunctionOrObject && - (typeof styleFunctionOrObject === 'function' ? styleFunctionOrObject(styleProps!) : styleFunctionOrObject); - - return mergeStyleSets(styleSet as TStyleSet); - }; - - return getClassNames; + return (getStyles?: IStyleFunctionOrObject, styleProps?: TStyleProps): IClassNames => + mergeStyleSets(getStyles && (typeof getStyles === 'function' ? getStyles(styleProps!) : getStyles)); } diff --git a/packages/utilities/src/index.ts b/packages/utilities/src/index.ts index 0dd5a470c5862b..53dacd171c3fb1 100644 --- a/packages/utilities/src/index.ts +++ b/packages/utilities/src/index.ts @@ -1,4 +1,3 @@ -export { IStyleFunctionOrObject } from '@uifabric/merge-styles'; export * from './aria'; export * from './Async'; export * from './AutoScroll'; diff --git a/packages/utilities/src/styled.test.tsx b/packages/utilities/src/styled.test.tsx index ae65817b8dd956..9bb432aa7aec6e 100644 --- a/packages/utilities/src/styled.test.tsx +++ b/packages/utilities/src/styled.test.tsx @@ -1,8 +1,8 @@ import * as React from 'react'; -import { styled } from './styled'; +import { styled, IStyleFunctionOrObject } from './styled'; import * as renderer from 'react-test-renderer'; import { Customizer } from './Customizer'; -import { IStyle, Stylesheet, InjectionMode, IStyleFunctionOrObject } from '@uifabric/merge-styles'; +import { IStyle, Stylesheet, InjectionMode } from '@uifabric/merge-styles'; import { classNamesFunction } from './classNamesFunction'; interface ITestStyles { diff --git a/packages/utilities/src/styled.tsx b/packages/utilities/src/styled.tsx index e5ae684c5507d8..a4d59a5af17344 100644 --- a/packages/utilities/src/styled.tsx +++ b/packages/utilities/src/styled.tsx @@ -1,11 +1,17 @@ import * as React from 'react'; -import { concatStyleSets, IStyleSet, IStyleFunctionOrObject, IConcatenatedStyleSet } from '@uifabric/merge-styles'; +import * as PropTypes from 'prop-types'; +import { concatStyleSets } from '@uifabric/merge-styles'; import { IStyleFunction } from './IStyleFunction'; import { CustomizableContextTypes } from './customizable'; import { Customizations, ICustomizations } from './Customizations'; -export interface IPropsWithStyles> { - styles?: IStyleFunctionOrObject; +export type IStyleFunctionOrObject = IStyleFunction | Partial; + +export interface IPropsWithStyles { + styles?: IStyleFunctionOrObject; + subComponents?: { + [key: string]: IStyleFunction<{}, {}>; + }; } export interface ICustomizableProps { @@ -39,13 +45,9 @@ const DefaultFields = ['theme', 'styles']; * @param getProps - A helper which provides default props. * @param customizable - An object which defines which props can be customized using the Customizer. */ -export function styled< - TComponentProps extends IPropsWithStyles, - TStyleProps, - TStyleSet extends IStyleSet ->( +export function styled, TStyleProps, TStyles>( Component: React.ComponentClass | React.StatelessComponent, - baseStyles: IStyleFunctionOrObject, + baseStyles: IStyleFunctionOrObject, getProps?: (props: TComponentProps) => Partial, customizable?: ICustomizableProps ): (props: TComponentProps) => JSX.Element { @@ -72,11 +74,11 @@ export function styled< return Wrapped as (props: TComponentProps) => JSX.Element; } -function _resolve>( +function _resolve( styleProps: TStyleProps, - ...allStyles: (IStyleFunctionOrObject | undefined)[] -): IConcatenatedStyleSet | undefined { - const result: Partial[] = []; + ...allStyles: (IStyleFunctionOrObject> | undefined)[] +): Partial | undefined { + const result: Partial[] = []; for (const styles of allStyles) { if (styles) { @@ -84,12 +86,7 @@ function _resolve>( } } if (result.length) { - // cliffkoh: I cannot figure out how to avoid the cast to any here. - // It is something to do with the use of Omit in IStyleSet. - // It might not be necessary once Omit becomes part of lib.d.ts (when we remove our own Omit and rely on - // the official version). - // tslint:disable-next-line:no-any - return concatStyleSets(...(result as any)) as IConcatenatedStyleSet; + return concatStyleSets(...result); } return undefined; diff --git a/scripts/package.json b/scripts/package.json index 2e56771037035d..d9230c0ca56301 100644 --- a/scripts/package.json +++ b/scripts/package.json @@ -42,7 +42,7 @@ "ts-loader": "^4.1.0", "tslint": "^5.7.0", "tslint-microsoft-contrib": "^5.0.1", - "typescript": "2.9.2", + "typescript": "2.8.1", "webpack": "4.7.0", "webpack-bundle-analyzer": "^2.11.1", "webpack-cli": "2.1.2",