Icon fixes

Author: dmt0

src/components/containers/Modal.js

@@ -5,12 +5,12 @@ import PropTypes from 'prop-types';
 
 const ModalHeader = ({title, handleClose}) => (
   <div className="modal__header">
-    {title ? <div className="modal__header__title">{title}</div> : null}
-    {handleClose ? (
+    {Boolean(title) && <div className="modal__header__title">{title}</div>}
+    {Boolean(handleClose) && (
       <div className="modal__header__close" onClick={handleClose ? () => handleClose() : null}>
-        <Icon path={mdiClose} />
+        <Icon size="24px" path={mdiClose} />
       </div>
-    ) : null}
+    )}
   </div>
 );
 

src/components/containers/PanelEmpty.js

@@ -6,7 +6,7 @@ import {bem} from 'lib';
 export const PanelMessage = ({children, heading, icon: PlotlyIcon}) => (
   <div className="panel__empty__message">
     <div className="panel__empty__message__icon">
-      {PlotlyIcon ? <PlotlyIcon /> : <Icon path={mdiChartLine} size="24px" />}
+      {PlotlyIcon ? <PlotlyIcon /> : <Icon size="24px" path={mdiChartLine} />}
     </div>
     {Boolean(heading) && <div className="panel__empty__message__heading">{heading}</div>}
     <div className="panel__empty__message__content">{children}</div>

src/components/fields/Field.js

@@ -8,7 +8,7 @@ import {getMultiValueText} from 'lib/constants';
 
 export const FieldDelete = ({onClick}) => (
   <div className="field__delete" onClick={onClick}>
-    <Icon path={mdiClose} />
+    <Icon size="24px" path={mdiClose} />
   </div>
 );
 

src/components/fields/TraceSelector.js

@@ -141,7 +141,8 @@ class TraceSelector extends Component {
             </div>
             {exampleOnClick && (
               <div className="js-test-info" style={{padding: '16px 0 12px 0'}}>
-                See basic usage <a onClick={exampleOnClick}>example</a>.
+                {_('See basic usage ')}
+                <a onClick={exampleOnClick}>{_('example')}</a>.
               </div>
             )}
           </Field>

src/components/widgets/Button.js

@@ -10,7 +10,7 @@ const Button = ({children, className, icon, label, variant, ...rest}) => (
     <div className={bem('button', 'wrapper')}>
       {Boolean(icon) && (
         <div className={bem('button', 'icon')}>
-          <Icon path={icon} size="24px" />{' '}
+          <Icon size="24px" path={icon} />
         </div>
       )}
       <div className="button__label">{label || children}</div>

src/components/widgets/CheckboxGroup.js

@@ -16,7 +16,7 @@ class CheckboxGroup extends Component {
   }
 
   handleChange(i) {
-    var newOptions = this.props.options.slice();
+    const newOptions = this.props.options.slice();
     newOptions[i] = Object.assign(newOptions[i], {
       checked: !newOptions[i].checked,
     });

src/components/widgets/RadioBlocks.js

@@ -35,7 +35,7 @@ class RadioBlocks extends Component {
     return (
       <div className={optionClass} key={value} onClick={() => this.handleChange(value)}>
         {Icon ? <Icon className="radio-block__icon" /> : null}
-        {label ? <span>{label}</span> : null}
+        {label ? <>{label}</> : null}
       </div>
     );
   }

src/components/widgets/SymbolSelector.js

@@ -53,13 +53,11 @@ export default class SymbolSelector extends Component {
     };
 
     return (
-      <span>
-        <svg width="18" height="18">
-          <g transform="translate(8,8)">
-            <path d={currentSymbol.label} style={symbolStyle} />
-          </g>
-        </svg>
-      </span>
+      <svg width="18" height="18">
+        <g transform="translate(8,8)">
+          <path d={currentSymbol.label} style={symbolStyle} />
+        </g>
+      </svg>
     );
   }
 
@@ -100,9 +98,7 @@ export default class SymbolSelector extends Component {
       <div>
         <div className={toggleClass} onClick={this.togglePanel}>
           <span className="symbol-selector__toggle_option">{this.renderActiveOption()}</span>
-          <span>
-            <Icon path={mdiMenuDown} className="symbol-selector__toggle__caret" />
-          </span>
+          <Icon path={mdiMenuDown} className="symbol-selector__toggle__caret" />
         </div>
         {isOpen && this.renderOptions()}
       </div>

src/components/widgets/TextArea.js

@@ -29,16 +29,14 @@ export default class TextArea extends Component {
 
   render() {
     return (
-      <span>
-        <textarea
-          value={this.state.value}
-          rows={this.props.visibleRows}
-          cols={this.props.areaWidth}
-          placeholder={this.props.placeholder}
-          onChange={this.onChange}
-          className={this.props.textareaClass}
-        />
-      </span>
+      <textarea
+        value={this.state.value}
+        rows={this.props.visibleRows}
+        cols={this.props.areaWidth}
+        placeholder={this.props.placeholder}
+        onChange={this.onChange}
+        className={this.props.textareaClass}
+      />
     );
   }
 }

src/components/widgets/TraceTypeSelector.js

@@ -106,42 +106,37 @@ class TraceTypeSelector extends Component {
       {
         label: _('Charts like this by Plotly users.'),
         onClick:
-          chartHelp[value] &&
-          chartHelp[value].feedQuery &&
+          chartHelp[value]?.feedQuery &&
           ((e) =>
             onClick(e, () =>
               window.open(
                 `https://plot.ly/feed/?q=${chartHelp[value] ? chartHelp[value].feedQuery : value}`,
                 '_blank'
               )
             )),
-        icon: <Icon path={mdiMagnify} />,
+        icon: <Icon size="16px" path={mdiMagnify} />,
       },
       {
         label: _('View tutorials on this chart type.'),
         onClick:
-          chartHelp[value] &&
-          chartHelp[value].helpDoc &&
+          chartHelp[value]?.helpDoc &&
           ((e) => onClick(e, () => window.open(chartHelp[value].helpDoc, '_blank'))),
-        icon: <Icon path={mdiApps} />,
+        icon: <Icon size="16px" path={mdiApps} />,
       },
       {
         label: _('See a basic example.'),
-        onClick:
-          chartHelp[value] &&
-          chartHelp[value].examplePlot &&
-          ((e) => onClick(e, chartHelp[value].examplePlot)),
-        icon: <Icon path={mdiPoll} />,
+        onClick: chartHelp[value]?.examplePlot && ((e) => onClick(e, chartHelp[value].examplePlot)),
+        icon: <Icon size="16px" path={mdiPoll} />,
       },
     ];
   }
 
   renderCategories() {
-    const {fullValue} = this.props;
-    const {localize: _, chartHelp} = this.context;
     const {
+      fullValue,
       traceTypesConfig: {traces, categories, complex},
     } = this.props;
+    const {localize: _, chartHelp} = this.context;
 
     return categories(_).map((category, i) => {
       const items = traces(_)
@@ -182,11 +177,11 @@ class TraceTypeSelector extends Component {
   }
 
   renderSingleBlock() {
-    const {fullValue} = this.props;
-    const {localize: _} = this.context;
     const {
+      fullValue,
       traceTypesConfig: {traces, complex},
     } = this.props;
+    const {localize: _} = this.context;
 
     return (
       <div className="trace-grid-single-block">

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

@@ -64,25 +64,25 @@ export const INLINE_STYLES = [
   },
   {
     label: (
-      <span>
+      <>
         x<span style={STYLE_MAP[SUBSCRIPT]}>2</span>
-      </span>
+      </>
     ),
     value: SUBSCRIPT,
   },
   {
     label: (
-      <span>
+      <>
         x<span style={STYLE_MAP[SUPERSCRIPT]}>2</span>
-      </span>
+      </>
     ),
     value: SUPERSCRIPT,
   },
   {
     label: (
-      <span>
+      <>
         <Icon path={mdiLinkVariant} className="icon-link" />
-      </span>
+      </>
     ),
     value: LINK,
   },