From 3e8d6e79ebad7c6160ce25bbd79d5deb9d24e31e Mon Sep 17 00:00:00 2001 From: Brad Griffith Date: Thu, 28 Mar 2019 13:52:38 -0500 Subject: [PATCH 01/18] Initial material-design-icons package stub. --- package.json | 1 + packages/material-design-icons/README.md | 21 ++++++++++++++ packages/material-design-icons/package.json | 29 +++++++++++++++++++ .../src/action/outline-offline_bolt-24px.svg | 1 + .../src/action/outline-settings-24px.svg | 1 + .../src/content/outline-gesture-24px.svg | 1 + .../src/editor/outline-bar_chart-24px.svg | 1 + .../src/image/outline-edit-24px.svg | 1 + packages/material-design-icons/src/index.js | 3 ++ 9 files changed, 59 insertions(+) create mode 100644 packages/material-design-icons/README.md create mode 100644 packages/material-design-icons/package.json create mode 100644 packages/material-design-icons/src/action/outline-offline_bolt-24px.svg create mode 100644 packages/material-design-icons/src/action/outline-settings-24px.svg create mode 100644 packages/material-design-icons/src/content/outline-gesture-24px.svg create mode 100644 packages/material-design-icons/src/editor/outline-bar_chart-24px.svg create mode 100644 packages/material-design-icons/src/image/outline-edit-24px.svg create mode 100644 packages/material-design-icons/src/index.js diff --git a/package.json b/package.json index 05b7be56290f5..158e5c2d7e682 100644 --- a/package.json +++ b/package.json @@ -35,6 +35,7 @@ "dependencies": { "@automattic/format-currency": "file:./packages/format-currency", "@automattic/muriel-style": "file:./packages/muriel-style", + "@automattic/material-design-icons": "file:./packages/material-design-icons", "@automattic/tree-select": "file:./packages/tree-select", "@babel/cli": "7.4.3", "@babel/core": "7.4.3", diff --git a/packages/material-design-icons/README.md b/packages/material-design-icons/README.md new file mode 100644 index 0000000000000..07fe9b240e95b --- /dev/null +++ b/packages/material-design-icons/README.md @@ -0,0 +1,21 @@ +# material-design-icons + +This package currently only provides Material icon SVGs required by the Calypso +nav drawer. The official `material-design-icons` package (https://github.com/google/material-design-icons) +is generally quite out-dated. It also includes many image formats that are not +relevant to Calypso. + +As we adopt Material icons more widely, it will probably be worthwhile to fully +populate this package with all the available icons. Alternatively, we could seek +out an alternative distribution of the icons. + +## Using a Material icon in Calypso + +We use svgr to load SVG files and convert them to React components. + +```jsx +import { ReactComponent as SvgExample } from './test.svg'; + + +``` + diff --git a/packages/material-design-icons/package.json b/packages/material-design-icons/package.json new file mode 100644 index 0000000000000..cc7de8a93c083 --- /dev/null +++ b/packages/material-design-icons/package.json @@ -0,0 +1,29 @@ +{ + "name": "@automattic/your-package", + "version": "1.0.0", + "description": "My new package", + "main": "src/index.js", + "module": "src/index.js", + "sideEffects": false, + "keywords": [ + "wordpress" + ], + "author": "Brad Griffith ", + "contributors": [], + "homepage": "https://github.com/Automattic/wp-calypso", + "license": "GPL-2.0-or-later", + "repository": { + "type": "git", + "url": "git+https://github.com/Automattic/wp-calypso.git", + "directory": "packages/material-design-icons" + }, + "publishConfig": { + "access": "public" + }, + "bugs": { + "url": "https://github.com/Automattic/wp-calypso/issues" + }, + "files": [ + "src" + ] +} diff --git a/packages/material-design-icons/src/action/outline-offline_bolt-24px.svg b/packages/material-design-icons/src/action/outline-offline_bolt-24px.svg new file mode 100644 index 0000000000000..61b10419418e4 --- /dev/null +++ b/packages/material-design-icons/src/action/outline-offline_bolt-24px.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/material-design-icons/src/action/outline-settings-24px.svg b/packages/material-design-icons/src/action/outline-settings-24px.svg new file mode 100644 index 0000000000000..7e0df914a494f --- /dev/null +++ b/packages/material-design-icons/src/action/outline-settings-24px.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/material-design-icons/src/content/outline-gesture-24px.svg b/packages/material-design-icons/src/content/outline-gesture-24px.svg new file mode 100644 index 0000000000000..b638b378ad0d2 --- /dev/null +++ b/packages/material-design-icons/src/content/outline-gesture-24px.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/material-design-icons/src/editor/outline-bar_chart-24px.svg b/packages/material-design-icons/src/editor/outline-bar_chart-24px.svg new file mode 100644 index 0000000000000..5ed95c5841f8c --- /dev/null +++ b/packages/material-design-icons/src/editor/outline-bar_chart-24px.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/material-design-icons/src/image/outline-edit-24px.svg b/packages/material-design-icons/src/image/outline-edit-24px.svg new file mode 100644 index 0000000000000..9d7486d8b393c --- /dev/null +++ b/packages/material-design-icons/src/image/outline-edit-24px.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/material-design-icons/src/index.js b/packages/material-design-icons/src/index.js new file mode 100644 index 0000000000000..620ef1b0c855a --- /dev/null +++ b/packages/material-design-icons/src/index.js @@ -0,0 +1,3 @@ +module.exports = { + STATIC_PATH: __dirname, +}; From 37ce5c0e5b8f5f3fe00915e86c821392121761dc Mon Sep 17 00:00:00 2001 From: Brad Griffith Date: Thu, 28 Mar 2019 16:18:40 -0500 Subject: [PATCH 02/18] Update package.json fields that still had placeholders from the docs. --- packages/material-design-icons/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/material-design-icons/package.json b/packages/material-design-icons/package.json index cc7de8a93c083..995292051363d 100644 --- a/packages/material-design-icons/package.json +++ b/packages/material-design-icons/package.json @@ -1,7 +1,7 @@ { - "name": "@automattic/your-package", + "name": "@automattic/material-design-icons", "version": "1.0.0", - "description": "My new package", + "description": "Material icons in SVG format.", "main": "src/index.js", "module": "src/index.js", "sideEffects": false, From c4e20195c0af8a50278a23a6649c7717c4a02ae5 Mon Sep 17 00:00:00 2001 From: Brad Griffith Date: Fri, 29 Mar 2019 10:40:05 -0500 Subject: [PATCH 03/18] Add some info about adding icons to the package. --- packages/material-design-icons/README.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/material-design-icons/README.md b/packages/material-design-icons/README.md index 07fe9b240e95b..1ebd525df0953 100644 --- a/packages/material-design-icons/README.md +++ b/packages/material-design-icons/README.md @@ -19,3 +19,12 @@ import { ReactComponent as SvgExample } from './test.svg'; ``` +## Adding icons + +To add icons to this package, download using the Material icon tool: + +https://material.io/tools/icons/ + +Store the SVG files in the sub-folder matching the category used on +material.io. + From 160c7846d3b96900e70d3512b9642c034e0f6317 Mon Sep 17 00:00:00 2001 From: Brad Griffith Date: Wed, 17 Apr 2019 10:52:17 -0500 Subject: [PATCH 04/18] Add svg4everybody to polyfill external SVGs in IE11. --- npm-shrinkwrap.json | 110 +++++++++++++++----------------------------- package.json | 3 +- 2 files changed, 39 insertions(+), 74 deletions(-) diff --git a/npm-shrinkwrap.json b/npm-shrinkwrap.json index b31a329e5f3c0..8c9499add1bcf 100644 --- a/npm-shrinkwrap.json +++ b/npm-shrinkwrap.json @@ -34,7 +34,7 @@ "caniuse-api": "3.0.0", "css-loader": "2.1.1", "duplicate-package-checker-webpack-plugin": "3.0.0", - "mini-css-extract-plugin-with-rtl": "github:Automattic/mini-css-extract-plugin-with-rtl", + "mini-css-extract-plugin-with-rtl": "github:Automattic/mini-css-extract-plugin-with-rtl#af1300db7027af8caa9a3015f54a34aec545cc54", "node-sass": "4.11.0", "postcss-custom-properties": "8.0.9", "postcss-loader": "3.0.0", @@ -48,8 +48,7 @@ "dependencies": { "@babel/core": { "version": "7.4.0", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.4.0.tgz", - "integrity": "sha512-Dzl7U0/T69DFOTwqz/FJdnOSWS57NpjNfCwMKHABr589Lg8uX1RrlBIJ7L5Dubt/xkLsx0xH5EBFzlBVes1ayA==", + "bundled": true, "dev": true, "requires": { "@babel/code-frame": "^7.0.0", @@ -70,8 +69,7 @@ }, "@babel/plugin-transform-runtime": { "version": "7.4.0", - "resolved": "https://registry.npmjs.org/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.4.0.tgz", - "integrity": "sha512-1uv2h9wnRj98XX3g0l4q+O3jFM6HfayKup7aIu4pnnlzGz0H+cYckGBC74FZIWJXJSXAmeJ9Yu5Gg2RQpS4hWg==", + "bundled": true, "dev": true, "requires": { "@babel/helper-module-imports": "^7.0.0", @@ -82,8 +80,7 @@ }, "@babel/preset-env": { "version": "7.4.2", - "resolved": "https://registry.npmjs.org/@babel/preset-env/-/preset-env-7.4.2.tgz", - "integrity": "sha512-OEz6VOZaI9LW08CWVS3d9g/0jZA6YCn1gsKIy/fut7yZCJti5Lm1/Hi+uo/U+ODm7g4I6gULrCP+/+laT8xAsA==", + "bundled": true, "dev": true, "requires": { "@babel/helper-module-imports": "^7.0.0", @@ -135,8 +132,7 @@ }, "autoprefixer": { "version": "9.4.4", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-9.4.4.tgz", - "integrity": "sha512-7tpjBadJyHKf+gOJEmKhZIksWxdZCSrnKbbTJNsw+/zX9+f//DLELRQPWjjjVoDbbWlCuNRkN7RfmZwDVgWMLw==", + "bundled": true, "dev": true, "requires": { "browserslist": "^4.3.7", @@ -149,8 +145,7 @@ }, "debug": { "version": "4.1.1", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", - "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", + "bundled": true, "dev": true, "requires": { "ms": "^2.1.1" @@ -158,8 +153,7 @@ }, "source-map": { "version": "0.5.7", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz", - "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=", + "bundled": true, "dev": true } } @@ -174,6 +168,9 @@ "i18n-calypso": "file:packages/i18n-calypso" } }, + "@automattic/material-design-icons": { + "version": "file:packages/material-design-icons" + }, "@automattic/muriel-style": { "version": "file:packages/muriel-style" }, @@ -5618,8 +5615,7 @@ }, "ansi-regex": { "version": "2.1.1", - "bundled": true, - "optional": true + "bundled": true }, "aproba": { "version": "1.2.0", @@ -5637,13 +5633,11 @@ }, "balanced-match": { "version": "1.0.0", - "bundled": true, - "optional": true + "bundled": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -5656,18 +5650,15 @@ }, "code-point-at": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "concat-map": { "version": "0.0.1", - "bundled": true, - "optional": true + "bundled": true }, "console-control-strings": { "version": "1.1.0", - "bundled": true, - "optional": true + "bundled": true }, "core-util-is": { "version": "1.0.2", @@ -5770,8 +5761,7 @@ }, "inherits": { "version": "2.0.3", - "bundled": true, - "optional": true + "bundled": true }, "ini": { "version": "1.3.5", @@ -5781,7 +5771,6 @@ "is-fullwidth-code-point": { "version": "1.0.0", "bundled": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -5794,20 +5783,17 @@ "minimatch": { "version": "3.0.4", "bundled": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } }, "minimist": { "version": "0.0.8", - "bundled": true, - "optional": true + "bundled": true }, "minipass": { "version": "2.3.5", "bundled": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -5824,7 +5810,6 @@ "mkdirp": { "version": "0.5.1", "bundled": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -5897,8 +5882,7 @@ }, "number-is-nan": { "version": "1.0.1", - "bundled": true, - "optional": true + "bundled": true }, "object-assign": { "version": "4.1.1", @@ -5908,7 +5892,6 @@ "once": { "version": "1.4.0", "bundled": true, - "optional": true, "requires": { "wrappy": "1" } @@ -5984,8 +5967,7 @@ }, "safe-buffer": { "version": "5.1.2", - "bundled": true, - "optional": true + "bundled": true }, "safer-buffer": { "version": "2.1.2", @@ -6015,7 +5997,6 @@ "string-width": { "version": "1.0.2", "bundled": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -6033,7 +6014,6 @@ "strip-ansi": { "version": "3.0.1", "bundled": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -6072,13 +6052,11 @@ }, "wrappy": { "version": "1.0.2", - "bundled": true, - "optional": true + "bundled": true }, "yallist": { "version": "3.0.3", - "bundled": true, - "optional": true + "bundled": true } } } @@ -11818,8 +11796,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -11840,14 +11817,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -11862,20 +11837,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -11992,8 +11964,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -12005,7 +11976,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -12020,7 +11990,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -12028,14 +11997,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -12054,7 +12021,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -12135,8 +12101,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -12148,7 +12113,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -12234,8 +12198,7 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -12271,7 +12234,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -12291,7 +12253,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -12335,14 +12296,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true } } } @@ -19566,6 +19525,11 @@ "integrity": "sha1-WPcc7jvVGbWdSyqEO2x95krAR2Q=", "dev": true }, + "svg4everybody": { + "version": "2.1.9", + "resolved": "https://registry.npmjs.org/svg4everybody/-/svg4everybody-2.1.9.tgz", + "integrity": "sha1-W9n23vwTOFmgRGRtR0P6vCjbfi0=" + }, "svgo": { "version": "1.2.2", "resolved": "https://registry.npmjs.org/svgo/-/svgo-1.2.2.tgz", diff --git a/package.json b/package.json index 158e5c2d7e682..c87722861e05f 100644 --- a/package.json +++ b/package.json @@ -179,6 +179,7 @@ "store": "2.0.12", "striptags": "2.2.1", "superagent": "3.8.3", + "svg4everybody": "2.1.9", "textarea-caret": "3.1.0", "tinymce": "4.8.5", "to-title-case": "1.0.0", @@ -220,7 +221,7 @@ "build-devdocs:index": "cross-env-shell NODE_PATH=$NODE_PATH:server:client:. npm run -s build-devdocs:index:_env", "build-devdocs:index:_env": "node server/devdocs/bin/generate-devdocs-index", "build-docker": "node bin/build-docker.js", - "build-static": "ncp static public", + "build-static": "ncp packages/material-design-icons/src public/material-design-icons && ncp static public", "prebuild-server": "mkdirp build", "build-server": "cross-env-shell BROWSERSLIST_ENV=server NODE_PATH=$NODE_PATH:server:client:. webpack --display errors-only --config webpack.config.node.js", "build-client": "npm run build-client-evergreen", From 1ba09a79e617045c6864fa44d477153595e1afee Mon Sep 17 00:00:00 2001 From: Brad Griffith Date: Wed, 17 Apr 2019 10:53:28 -0500 Subject: [PATCH 05/18] Make svg4everybody a no-op on evergreen browsers where the polyfill is not needed. --- webpack.config.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/webpack.config.js b/webpack.config.js index 918c104b148f1..9fe1b3e6e0b17 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -323,4 +323,11 @@ if ( ! config.isEnabled( 'desktop' ) ) { ); } +// The SVG external content polyfill (svg4everybody) isn't needed for evergreen browsers, so don't bundle it. +if ( browserslistEnv === 'evergreen' ) { + webpackConfig.plugins.push( + new webpack.NormalModuleReplacementPlugin( /^svg4everybody$/, 'lodash/noop' ) + ); +} + module.exports = webpackConfig; From aedc6de995d215b86c439f0fec255561f251286d Mon Sep 17 00:00:00 2001 From: Brad Griffith Date: Fri, 12 Apr 2019 11:09:26 -0500 Subject: [PATCH 06/18] Mark Material icon package private for now. --- packages/material-design-icons/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-design-icons/package.json b/packages/material-design-icons/package.json index 995292051363d..4100cebeac6d6 100644 --- a/packages/material-design-icons/package.json +++ b/packages/material-design-icons/package.json @@ -18,7 +18,7 @@ "directory": "packages/material-design-icons" }, "publishConfig": { - "access": "public" + "access": "private" }, "bugs": { "url": "https://github.com/Automattic/wp-calypso/issues" From 2e2ba0d929012e525927aef89d4cb328dc241cb9 Mon Sep 17 00:00:00 2001 From: Brad Griffith Date: Fri, 12 Apr 2019 11:10:53 -0500 Subject: [PATCH 07/18] Set Material icon license to Apache 2.0. --- packages/material-design-icons/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-design-icons/package.json b/packages/material-design-icons/package.json index 4100cebeac6d6..0d003ca94f5d4 100644 --- a/packages/material-design-icons/package.json +++ b/packages/material-design-icons/package.json @@ -11,7 +11,7 @@ "author": "Brad Griffith ", "contributors": [], "homepage": "https://github.com/Automattic/wp-calypso", - "license": "GPL-2.0-or-later", + "license": "Apache-2.0", "repository": { "type": "git", "url": "git+https://github.com/Automattic/wp-calypso.git", From c1d32c1fa03d8f6a10a0121543507d7126b9cc47 Mon Sep 17 00:00:00 2001 From: Brad Griffith Date: Wed, 17 Apr 2019 12:59:49 -0500 Subject: [PATCH 08/18] SVG sprite generation in material icons package. --- packages/material-design-icons/Gruntfile.js | 24 +++++++++++++++++++ packages/material-design-icons/package.json | 10 +++++++- .../svg-sprite/material-icons.svg | 1 + 3 files changed, 34 insertions(+), 1 deletion(-) create mode 100644 packages/material-design-icons/Gruntfile.js create mode 100644 packages/material-design-icons/svg-sprite/material-icons.svg diff --git a/packages/material-design-icons/Gruntfile.js b/packages/material-design-icons/Gruntfile.js new file mode 100644 index 0000000000000..b98d118b689b1 --- /dev/null +++ b/packages/material-design-icons/Gruntfile.js @@ -0,0 +1,24 @@ +'use strict'; + +module.exports = function( grunt ) { + grunt.loadNpmTasks( 'grunt-svgstore' ); + + grunt.initConfig( { + svgstore: { + options: { + prefix: 'icon-', // This will prefix each ID + svg: { + viewBox: '0 0 24 24', + xmlns: 'http://www.w3.org/2000/svg', + }, + }, + default: { + files: { + 'svg-sprite/material-icons.svg': [ 'src/action/*.svg' ], + }, + }, + }, + } ); + + grunt.registerTask( 'default', [ 'svgstore' ] ); +}; diff --git a/packages/material-design-icons/package.json b/packages/material-design-icons/package.json index 0d003ca94f5d4..c09efbad4e5cb 100644 --- a/packages/material-design-icons/package.json +++ b/packages/material-design-icons/package.json @@ -25,5 +25,13 @@ }, "files": [ "src" - ] + ], + "devDependencies": { + "grunt": "^0.4.5", + "grunt-cli": "^1.2.0", + "grunt-svgstore": "^1.0.0" + }, + "scripts": { + "build": "grunt --verbose" + } } diff --git a/packages/material-design-icons/svg-sprite/material-icons.svg b/packages/material-design-icons/svg-sprite/material-icons.svg new file mode 100644 index 0000000000000..15c3bef0b4f0d --- /dev/null +++ b/packages/material-design-icons/svg-sprite/material-icons.svg @@ -0,0 +1 @@ +outline-offline_bolt-24pxoutline-settings-24px \ No newline at end of file From 8b04283cdd59f55fbf7ae42bc449a5ffd299305a Mon Sep 17 00:00:00 2001 From: Brad Griffith Date: Wed, 17 Apr 2019 13:00:18 -0500 Subject: [PATCH 09/18] Drop unnecessary "use strict" from Gruntfile. --- packages/material-design-icons/Gruntfile.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/material-design-icons/Gruntfile.js b/packages/material-design-icons/Gruntfile.js index b98d118b689b1..7da68b480ea51 100644 --- a/packages/material-design-icons/Gruntfile.js +++ b/packages/material-design-icons/Gruntfile.js @@ -1,5 +1,3 @@ -'use strict'; - module.exports = function( grunt ) { grunt.loadNpmTasks( 'grunt-svgstore' ); From f2dc5b0d065193cae343134ceee2c3bfc81a8ddc Mon Sep 17 00:00:00 2001 From: Brad Griffith Date: Wed, 17 Apr 2019 13:11:53 -0500 Subject: [PATCH 10/18] Copy Material icon sprite to public during build-static. --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c87722861e05f..96e4e67bd833a 100644 --- a/package.json +++ b/package.json @@ -221,7 +221,7 @@ "build-devdocs:index": "cross-env-shell NODE_PATH=$NODE_PATH:server:client:. npm run -s build-devdocs:index:_env", "build-devdocs:index:_env": "node server/devdocs/bin/generate-devdocs-index", "build-docker": "node bin/build-docker.js", - "build-static": "ncp packages/material-design-icons/src public/material-design-icons && ncp static public", + "build-static": "ncp packages/material-design-icons/svg-sprite public/images/material-design-icons && ncp static public", "prebuild-server": "mkdirp build", "build-server": "cross-env-shell BROWSERSLIST_ENV=server NODE_PATH=$NODE_PATH:server:client:. webpack --display errors-only --config webpack.config.node.js", "build-client": "npm run build-client-evergreen", From dac08cefb14486b3e91f92994009c46659b29b4b Mon Sep 17 00:00:00 2001 From: Brad Griffith Date: Wed, 17 Apr 2019 13:12:36 -0500 Subject: [PATCH 11/18] Component for using a Material icon from the sprite and polyfilling with svg4everybody. --- client/components/material-icon/index.jsx | 52 +++++++++++++++++++++++ 1 file changed, 52 insertions(+) create mode 100644 client/components/material-icon/index.jsx diff --git a/client/components/material-icon/index.jsx b/client/components/material-icon/index.jsx new file mode 100644 index 0000000000000..2368fe86d90a4 --- /dev/null +++ b/client/components/material-icon/index.jsx @@ -0,0 +1,52 @@ +/** @format */ + +/** + * External dependencies + */ +import React from 'react'; +import PropTypes from 'prop-types'; +import svg4everybody from 'svg4everybody'; + +const isBrowser = typeof window !== 'undefined'; +if ( isBrowser ) { + // Polyfill SVG external content support. Noop in the evergreen build. + svg4everybody(); +} + +function MaterialIcon( props ) { + const { size = 24, style = 'outline', icon, onClick, className, ...otherProps } = props; + + // Using a missing icon doesn't produce any errors, just a blank icon, which is the exact intended behaviour. + // This means we don't need to perform any checks on the icon name. + const iconName = `material-icon-${ icon }`; + const iconClass = [ 'material-icon', iconName, className ] + .filter( Boolean ) // Remove all falsy values. + .join( ' ' ); + + const svgPath = `icon-${ style }-${ icon }-${ size }px`; + + return ( + + + + ); +} + +MaterialIcon.propTypes = { + category: PropTypes.string.isRequired, + icon: PropTypes.string.isRequired, + style: PropTypes.string, + size: PropTypes.number, + onClick: PropTypes.func, + className: PropTypes.string, +}; + +export default React.memo( MaterialIcon ); From 6573c2cf729c10205895aa46e897c25ff30adaa5 Mon Sep 17 00:00:00 2001 From: Brad Griffith Date: Wed, 17 Apr 2019 13:24:13 -0500 Subject: [PATCH 12/18] Drop pragma. --- client/components/material-icon/index.jsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/client/components/material-icon/index.jsx b/client/components/material-icon/index.jsx index 2368fe86d90a4..df4a7e556ef0b 100644 --- a/client/components/material-icon/index.jsx +++ b/client/components/material-icon/index.jsx @@ -1,5 +1,3 @@ -/** @format */ - /** * External dependencies */ From fd5fbba8e32c981b6a51ad2540878183170fe162 Mon Sep 17 00:00:00 2001 From: Brad Griffith Date: Wed, 17 Apr 2019 13:27:36 -0500 Subject: [PATCH 13/18] Use classnames rather than manually filtering array. --- client/components/material-icon/index.jsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/client/components/material-icon/index.jsx b/client/components/material-icon/index.jsx index df4a7e556ef0b..91f618c891a0d 100644 --- a/client/components/material-icon/index.jsx +++ b/client/components/material-icon/index.jsx @@ -1,6 +1,7 @@ /** * External dependencies */ +import classnames from 'classnames'; import React from 'react'; import PropTypes from 'prop-types'; import svg4everybody from 'svg4everybody'; @@ -17,9 +18,7 @@ function MaterialIcon( props ) { // Using a missing icon doesn't produce any errors, just a blank icon, which is the exact intended behaviour. // This means we don't need to perform any checks on the icon name. const iconName = `material-icon-${ icon }`; - const iconClass = [ 'material-icon', iconName, className ] - .filter( Boolean ) // Remove all falsy values. - .join( ' ' ); + const iconClass = classnames( 'material-icon', iconName, className ); const svgPath = `icon-${ style }-${ icon }-${ size }px`; @@ -39,7 +38,6 @@ function MaterialIcon( props ) { } MaterialIcon.propTypes = { - category: PropTypes.string.isRequired, icon: PropTypes.string.isRequired, style: PropTypes.string, size: PropTypes.number, From 426e7a82d0c8e95cd6cb050962758f54d0d596d1 Mon Sep 17 00:00:00 2001 From: Brad Griffith Date: Wed, 17 Apr 2019 13:36:24 -0500 Subject: [PATCH 14/18] Switch to svgstore-cli rather than Grunt for sprite generation. --- packages/material-design-icons/Gruntfile.js | 22 ------------------- packages/material-design-icons/package.json | 10 ++++----- .../svg-sprite/material-icons.svg | 2 +- 3 files changed, 5 insertions(+), 29 deletions(-) delete mode 100644 packages/material-design-icons/Gruntfile.js diff --git a/packages/material-design-icons/Gruntfile.js b/packages/material-design-icons/Gruntfile.js deleted file mode 100644 index 7da68b480ea51..0000000000000 --- a/packages/material-design-icons/Gruntfile.js +++ /dev/null @@ -1,22 +0,0 @@ -module.exports = function( grunt ) { - grunt.loadNpmTasks( 'grunt-svgstore' ); - - grunt.initConfig( { - svgstore: { - options: { - prefix: 'icon-', // This will prefix each ID - svg: { - viewBox: '0 0 24 24', - xmlns: 'http://www.w3.org/2000/svg', - }, - }, - default: { - files: { - 'svg-sprite/material-icons.svg': [ 'src/action/*.svg' ], - }, - }, - }, - } ); - - grunt.registerTask( 'default', [ 'svgstore' ] ); -}; diff --git a/packages/material-design-icons/package.json b/packages/material-design-icons/package.json index c09efbad4e5cb..2b935ed75ec00 100644 --- a/packages/material-design-icons/package.json +++ b/packages/material-design-icons/package.json @@ -26,12 +26,10 @@ "files": [ "src" ], - "devDependencies": { - "grunt": "^0.4.5", - "grunt-cli": "^1.2.0", - "grunt-svgstore": "^1.0.0" - }, "scripts": { - "build": "grunt --verbose" + "build": "svgstore -o svg-sprite/material-icons.svg -p 'icon-' src/**/*.svg" + }, + "devDependencies": { + "svgstore-cli": "^1.3.1" } } diff --git a/packages/material-design-icons/svg-sprite/material-icons.svg b/packages/material-design-icons/svg-sprite/material-icons.svg index 15c3bef0b4f0d..a991ad7b173a5 100644 --- a/packages/material-design-icons/svg-sprite/material-icons.svg +++ b/packages/material-design-icons/svg-sprite/material-icons.svg @@ -1 +1 @@ -outline-offline_bolt-24pxoutline-settings-24px \ No newline at end of file + \ No newline at end of file From cb90ef8b82c4f5c99d82b3aeaca55aea07b37de1 Mon Sep 17 00:00:00 2001 From: Brad Griffith Date: Wed, 17 Apr 2019 14:10:34 -0500 Subject: [PATCH 15/18] Use file-loader so we can cache bust the Material icons sprite. --- client/components/material-icon/index.jsx | 5 +++-- package.json | 2 +- webpack.config.js | 1 + 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/client/components/material-icon/index.jsx b/client/components/material-icon/index.jsx index 91f618c891a0d..42f5af36b5f56 100644 --- a/client/components/material-icon/index.jsx +++ b/client/components/material-icon/index.jsx @@ -5,6 +5,7 @@ import classnames from 'classnames'; import React from 'react'; import PropTypes from 'prop-types'; import svg4everybody from 'svg4everybody'; +import spritePath from 'material-design-icons/svg-sprite/material-icons.svg'; const isBrowser = typeof window !== 'undefined'; if ( isBrowser ) { @@ -20,7 +21,7 @@ function MaterialIcon( props ) { const iconName = `material-icon-${ icon }`; const iconClass = classnames( 'material-icon', iconName, className ); - const svgPath = `icon-${ style }-${ icon }-${ size }px`; + const svgId = `icon-${ style }-${ icon }-${ size }px`; return ( - + ); } diff --git a/package.json b/package.json index 96e4e67bd833a..0977554f4f9ab 100644 --- a/package.json +++ b/package.json @@ -221,7 +221,7 @@ "build-devdocs:index": "cross-env-shell NODE_PATH=$NODE_PATH:server:client:. npm run -s build-devdocs:index:_env", "build-devdocs:index:_env": "node server/devdocs/bin/generate-devdocs-index", "build-docker": "node bin/build-docker.js", - "build-static": "ncp packages/material-design-icons/svg-sprite public/images/material-design-icons && ncp static public", + "build-static": "ncp static public", "prebuild-server": "mkdirp build", "build-server": "cross-env-shell BROWSERSLIST_ENV=server NODE_PATH=$NODE_PATH:server:client:. webpack --display errors-only --config webpack.config.node.js", "build-client": "npm run build-client-evergreen", diff --git a/webpack.config.js b/webpack.config.js index 9fe1b3e6e0b17..c14d7a19566f2 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -250,6 +250,7 @@ const webpackConfig = { 'gridicons/example': 'gridicons/dist/example', 'react-virtualized': 'react-virtualized/dist/es', 'social-logos/example': 'social-logos/build/example', + 'material-design-icons': path.join( __dirname, 'packages/material-design-icons' ), debug: path.resolve( __dirname, 'node_modules/debug' ), store: 'store/dist/store.modern', gridicons$: path.resolve( __dirname, 'client/components/async-gridicons' ), From ced90eb786a1eff3bac6bba3caa1ba256b7d42e8 Mon Sep 17 00:00:00 2001 From: Brad Griffith Date: Wed, 17 Apr 2019 14:20:46 -0500 Subject: [PATCH 16/18] Fix files declaration in Material icons package.json that was causing us to need an alias for the sprite import. --- client/components/material-icon/index.jsx | 2 +- packages/material-design-icons/package.json | 3 ++- webpack.config.js | 1 - 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/client/components/material-icon/index.jsx b/client/components/material-icon/index.jsx index 42f5af36b5f56..429f10afb776e 100644 --- a/client/components/material-icon/index.jsx +++ b/client/components/material-icon/index.jsx @@ -5,7 +5,7 @@ import classnames from 'classnames'; import React from 'react'; import PropTypes from 'prop-types'; import svg4everybody from 'svg4everybody'; -import spritePath from 'material-design-icons/svg-sprite/material-icons.svg'; +import spritePath from '@automattic/material-design-icons/svg-sprite/material-icons.svg'; const isBrowser = typeof window !== 'undefined'; if ( isBrowser ) { diff --git a/packages/material-design-icons/package.json b/packages/material-design-icons/package.json index 2b935ed75ec00..cd3c37cba1b62 100644 --- a/packages/material-design-icons/package.json +++ b/packages/material-design-icons/package.json @@ -24,7 +24,8 @@ "url": "https://github.com/Automattic/wp-calypso/issues" }, "files": [ - "src" + "src", + "svg-sprite" ], "scripts": { "build": "svgstore -o svg-sprite/material-icons.svg -p 'icon-' src/**/*.svg" diff --git a/webpack.config.js b/webpack.config.js index c14d7a19566f2..9fe1b3e6e0b17 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -250,7 +250,6 @@ const webpackConfig = { 'gridicons/example': 'gridicons/dist/example', 'react-virtualized': 'react-virtualized/dist/es', 'social-logos/example': 'social-logos/build/example', - 'material-design-icons': path.join( __dirname, 'packages/material-design-icons' ), debug: path.resolve( __dirname, 'node_modules/debug' ), store: 'store/dist/store.modern', gridicons$: path.resolve( __dirname, 'client/components/async-gridicons' ), From b89d362ca834e62a4a232aa3e9edfbf0a4109f5b Mon Sep 17 00:00:00 2001 From: Brad Griffith Date: Wed, 17 Apr 2019 14:29:59 -0500 Subject: [PATCH 17/18] Move svg4everybody usage to client/boot/polyfills. --- client/boot/polyfills.js | 7 +++++++ client/components/material-icon/index.jsx | 7 ------- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/client/boot/polyfills.js b/client/boot/polyfills.js index 5a52cde92f0fc..ada2fee8c3b12 100644 --- a/client/boot/polyfills.js +++ b/client/boot/polyfills.js @@ -3,6 +3,7 @@ * External dependencies */ import '@babel/polyfill'; +import svg4everybody from 'svg4everybody'; /** * Internal dependencies @@ -11,3 +12,9 @@ import '@babel/polyfill'; import localStoragePolyfill from 'lib/local-storage-polyfill'; localStoragePolyfill(); + +const isBrowser = typeof window !== 'undefined'; +if ( isBrowser ) { + // Polyfill SVG external content support. Noop in the evergreen build. + svg4everybody(); +} diff --git a/client/components/material-icon/index.jsx b/client/components/material-icon/index.jsx index 429f10afb776e..056741b9c8dd2 100644 --- a/client/components/material-icon/index.jsx +++ b/client/components/material-icon/index.jsx @@ -4,15 +4,8 @@ import classnames from 'classnames'; import React from 'react'; import PropTypes from 'prop-types'; -import svg4everybody from 'svg4everybody'; import spritePath from '@automattic/material-design-icons/svg-sprite/material-icons.svg'; -const isBrowser = typeof window !== 'undefined'; -if ( isBrowser ) { - // Polyfill SVG external content support. Noop in the evergreen build. - svg4everybody(); -} - function MaterialIcon( props ) { const { size = 24, style = 'outline', icon, onClick, className, ...otherProps } = props; From d065f9840394c02fd0ba6d25679ae67ea5bec7da Mon Sep 17 00:00:00 2001 From: Ben Lowery Date: Wed, 17 Apr 2019 15:36:20 -0400 Subject: [PATCH 18/18] Add MaterialIcons to the playground scope --- client/devdocs/design/playground-scope.js | 1 + 1 file changed, 1 insertion(+) diff --git a/client/devdocs/design/playground-scope.js b/client/devdocs/design/playground-scope.js index 652b1b84c6d4c..a5ec37716c050 100644 --- a/client/devdocs/design/playground-scope.js +++ b/client/devdocs/design/playground-scope.js @@ -81,6 +81,7 @@ export JetpackLogo from 'components/jetpack-logo'; export LanguagePicker from 'components/language-picker'; export ListEnd from 'components/list-end'; export Main from 'components/main'; +export MaterialIcon from 'components/material-icon'; export MarkedLines from 'components/marked-lines'; export Notices from 'components/notice'; export Pagination from 'components/pagination';