Mdi icons instead of fontastic icons

package.json

@@ -13,19 +13,28 @@
     "url": "https://github.com/plotly/react-plotly.js-editor/issues"
   },
   "scripts": {
-    "make:combined-translation-keys": "babel-node utils/findTranslationKeys.js && babel-node utils/combineTranslationKeys.js",
+    "make:combined-translation-keys":
+      "babel-node utils/findTranslationKeys.js && babel-node utils/combineTranslationKeys.js",
     "make:translation-keys": "babel-node utils/findTranslationKeys.js",
-    "make:lib": "mkdirp lib && babel src --out-dir lib --ignore=__tests__/* --source-maps && npm run make:lib:css",
-    "make:lib:css": "mkdirp lib && node-sass src/styles/main.scss > lib/react-plotly.js-editor.css",
-    "make:dist": "mkdirp dist && browserify src/PlotlyEditor.js -o ./dist/PlotlyEditor.js -t [ babelify --presets [ es2015 react ] ] -t browserify-global-shim --standalone createPlotlyComponent && uglifyjs ./dist/PlotlyEditor.js --compress --mangle --output ./dist/PlotlyEditor.min.js --source-map filename=dist/PlotlyEditor.min.js.map && make:dist:css",
-    "make:dist:css": "mkdirp dist && node-sass --output-style compressed src/styles/main.scss > dist/react-plotly.js-editor.css",
-    "prepublishOnly": "npm run make:lib && npm run make:combined-translation-keys",
+    "make:lib":
+      "mkdirp lib && babel src --out-dir lib --ignore=__tests__/* --source-maps && npm run make:lib:css",
+    "make:lib:css":
+      "mkdirp lib && node-sass src/styles/main.scss > lib/react-plotly.js-editor.css",
+    "make:dist":
+      "mkdirp dist && browserify src/PlotlyEditor.js -o ./dist/PlotlyEditor.js -t [ babelify --presets [ es2015 react ] ] -t browserify-global-shim --standalone createPlotlyComponent && uglifyjs ./dist/PlotlyEditor.js --compress --mangle --output ./dist/PlotlyEditor.min.js --source-map filename=dist/PlotlyEditor.min.js.map && make:dist:css",
+    "make:dist:css":
+      "mkdirp dist && node-sass --output-style compressed src/styles/main.scss > dist/react-plotly.js-editor.css",
+    "prepublishOnly":
+      "npm run make:lib && npm run make:combined-translation-keys",
     "lint": "prettier --write \"src/**/*.js\"",
-    "test:lint": "eslint \"src/**/*.js\" && echo -e '\\033[0;32m'PASS'\\033[0m'",
-    "test:pretty": "prettier -l \"src/**/*.js\" && echo -e '\\033[0;32m'PASS'\\033[0m'",
+    "test:lint":
+      "eslint \"src/**/*.js\" && echo -e '\\033[0;32m'PASS'\\033[0m'",
+    "test:pretty":
+      "prettier -l \"src/**/*.js\" && echo -e '\\033[0;32m'PASS'\\033[0m'",
     "test:js": "jest --setupTestFrameworkScriptFile=raf/polyfill",
     "test": "npm run test:lint && npm run test:pretty && npm run test:js",
-    "watch": "babel src --watch --out-dir lib --source-maps | node-sass -w src/styles/main.scss lib/react-plotly.js-editor.css",
+    "watch":
+      "babel src --watch --out-dir lib --source-maps | node-sass -w src/styles/main.scss lib/react-plotly.js-editor.css",
     "watch-test": "jest --watch"
   },
   "keywords": [
@@ -77,6 +86,7 @@
     "draft-js-import-html": "^1.2.1",
     "draft-js-utils": "^1.2.0",
     "fast-isnumeric": "^1.1.1",
+    "plotly-icons": "^1.0.1",
     "plotly.js": "^1.31.2",
     "prop-types": "^15.5.10",
     "raf": "^3.4.0",
@@ -90,9 +100,7 @@
     "react": "React"
   },
   "jest": {
-    "roots": [
-      "<rootDir>/src/"
-    ],
+    "roots": ["<rootDir>/src/"],
     "moduleNameMapper": {
       "^.+\\.css$": "<rootDir>/config/CSSStub.js"
     }

src/components/containers/Fold.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import classnames from 'classnames';
+import {CloseIcon, AngleDownIcon} from 'plotly-icons';
 
 export default class Fold extends Component {
   constructor() {
@@ -27,18 +28,24 @@ export default class Fold extends Component {
       'fold__top--active': !folded,
     });
 
-    const arrowClass = classnames('icon-angle-down', 'fold__top__arrow', {
+    const arrowClass = classnames('fold__top__arrow', {
       'fold__top__arrow--active': !folded,
     });
 
-    const arrowIcon = <i className={arrowClass} />;
+    const arrowIcon = (
+      <div className={arrowClass}>
+        <AngleDownIcon />
+      </div>
+    );
 
     const deleteButton = handleClick =>
       doDelete && (
-        <i
-          className="icon-cancel fold__top__delete js-fold__delete"
+        <div
+          className="fold__top__delete js-fold__delete"
           onClick={handleClick}
-        />
+        >
+          <CloseIcon />
+        </div>
       );
 
     const foldHeader = !hideHeader && (

src/components/containers/MenuPanel.js

@@ -1,7 +1,8 @@
-import React, {Component} from 'react';
+import ModalBox from './ModalBox';
 import PropTypes from 'prop-types';
+import React, {Component} from 'react';
 import classnames from 'classnames';
-import ModalBox from './ModalBox';
+import {QuestionIcon, CogIcon} from 'plotly-icons';
 
 export default class MenuPanel extends Component {
   constructor() {
@@ -11,20 +12,15 @@ export default class MenuPanel extends Component {
     this.togglePanel = this.togglePanel.bind(this);
   }
 
-  menupanelClasses() {
-    if (this.props.iconClass) {
-      return {
-        iconClass: `menupanel__icon ${this.props.iconClass}`,
-        spanClass: 'menupanel__icon-span',
-      };
-    } else if (this.props.question) {
+  getIcon() {
+    if (this.props.question) {
       return {
-        iconClass: 'menupanel__icon icon-question-circle',
+        icon: <QuestionIcon className="menupanel__icon" />,
         spanClass: `menupanel__icon-span menupanel__icon-span--question`,
       };
     }
     return {
-      iconClass: 'menupanel__icon icon-cog',
+      icon: <CogIcon className="menupanel__icon" />,
       spanClass: 'menupanel__icon-span menupanel__icon-span--cog',
     };
   }
@@ -39,13 +35,13 @@ export default class MenuPanel extends Component {
       'menupanel--ownline': this.props.ownline,
     });
 
-    const {iconClass, spanClass} = this.menupanelClasses();
+    const {icon, spanClass} = this.getIcon();
 
     return (
       <div className={containerClass}>
         <span className={spanClass}>
           <span>{this.props.label}</span>
-          <i className={iconClass} onClick={this.togglePanel} />
+          <span onClick={this.togglePanel}>{icon}</span>
         </span>
         {isOpen ? (
           <ModalBox onClose={this.togglePanel}>{this.props.children}</ModalBox>

src/components/widgets/NumericInput.js

@@ -2,6 +2,7 @@ import EditableText from './EditableText';
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import isNumeric from 'fast-isnumeric';
+import {CarretDownIcon, CarretUpIcon} from 'plotly-icons';
 
 export const UP_ARROW = 38;
 export const DOWN_ARROW = 40;
@@ -102,13 +103,13 @@ export default class NumericInput extends Component {
           className="numeric-input__caret js-numeric-increase"
           onClick={this.incrementValue.bind(this, 'increase')}
         >
-          <i className="icon-caret-up numeric-top-caret-modifier" />
+          <CarretUpIcon className="numeric-top-caret-modifier" />
         </div>
         <div
           className="numeric-input__caret js-numeric-decrease"
           onClick={this.incrementValue.bind(this, 'decrease')}
         >
-          <i className="icon-caret-down numeric-bottom-caret-modifier" />
+          <CarretDownIcon className="numeric-bottom-caret-modifier" />
         </div>
       </div>
     );

src/components/widgets/SymbolSelector.js

@@ -2,6 +2,7 @@ import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import ModalBox from '../containers/ModalBox';
+import {CarretDownIcon} from 'plotly-icons';
 
 export default class SymbolSelector extends Component {
   constructor(props) {
@@ -109,8 +110,8 @@ export default class SymbolSelector extends Component {
           <span className="symbol-selector__toggle_option">
             {this.renderActiveOption()}
           </span>
-          <span className="symbol-selector__toggle__caret">
-            <i className="icon-caret-down" />
+          <span>
+            <CarretDownIcon className="symbol-selector__toggle__caret" />
           </span>
         </div>
         {isOpen ? (

src/components/widgets/text_editors/RichText/configuration.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import {INLINE_STYLE} from 'draft-js-utils';
+import {LinkIcon} from 'plotly-icons';
 
 export const SUPERSCRIPT = 'SUPERSCRIPT';
 export const SUBSCRIPT = 'SUBSCRIPT';
@@ -79,7 +80,7 @@ export const INLINE_STYLES = [
   {
     label: (
       <span>
-        <i className="icon-link" />
+        <LinkIcon className="icon-link" />
       </span>
     ),
     value: LINK,

src/lib/bem.js

@@ -43,7 +43,3 @@ export default function bem(block, element, modifiers) {
 
   return out.join(' ');
 }
-
-export function icon(iconName) {
-  return `icon-${iconName}`;
-}

src/lib/index.js

@@ -1,4 +1,4 @@
-import bem, {icon} from './bem';
+import bem from './bem';
 import connectAnnotationToLayout from './connectAnnotationToLayout';
 import connectAxesToLayout from './connectAxesToLayout';
 import connectLayoutToPlot, {getLayoutContext} from './connectLayoutToPlot';
@@ -42,7 +42,6 @@ export {
   findFullTraceIndex,
   getDisplayName,
   getLayoutContext,
-  icon,
   isPlainObject,
   localize,
   localizeString,

src/styles/components/containers/_menupanel.scss

@@ -18,4 +18,8 @@
   padding-left: 6px;
   padding-right: 6px;
   vertical-align: middle;
+  // gets overridden by user agent stylesheet otherwise
+  width: 15px !important;
+  height: 15px !important;
+  fill: $color-link-light !important;
 }

src/styles/components/fields/_symbolselector.scss

@@ -3,7 +3,7 @@
   border-radius: 4px;
   width: 80px;
   cursor: pointer;
-  padding: $quarter-spacing-unit 10px;
+  padding: 6px 6px 3px 6px;
   @include clearfix();
 }
 
@@ -17,13 +17,17 @@
 
 .symbol-selector__toggle__caret {
   float: right;
-  color: $color-secondary-text;
+  fill: $color-secondary-text;
+  padding-top: 3px;
+  // prevent user agent override
+  width: 13px !important;
+  height: 13px !important;
 }
 
 .symbol-selector__menu {
   max-width: 225px;
   position: absolute;
-  @include z-index("orbit");
+  @include z-index('orbit');
   border: 1px solid $color-border;
   padding: $font-size;
   box-shadow: 2px 2px $font-size $color-border-secondary;

src/styles/components/widgets/_multi-format-text-editor.scss

@@ -3,7 +3,6 @@
 $multi-format-editor-background: #fafbfd;
 
 .multi-format-editor {
-
   * {
     box-sizing: border-box;
   }
@@ -53,6 +52,10 @@ $multi-format-editor-background: #fafbfd;
         .icon-link {
           transform: translateY(3px);
           display: inline-block;
+          fill: $color-text;
+          // prevent user agent override
+          width: 15px !important;
+          height: 15px !important;
         }
       }
     }
@@ -95,7 +98,7 @@ $multi-format-editor-background: #fafbfd;
     border-top: 1px solid $color-border;
     width: 100%;
     display: block;
-    color:$color-text;
+    color: $color-text;
   }
 
   &.selected {
@@ -124,7 +127,7 @@ $multi-format-editor-background: #fafbfd;
 
 .confirmation-panel__message {
   line-height: 20px;
-  &-primary{
+  &-primary {
     font-weight: $font-weight-semibold;
     color: $color-text;
   }

src/styles/components/widgets/_numeric-input.scss

@@ -40,8 +40,20 @@
   background-color: #f8f8f9;
   border: 1px solid #bec8d9;
   border-radius: 1px;
-  width: $font-size;
-  height: $font-size;
   line-height: 12px;
   text-align: center;
 }
+
+.numeric-top-caret-modifier {
+  // to prevent user agent override
+  width: 13px !important;
+  height: 13px !important;
+  fill: $color-text !important;
+}
+
+.numeric-bottom-caret-modifier {
+  // to prevent user agent override
+  width: 13px !important;
+  height: 13px !important;
+  fill: $color-text !important;
+}

src/styles/main.scss

@@ -6,17 +6,14 @@
 .plotly-editor {
   position: relative;
   width: $layout-panel-width;
-  flex-shrink:0;
+  flex-shrink: 0;
   overflow: hidden;
   display: flex;
   font-family: $ff-default;
   @import 'components/main';
-  @import 'icons/main';
   @include font-smoothing;
-  &__wrapper{
+  &__wrapper {
     display: flex;
     flex-grow: 1;
   }
 }
-
-@import 'shame';