use plotly-icons instead of fontastic

Author: VeraZab

package-lock.json

@@ -77,6 +77,7 @@
     "draft-js-import-html": "^1.2.1",
     "draft-js-utils": "^1.2.0",
     "fast-isnumeric": "^1.1.1",
+    "plotly-icons": "^1.0.0",
     "plotly.js": "^1.31.2",
     "prop-types": "^15.5.10",
     "raf": "^3.4.0",

package.json

@@ -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/Fold.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',
+        iconType: <QuestionIcon className="menupanel__icon" />,
         spanClass: `menupanel__icon-span menupanel__icon-span--question`,
       };
     }
     return {
-      iconClass: 'menupanel__icon icon-cog',
+      iconType: <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 {iconType, 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}>{iconType}</span>
         </span>
         {isOpen ? (
           <ModalBox onClose={this.togglePanel}>{this.props.children}</ModalBox>

src/components/containers/MenuPanel.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/NumericInput.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/SymbolSelector.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/components/widgets/text_editors/RichText/configuration.js

@@ -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/containers/_menupanel.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/fields/_symbolselector.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/_multi-format-text-editor.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/components/widgets/_numeric-input.scss

@@ -5531,6 +5531,12 @@ planar-graph-to-polyline@^1.0.0:
     two-product "^1.0.0"
     uniq "^1.0.0"
 
+plotly-icons@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/plotly-icons/-/plotly-icons-1.0.0.tgz#161ca8354f8b32fe97235b1cb63ed71a81f42378"
+  dependencies:
+    mdi-react "^2.1.19"
+
 plotly.js@^1.31.2:
   version "1.31.2"
   resolved "https://registry.yarnpkg.com/plotly.js/-/plotly.js-1.31.2.tgz#1b4100bc60957fe7589ce72cfccd4ee499dfaedb"