remove child.type checks & fix up trace-names (#307)

* remove child.type checks

* tweaking trace-name ux

* update button css to take up available space if in sidebar

* remove unused properties

* remove var

Author: nicolaskruchten

src/components/containers/Fold.js

@@ -96,7 +96,10 @@ class Fold extends Component {
         <div className="fold__top__arrow-title">
           {arrowIcon}
           {icon}
-          <div className="fold__top__title">{name}</div>
+          <div
+            className="fold__top__title"
+            dangerouslySetInnerHTML={{__html: name}}
+          />
         </div>
         {deleteButton(deleteContainer)}
       </div>

src/components/containers/MenuPanel.js

@@ -68,3 +68,5 @@ MenuPanel.propTypes = {
   question: PropTypes.bool,
   show: PropTypes.bool,
 };
+
+MenuPanel.plotly_editor_traits = {is_menu_panel: true};

src/components/containers/Section.js

@@ -1,5 +1,4 @@
 import Info from '../fields/Info';
-import MenuPanel from './MenuPanel';
 import React, {Component, cloneElement} from 'react';
 import PropTypes from 'prop-types';
 import {
@@ -28,7 +27,7 @@ class Section extends Component {
     this.sectionVisible = isVisible === true;
 
     this.children = React.Children.map(nextProps.children, child => {
-      if (child.type === MenuPanel) {
+      if ((child.type.plotly_editor_traits || {}).is_menu_panel) {
         // Process the first menuPanel. Ignore the rest. MenuPanel does
         // not affect visibility.
         if (!this.menuPanel) {

src/components/containers/SingleSidebarItem.js

@@ -1,18 +1,10 @@
 import PropTypes from 'prop-types';
-import React, {cloneElement, Component} from 'react';
-import Button from '../widgets/Button';
+import React, {Component} from 'react';
 
 export default class SingleSidebarItem extends Component {
   render() {
-    let {children} = this.props;
-    children = React.Children.map(children, child => {
-      if (child.type === Button) {
-        return cloneElement(child, {className: 'button--menu'});
-      }
-      return child;
-    });
-    return children ? (
-      <div className="sidebar__item--single">{children}</div>
+    return this.props.children ? (
+      <div className="sidebar__item--single">{this.props.children}</div>
     ) : null;
   }
 }

src/default_panels/GraphCreatePanel.js

@@ -17,8 +17,8 @@ import {localize} from '../lib';
 const GraphCreatePanel = ({localize: _}) => {
   return (
     <TraceAccordion canAdd>
-      <TraceSelector label={_('Type')} attr="type" show />
       <TextEditor label={_('Name')} attr="name" richTextOnly />
+      <TraceSelector label={_('Type')} attr="type" show />
 
       <Section name={_('Data')}>
         <DataSelector label={_('Labels')} attr="labels" />

src/styles/components/widgets/_button.scss

@@ -31,7 +31,6 @@ button {
     position: relative;
     overflow: hidden;
   }
-
   &__label {
     padding-left: var(--spacing-half-unit);
   }
@@ -51,9 +50,15 @@ button {
       padding-left: 0;
     }
   }
-  &--menu {
-    min-width: 75px;
+
+  // If a button is placed in the sidebar,
+  // it should grow to the width of the available space.
+  @at-root .sidebar .button {
+    width: calc(100% - var(--spacing-base-unit));
+    margin-left: var(--spacing-half-unit);
+    margin-right: var(--spacing-half-unit);
   }
+
   &--default {
     @include button();
   }