From 96c399f807c89db78ed7e0c0ce5cf5b948472d4b Mon Sep 17 00:00:00 2001
From: VeraZab <vera.zabeida@gmail.com>
Date: Mon, 26 Mar 2018 22:42:50 -0400
Subject: [PATCH 1/6] Rename Panel/Fold/Section->
 PlotlyPanel/PlotlyFold/PlotlySection

---
 examples/custom/src/CustomEditor.js           |  20 +-
 src/__tests__/PlotlyEditor.test.js            |   4 +-
 .../containers/AnnotationAccordion.js         |   4 +-
 src/components/containers/AxesFold.js         |   6 +-
 src/components/containers/ImageAccordion.js   |   4 +-
 .../containers/{Fold.js => PlotlyFold.js}     |  16 +-
 .../containers/{Panel.js => PlotlyPanel.js}   |  18 +-
 .../{Section.js => PlotlySection.js}          |  37 +-
 .../containers/RangeSelectorAccordion.js      |  12 +-
 src/components/containers/SectionHeader.js    |  16 -
 src/components/containers/ShapeAccordion.js   |   4 +-
 src/components/containers/SliderAccordion.js  |   4 +-
 src/components/containers/TraceAccordion.js   |  16 +-
 .../containers/TraceMarkerSection.js          |   6 +-
 .../containers/UpdateMenuAccordion.js         |   4 +-
 .../__tests__/AnnotationAccordion-test.js     |   8 +-
 .../containers/__tests__/Fold-test.js         |  22 +-
 .../containers/__tests__/Layout-test.js       |  14 +-
 ...{Section-test.js => PlotlySection-test.js} |  28 +-
 .../__tests__/TraceAccordion-test.js          |   6 +-
 .../containers/__tests__/visibility-test.js   | 546 +++++++++++-------
 src/components/containers/derived.js          |  10 +-
 src/components/containers/index.js            |  11 +-
 .../fields/__tests__/AnnotationRef-test.js    |   6 +-
 .../fields/__tests__/CanvasSize-test.js       |  12 +-
 src/components/fields/__tests__/Radio-test.js |   4 +-
 .../fields/__tests__/TraceSelector-test.js    |   4 +-
 src/components/index.js                       |   8 +-
 src/default_panels/GraphCreatePanel.js        |  38 +-
 src/default_panels/StyleAxesPanel.js          |  66 +--
 src/default_panels/StyleColorbarsPanel.js     |  76 +--
 src/default_panels/StyleImagesPanel.js        |  10 +-
 src/default_panels/StyleLayoutPanel.js        |  24 +-
 src/default_panels/StyleLegendPanel.js        |  32 +-
 src/default_panels/StyleNotesPanel.js         |  18 +-
 src/default_panels/StyleShapesPanel.js        |  18 +-
 src/default_panels/StyleSlidersPanel.js       |  22 +-
 src/default_panels/StyleTracesPanel.js        |  65 ++-
 src/default_panels/StyleUpdateMenusPanel.js   |  22 +-
 src/index.js                                  |   8 +-
 src/lib/__tests__/connectLayoutToPlot-test.js |  22 +-
 src/lib/__tests__/connectTraceToPlot-test.js  |  24 +-
 .../nestedContainerConnections-test.js        |  16 +-
 43 files changed, 742 insertions(+), 569 deletions(-)
 rename src/components/containers/{Fold.js => PlotlyFold.js} (92%)
 rename src/components/containers/{Panel.js => PlotlyPanel.js} (91%)
 rename src/components/containers/{Section.js => PlotlySection.js} (64%)
 delete mode 100644 src/components/containers/SectionHeader.js
 rename src/components/containers/__tests__/{Section-test.js => PlotlySection-test.js} (85%)

diff --git a/examples/custom/src/CustomEditor.js b/examples/custom/src/CustomEditor.js
index 80592b790..e646d84a3 100644
--- a/examples/custom/src/CustomEditor.js
+++ b/examples/custom/src/CustomEditor.js
@@ -3,13 +3,13 @@ import {
   Flaglist,
   ColorPicker,
   ColorscalePicker,
-  Fold,
+  PlotlyFold,
   PanelMenuWrapper,
   TextEditor,
   Radio,
   Dropdown,
   Info,
-  Section,
+  PlotlySection,
   Numeric,
   LayoutPanel,
   Button,
@@ -22,16 +22,16 @@ export default class CustomEditor extends Component {
     return (
       <PanelMenuWrapper>
         <TraceAccordion group="Traces" name="Style">
-          <Section name="Colorscale" attr="marker.colorscale">
+          <PlotlySection name="Colorscale" attr="marker.colorscale">
             <ColorscalePicker label="Colorscale" attr="marker.colorscale" />
-          </Section>
+          </PlotlySection>
         </TraceAccordion>
 
         <LayoutPanel group="Layout" name="Style">
-          <Fold name="Fold">
+          <PlotlyFold name="PlotlyFold">
             {
-              // At least one of the direct children of Fold must have an attr prop
-              // for the Fold to display itself
+              // At least one of the direct children of PlotlyFold must have an attr prop
+              // for the PlotlyFold to display itself
             }
             <Info attr="title">
               <p>
@@ -42,7 +42,7 @@ export default class CustomEditor extends Component {
                 This is an <code>Info</code> component.
               </p>
             </Info>
-            <Section name="Section">
+            <PlotlySection name="PlotlySection">
               <Numeric label="Numeric" attr="width" show units="units" />
               <Dropdown
                 label="Dropdown"
@@ -80,8 +80,8 @@ export default class CustomEditor extends Component {
               />
               <TextEditor attr="title" label="TextEditor htmlOnly" htmlOnly />
               <TextEditor attr="title" label="TextEditor latexOnly" latexOnly />
-            </Section>
-          </Fold>
+            </PlotlySection>
+          </PlotlyFold>
         </LayoutPanel>
         <SingleSidebarItem>
           <Button
diff --git a/src/__tests__/PlotlyEditor.test.js b/src/__tests__/PlotlyEditor.test.js
index ab05654ea..4c44cfcde 100644
--- a/src/__tests__/PlotlyEditor.test.js
+++ b/src/__tests__/PlotlyEditor.test.js
@@ -1,4 +1,4 @@
-import PlotlyEditor, {Fold} from '..';
+import PlotlyEditor, {PlotlyFold} from '..';
 import {configure, mount} from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import React, {Component} from 'react';
@@ -54,7 +54,7 @@ describe('<TestApp>', () => {
   });
 
   it('Can create and delete traces', done => {
-    expect(app.find(Fold).length).toEqual(0);
+    expect(app.find(PlotlyFold).length).toEqual(0);
 
     app
       .find('.js-add-button')
diff --git a/src/components/containers/AnnotationAccordion.js b/src/components/containers/AnnotationAccordion.js
index 1a9f170d0..a2309874f 100644
--- a/src/components/containers/AnnotationAccordion.js
+++ b/src/components/containers/AnnotationAccordion.js
@@ -1,10 +1,10 @@
-import Fold from './Fold';
+import PlotlyFold from './PlotlyFold';
 import TraceRequiredPanel from './TraceRequiredPanel';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {connectAnnotationToLayout, localize} from 'lib';
 
-const AnnotationFold = connectAnnotationToLayout(Fold);
+const AnnotationFold = connectAnnotationToLayout(PlotlyFold);
 
 class AnnotationAccordion extends Component {
   render() {
diff --git a/src/components/containers/AxesFold.js b/src/components/containers/AxesFold.js
index 0d763af0e..1af77d744 100644
--- a/src/components/containers/AxesFold.js
+++ b/src/components/containers/AxesFold.js
@@ -1,5 +1,5 @@
 import AxesSelector from '../fields/AxesSelector';
-import Fold from './Fold';
+import PlotlyFold from './PlotlyFold';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {connectAxesToLayout} from 'lib';
@@ -8,10 +8,10 @@ class AxesFold extends Component {
   render() {
     const {children, options} = this.props;
     return options.length && children ? (
-      <Fold {...this.props}>
+      <PlotlyFold {...this.props}>
         {options.length === 1 ? null : <AxesSelector axesOptions={options} />}
         {children}
-      </Fold>
+      </PlotlyFold>
     ) : null;
   }
 }
diff --git a/src/components/containers/ImageAccordion.js b/src/components/containers/ImageAccordion.js
index 35bd65f83..b5602d95c 100644
--- a/src/components/containers/ImageAccordion.js
+++ b/src/components/containers/ImageAccordion.js
@@ -1,10 +1,10 @@
-import Fold from './Fold';
+import PlotlyFold from './PlotlyFold';
 import TraceRequiredPanel from './TraceRequiredPanel';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {connectImageToLayout, localize} from 'lib';
 
-const ImageFold = connectImageToLayout(Fold);
+const ImageFold = connectImageToLayout(PlotlyFold);
 
 class ImageAccordion extends Component {
   render() {
diff --git a/src/components/containers/Fold.js b/src/components/containers/PlotlyFold.js
similarity index 92%
rename from src/components/containers/Fold.js
rename to src/components/containers/PlotlyFold.js
index 4cb2c69d7..2715b5dfa 100644
--- a/src/components/containers/Fold.js
+++ b/src/components/containers/PlotlyFold.js
@@ -10,7 +10,7 @@ import {
   striptags,
 } from 'lib';
 
-class Fold extends Component {
+class PlotlyFold extends Component {
   constructor(props, context) {
     super(props, context);
 
@@ -136,9 +136,9 @@ class Fold extends Component {
   }
 }
 
-Fold.plotly_editor_traits = {foldable: true};
+PlotlyFold.plotly_editor_traits = {foldable: true};
 
-Fold.propTypes = {
+PlotlyFold.propTypes = {
   canDelete: PropTypes.bool,
   children: PropTypes.node,
   className: PropTypes.string,
@@ -151,11 +151,17 @@ Fold.propTypes = {
   name: PropTypes.string,
 };
 
-Fold.contextTypes = Object.assign(
+PlotlyFold.contextTypes = Object.assign(
   {
     deleteContainer: PropTypes.func,
   },
   containerConnectedContextTypes
 );
 
-export default localize(Fold);
+export default localize(PlotlyFold);
+
+// just to keep naming consistent
+export class Fold extends PlotlyFold {}
+Fold.plotly_editor_traits = {
+  foldable: true,
+};
diff --git a/src/components/containers/Panel.js b/src/components/containers/PlotlyPanel.js
similarity index 91%
rename from src/components/containers/Panel.js
rename to src/components/containers/PlotlyPanel.js
index e24c8632e..4a89cee6a 100644
--- a/src/components/containers/Panel.js
+++ b/src/components/containers/PlotlyPanel.js
@@ -26,7 +26,7 @@ PanelErrorImpl.propTypes = {
 
 const PanelError = localize(PanelErrorImpl);
 
-class Panel extends Component {
+class PlotlyPanel extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -123,23 +123,29 @@ class Panel extends Component {
   }
 }
 
-Panel.plotly_editor_traits = {no_visibility_forcing: true};
+PlotlyPanel.plotly_editor_traits = {no_visibility_forcing: true};
 
-Panel.propTypes = {
+PlotlyPanel.propTypes = {
   children: PropTypes.node,
   addAction: PropTypes.object,
   showExpandCollapse: PropTypes.bool,
   noPadding: PropTypes.bool,
 };
 
-Panel.defaultProps = {
+PlotlyPanel.defaultProps = {
   showExpandCollapse: true,
 };
 
-Panel.contextTypes = {
+PlotlyPanel.contextTypes = {
   layout: PropTypes.object,
   onUpdate: PropTypes.func,
   updateContainer: PropTypes.func,
 };
 
-export default Panel;
+export default PlotlyPanel;
+
+export class Panel extends PlotlyPanel {}
+
+Panel.plotly_editor_traits = {
+  no_visibility_forcing: false,
+};
diff --git a/src/components/containers/Section.js b/src/components/containers/PlotlySection.js
similarity index 64%
rename from src/components/containers/Section.js
rename to src/components/containers/PlotlySection.js
index f196a2ec5..b82c0c627 100644
--- a/src/components/containers/Section.js
+++ b/src/components/containers/PlotlySection.js
@@ -5,9 +5,28 @@ import {
   localize,
   unpackPlotProps,
 } from '../../lib';
-import SectionHeader from './SectionHeader';
 
-class Section extends Component {
+export class Section extends Component {
+  render() {
+    return (
+      <div className="section">
+        <div className="section__heading">
+          <div className="section__heading__text">{this.props.name}</div>
+        </div>
+        {this.props.children}
+      </div>
+    );
+  }
+}
+
+Section.plotly_editor_traits = {no_visibility_forcing: false};
+Section.propTypes = {
+  children: PropTypes.node,
+  name: PropTypes.string,
+  attr: PropTypes.string,
+};
+
+class PlotlySection extends Section {
   constructor(props, context) {
     super(props, context);
 
@@ -52,20 +71,24 @@ class Section extends Component {
     }
     return (
       <div className="section">
-        {this.props.name && <SectionHeader name={this.props.name} />}
+        {this.props.name ? (
+          <div className="section__heading">
+            <div className="section__heading__text">{this.props.name}</div>
+          </div>
+        ) : null}
         {this.props.children}
       </div>
     );
   }
 }
 
-Section.plotly_editor_traits = {no_visibility_forcing: true};
+PlotlySection.plotly_editor_traits = {no_visibility_forcing: true};
 
-Section.propTypes = {
+PlotlySection.propTypes = {
   children: PropTypes.node,
   name: PropTypes.string,
   attr: PropTypes.string,
 };
 
-Section.contextTypes = containerConnectedContextTypes;
-export default localize(Section);
+PlotlySection.contextTypes = containerConnectedContextTypes;
+export default localize(PlotlySection);
diff --git a/src/components/containers/RangeSelectorAccordion.js b/src/components/containers/RangeSelectorAccordion.js
index 6e0ba93fc..cd695550e 100644
--- a/src/components/containers/RangeSelectorAccordion.js
+++ b/src/components/containers/RangeSelectorAccordion.js
@@ -1,10 +1,10 @@
-import Fold from './Fold';
-import Panel from './Panel';
+import PlotlyFold from './PlotlyFold';
+import PlotlyPanel from './PlotlyPanel';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {connectRangeSelectorToAxis, localize} from 'lib';
 
-const RangeSelectorFold = connectRangeSelectorToAxis(Fold);
+const RangeSelectorFold = connectRangeSelectorToAxis(PlotlyFold);
 
 class RangeSelectorAccordion extends Component {
   render() {
@@ -52,7 +52,11 @@ class RangeSelectorAccordion extends Component {
       },
     };
 
-    return <Panel addAction={addAction}>{content ? content : null}</Panel>;
+    return (
+      <PlotlyPanel addAction={addAction}>
+        {content ? content : null}
+      </PlotlyPanel>
+    );
   }
 }
 
diff --git a/src/components/containers/SectionHeader.js b/src/components/containers/SectionHeader.js
deleted file mode 100644
index 96e5ed93f..000000000
--- a/src/components/containers/SectionHeader.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-
-export default class SectionHeader extends Component {
-  render() {
-    return (
-      <div className="section__heading">
-        <div className="section__heading__text">{this.props.name}</div>
-      </div>
-    );
-  }
-}
-
-SectionHeader.propTypes = {
-  name: PropTypes.string,
-};
diff --git a/src/components/containers/ShapeAccordion.js b/src/components/containers/ShapeAccordion.js
index 43f8db002..f419b9117 100644
--- a/src/components/containers/ShapeAccordion.js
+++ b/src/components/containers/ShapeAccordion.js
@@ -1,10 +1,10 @@
-import Fold from './Fold';
+import PlotlyFold from './PlotlyFold';
 import TraceRequiredPanel from './TraceRequiredPanel';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {connectShapeToLayout, localize} from 'lib';
 
-const ShapeFold = connectShapeToLayout(Fold);
+const ShapeFold = connectShapeToLayout(PlotlyFold);
 
 class ShapeAccordion extends Component {
   render() {
diff --git a/src/components/containers/SliderAccordion.js b/src/components/containers/SliderAccordion.js
index 613325fbf..7b6e134fb 100644
--- a/src/components/containers/SliderAccordion.js
+++ b/src/components/containers/SliderAccordion.js
@@ -1,10 +1,10 @@
-import Fold from './Fold';
+import PlotlyFold from './PlotlyFold';
 import TraceRequiredPanel from './TraceRequiredPanel';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {connectSliderToLayout, localize} from 'lib';
 
-const SliderFold = connectSliderToLayout(Fold);
+const SliderFold = connectSliderToLayout(PlotlyFold);
 
 class SliderAccordion extends Component {
   render() {
diff --git a/src/components/containers/TraceAccordion.js b/src/components/containers/TraceAccordion.js
index 8dd5a8a1a..d5695773b 100644
--- a/src/components/containers/TraceAccordion.js
+++ b/src/components/containers/TraceAccordion.js
@@ -1,13 +1,13 @@
-import Fold from './Fold';
+import PlotlyFold from './PlotlyFold';
 import TraceRequiredPanel from './TraceRequiredPanel';
-import Panel from './Panel';
+import PlotlyPanel from './PlotlyPanel';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {EDITOR_ACTIONS} from 'lib/constants';
 import {connectTraceToPlot, localize, plotlyTraceToCustomTrace} from 'lib';
 import {Tab, Tabs, TabList, TabPanel} from 'react-tabs';
 
-const TraceFold = connectTraceToPlot(Fold);
+const TraceFold = connectTraceToPlot(PlotlyFold);
 
 class TraceAccordion extends Component {
   render() {
@@ -47,9 +47,9 @@ class TraceAccordion extends Component {
         },
       };
       return (
-        <Panel addAction={addAction}>
+        <PlotlyPanel addAction={addAction}>
           {individualTraces ? individualTraces : null}
-        </Panel>
+        </PlotlyPanel>
       );
     }
     const tracesByGroup = data.reduce((allTraces, nextTrace, index) => {
@@ -84,10 +84,12 @@ class TraceAccordion extends Component {
               <Tab>{_('Individual')}</Tab>
             </TabList>
             <TabPanel>
-              <Panel>{groupedTraces ? groupedTraces : null}</Panel>
+              <PlotlyPanel>{groupedTraces ? groupedTraces : null}</PlotlyPanel>
             </TabPanel>
             <TabPanel>
-              <Panel>{individualTraces ? individualTraces : null}</Panel>
+              <PlotlyPanel>
+                {individualTraces ? individualTraces : null}
+              </PlotlyPanel>
             </TabPanel>
           </Tabs>
         </TraceRequiredPanel>
diff --git a/src/components/containers/TraceMarkerSection.js b/src/components/containers/TraceMarkerSection.js
index 3fc4b5359..8a25e7ec8 100644
--- a/src/components/containers/TraceMarkerSection.js
+++ b/src/components/containers/TraceMarkerSection.js
@@ -1,4 +1,4 @@
-import Section from './Section';
+import PlotlySection from './PlotlySection';
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import localize from 'lib/localize';
@@ -24,7 +24,9 @@ class TraceMarkerSection extends Component {
   }
 
   render() {
-    return <Section name={this.name}>{this.props.children}</Section>;
+    return (
+      <PlotlySection name={this.name}>{this.props.children}</PlotlySection>
+    );
   }
 }
 
diff --git a/src/components/containers/UpdateMenuAccordion.js b/src/components/containers/UpdateMenuAccordion.js
index ff036a4df..16473955c 100644
--- a/src/components/containers/UpdateMenuAccordion.js
+++ b/src/components/containers/UpdateMenuAccordion.js
@@ -1,10 +1,10 @@
-import Fold from './Fold';
+import PlotlyFold from './PlotlyFold';
 import TraceRequiredPanel from './TraceRequiredPanel';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {connectUpdateMenuToLayout, localize} from 'lib';
 
-const UpdateMenuFold = connectUpdateMenuToLayout(Fold);
+const UpdateMenuFold = connectUpdateMenuToLayout(PlotlyFold);
 
 class UpdateMenuAccordion extends Component {
   render() {
diff --git a/src/components/containers/__tests__/AnnotationAccordion-test.js b/src/components/containers/__tests__/AnnotationAccordion-test.js
index 095b65ba2..52ae052fd 100644
--- a/src/components/containers/__tests__/AnnotationAccordion-test.js
+++ b/src/components/containers/__tests__/AnnotationAccordion-test.js
@@ -1,13 +1,13 @@
 import React from 'react';
-import {AnnotationAccordion, Panel, Fold} from '..';
+import {AnnotationAccordion, PlotlyPanel, PlotlyFold} from '..';
 import {Numeric} from '../../fields';
 import {TestEditor, fixtures, mount} from 'lib/test-utils';
 import {connectLayoutToPlot} from 'lib';
 
-const LayoutPanel = connectLayoutToPlot(Panel);
+const LayoutPanel = connectLayoutToPlot(PlotlyPanel);
 
 describe('<AnnotationAccordion>', () => {
-  it('generates annotation Folds with name == text', () => {
+  it('generates annotation PlotlyFolds with name == text', () => {
     const fixture = fixtures.scatter({
       layout: {annotations: [{text: 'hodor'}, {text: 'rodoh'}]},
     });
@@ -20,7 +20,7 @@ describe('<AnnotationAccordion>', () => {
           </AnnotationAccordion>
         </LayoutPanel>
       </TestEditor>
-    ).find(Fold);
+    ).find(PlotlyFold);
 
     expect(folds.length).toBe(2);
     expect(folds.at(0).prop('name')).toBe('hodor');
diff --git a/src/components/containers/__tests__/Fold-test.js b/src/components/containers/__tests__/Fold-test.js
index 753c9b4eb..0e72fea0c 100644
--- a/src/components/containers/__tests__/Fold-test.js
+++ b/src/components/containers/__tests__/Fold-test.js
@@ -1,31 +1,31 @@
 import {Numeric} from '../../fields';
-import {Fold, Panel} from '..';
+import {PlotlyFold, PlotlyPanel} from '..';
 import React from 'react';
 import {TestEditor, fixtures, mount} from 'lib/test-utils';
 import {connectTraceToPlot} from 'lib';
 
-const TraceFold = connectTraceToPlot(Fold);
+const TraceFold = connectTraceToPlot(PlotlyFold);
 
-describe('<Fold>', () => {
+describe('<PlotlyFold>', () => {
   it('shows deleteContainer button when deleteContainer function present and canDelete is true', () => {
     const withoutDelete = mount(
       <TestEditor {...fixtures.scatter()}>
-        <Panel>
-          <Fold>
+        <PlotlyPanel>
+          <PlotlyFold>
             <Numeric attr="opacity" />
-          </Fold>
-        </Panel>
+          </PlotlyFold>
+        </PlotlyPanel>
       </TestEditor>
     ).find('.js-fold__delete');
     expect(withoutDelete.exists()).toBe(false);
 
     const withDelete = mount(
       <TestEditor {...fixtures.scatter()}>
-        <Panel>
+        <PlotlyPanel>
           <TraceFold traceIndexes={[0]} canDelete={true}>
             <Numeric attr="opacity" />
           </TraceFold>
-        </Panel>
+        </PlotlyPanel>
       </TestEditor>
     ).find('.js-fold__delete');
     expect(withDelete.exists()).toBe(true);
@@ -35,11 +35,11 @@ describe('<Fold>', () => {
     const beforeDeleteTrace = jest.fn();
     mount(
       <TestEditor {...fixtures.scatter()} beforeDeleteTrace={beforeDeleteTrace}>
-        <Panel>
+        <PlotlyPanel>
           <TraceFold traceIndexes={[0]} canDelete={true}>
             <Numeric attr="opacity" />
           </TraceFold>
-        </Panel>
+        </PlotlyPanel>
       </TestEditor>
     )
       .find('.js-fold__delete')
diff --git a/src/components/containers/__tests__/Layout-test.js b/src/components/containers/__tests__/Layout-test.js
index e1b6512be..611154cf9 100644
--- a/src/components/containers/__tests__/Layout-test.js
+++ b/src/components/containers/__tests__/Layout-test.js
@@ -1,12 +1,14 @@
 import {Numeric} from '../../fields';
-import {Fold, Panel, Section} from '..';
+import {PlotlyFold, PlotlyPanel, PlotlySection} from '..';
 import NumericInput from '../../widgets/NumericInput';
 import React from 'react';
 import {TestEditor, fixtures} from 'lib/test-utils';
 import {connectLayoutToPlot} from 'lib';
 import {mount} from 'enzyme';
 
-const Layouts = [Panel, Fold, Section].map(connectLayoutToPlot);
+const Layouts = [PlotlyPanel, PlotlyFold, PlotlySection].map(
+  connectLayoutToPlot
+);
 const Editor = props => <TestEditor {...{onUpdate: jest.fn(), ...props}} />;
 
 Layouts.forEach(Layout => {
@@ -14,11 +16,11 @@ Layouts.forEach(Layout => {
     it(`wraps container with fullValue pointing to gd._fullLayout`, () => {
       const wrapper = mount(
         <Editor {...fixtures.scatter({layout: {width: 100}})}>
-          <Panel>
+          <PlotlyPanel>
             <Layout>
               <Numeric label="Width" min={100} step={10} attr="width" />
             </Layout>
-          </Panel>
+          </PlotlyPanel>
         </Editor>
       )
         .find('[attr="width"]')
@@ -34,11 +36,11 @@ Layouts.forEach(Layout => {
           beforeUpdateLayout={beforeUpdateLayout}
           {...fixtures.scatter({layout: {width: 100}})}
         >
-          <Panel>
+          <PlotlyPanel>
             <Layout>
               <Numeric label="Width" min={100} step={10} attr="width" />
             </Layout>
-          </Panel>
+          </PlotlyPanel>
         </Editor>
       )
         .find('[attr="width"]')
diff --git a/src/components/containers/__tests__/Section-test.js b/src/components/containers/__tests__/PlotlySection-test.js
similarity index 85%
rename from src/components/containers/__tests__/Section-test.js
rename to src/components/containers/__tests__/PlotlySection-test.js
index 753323c43..75f8dbf7a 100644
--- a/src/components/containers/__tests__/Section-test.js
+++ b/src/components/containers/__tests__/PlotlySection-test.js
@@ -1,16 +1,16 @@
 import React from 'react';
-import Section from '../Section';
+import PlotlySection from '../PlotlySection';
 import {TraceTypeSection} from '../derived';
 import {Flaglist, Info, Numeric} from '../../fields';
 import {TestEditor, fixtures} from 'lib/test-utils';
 import {connectTraceToPlot} from 'lib';
 import {mount} from 'enzyme';
 
-const TraceSection = connectTraceToPlot(Section);
+const TraceSection = connectTraceToPlot(PlotlySection);
 
-describe('Section', () => {
+describe('PlotlySection', () => {
   it('is visible if it contains any visible children', () => {
-    // mode is visible with scatter. Hole is not visible. Section should show.
+    // mode is visible with scatter. Hole is not visible. PlotlySection should show.
     const wrapper = mount(
       <TestEditor onUpdate={jest.fn()} {...fixtures.scatter()}>
         <TraceSection name="test-section" traceIndexes={[0]}>
@@ -24,7 +24,7 @@ describe('Section', () => {
           <Numeric attr="hole" min={0} max={1} step={0.1} />
         </TraceSection>
       </TestEditor>
-    ).find(Section);
+    ).find(PlotlySection);
 
     expect(wrapper.children().length).toBe(1);
   });
@@ -32,18 +32,18 @@ describe('Section', () => {
   it('is visible if it contains any non attr children', () => {
     const wrapper = mount(
       <TestEditor onUpdate={jest.fn()} {...fixtures.scatter()}>
-        <Section name="test-section">
+        <PlotlySection name="test-section">
           <div className="extra">special extra</div>
-        </Section>
+        </PlotlySection>
       </TestEditor>
-    ).find(Section);
+    ).find(PlotlySection);
 
     expect(wrapper.children().length).toBe(1);
     expect(wrapper.find('.extra').text()).toBe('special extra');
   });
 
   it('is not visible if it contains no visible children', () => {
-    // pull and hole are not scatter attrs. Section should not show.
+    // pull and hole are not scatter attrs. PlotlySection should not show.
     const wrapper = mount(
       <TestEditor onUpdate={jest.fn()} {...fixtures.scatter()}>
         <TraceSection name="test-section" traceIndexes={[0]}>
@@ -51,13 +51,13 @@ describe('Section', () => {
           <Numeric attr="hole" min={0} max={1} step={0.1} traceIndexes={[0]} />
         </TraceSection>
       </TestEditor>
-    ).find(Section);
+    ).find(PlotlySection);
 
     expect(wrapper.find(Numeric).exists()).toBe(false);
   });
 
   it('will hide with Info children when attrs not defined', () => {
-    const TraceSection = connectTraceToPlot(Section);
+    const TraceSection = connectTraceToPlot(PlotlySection);
     const wrapper = mount(
       <TestEditor onUpdate={jest.fn()} {...fixtures.scatter()}>
         <TraceSection name="test-section" traceIndexes={[0]}>
@@ -65,7 +65,7 @@ describe('Section', () => {
           <Info>INFO</Info>
         </TraceSection>
       </TestEditor>
-    ).find(Section);
+    ).find(PlotlySection);
 
     expect(wrapper.find(Info).length).toBe(0);
   });
@@ -90,7 +90,7 @@ describe('TraceTypeSection', () => {
           />
         </TraceSection>
       </TestEditor>
-    ).find(Section);
+    ).find(PlotlySection);
 
     expect(wrapper.find(Flaglist).length).toBe(1);
   });
@@ -113,7 +113,7 @@ describe('TraceTypeSection', () => {
           />
         </TraceSection>
       </TestEditor>
-    ).find(Section);
+    ).find(PlotlySection);
 
     expect(wrapper.find(Flaglist).length).toBe(0);
   });
diff --git a/src/components/containers/__tests__/TraceAccordion-test.js b/src/components/containers/__tests__/TraceAccordion-test.js
index 8e3e85d4f..eb4d185c7 100644
--- a/src/components/containers/__tests__/TraceAccordion-test.js
+++ b/src/components/containers/__tests__/TraceAccordion-test.js
@@ -1,10 +1,10 @@
 import React from 'react';
-import {TraceAccordion, Fold, LayoutPanel} from '..';
+import {TraceAccordion, PlotlyFold, LayoutPanel} from '..';
 import {TextEditor} from '../../fields';
 import {TestEditor, fixtures, mount} from 'lib/test-utils';
 
 describe('<TraceAccordion>', () => {
-  it('generates trace Folds with name == text', () => {
+  it('generates trace PlotlyFolds with name == text', () => {
     const fixture = fixtures.scatter({data: [{name: 'hodor'}]});
 
     const folds = mount(
@@ -15,7 +15,7 @@ describe('<TraceAccordion>', () => {
           </TraceAccordion>
         </LayoutPanel>
       </TestEditor>
-    ).find(Fold);
+    ).find(PlotlyFold);
 
     expect(folds.at(0).prop('name')).toBe('hodor');
   });
diff --git a/src/components/containers/__tests__/visibility-test.js b/src/components/containers/__tests__/visibility-test.js
index ec759fb81..52605ce38 100644
--- a/src/components/containers/__tests__/visibility-test.js
+++ b/src/components/containers/__tests__/visibility-test.js
@@ -1,22 +1,23 @@
 import {Numeric} from '../../fields';
-import {LayoutPanel, Fold, Section} from '..';
+import {LayoutPanel, PlotlyFold, PlotlySection, Panel, Fold, Section} from '..';
+import Field from '../../fields/Field';
 import React from 'react';
 import {TestEditor, fixtures, mount} from 'lib/test-utils';
 
-// Basic Section visibility rules (in a panel for context)
-describe('Panel > Section', () => {
+// Basic PlotlySection visibility rules (in a panel for context)
+describe('PlotlyPanel > PlotlySection', () => {
   describe('div', () => {
     const wrapper = mount(
       <TestEditor {...fixtures.scatter()}>
         <LayoutPanel>
-          <Section>
+          <PlotlySection>
             <div id="thediv"> ok </div>
-          </Section>
+          </PlotlySection>
         </LayoutPanel>
       </TestEditor>
     );
 
-    it('shows Section', () =>
+    it('shows PlotlySection', () =>
       expect(wrapper.find('div.section').length).toEqual(1));
     it('shows div', () => expect(wrapper.find('#thediv').length).toEqual(1));
   });
@@ -25,13 +26,13 @@ describe('Panel > Section', () => {
     const wrapper = mount(
       <TestEditor {...fixtures.scatter()}>
         <LayoutPanel>
-          <Section>
+          <PlotlySection>
             <Numeric attr="title" />
-          </Section>
+          </PlotlySection>
         </LayoutPanel>
       </TestEditor>
     );
-    it('shows Section', () =>
+    it('shows PlotlySection', () =>
       expect(wrapper.find('div.section').length).toEqual(1));
     it('shows Field', () => expect(wrapper.find('input').length).toEqual(1));
   });
@@ -40,33 +41,106 @@ describe('Panel > Section', () => {
     const wrapper = mount(
       <TestEditor {...fixtures.scatter()}>
         <LayoutPanel>
-          <Section>
+          <PlotlySection>
             <Numeric attr="not_an_attr" />
-          </Section>
+          </PlotlySection>
         </LayoutPanel>
       </TestEditor>
     );
 
-    it('HIDES Section', () =>
+    it('HIDES PlotlySection', () =>
       expect(wrapper.find('div.section').length).toEqual(0));
     it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
   });
 });
 
-// Basic Fold visibility rules
-describe('Panel > Fold', () => {
-  describe('div', () => {
+// Basic Section visibility rules
+describe('PlotlyPanel > Section', () => {
+  describe('Field-with-invisible-attr', () => {
+    const wrapper = mount(
+      <TestEditor {...fixtures.scatter()}>
+        <LayoutPanel>
+          <Section name="custom section">
+            <Numeric attr="not_an_attr" />
+          </Section>
+        </LayoutPanel>
+      </TestEditor>
+    );
+
+    it('SHOWS Section', () =>
+      expect(wrapper.find('div.section').length).toEqual(1));
+    it('SHOWS custom title', () => {
+      expect(wrapper.find('.section__heading__text').text()).toEqual(
+        'custom section'
+      );
+    });
+    it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
+  });
+
+  describe('Field-with-custom-component', () => {
     const wrapper = mount(
       <TestEditor {...fixtures.scatter()}>
         <LayoutPanel>
+          <PlotlyFold>
+            <Section name="custom section">
+              <Field>
+                <div id="theDiv" />
+              </Field>
+            </Section>
+          </PlotlyFold>
+        </LayoutPanel>
+      </TestEditor>
+    );
+
+    it('SHOWS Section', () =>
+      expect(wrapper.find('div.section').length).toEqual(1));
+    it('SHOWS custom title', () => {
+      expect(wrapper.find('.section__heading__text').text()).toEqual(
+        'custom section'
+      );
+    });
+    it('SHOWS div', () => expect(wrapper.find('#theDiv').length).toEqual(1));
+    it('SHOWS PlotlyFold', () =>
+      expect(wrapper.find(PlotlyFold).length).toEqual(1));
+  });
+});
+
+describe('Panel > Fold ', () => {
+  describe('unconnected Panel and Fold', () => {
+    const wrapper = mount(
+      <TestEditor {...fixtures.scatter()}>
+        <Panel>
           <Fold>
-            <div id="thediv"> ok </div>
+            <div id="theDiv" />
           </Fold>
+        </Panel>
+      </TestEditor>
+    );
+
+    it('SHOWS Fold', () => expect(wrapper.find(Fold).length).toEqual(1));
+    it('behaves as PlotlyFold', () => {
+      expect(wrapper.find(Fold).props().folded).toEqual(false);
+      expect(typeof wrapper.find(Fold).props().toggleFold).toEqual('function');
+    });
+    it('SHOWS div', () => expect(wrapper.find('#theDiv').length).toEqual(1));
+  });
+});
+
+// Basic PlotlyFold visibility rules
+describe('PlotlyPanel > PlotlyFold', () => {
+  describe('div', () => {
+    const wrapper = mount(
+      <TestEditor {...fixtures.scatter()}>
+        <LayoutPanel>
+          <PlotlyFold>
+            <div id="thediv"> ok </div>
+          </PlotlyFold>
         </LayoutPanel>
       </TestEditor>
     );
 
-    it('shows Fold', () => expect(wrapper.find('div.fold').length).toEqual(1));
+    it('shows PlotlyFold', () =>
+      expect(wrapper.find('div.fold').length).toEqual(1));
     it('shows div', () => expect(wrapper.find('#thediv').length).toEqual(1));
   });
 
@@ -74,13 +148,14 @@ describe('Panel > Fold', () => {
     const wrapper = mount(
       <TestEditor {...fixtures.scatter()}>
         <LayoutPanel>
-          <Fold>
+          <PlotlyFold>
             <Numeric attr="title" />
-          </Fold>
+          </PlotlyFold>
         </LayoutPanel>
       </TestEditor>
     );
-    it('shows Fold', () => expect(wrapper.find('div.fold').length).toEqual(1));
+    it('shows PlotlyFold', () =>
+      expect(wrapper.find('div.fold').length).toEqual(1));
     it('shows Field', () => expect(wrapper.find('input').length).toEqual(1));
   });
 
@@ -88,34 +163,52 @@ describe('Panel > Fold', () => {
     const wrapper = mount(
       <TestEditor {...fixtures.scatter()}>
         <LayoutPanel>
-          <Fold>
+          <PlotlyFold>
             <Numeric attr="not_an_attr" />
-          </Fold>
+          </PlotlyFold>
         </LayoutPanel>
       </TestEditor>
     );
 
-    it('HIDES Fold', () => expect(wrapper.find('div.fold').length).toEqual(0));
+    it('HIDES PlotlyFold', () =>
+      expect(wrapper.find('div.fold').length).toEqual(0));
     it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
   });
+
+  describe('PlotlyPanel > PlotlyFold > Panel', () => {
+    const wrapper = mount(
+      <TestEditor {...fixtures.scatter()}>
+        <LayoutPanel>
+          <PlotlyFold>
+            <Panel />
+          </PlotlyFold>
+        </LayoutPanel>
+      </TestEditor>
+    );
+
+    it('SHOWS PlotlyFold', () =>
+      expect(wrapper.find(PlotlyFold).length).toEqual(1));
+    it('SHOWS Panel', () => expect(wrapper.find(Panel).length).toEqual(1));
+  });
 });
 
-// Section alone can't force a Fold to show itself at the moment
-describe('Panel > Fold > Section', () => {
+// Section alone can't force a PlotlyFold to show itself at the moment
+describe('PlotlyPanel > PlotlyFold > PlotlySection', () => {
   describe('div', () => {
     const wrapper = mount(
       <TestEditor {...fixtures.scatter()}>
         <LayoutPanel>
-          <Fold>
-            <Section>
+          <PlotlyFold>
+            <PlotlySection>
               <div id="thediv"> ok </div>
-            </Section>
-          </Fold>
+            </PlotlySection>
+          </PlotlyFold>
         </LayoutPanel>
       </TestEditor>
     );
-    it('HIDES Fold', () => expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES Section', () =>
+    it('HIDES PlotlyFold', () =>
+      expect(wrapper.find('div.fold').length).toEqual(0));
+    it('HIDES PlotlySection', () =>
       expect(wrapper.find('div.section').length).toEqual(0));
     it('HIDES div', () => expect(wrapper.find('#thediv').length).toEqual(0));
   });
@@ -124,16 +217,17 @@ describe('Panel > Fold > Section', () => {
     const wrapper = mount(
       <TestEditor {...fixtures.scatter()}>
         <LayoutPanel>
-          <Fold>
-            <Section>
+          <PlotlyFold>
+            <PlotlySection>
               <Numeric attr="title" />
-            </Section>
-          </Fold>
+            </PlotlySection>
+          </PlotlyFold>
         </LayoutPanel>
       </TestEditor>
     );
-    it('HIDES Fold', () => expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES Section', () =>
+    it('HIDES PlotlyFold', () =>
+      expect(wrapper.find('div.fold').length).toEqual(0));
+    it('HIDES PlotlySection', () =>
       expect(wrapper.find('div.section').length).toEqual(0));
     it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
   });
@@ -142,39 +236,41 @@ describe('Panel > Fold > Section', () => {
     const wrapper = mount(
       <TestEditor {...fixtures.scatter()}>
         <LayoutPanel>
-          <Fold>
-            <Section>
+          <PlotlyFold>
+            <PlotlySection>
               <Numeric attr="not_an_attr" />
-            </Section>
-          </Fold>
+            </PlotlySection>
+          </PlotlyFold>
         </LayoutPanel>
       </TestEditor>
     );
 
-    it('HIDES Fold', () => expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES Section', () =>
+    it('HIDES PlotlyFold', () =>
+      expect(wrapper.find('div.fold').length).toEqual(0));
+    it('HIDES PlotlySection', () =>
       expect(wrapper.find('div.section').length).toEqual(0));
     it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
   });
 });
 
-// p forces Fold open, then normal Section rules apply
-describe('Panel > Fold > p & Section', () => {
+// p forces PlotlyFold open, then normal PlotlySection rules apply
+describe('PlotlyPanel > PlotlyFold > p & PlotlySection', () => {
   describe('div', () => {
     const wrapper = mount(
       <TestEditor {...fixtures.scatter()}>
         <LayoutPanel>
-          <Fold>
+          <PlotlyFold>
             <p>I force visibility of the fold</p>
-            <Section>
+            <PlotlySection>
               <div id="thediv"> ok </div>
-            </Section>
-          </Fold>
+            </PlotlySection>
+          </PlotlyFold>
         </LayoutPanel>
       </TestEditor>
     );
-    it('shows Fold', () => expect(wrapper.find('div.fold').length).toEqual(1));
-    it('shows Section', () =>
+    it('shows PlotlyFold', () =>
+      expect(wrapper.find('div.fold').length).toEqual(1));
+    it('shows PlotlySection', () =>
       expect(wrapper.find('div.section').length).toEqual(1));
     it('shows div', () => expect(wrapper.find('#thediv').length).toEqual(1));
   });
@@ -183,17 +279,18 @@ describe('Panel > Fold > p & Section', () => {
     const wrapper = mount(
       <TestEditor {...fixtures.scatter()}>
         <LayoutPanel>
-          <Fold>
+          <PlotlyFold>
             <p>I force visibility of the fold</p>
-            <Section>
+            <PlotlySection>
               <Numeric attr="title" />
-            </Section>
-          </Fold>
+            </PlotlySection>
+          </PlotlyFold>
         </LayoutPanel>
       </TestEditor>
     );
-    it('shows Fold', () => expect(wrapper.find('div.fold').length).toEqual(1));
-    it('shows Section', () =>
+    it('shows PlotlyFold', () =>
+      expect(wrapper.find('div.fold').length).toEqual(1));
+    it('shows PlotlySection', () =>
       expect(wrapper.find('div.section').length).toEqual(1));
     it('shows Field', () => expect(wrapper.find('input').length).toEqual(1));
   });
@@ -202,40 +299,42 @@ describe('Panel > Fold > p & Section', () => {
     const wrapper = mount(
       <TestEditor {...fixtures.scatter()}>
         <LayoutPanel>
-          <Fold>
+          <PlotlyFold>
             <p>I force visibility of the fold</p>
-            <Section>
+            <PlotlySection>
               <Numeric attr="not_an_attr" />
-            </Section>
-          </Fold>
+            </PlotlySection>
+          </PlotlyFold>
         </LayoutPanel>
       </TestEditor>
     );
 
-    it('shows Fold', () => expect(wrapper.find('div.fold').length).toEqual(1));
-    it('HIDES Section', () =>
+    it('shows PlotlyFold', () =>
+      expect(wrapper.find('div.fold').length).toEqual(1));
+    it('HIDES PlotlySection', () =>
       expect(wrapper.find('div.section').length).toEqual(0));
     it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
   });
 });
 
-// Field forces Fold open, then normal Section rules apply
-describe('Panel > Fold > Field-with-visible-attr & Section', () => {
+// Field forces PlotlyFold open, then normal PlotlySection rules apply
+describe('PlotlyPanel > PlotlyFold > Field-with-visible-attr & PlotlySection', () => {
   describe('div', () => {
     const wrapper = mount(
       <TestEditor {...fixtures.scatter()}>
         <LayoutPanel>
-          <Fold>
+          <PlotlyFold>
             <Numeric attr="width" />
-            <Section>
+            <PlotlySection>
               <div id="thediv"> ok </div>
-            </Section>
-          </Fold>
+            </PlotlySection>
+          </PlotlyFold>
         </LayoutPanel>
       </TestEditor>
     );
-    it('shows Fold', () => expect(wrapper.find('div.fold').length).toEqual(1));
-    it('shows Section', () =>
+    it('shows PlotlyFold', () =>
+      expect(wrapper.find('div.fold').length).toEqual(1));
+    it('shows PlotlySection', () =>
       expect(wrapper.find('div.section').length).toEqual(1));
     it('shows div', () => expect(wrapper.find('#thediv').length).toEqual(1));
   });
@@ -244,19 +343,20 @@ describe('Panel > Fold > Field-with-visible-attr & Section', () => {
     const wrapper = mount(
       <TestEditor {...fixtures.scatter()}>
         <LayoutPanel>
-          <Fold>
+          <PlotlyFold>
             <Numeric attr="width" />
-            <Section>
+            <PlotlySection>
               <Numeric attr="title" />
-            </Section>
-          </Fold>
+            </PlotlySection>
+          </PlotlyFold>
         </LayoutPanel>
       </TestEditor>
     );
-    it('shows Fold', () => expect(wrapper.find('div.fold').length).toEqual(1));
-    it('shows Section', () =>
+    it('shows PlotlyFold', () =>
+      expect(wrapper.find('div.fold').length).toEqual(1));
+    it('shows PlotlySection', () =>
       expect(wrapper.find('div.section').length).toEqual(1));
-    it('shows Field in Section', () =>
+    it('shows Field in PlotlySection', () =>
       expect(wrapper.find('input').length).toEqual(2));
   });
 
@@ -264,41 +364,43 @@ describe('Panel > Fold > Field-with-visible-attr & Section', () => {
     const wrapper = mount(
       <TestEditor {...fixtures.scatter()}>
         <LayoutPanel>
-          <Fold>
+          <PlotlyFold>
             <Numeric attr="width" />
-            <Section>
+            <PlotlySection>
               <Numeric attr="not_an_attr" />
-            </Section>
-          </Fold>
+            </PlotlySection>
+          </PlotlyFold>
         </LayoutPanel>
       </TestEditor>
     );
 
-    it('shows Fold', () => expect(wrapper.find('div.fold').length).toEqual(1));
-    it('HIDES Section', () =>
+    it('shows PlotlyFold', () =>
+      expect(wrapper.find('div.fold').length).toEqual(1));
+    it('HIDES PlotlySection', () =>
       expect(wrapper.find('div.section').length).toEqual(0));
-    it('HIDES Field in Section', () =>
+    it('HIDES Field in PlotlySection', () =>
       expect(wrapper.find('input').length).toEqual(1));
   });
 });
 
-// invisible Field doesn't forces Fold open
-describe('Panel > Fold > Field-with-invisible-attr & Section', () => {
+// invisible Field doesn't forces PlotlyFold open
+describe('PlotlyPanel > PlotlyFold > Field-with-invisible-attr & PlotlySection', () => {
   describe('div', () => {
     const wrapper = mount(
       <TestEditor {...fixtures.scatter()}>
         <LayoutPanel>
-          <Fold>
+          <PlotlyFold>
             <Numeric attr="not_an_attr" />
-            <Section>
+            <PlotlySection>
               <div id="thediv"> ok </div>
-            </Section>
-          </Fold>
+            </PlotlySection>
+          </PlotlyFold>
         </LayoutPanel>
       </TestEditor>
     );
-    it('HIDES Fold', () => expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES Section', () =>
+    it('HIDES PlotlyFold', () =>
+      expect(wrapper.find('div.fold').length).toEqual(0));
+    it('HIDES PlotlySection', () =>
       expect(wrapper.find('div.section').length).toEqual(0));
     it('HIDES div', () => expect(wrapper.find('#thediv').length).toEqual(0));
   });
@@ -307,17 +409,18 @@ describe('Panel > Fold > Field-with-invisible-attr & Section', () => {
     const wrapper = mount(
       <TestEditor {...fixtures.scatter()}>
         <LayoutPanel>
-          <Fold>
+          <PlotlyFold>
             <Numeric attr="not_an_attr" />
-            <Section>
+            <PlotlySection>
               <Numeric attr="title" />
-            </Section>
-          </Fold>
+            </PlotlySection>
+          </PlotlyFold>
         </LayoutPanel>
       </TestEditor>
     );
-    it('HIDES Fold', () => expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES Section', () =>
+    it('HIDES PlotlyFold', () =>
+      expect(wrapper.find('div.fold').length).toEqual(0));
+    it('HIDES PlotlySection', () =>
       expect(wrapper.find('div.section').length).toEqual(0));
     it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
   });
@@ -326,38 +429,40 @@ describe('Panel > Fold > Field-with-invisible-attr & Section', () => {
     const wrapper = mount(
       <TestEditor {...fixtures.scatter()}>
         <LayoutPanel>
-          <Fold>
+          <PlotlyFold>
             <Numeric attr="not_an_attr" />
-            <Section>
+            <PlotlySection>
               <Numeric attr="not_an_attr" />
-            </Section>
-          </Fold>
+            </PlotlySection>
+          </PlotlyFold>
         </LayoutPanel>
       </TestEditor>
     );
-    it('HIDES Fold', () => expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES Section', () =>
+    it('HIDES PlotlyFold', () =>
+      expect(wrapper.find('div.fold').length).toEqual(0));
+    it('HIDES PlotlySection', () =>
       expect(wrapper.find('div.section').length).toEqual(0));
     it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
   });
 });
 
-// visible attr on Section forces Fold open
-describe('Panel > Fold > Section-with-visible-attr', () => {
+// visible attr on PlotlySection forces PlotlyFold open
+describe('PlotlyPanel > PlotlyFold > PlotlySection-with-visible-attr', () => {
   describe('div', () => {
     const wrapper = mount(
       <TestEditor {...fixtures.scatter()}>
         <LayoutPanel>
-          <Fold>
-            <Section attr="title">
+          <PlotlyFold>
+            <PlotlySection attr="title">
               <div id="thediv"> ok </div>
-            </Section>
-          </Fold>
+            </PlotlySection>
+          </PlotlyFold>
         </LayoutPanel>
       </TestEditor>
     );
-    it('shows Fold', () => expect(wrapper.find('div.fold').length).toEqual(1));
-    it('shows Section', () =>
+    it('shows PlotlyFold', () =>
+      expect(wrapper.find('div.fold').length).toEqual(1));
+    it('shows PlotlySection', () =>
       expect(wrapper.find('div.section').length).toEqual(1));
     it('shows div', () => expect(wrapper.find('#thediv').length).toEqual(1));
   });
@@ -366,16 +471,17 @@ describe('Panel > Fold > Section-with-visible-attr', () => {
     const wrapper = mount(
       <TestEditor {...fixtures.scatter()}>
         <LayoutPanel>
-          <Fold>
-            <Section attr="title">
+          <PlotlyFold>
+            <PlotlySection attr="title">
               <Numeric attr="title" />
-            </Section>
-          </Fold>
+            </PlotlySection>
+          </PlotlyFold>
         </LayoutPanel>
       </TestEditor>
     );
-    it('shows Fold', () => expect(wrapper.find('div.fold').length).toEqual(1));
-    it('shows Section', () =>
+    it('shows PlotlyFold', () =>
+      expect(wrapper.find('div.fold').length).toEqual(1));
+    it('shows PlotlySection', () =>
       expect(wrapper.find('div.section').length).toEqual(1));
     it('shows Field', () => expect(wrapper.find('input').length).toEqual(1));
   });
@@ -384,38 +490,40 @@ describe('Panel > Fold > Section-with-visible-attr', () => {
     const wrapper = mount(
       <TestEditor {...fixtures.scatter()}>
         <LayoutPanel>
-          <Fold>
-            <Section attr="title">
+          <PlotlyFold>
+            <PlotlySection attr="title">
               <Numeric attr="not_an_attr" />
-            </Section>
-          </Fold>
+            </PlotlySection>
+          </PlotlyFold>
         </LayoutPanel>
       </TestEditor>
     );
 
-    it('shows Fold', () => expect(wrapper.find('div.fold').length).toEqual(1));
-    it('shows Section', () =>
+    it('shows PlotlyFold', () =>
+      expect(wrapper.find('div.fold').length).toEqual(1));
+    it('shows PlotlySection', () =>
       expect(wrapper.find('div.section').length).toEqual(1));
     it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
   });
 });
 
-// invisible attr on Section doesn't force Fold open
-describe('Panel > Fold > Section-with-invisible-attr', () => {
+// invisible attr on Section doesn't force PlotlyFold open
+describe('PlotlyPanel > PlotlyFold > PlotlySection-with-invisible-attr', () => {
   describe('div', () => {
     const wrapper = mount(
       <TestEditor {...fixtures.scatter()}>
         <LayoutPanel>
-          <Fold>
-            <Section attr="not_an_attr">
+          <PlotlyFold>
+            <PlotlySection attr="not_an_attr">
               <div id="thediv"> ok </div>
-            </Section>
-          </Fold>
+            </PlotlySection>
+          </PlotlyFold>
         </LayoutPanel>
       </TestEditor>
     );
-    it('HIDES Fold', () => expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES Section', () =>
+    it('HIDES PlotlyFold', () =>
+      expect(wrapper.find('div.fold').length).toEqual(0));
+    it('HIDES PlotlySection', () =>
       expect(wrapper.find('div.section').length).toEqual(0));
     it('HIDES div', () => expect(wrapper.find('#thediv').length).toEqual(0));
   });
@@ -424,16 +532,17 @@ describe('Panel > Fold > Section-with-invisible-attr', () => {
     const wrapper = mount(
       <TestEditor {...fixtures.scatter()}>
         <LayoutPanel>
-          <Fold>
-            <Section attr="not_an_attr">
+          <PlotlyFold>
+            <PlotlySection attr="not_an_attr">
               <Numeric attr="title" />
-            </Section>
-          </Fold>
+            </PlotlySection>
+          </PlotlyFold>
         </LayoutPanel>
       </TestEditor>
     );
-    it('HIDES Fold', () => expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES Section', () =>
+    it('HIDES PlotlyFold', () =>
+      expect(wrapper.find('div.fold').length).toEqual(0));
+    it('HIDES PlotlySection', () =>
       expect(wrapper.find('div.section').length).toEqual(0));
     it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
   });
@@ -442,40 +551,42 @@ describe('Panel > Fold > Section-with-invisible-attr', () => {
     const wrapper = mount(
       <TestEditor {...fixtures.scatter()}>
         <LayoutPanel>
-          <Fold>
-            <Section attr="not_an_attr">
+          <PlotlyFold>
+            <PlotlySection attr="not_an_attr">
               <Numeric attr="not_an_attr" />
-            </Section>
-          </Fold>
+            </PlotlySection>
+          </PlotlyFold>
         </LayoutPanel>
       </TestEditor>
     );
 
-    it('HIDES Fold', () => expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES Section', () =>
+    it('HIDES PlotlyFold', () =>
+      expect(wrapper.find('div.fold').length).toEqual(0));
+    it('HIDES PlotlySection', () =>
       expect(wrapper.find('div.section').length).toEqual(0));
     it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
   });
 });
 
-// nothing in the lower level Fold can force the upper one open
-describe('Panel > Fold > Panel > Fold', () => {
+// nothing in the lower level PlotlyFold can force the upper one open
+describe('PlotlyPanel > PlotlyFold > PlotlyPanel > PlotlyFold', () => {
   describe('div', () => {
     const wrapper = mount(
       <TestEditor {...fixtures.scatter()}>
         <LayoutPanel>
-          <Fold>
+          <PlotlyFold>
             <LayoutPanel>
-              <Fold>
+              <PlotlyFold>
                 <div id="thediv"> ok </div>
-              </Fold>
+              </PlotlyFold>
             </LayoutPanel>
-          </Fold>
+          </PlotlyFold>
         </LayoutPanel>
       </TestEditor>
     );
 
-    it('HIDES Fold', () => expect(wrapper.find('div.fold').length).toEqual(0));
+    it('HIDES PlotlyFold', () =>
+      expect(wrapper.find('div.fold').length).toEqual(0));
     it('HIDES div', () => expect(wrapper.find('#thediv').length).toEqual(0));
   });
 
@@ -483,17 +594,18 @@ describe('Panel > Fold > Panel > Fold', () => {
     const wrapper = mount(
       <TestEditor {...fixtures.scatter()}>
         <LayoutPanel>
-          <Fold>
+          <PlotlyFold>
             <LayoutPanel>
-              <Fold>
+              <PlotlyFold>
                 <Numeric attr="title" />
-              </Fold>
+              </PlotlyFold>
             </LayoutPanel>
-          </Fold>
+          </PlotlyFold>
         </LayoutPanel>
       </TestEditor>
     );
-    it('HIDES Fold', () => expect(wrapper.find('div.fold').length).toEqual(0));
+    it('HIDES PlotlyFold', () =>
+      expect(wrapper.find('div.fold').length).toEqual(0));
     it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
   });
 
@@ -501,44 +613,46 @@ describe('Panel > Fold > Panel > Fold', () => {
     const wrapper = mount(
       <TestEditor {...fixtures.scatter()}>
         <LayoutPanel>
-          <Fold>
+          <PlotlyFold>
             <LayoutPanel>
-              <Fold>
+              <PlotlyFold>
                 <Numeric attr="not_an_attr" />
-              </Fold>
+              </PlotlyFold>
             </LayoutPanel>
-          </Fold>
+          </PlotlyFold>
         </LayoutPanel>
       </TestEditor>
     );
 
-    it('HIDES Fold', () => expect(wrapper.find('div.fold').length).toEqual(0));
+    it('HIDES PlotlyFold', () =>
+      expect(wrapper.find('div.fold').length).toEqual(0));
     it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
   });
 });
 
-// nothing in the lower level Fold can force the upper one open
+// nothing in the lower level PlotlyFold can force the upper one open
 
-describe('Panel > Fold > Panel > Fold > Section', () => {
+describe('PlotlyPanel > PlotlyFold > PlotlyPanel > PlotlyFold > PlotlySection', () => {
   describe('div', () => {
     const wrapper = mount(
       <TestEditor {...fixtures.scatter()}>
         <LayoutPanel>
-          <Fold>
+          <PlotlyFold>
             <LayoutPanel>
-              <Fold>
-                <Section>
+              <PlotlyFold>
+                <PlotlySection>
                   <div id="thediv"> ok </div>
-                </Section>
-              </Fold>
+                </PlotlySection>
+              </PlotlyFold>
             </LayoutPanel>
-          </Fold>
+          </PlotlyFold>
         </LayoutPanel>
       </TestEditor>
     );
 
-    it('HIDES Fold', () => expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES Section', () =>
+    it('HIDES PlotlyFold', () =>
+      expect(wrapper.find('div.fold').length).toEqual(0));
+    it('HIDES PlotlySection', () =>
       expect(wrapper.find('div.section').length).toEqual(0));
     it('HIDES div', () => expect(wrapper.find('#thediv').length).toEqual(0));
   });
@@ -547,20 +661,21 @@ describe('Panel > Fold > Panel > Fold > Section', () => {
     const wrapper = mount(
       <TestEditor {...fixtures.scatter()}>
         <LayoutPanel>
-          <Fold>
+          <PlotlyFold>
             <LayoutPanel>
-              <Fold>
-                <Section>
+              <PlotlyFold>
+                <PlotlySection>
                   <Numeric attr="title" />
-                </Section>
-              </Fold>
+                </PlotlySection>
+              </PlotlyFold>
             </LayoutPanel>
-          </Fold>
+          </PlotlyFold>
         </LayoutPanel>
       </TestEditor>
     );
-    it('HIDES Fold', () => expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES Section', () =>
+    it('HIDES PlotlyFold', () =>
+      expect(wrapper.find('div.fold').length).toEqual(0));
+    it('HIDES PlotlySection', () =>
       expect(wrapper.find('div.section').length).toEqual(0));
     it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
   });
@@ -569,50 +684,51 @@ describe('Panel > Fold > Panel > Fold > Section', () => {
     const wrapper = mount(
       <TestEditor {...fixtures.scatter()}>
         <LayoutPanel>
-          <Fold>
+          <PlotlyFold>
             <LayoutPanel>
-              <Fold>
-                <Section>
+              <PlotlyFold>
+                <PlotlySection>
                   <Numeric attr="not_an_attr" />
-                </Section>
-              </Fold>
+                </PlotlySection>
+              </PlotlyFold>
             </LayoutPanel>
-          </Fold>
+          </PlotlyFold>
         </LayoutPanel>
       </TestEditor>
     );
 
-    it('HIDES Fold', () => expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES Section', () =>
+    it('HIDES PlotlyFold', () =>
+      expect(wrapper.find('div.fold').length).toEqual(0));
+    it('HIDES PlotlySection', () =>
       expect(wrapper.find('div.section').length).toEqual(0));
     it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
   });
 });
 
-// Lower level Panel with visible attr forces the upper Fold open, and visible
-// attr on Section forces the lower Fold open
+// Lower level PlotlyPanel with visible attr forces the upper PlotlyFold open, and visible
+// attr on PlotlySection forces the lower PlotlyFold open
 
-describe('Panel > Fold > Panel-with-visible-attr > Fold > Section-with-visible-attr', () => {
+describe('PlotlyPanel > PlotlyFold > PlotlyPanel-with-visible-attr > PlotlyFold > PlotlySection-with-visible-attr', () => {
   describe('div', () => {
     const wrapper = mount(
       <TestEditor {...fixtures.scatter()}>
         <LayoutPanel>
-          <Fold>
+          <PlotlyFold>
             <LayoutPanel attr="title">
-              <Fold>
-                <Section attr="title">
+              <PlotlyFold>
+                <PlotlySection attr="title">
                   <div id="thediv"> ok </div>
-                </Section>
-              </Fold>
+                </PlotlySection>
+              </PlotlyFold>
             </LayoutPanel>
-          </Fold>
+          </PlotlyFold>
         </LayoutPanel>
       </TestEditor>
     );
 
-    it('shows 2 Folds', () =>
+    it('shows 2 PlotlyFolds', () =>
       expect(wrapper.find('div.fold').length).toEqual(2));
-    it('shows Section', () =>
+    it('shows PlotlySection', () =>
       expect(wrapper.find('div.section').length).toEqual(1));
     it('shows div', () => expect(wrapper.find('#thediv').length).toEqual(1));
   });
@@ -621,21 +737,21 @@ describe('Panel > Fold > Panel-with-visible-attr > Fold > Section-with-visible-a
     const wrapper = mount(
       <TestEditor {...fixtures.scatter()}>
         <LayoutPanel>
-          <Fold>
+          <PlotlyFold>
             <LayoutPanel attr="title">
-              <Fold>
-                <Section attr="title">
+              <PlotlyFold>
+                <PlotlySection attr="title">
                   <Numeric attr="title" />
-                </Section>
-              </Fold>
+                </PlotlySection>
+              </PlotlyFold>
             </LayoutPanel>
-          </Fold>
+          </PlotlyFold>
         </LayoutPanel>
       </TestEditor>
     );
-    it('shows 2 Folds', () =>
+    it('shows 2 PlotlyFolds', () =>
       expect(wrapper.find('div.fold').length).toEqual(2));
-    it('shows Section', () =>
+    it('shows PlotlySection', () =>
       expect(wrapper.find('div.section').length).toEqual(1));
     it('shows Field', () => expect(wrapper.find('input').length).toEqual(1));
   });
@@ -644,22 +760,22 @@ describe('Panel > Fold > Panel-with-visible-attr > Fold > Section-with-visible-a
     const wrapper = mount(
       <TestEditor {...fixtures.scatter()}>
         <LayoutPanel>
-          <Fold>
+          <PlotlyFold>
             <LayoutPanel attr="title">
-              <Fold>
-                <Section attr="title">
+              <PlotlyFold>
+                <PlotlySection attr="title">
                   <Numeric attr="not_an_attr" />
-                </Section>
-              </Fold>
+                </PlotlySection>
+              </PlotlyFold>
             </LayoutPanel>
-          </Fold>
+          </PlotlyFold>
         </LayoutPanel>
       </TestEditor>
     );
 
-    it('shows 2 Folds', () =>
+    it('shows 2 PlotlyFolds', () =>
       expect(wrapper.find('div.fold').length).toEqual(2));
-    it('shows Section', () =>
+    it('shows PlotlySection', () =>
       expect(wrapper.find('div.section').length).toEqual(1));
     it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
   });
diff --git a/src/components/containers/derived.js b/src/components/containers/derived.js
index 32e4f2ab4..95c7f3c5f 100644
--- a/src/components/containers/derived.js
+++ b/src/components/containers/derived.js
@@ -1,12 +1,12 @@
 import React from 'react';
-import Panel from './Panel';
-import Section from './Section';
+import PlotlyPanel from './PlotlyPanel';
+import PlotlySection from './PlotlySection';
 import PropTypes from 'prop-types';
 
 import {connectLayoutToPlot, containerConnectedContextTypes} from 'lib';
 
-const LayoutPanel = connectLayoutToPlot(Panel);
-const LayoutSection = connectLayoutToPlot(Section);
+const LayoutPanel = connectLayoutToPlot(PlotlyPanel);
+const LayoutSection = connectLayoutToPlot(PlotlySection);
 
 const TraceTypeSection = (props, context) => {
   const {fullContainer, fullData} = context;
@@ -18,7 +18,7 @@ const TraceTypeSection = (props, context) => {
     fullData && fullData.some(t => props.traceTypes.includes(t.type));
 
   if (ifConnectedToTrace || ifConnectedToLayout) {
-    return <Section {...props} />;
+    return <PlotlySection {...props} />;
   }
 
   return null;
diff --git a/src/components/containers/index.js b/src/components/containers/index.js
index 572fa55c4..53ede3124 100644
--- a/src/components/containers/index.js
+++ b/src/components/containers/index.js
@@ -5,10 +5,10 @@ import ImageAccordion from './ImageAccordion';
 import UpdateMenuAccordion from './UpdateMenuAccordion';
 import RangeSelectorAccordion from './RangeSelectorAccordion';
 import AxesFold from './AxesFold';
-import Fold from './Fold';
+import PlotlyFold, {Fold} from './PlotlyFold';
 import MenuPanel from './MenuPanel';
-import Panel from './Panel';
-import Section from './Section';
+import PlotlyPanel, {Panel} from './PlotlyPanel';
+import PlotlySection, {Section} from './PlotlySection';
 import TraceAccordion from './TraceAccordion';
 import TransformAccordion from './TransformAccordion';
 import TraceMarkerSection from './TraceMarkerSection';
@@ -17,7 +17,6 @@ import TraceRequiredPanel from './TraceRequiredPanel';
 import SingleSidebarItem from './SingleSidebarItem';
 import ModalProvider from './ModalProvider';
 import Modal from './Modal';
-import SectionHeader from './SectionHeader';
 
 export {
   AnnotationAccordion,
@@ -27,8 +26,11 @@ export {
   UpdateMenuAccordion,
   RangeSelectorAccordion,
   MenuPanel,
+  PlotlyFold,
   Fold,
+  PlotlyPanel,
   Panel,
+  PlotlySection,
   Section,
   TraceAccordion,
   TransformAccordion,
@@ -41,5 +43,4 @@ export {
   TraceTypeSection,
   Modal,
   ModalProvider,
-  SectionHeader,
 };
diff --git a/src/components/fields/__tests__/AnnotationRef-test.js b/src/components/fields/__tests__/AnnotationRef-test.js
index 7fa943148..2308dadf1 100644
--- a/src/components/fields/__tests__/AnnotationRef-test.js
+++ b/src/components/fields/__tests__/AnnotationRef-test.js
@@ -1,11 +1,13 @@
 import {AnnotationRef, AnnotationArrowRef} from '../derived';
 import DropdownWidget from '../../widgets/Dropdown';
 import React from 'react';
-import {Panel} from '../../';
+import {PlotlyPanel} from '../../';
 import {TestEditor, fixtures, plotly, mount} from 'lib/test-utils';
 import {connectAnnotationToLayout, connectLayoutToPlot} from 'lib';
 
-const LayoutAnnoPanel = connectLayoutToPlot(connectAnnotationToLayout(Panel));
+const LayoutAnnoPanel = connectLayoutToPlot(
+  connectAnnotationToLayout(PlotlyPanel)
+);
 
 describe('<AnnotationRef>', () => {
   function render(props) {
diff --git a/src/components/fields/__tests__/CanvasSize-test.js b/src/components/fields/__tests__/CanvasSize-test.js
index 119b6a69e..eff745a40 100644
--- a/src/components/fields/__tests__/CanvasSize-test.js
+++ b/src/components/fields/__tests__/CanvasSize-test.js
@@ -1,21 +1,21 @@
 import React from 'react';
 import {connectLayoutToPlot} from 'lib';
-import {Panel, Fold} from '../../';
+import {PlotlyPanel, PlotlyFold} from '../../';
 import {TestEditor, fixtures} from 'lib/test-utils';
 import {mount} from 'enzyme';
 import {CanvasSize} from '../';
 
 describe('CanvasSize', () => {
-  const LayoutPanel = connectLayoutToPlot(Panel);
+  const LayoutPanel = connectLayoutToPlot(PlotlyPanel);
 
   it('is hidden when autosize is true', () => {
     const fixtureProps = fixtures.scatter({layout: {autosize: true}});
     const wrapper = mount(
       <TestEditor {...{...fixtureProps}}>
         <LayoutPanel name="Layout">
-          <Fold name="Canvas">
+          <PlotlyFold name="Canvas">
             <CanvasSize attr="width" />
-          </Fold>
+          </PlotlyFold>
         </LayoutPanel>
       </TestEditor>
     ).find(CanvasSize);
@@ -28,9 +28,9 @@ describe('CanvasSize', () => {
     const wrapper = mount(
       <TestEditor {...{...fixtureProps}}>
         <LayoutPanel name="Layout">
-          <Fold name="Canvas">
+          <PlotlyFold name="Canvas">
             <CanvasSize attr="width" />
-          </Fold>
+          </PlotlyFold>
         </LayoutPanel>
       </TestEditor>
     ).find(CanvasSize);
diff --git a/src/components/fields/__tests__/Radio-test.js b/src/components/fields/__tests__/Radio-test.js
index e87b6b660..005d01c54 100644
--- a/src/components/fields/__tests__/Radio-test.js
+++ b/src/components/fields/__tests__/Radio-test.js
@@ -1,12 +1,12 @@
 import React from 'react';
 import Field from '../Field';
 import Radio from '../Radio';
-import {Section} from '../../containers';
+import {PlotlySection} from '../../containers';
 import {TestEditor, fixtures, plotly} from 'lib/test-utils';
 import {connectTraceToPlot} from 'lib';
 import {mount} from 'enzyme';
 
-const Trace = connectTraceToPlot(Section);
+const Trace = connectTraceToPlot(PlotlySection);
 
 describe('<Radio>', () => {
   it('enables <Field> centering by default', () => {
diff --git a/src/components/fields/__tests__/TraceSelector-test.js b/src/components/fields/__tests__/TraceSelector-test.js
index 346a34f9d..98ba85d8b 100644
--- a/src/components/fields/__tests__/TraceSelector-test.js
+++ b/src/components/fields/__tests__/TraceSelector-test.js
@@ -2,12 +2,12 @@
 import Dropdown from '../../widgets/Dropdown';
 import React from 'react';
 import TraceSelector from '../TraceSelector';
-import {Section} from '../../containers';
+import {PlotlySection} from '../../containers';
 import {TestEditor, fixtures, plotly, mount} from 'lib/test-utils';
 import {connectTraceToPlot} from 'lib';
 
 describe('TraceSelector', () => {
-  const TraceSection = connectTraceToPlot(Section);
+  const TraceSection = connectTraceToPlot(PlotlySection);
 
   it('sets mode to markers if trace scatter, no data or mode provided', () => {
     const editorProps = {
diff --git a/src/components/index.js b/src/components/index.js
index cdb0dcc59..bad322d71 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -51,17 +51,19 @@ import {
   UpdateMenuAccordion,
   RangeSelectorAccordion,
   AxesFold,
+  PlotlyFold,
   Fold,
   LayoutPanel,
   LayoutSection,
   Panel,
+  PlotlyPanel,
+  PlotlySection,
   Section,
   TraceAccordion,
   TraceMarkerSection,
   TraceRequiredPanel,
   SingleSidebarItem,
   TraceTypeSection,
-  SectionHeader,
 } from './containers';
 
 import {Button} from './widgets';
@@ -100,6 +102,7 @@ export {
   ErrorBars,
   FillDropdown,
   Flaglist,
+  PlotlyFold,
   Fold,
   FontSelector,
   HoverInfo,
@@ -114,9 +117,11 @@ export {
   Numeric,
   AxisRangeValue,
   Text,
+  PlotlyPanel,
   Panel,
   PanelMenuWrapper,
   Radio,
+  PlotlySection,
   Section,
   SingleSidebarItem,
   AxisCreator,
@@ -128,7 +133,6 @@ export {
   TraceRequiredPanel,
   TraceSelector,
   TraceTypeSection,
-  SectionHeader,
   UpdateMenuButtons,
   Dropzone,
 };
diff --git a/src/default_panels/GraphCreatePanel.js b/src/default_panels/GraphCreatePanel.js
index f97b097d2..d26d46bc3 100644
--- a/src/default_panels/GraphCreatePanel.js
+++ b/src/default_panels/GraphCreatePanel.js
@@ -5,7 +5,7 @@ import {
   Dropdown,
   ErrorBars,
   Radio,
-  Section,
+  PlotlySection,
   LayoutSection,
   AxisCreator,
   TraceAccordion,
@@ -22,7 +22,7 @@ const GraphCreatePanel = ({localize: _}) => {
       <TextEditor label={_('Name')} attr="name" richTextOnly />
       <TraceSelector label={_('Type')} attr="type" show />
 
-      <Section name={_('Data')}>
+      <PlotlySection name={_('Data')}>
         <DataSelector label={_('Labels')} attr="labels" />
         <DataSelector label={_('Values')} attr="values" />
         <DataSelector label={_('Locations')} attr="locations" />
@@ -64,7 +64,7 @@ const GraphCreatePanel = ({localize: _}) => {
         <DataSelector label={_('C')} attr="c" />
         <DataSelector label={_('Headers')} attr="header.values" />
         <DataSelector label={_('Columns')} attr="cells.values" />
-      </Section>
+      </PlotlySection>
 
       <TraceTypeSection
         name={_('Data')}
@@ -84,40 +84,40 @@ const GraphCreatePanel = ({localize: _}) => {
         />
       </TraceTypeSection>
 
-      <Section name={_('Axes to Use')}>
+      <PlotlySection name={_('Axes to Use')}>
         <AxisCreator attr="fake_attr" localize={_} />
-      </Section>
+      </PlotlySection>
 
-      <Section name={_('Error Bars X')}>
+      <PlotlySection name={_('Error Bars X')}>
         <ErrorBars localize={_} attr="error_x" />
-      </Section>
+      </PlotlySection>
 
-      <Section name={_('Error Bars Y')}>
+      <PlotlySection name={_('Error Bars Y')}>
         <ErrorBars localize={_} attr="error_y" />
-      </Section>
+      </PlotlySection>
 
-      <Section name={_('Error Bars Z')}>
+      <PlotlySection name={_('Error Bars Z')}>
         <ErrorBars localize={_} attr="error_z" />
-      </Section>
+      </PlotlySection>
 
-      <Section name={_('Header Options')}>
+      <PlotlySection name={_('Header Options')}>
         <DataSelector label={_('Fill Color')} attr="header.fill.color" />
         <DataSelector label={_('Font Color')} attr="header.font.color" />
         <DataSelector label={_('Font Size')} attr="header.font.size" />
-      </Section>
+      </PlotlySection>
 
-      <Section name={_('Cell Options')}>
+      <PlotlySection name={_('Cell Options')}>
         <DataSelector label={_('Fill Color')} attr="cells.fill.color" />
         <DataSelector label={_('Font Color')} attr="cells.font.color" />
         <DataSelector label={_('Font Size')} attr="cells.font.size" />
-      </Section>
+      </PlotlySection>
 
-      <Section name={_('Column Options')}>
+      <PlotlySection name={_('Column Options')}>
         <DataSelector label={_('Width')} attr="columnwidth" />
         <DataSelector label={_('Order')} attr="columnorder" />
-      </Section>
+      </PlotlySection>
 
-      <Section name={_('Options')}>
+      <PlotlySection name={_('Options')}>
         <DataSelector label={_('Intensity')} attr="intensity" />
         <DataSelector label={_('Facecolor')} attr="facecolor" />
         <DataSelector label={_('Vertexcolor')} attr="vertexcolor" />
@@ -193,7 +193,7 @@ const GraphCreatePanel = ({localize: _}) => {
             {label: _('Yes'), value: true},
           ]}
         />
-      </Section>
+      </PlotlySection>
     </TraceAccordion>
   );
 };
diff --git a/src/default_panels/StyleAxesPanel.js b/src/default_panels/StyleAxesPanel.js
index db7474046..c6cd6ba35 100644
--- a/src/default_panels/StyleAxesPanel.js
+++ b/src/default_panels/StyleAxesPanel.js
@@ -15,7 +15,7 @@ import {
   NumericFractionDomain,
   Radio,
   TextEditor,
-  Section,
+  PlotlySection,
   TraceRequiredPanel,
   AxesFold,
   TraceTypeSection,
@@ -70,7 +70,7 @@ class StyleAxesPanel extends Component {
             !axis._name.includes('radial') && !axis._name.includes('angular')
           }
         >
-          <Section name={_('Boundaries')} attr="domain[0]">
+          <PlotlySection name={_('Boundaries')} attr="domain[0]">
             <AxisOverlayDropdown
               label={_('Overlay')}
               attr="overlaying"
@@ -81,7 +81,7 @@ class StyleAxesPanel extends Component {
               attr="domain[0]"
             />
             <NumericFractionDomain label={_('End Position')} attr="domain[1]" />
-          </Section>
+          </PlotlySection>
 
           <TraceTypeSection
             name={_('Anchor')}
@@ -97,7 +97,7 @@ class StyleAxesPanel extends Component {
         </AxesFold>
 
         <AxesFold name={_('Range')}>
-          <Section name={_('Range')} attr="autorange">
+          <PlotlySection name={_('Range')} attr="autorange">
             <Dropdown
               attr="type"
               label={_('Type')}
@@ -119,7 +119,7 @@ class StyleAxesPanel extends Component {
             />
             <AxesRange label={_('Min')} attr="range[0]" />
             <AxesRange label={_('Max')} attr="range[1]" />
-          </Section>
+          </PlotlySection>
           <TraceTypeSection
             name={_('Range')}
             traceTypes={['choropleth', 'scattergeo']}
@@ -140,7 +140,7 @@ class StyleAxesPanel extends Component {
         </AxesFold>
 
         <AxesFold name={_('Lines')}>
-          <Section name={_('Axis Line')} attr="showline">
+          <PlotlySection name={_('Axis Line')} attr="showline">
             <Radio
               attr="showline"
               options={[
@@ -169,8 +169,8 @@ class StyleAxesPanel extends Component {
                 {label: _('Off'), value: false},
               ]}
             />
-          </Section>
-          <Section name={_('Grid Lines')} attr="showgrid">
+          </PlotlySection>
+          <PlotlySection name={_('Grid Lines')} attr="showgrid">
             <Radio
               attr="showgrid"
               options={[
@@ -180,8 +180,8 @@ class StyleAxesPanel extends Component {
             />
             <Numeric label={_('Thickness')} attr="gridwidth" units="px" />
             <ColorPicker label={_('Color')} attr="gridcolor" />
-          </Section>
-          <Section name={_('Zero Line')} attr="zeroline">
+          </PlotlySection>
+          <PlotlySection name={_('Zero Line')} attr="zeroline">
             <Radio
               attr="zeroline"
               options={[
@@ -191,9 +191,9 @@ class StyleAxesPanel extends Component {
             />
             <Numeric label={_('Thickness')} attr="zerolinewidth" units="px" />
             <ColorPicker label={_('Color')} attr="zerolinecolor" />
-          </Section>
+          </PlotlySection>
 
-          <Section name={_('Axis Background')} attr="showbackground">
+          <PlotlySection name={_('Axis Background')} attr="showbackground">
             <Radio
               attr="showbackground"
               options={[
@@ -202,11 +202,11 @@ class StyleAxesPanel extends Component {
               ]}
             />
             <ColorPicker label={_('Color')} attr="backgroundcolor" />
-          </Section>
+          </PlotlySection>
         </AxesFold>
 
         <AxesFold name={_('Tick Labels')}>
-          <Section name={_('Tick Labels')} attr="showticklabels">
+          <PlotlySection name={_('Tick Labels')} attr="showticklabels">
             <Radio
               attr="showticklabels"
               options={[
@@ -268,9 +268,9 @@ class StyleAxesPanel extends Component {
                 {label: _('k/M/B'), value: 'B'},
               ]}
             />
-          </Section>
+          </PlotlySection>
 
-          <Section name={_('Label Prefix')}>
+          <PlotlySection name={_('Label Prefix')}>
             <Dropdown
               label={_('Prefix')}
               attr="tickprefix"
@@ -291,8 +291,8 @@ class StyleAxesPanel extends Component {
                 {label: _('None'), value: 'none'},
               ]}
             />
-          </Section>
-          <Section name={_('Label Suffix')}>
+          </PlotlySection>
+          <PlotlySection name={_('Label Suffix')}>
             <Dropdown
               label={_('Suffix')}
               attr="ticksuffix"
@@ -312,9 +312,9 @@ class StyleAxesPanel extends Component {
                 {label: _('None'), value: 'none'},
               ]}
             />
-          </Section>
+          </PlotlySection>
 
-          <Section name={_('Spacing')} attr="dtick">
+          <PlotlySection name={_('Spacing')} attr="dtick">
             <Radio
               attr="tickmode"
               options={[
@@ -326,10 +326,10 @@ class StyleAxesPanel extends Component {
             <DTicks label={_('Step Offset')} attr="tick0" />
             <DTicks label={_('Step Size')} attr="dtick" />
             <NTicks label={_('Max Number of Labels')} attr="nticks" />
-          </Section>
+          </PlotlySection>
         </AxesFold>
         <AxesFold name={_('Tick Markers')}>
-          <Section name={_('Tick Markers')} attr="ticks">
+          <PlotlySection name={_('Tick Markers')} attr="ticks">
             <Radio
               attr="ticks"
               options={[
@@ -341,8 +341,8 @@ class StyleAxesPanel extends Component {
             <Numeric label={_('Length')} attr="ticklen" units="px" />
             <Numeric label={_('Width')} attr="tickwidth" units="px" />
             <ColorPicker label={_('Tick Color')} attr="tickcolor" />
-          </Section>
-          <Section name={_('Spacing')}>
+          </PlotlySection>
+          <PlotlySection name={_('Spacing')}>
             <Radio
               attr="tickmode"
               options={[
@@ -354,7 +354,7 @@ class StyleAxesPanel extends Component {
             <DTicks label={_('Step Offset')} attr="tick0" />
             <DTicks label={_('Step Size')} attr="dtick" />
             <NTicks label={_('Max Number of Markers')} attr="nticks" />
-          </Section>
+          </PlotlySection>
         </AxesFold>
 
         <AxesFold
@@ -425,7 +425,7 @@ class StyleAxesPanel extends Component {
               ]}
             />
           </RangeSelectorAccordion>
-          <Section name={_('Text')}>
+          <PlotlySection name={_('Text')}>
             <FontSelector
               label={_('Typeface')}
               attr="rangeselector.font.family"
@@ -439,8 +439,8 @@ class StyleAxesPanel extends Component {
               label={_('Font Color')}
               attr="rangeselector.font.color"
             />
-          </Section>
-          <Section name={_('Style')}>
+          </PlotlySection>
+          <PlotlySection name={_('Style')}>
             <ColorPicker
               label={_('Background Color')}
               attr="rangeselector.bgcolor"
@@ -458,8 +458,8 @@ class StyleAxesPanel extends Component {
               label={_('Border Color')}
               attr="rangeselector.bordercolor"
             />
-          </Section>
-          <Section name={_('Horizontal Positioning')}>
+          </PlotlySection>
+          <PlotlySection name={_('Horizontal Positioning')}>
             <Dropdown
               label={_('Anchor Point')}
               clearable={false}
@@ -472,8 +472,8 @@ class StyleAxesPanel extends Component {
               ]}
             />
             <Numeric label={_('Position')} step={0.02} attr="rangeselector.x" />
-          </Section>
-          <Section name={_('Vertical Positioning')}>
+          </PlotlySection>
+          <PlotlySection name={_('Vertical Positioning')}>
             <Dropdown
               label={_('Anchor Point')}
               clearable={false}
@@ -486,7 +486,7 @@ class StyleAxesPanel extends Component {
               ]}
             />
             <Numeric label={_('Position')} step={0.02} attr="rangeselector.y" />
-          </Section>
+          </PlotlySection>
         </AxesFold>
 
         <AxesFold
diff --git a/src/default_panels/StyleColorbarsPanel.js b/src/default_panels/StyleColorbarsPanel.js
index 63903ea65..2df595776 100644
--- a/src/default_panels/StyleColorbarsPanel.js
+++ b/src/default_panels/StyleColorbarsPanel.js
@@ -6,9 +6,9 @@ import {
   TextEditor,
   TraceAccordion,
   Numeric,
-  Fold,
-  Panel,
-  Section,
+  PlotlyFold,
+  PlotlyPanel,
+  PlotlySection,
   Dropdown,
   FontSelector,
   ColorPicker,
@@ -33,8 +33,8 @@ const StyleColorBarsPanel = ({localize: _}) => {
       })}
       {['', 'marker.'].map(prefix => {
         return (
-          <Panel showExpandCollapse={false} key={prefix + ' panel'}>
-            <Fold name={_('Title')}>
+          <PlotlyPanel showExpandCollapse={false} key={prefix + ' panel'}>
+            <PlotlyFold name={_('Title')}>
               <TextEditor attr={prefix + 'colorbar.title'} />
 
               <Dropdown
@@ -59,9 +59,9 @@ const StyleColorBarsPanel = ({localize: _}) => {
                 label={_('Font Color')}
                 attr={prefix + 'colorbar.titlefont.color'}
               />
-            </Fold>
-            <Fold name={_('Size and Positioning')}>
-              <Section name={_('Size')} attr={prefix + 'colorbar.len'}>
+            </PlotlyFold>
+            <PlotlyFold name={_('Size and Positioning')}>
+              <PlotlySection name={_('Size')} attr={prefix + 'colorbar.len'}>
                 <Numeric label={_('Height')} attr={prefix + 'colorbar.len'} />
 
                 <Radio
@@ -84,8 +84,8 @@ const StyleColorBarsPanel = ({localize: _}) => {
                     {label: _('Pixels'), value: 'pixels'},
                   ]}
                 />
-              </Section>
-              <Section
+              </PlotlySection>
+              <PlotlySection
                 name={_('Horizontal Positioning')}
                 attr={prefix + 'colorbar.x'}
               >
@@ -105,8 +105,8 @@ const StyleColorBarsPanel = ({localize: _}) => {
                     {label: _('Right'), value: 'right'},
                   ]}
                 />
-              </Section>
-              <Section
+              </PlotlySection>
+              <PlotlySection
                 name={_('Vertical Positioning')}
                 attr={prefix + 'colorbar.y'}
               >
@@ -126,8 +126,11 @@ const StyleColorBarsPanel = ({localize: _}) => {
                     {label: _('Bottom'), value: 'bottom'},
                   ]}
                 />
-              </Section>
-              <Section name={_('Padding')} attr={prefix + 'colorbar.xpad'}>
+              </PlotlySection>
+              <PlotlySection
+                name={_('Padding')}
+                attr={prefix + 'colorbar.xpad'}
+              >
                 <Numeric
                   label={_('Vertical Padding')}
                   attr={prefix + 'colorbar.ypad'}
@@ -138,9 +141,9 @@ const StyleColorBarsPanel = ({localize: _}) => {
                   attr={prefix + 'colorbar.xpad'}
                   units="px"
                 />
-              </Section>
-            </Fold>
-            <Fold name={_('Labels')}>
+              </PlotlySection>
+            </PlotlyFold>
+            <PlotlyFold name={_('Labels')}>
               <Radio
                 attr={prefix + 'colorbar.showticklabels'}
                 options={[
@@ -186,7 +189,7 @@ const StyleColorBarsPanel = ({localize: _}) => {
                   {label: _('k/M/B'), value: 'B'},
                 ]}
               />
-              <Section name={_('Label Prefix')}>
+              <PlotlySection name={_('Label Prefix')}>
                 <Dropdown
                   label={_('Prefix')}
                   attr={prefix + 'colorbar.tickprefix'}
@@ -207,8 +210,8 @@ const StyleColorBarsPanel = ({localize: _}) => {
                     {label: _('None'), value: 'none'},
                   ]}
                 />
-              </Section>
-              <Section name={_('Label Suffix')}>
+              </PlotlySection>
+              <PlotlySection name={_('Label Suffix')}>
                 <Dropdown
                   label={_('Suffix')}
                   attr={prefix + 'colorbar.ticksuffix'}
@@ -228,8 +231,8 @@ const StyleColorBarsPanel = ({localize: _}) => {
                     {label: _('None'), value: 'none'},
                   ]}
                 />
-              </Section>
-              <Section name={_('Number of Labels')}>
+              </PlotlySection>
+              <PlotlySection name={_('Number of Labels')}>
                 <Radio
                   attr={prefix + 'colorbar.tickmode'}
                   options={[
@@ -250,9 +253,9 @@ const StyleColorBarsPanel = ({localize: _}) => {
                   label={_('Max Number of Labels')}
                   attr={prefix + 'colorbar.nticks'}
                 />
-              </Section>
-            </Fold>
-            <Fold name={_('Ticks')}>
+              </PlotlySection>
+            </PlotlyFold>
+            <PlotlyFold name={_('Ticks')}>
               <Radio
                 attr={prefix + 'colorbar.ticks'}
                 options={[
@@ -275,7 +278,7 @@ const StyleColorBarsPanel = ({localize: _}) => {
                 label={_('Tick Color')}
                 attr={prefix + 'colorbar.tickcolor'}
               />
-              <Section name={_('Number of Markers')}>
+              <PlotlySection name={_('Number of Markers')}>
                 <Radio
                   attr={prefix + 'colorbar.tickmode'}
                   options={[
@@ -296,10 +299,10 @@ const StyleColorBarsPanel = ({localize: _}) => {
                   label={_('Max Number of Markers')}
                   attr={prefix + 'colorbar.nticks'}
                 />
-              </Section>
-            </Fold>
-            <Fold name={_('Borders and Background')}>
-              <Section
+              </PlotlySection>
+            </PlotlyFold>
+            <PlotlyFold name={_('Borders and Background')}>
+              <PlotlySection
                 name={_('Color Bar')}
                 attr={prefix + 'colorbar.outlinewidth'}
               >
@@ -311,8 +314,11 @@ const StyleColorBarsPanel = ({localize: _}) => {
                   label={_('Border Color')}
                   attr={prefix + 'colorbar.outlinecolor'}
                 />
-              </Section>
-              <Section name={_('Container')} attr={prefix + 'colorbar.bgcolor'}>
+              </PlotlySection>
+              <PlotlySection
+                name={_('Container')}
+                attr={prefix + 'colorbar.bgcolor'}
+              >
                 <ColorPicker
                   label={_('Background Color')}
                   attr={prefix + 'colorbar.bgcolor'}
@@ -325,9 +331,9 @@ const StyleColorBarsPanel = ({localize: _}) => {
                   label={_('Border Color')}
                   attr={prefix + 'colorbar.bordercolor'}
                 />
-              </Section>
-            </Fold>
-          </Panel>
+              </PlotlySection>
+            </PlotlyFold>
+          </PlotlyPanel>
         );
       })}
     </TraceAccordion>
diff --git a/src/default_panels/StyleImagesPanel.js b/src/default_panels/StyleImagesPanel.js
index 0c86583b6..17f16dd09 100644
--- a/src/default_panels/StyleImagesPanel.js
+++ b/src/default_panels/StyleImagesPanel.js
@@ -5,7 +5,7 @@ import {
   Radio,
   Dropzone,
   PositioningNumeric,
-  Section,
+  PlotlySection,
   PositioningRef,
   Dropdown,
 } from '../components';
@@ -36,7 +36,7 @@ const StyleImagesPanel = ({localize: _}) => (
     />
     <PositioningNumeric attr="sizex" label={_('Width')} />
     <PositioningNumeric attr="sizey" label={_('Height')} />
-    <Section name={_('Horizontal Positioning')}>
+    <PlotlySection name={_('Horizontal Positioning')}>
       <Dropdown
         label={_('Anchor Point')}
         clearable={false}
@@ -49,9 +49,9 @@ const StyleImagesPanel = ({localize: _}) => (
       />
       <PositioningNumeric label={_('Position')} attr="x" />
       <PositioningRef label={_('Relative To')} attr="xref" />
-    </Section>
+    </PlotlySection>
 
-    <Section name={_('Vertical Positioning')}>
+    <PlotlySection name={_('Vertical Positioning')}>
       <Dropdown
         label={_('Anchor Point')}
         clearable={false}
@@ -64,7 +64,7 @@ const StyleImagesPanel = ({localize: _}) => (
       />
       <PositioningNumeric label={_('Position')} attr="y" />
       <PositioningRef label={_('Relative To')} attr="yref" />
-    </Section>
+    </PlotlySection>
   </ImageAccordion>
 );
 
diff --git a/src/default_panels/StyleLayoutPanel.js b/src/default_panels/StyleLayoutPanel.js
index 341a92098..66bd56a64 100644
--- a/src/default_panels/StyleLayoutPanel.js
+++ b/src/default_panels/StyleLayoutPanel.js
@@ -4,11 +4,11 @@ import {
   CanvasSize,
   ColorPicker,
   FontSelector,
-  Fold,
+  PlotlyFold,
   Numeric,
   Radio,
   TextEditor,
-  Section,
+  PlotlySection,
   TraceRequiredPanel,
 } from '../components';
 
@@ -16,7 +16,7 @@ import {localize} from '../lib';
 
 const StyleLayoutPanel = ({localize: _}) => (
   <TraceRequiredPanel>
-    <Fold name={_('Canvas')}>
+    <PlotlyFold name={_('Canvas')}>
       <Radio
         label={_('Size')}
         attr="autosize"
@@ -38,9 +38,9 @@ const StyleLayoutPanel = ({localize: _}) => (
           {label: _('Disable'), value: false},
         ]}
       />
-    </Fold>
-    <Fold name={_('Title and Fonts')}>
-      <Section name={_('Title')} attr="title">
+    </PlotlyFold>
+    <PlotlyFold name={_('Title and Fonts')}>
+      <PlotlySection name={_('Title')} attr="title">
         <TextEditor attr="title" />
         <FontSelector
           label={_('Typeface')}
@@ -49,8 +49,8 @@ const StyleLayoutPanel = ({localize: _}) => (
         />
         <Numeric label={_('Font Size')} attr="titlefont.size" units="px" />
         <ColorPicker label={_('Font Color')} attr="titlefont.color" />
-      </Section>
-      <Section name={_('Global Font')}>
+      </PlotlySection>
+      <PlotlySection name={_('Global Font')}>
         <FontSelector
           label={_('Typeface')}
           attr="font.family"
@@ -58,15 +58,15 @@ const StyleLayoutPanel = ({localize: _}) => (
         />
         <Numeric label={_('Font Size')} attr="font.size" units="px" />
         <ColorPicker label={_('Font Color')} attr="font.color" />
-      </Section>
-    </Fold>
-    <Fold name={_('Margins and Padding')}>
+      </PlotlySection>
+    </PlotlyFold>
+    <PlotlyFold name={_('Margins and Padding')}>
       <Numeric label={_('Top')} attr="margin.t" units="px" />
       <Numeric label={_('Bottom')} attr="margin.b" units="px" />
       <Numeric label={_('Left')} attr="margin.l" units="px" />
       <Numeric label={_('Right')} attr="margin.r" units="px" />
       <Numeric label={_('Padding')} attr="margin.pad" units="px" />
-    </Fold>
+    </PlotlyFold>
   </TraceRequiredPanel>
 );
 
diff --git a/src/default_panels/StyleLegendPanel.js b/src/default_panels/StyleLegendPanel.js
index 19281ef3e..0abcf35db 100644
--- a/src/default_panels/StyleLegendPanel.js
+++ b/src/default_panels/StyleLegendPanel.js
@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 import {
   ColorPicker,
   FontSelector,
-  Fold,
+  PlotlyFold,
   Numeric,
   Radio,
-  Section,
+  PlotlySection,
   Dropdown,
   TraceRequiredPanel,
 } from '../components';
@@ -15,7 +15,7 @@ import {localize} from '../lib';
 
 const StyleLegendPanel = ({localize: _}) => (
   <TraceRequiredPanel>
-    <Fold name={_('Legend')}>
+    <PlotlyFold name={_('Legend')}>
       <Radio
         attr="showlegend"
         options={[
@@ -23,12 +23,12 @@ const StyleLegendPanel = ({localize: _}) => (
           {label: _('Hide'), value: false},
         ]}
       />
-      <Section name={_('Text')}>
+      <PlotlySection name={_('Text')}>
         <FontSelector label={_('Typeface')} attr="legend.font.family" />
         <Numeric label={_('Size')} attr="legend.font.size" units="px" />
         <ColorPicker label={_('Color')} attr="legend.font.color" />
-      </Section>
-      <Section name={_('Legend Box')}>
+      </PlotlySection>
+      <PlotlySection name={_('Legend Box')}>
         <Numeric
           label={_('Border Width')}
           attr="legend.borderwidth"
@@ -36,8 +36,8 @@ const StyleLegendPanel = ({localize: _}) => (
         />
         <ColorPicker label={_('Border Color')} attr="legend.bordercolor" />
         <ColorPicker label={_('Background Color')} attr="legend.bgcolor" />
-      </Section>
-      <Section name={_('Horizontal Positioning')}>
+      </PlotlySection>
+      <PlotlySection name={_('Horizontal Positioning')}>
         <Dropdown
           label={_('Anchor Point')}
           clearable={false}
@@ -50,8 +50,8 @@ const StyleLegendPanel = ({localize: _}) => (
           ]}
         />
         <Numeric label={_('Position')} showSlider step={0.02} attr="legend.x" />
-      </Section>
-      <Section name={_('Vertical Positioning')}>
+      </PlotlySection>
+      <PlotlySection name={_('Vertical Positioning')}>
         <Dropdown
           label={_('Anchor Point')}
           clearable={false}
@@ -64,8 +64,8 @@ const StyleLegendPanel = ({localize: _}) => (
           ]}
         />
         <Numeric label={_('Position')} showSlider step={0.02} attr="legend.y" />
-      </Section>
-      <Section name={_('Orientation')}>
+      </PlotlySection>
+      <PlotlySection name={_('Orientation')}>
         <Radio
           attr="legend.orientation"
           options={[
@@ -73,8 +73,8 @@ const StyleLegendPanel = ({localize: _}) => (
             {label: _('Horizontal'), value: 'h'},
           ]}
         />
-      </Section>
-      <Section name={_('Trace Order')}>
+      </PlotlySection>
+      <PlotlySection name={_('Trace Order')}>
         <Radio
           attr="legend.traceorder"
           options={[
@@ -82,8 +82,8 @@ const StyleLegendPanel = ({localize: _}) => (
             {label: _('Reversed'), value: 'reversed'},
           ]}
         />
-      </Section>
-    </Fold>
+      </PlotlySection>
+    </PlotlyFold>
   </TraceRequiredPanel>
 );
 
diff --git a/src/default_panels/StyleNotesPanel.js b/src/default_panels/StyleNotesPanel.js
index 4fcaf870c..898f91369 100644
--- a/src/default_panels/StyleNotesPanel.js
+++ b/src/default_panels/StyleNotesPanel.js
@@ -12,21 +12,21 @@ import {
   PositioningNumeric,
   Radio,
   TextEditor,
-  Section,
+  PlotlySection,
 } from '../components';
 
 import {localize} from '../lib';
 
 const StyleNotesPanel = ({localize: _}) => (
   <AnnotationAccordion canAdd>
-    <Section name={_('Note Text')} attr="text">
+    <PlotlySection name={_('Note Text')} attr="text">
       <TextEditor attr="text" />
       <FontSelector label={_('Typeface')} attr="font.family" />
       <Numeric label={_('Font Size')} attr="font.size" units="px" />
       <ColorPicker label={_('Font Color')} attr="font.color" />
       <Numeric label={_('Angle')} attr="textangle" units="°" />
-    </Section>
-    <Section name={_('Arrow')}>
+    </PlotlySection>
+    <PlotlySection name={_('Arrow')}>
       <Radio
         attr="showarrow"
         options={[
@@ -42,8 +42,8 @@ const StyleNotesPanel = ({localize: _}) => (
       <AnnotationArrowRef label="Y Offset" attr="ayref" />
       <Numeric label={_('X Vector')} attr="ax" />
       <Numeric label={_('Y Vector')} attr="ay" />
-    </Section>
-    <Section name={_('Horizontal Positioning')}>
+    </PlotlySection>
+    <PlotlySection name={_('Horizontal Positioning')}>
       <Dropdown
         label={_('Anchor Point')}
         clearable={false}
@@ -57,8 +57,8 @@ const StyleNotesPanel = ({localize: _}) => (
       />
       <PositioningNumeric label={_('Position')} attr="x" />
       <AnnotationRef label={_('Relative To')} attr="xref" />
-    </Section>
-    <Section name={_('Vertical Positioning')}>
+    </PlotlySection>
+    <PlotlySection name={_('Vertical Positioning')}>
       <Dropdown
         label={_('Anchor Point')}
         clearable={false}
@@ -72,7 +72,7 @@ const StyleNotesPanel = ({localize: _}) => (
       />
       <PositioningNumeric label={_('Position')} attr="y" />
       <AnnotationRef label={_('Relative To')} attr="yref" />
-    </Section>
+    </PlotlySection>
   </AnnotationAccordion>
 );
 
diff --git a/src/default_panels/StyleShapesPanel.js b/src/default_panels/StyleShapesPanel.js
index fe2e557c4..a9072ef96 100644
--- a/src/default_panels/StyleShapesPanel.js
+++ b/src/default_panels/StyleShapesPanel.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {
   ShapeAccordion,
   Radio,
-  Section,
+  PlotlySection,
   PositioningRef,
   PositioningNumeric,
   Numeric,
@@ -32,26 +32,26 @@ const StyleShapesPanel = ({localize: _}) => (
       ]}
     />
 
-    <Section name={_('Horizontal Boundaries')}>
+    <PlotlySection name={_('Horizontal Boundaries')}>
       <PositioningRef label={_('Relative to')} attr="xref" />
       <PositioningNumeric label={_('Start Point')} attr="x0" />
       <PositioningNumeric label={_('End Point')} attr="x1" />
-    </Section>
+    </PlotlySection>
 
-    <Section name={_('Vertical Boundaries')}>
+    <PlotlySection name={_('Vertical Boundaries')}>
       <PositioningRef label={_('Relative to')} attr="yref" />
       <PositioningNumeric label={_('Start Point')} attr="y0" />
       <PositioningNumeric label={_('End Point')} attr="y1" />
-    </Section>
-    <Section name={_('Lines')}>
+    </PlotlySection>
+    <PlotlySection name={_('Lines')}>
       <Numeric label={_('Width')} attr="line.width" />
       <ColorPicker label={_('Line Color')} attr="line.color" />
       <LineDashSelector label={_('Type')} attr="line.dash" />
-    </Section>
-    <Section name={_('Fill')}>
+    </PlotlySection>
+    <PlotlySection name={_('Fill')}>
       <ColorPicker label={_('Color')} attr="fillcolor" />
       <NumericFraction label={_('Opacity')} attr="opacity" />
-    </Section>
+    </PlotlySection>
   </ShapeAccordion>
 );
 
diff --git a/src/default_panels/StyleSlidersPanel.js b/src/default_panels/StyleSlidersPanel.js
index efc3c27e2..a554ee6b1 100644
--- a/src/default_panels/StyleSlidersPanel.js
+++ b/src/default_panels/StyleSlidersPanel.js
@@ -5,7 +5,7 @@ import {
   FontSelector,
   Numeric,
   Radio,
-  Section,
+  PlotlySection,
   SliderAccordion,
 } from '../components';
 
@@ -20,30 +20,30 @@ const StyleSlidersPanel = ({localize: _}) => (
         {label: _('Hide'), value: false},
       ]}
     />
-    <Section name={_('Background')}>
+    <PlotlySection name={_('Background')}>
       <ColorPicker label={_('Color')} attr="bgcolor" />
       <ColorPicker label={_('Active Color')} attr="activebgcolor" />
-    </Section>
-    <Section name={_('Border')}>
+    </PlotlySection>
+    <PlotlySection name={_('Border')}>
       <Numeric label={_('Width')} attr="borderwidth" />
       <ColorPicker label={_('Color')} attr="bordercolor" />
-    </Section>
-    <Section name={_('Font')}>
+    </PlotlySection>
+    <PlotlySection name={_('Font')}>
       <FontSelector label={_('Typeface')} attr="font.family" />
       <Numeric label={_('Size')} attr="font.size" />
       <ColorPicker label={_('Color')} attr="font.color" />
-    </Section>
-    <Section name={_('Padding')}>
+    </PlotlySection>
+    <PlotlySection name={_('Padding')}>
       <Numeric label={_('Top')} attr="pad.t" showSlider />
       <Numeric label={_('Bottom')} attr="pad.b" showSlider />
       <Numeric label={_('Left')} attr="pad.l" showSlider />
       <Numeric label={_('Right')} attr="pad.r" showSlider />
-    </Section>
-    <Section name={_('Ticks')}>
+    </PlotlySection>
+    <PlotlySection name={_('Ticks')}>
       <ColorPicker label={_('Color')} attr="tickcolor" />
       <Numeric label={_('Legth')} attr="ticklen" />
       <Numeric label={_('Width')} attr="tickwidth" />
-    </Section>
+    </PlotlySection>
   </SliderAccordion>
 );
 
diff --git a/src/default_panels/StyleTracesPanel.js b/src/default_panels/StyleTracesPanel.js
index 5a5ace496..ca2db8186 100644
--- a/src/default_panels/StyleTracesPanel.js
+++ b/src/default_panels/StyleTracesPanel.js
@@ -13,6 +13,7 @@ import {
   Radio,
   TextEditor,
   Section,
+  PlotlySection,
   LayoutSection,
   SymbolSelector,
   TraceAccordion,
@@ -42,7 +43,7 @@ const StyleTracesPanel = ({localize: _}) => (
     <NumericFraction label={_('Opacity')} attr="opacity" />
     <ColorPicker label={_('Color')} attr="color" />
 
-    <Section name={_('Text Attributes')}>
+    <PlotlySection name={_('Text Attributes')}>
       <Flaglist
         attr="textinfo"
         options={[
@@ -52,9 +53,9 @@ const StyleTracesPanel = ({localize: _}) => (
           {label: _('%'), value: 'percent'},
         ]}
       />
-    </Section>
+    </PlotlySection>
 
-    <Section name={_('Header')}>
+    <PlotlySection name={_('Header')}>
       <Numeric label={_('Height')} attr="header.height" />
       <ColorPicker label={_('Fill Color')} attr="header.fill.color" />
       <FontSelector label={_('Typeface')} attr="header.font.family" />
@@ -71,9 +72,9 @@ const StyleTracesPanel = ({localize: _}) => (
       <ColorPicker label={_('Font Color')} attr="header.font.color" />
       <Numeric label={_('Border Width')} attr="header.line.width" />
       <ColorPicker label={_('Border Color')} attr="header.line.color" />
-    </Section>
+    </PlotlySection>
 
-    <Section name={_('Cells')}>
+    <PlotlySection name={_('Cells')}>
       <Numeric label={_('Height')} attr="cells.height" />
       <ColorPicker label={_('Fill Color')} attr="cells.fill.color" />
       <FontSelector label={_('Typeface')} attr="cells.font.family" />
@@ -90,9 +91,9 @@ const StyleTracesPanel = ({localize: _}) => (
       <ColorPicker label={_('Font Color')} attr="cells.font.color" />
       <Numeric label={_('Border Width')} attr="cells.line.width" />
       <ColorPicker label={_('Border Color')} attr="cells.line.color" />
-    </Section>
+    </PlotlySection>
 
-    <Section name={_('Display')}>
+    <PlotlySection name={_('Display')}>
       <Flaglist
         attr="mode"
         options={[
@@ -109,12 +110,12 @@ const StyleTracesPanel = ({localize: _}) => (
           {label: _('Disable'), value: false},
         ]}
       />
-    </Section>
+    </PlotlySection>
 
-    <Section name={_('Filled Area')}>
+    <PlotlySection name={_('Filled Area')}>
       <FillDropdown attr="fill" label={_('Fill to')} localize={_} />
       <ColorPicker label={_('Color')} attr="fillcolor" />
-    </Section>
+    </PlotlySection>
 
     <TraceMarkerSection>
       <Radio
@@ -148,13 +149,13 @@ const StyleTracesPanel = ({localize: _}) => (
       <NumericFraction label={_('Box Padding')} attr="boxgroupgap" />
     </LayoutSection>
 
-    <Section name={_('Ticks')}>
+    <PlotlySection name={_('Ticks')}>
       <Numeric label={_('Width')} attr="tickwidth" />
-    </Section>
+    </PlotlySection>
 
-    <Section name={_('Whiskers')}>
+    <PlotlySection name={_('Whiskers')}>
       <Numeric label={_('Width')} attr="whiskerwidth" />
-    </Section>
+    </PlotlySection>
 
     <TraceTypeSection
       name={_('Lines')}
@@ -222,7 +223,7 @@ const StyleTracesPanel = ({localize: _}) => (
       />
     </TraceTypeSection>
 
-    <Section name={_('Colorscale')}>
+    <PlotlySection name={_('Colorscale')}>
       <ColorscalePicker label={_('Colorscale')} attr="colorscale" />
       <Radio
         label={_('Orientation')}
@@ -250,12 +251,12 @@ const StyleTracesPanel = ({localize: _}) => (
           {label: _('Hide'), value: false},
         ]}
       />
-    </Section>
+    </PlotlySection>
 
-    <Section name={_('Heatmap')}>
+    <PlotlySection name={_('Heatmap')}>
       <Numeric label={_('Horizontal Gaps')} attr="xgap" />
       <Numeric label={_('Vertical Gaps')} attr="ygap" />
-    </Section>
+    </PlotlySection>
 
     <TraceTypeSection
       name={_('Gaps in Data')}
@@ -271,7 +272,7 @@ const StyleTracesPanel = ({localize: _}) => (
       />
     </TraceTypeSection>
 
-    <Section name={_('Contours')}>
+    <PlotlySection name={_('Contours')}>
       <Radio
         label={_('Coloring')}
         attr="contours.coloring"
@@ -302,9 +303,9 @@ const StyleTracesPanel = ({localize: _}) => (
       <ContourNumeric label={_('Step Size')} attr="contours.size" />
       <ContourNumeric label={_('Min Contour')} attr="contours.start" />
       <ContourNumeric label={_('Max Contour')} attr="contours.end" />
-    </Section>
+    </PlotlySection>
 
-    <Section name={_('Lighting')}>
+    <PlotlySection name={_('Lighting')}>
       <NumericFraction label={_('Ambient')} attr="lighting.ambient" />
       <NumericFraction label={_('Diffuse')} attr="lighting.diffuse" />
       <NumericFraction label={_('Specular')} attr="lighting.specular" />
@@ -318,15 +319,15 @@ const StyleTracesPanel = ({localize: _}) => (
         label={_('Face Normal')}
         attr="lighting.facenormalsepsilon"
       />
-    </Section>
+    </PlotlySection>
 
-    <Section name={_('Light Position')}>
+    <PlotlySection name={_('Light Position')}>
       <NumericFraction label={_('X')} attr="lightposition.x" />
       <NumericFraction label={_('Y')} attr="lightposition.y" />
       <NumericFraction label={_('Z')} attr="lightposition.z" />
-    </Section>
+    </PlotlySection>
 
-    <Section name={_('Increasing Trace Styles')}>
+    <PlotlySection name={_('Increasing Trace Styles')}>
       <TextEditor label={_('Name')} attr="increasing.name" richTextOnly />
       <Numeric label={_('Width')} attr="increasing.line.width" />
       <ColorPicker label={_('Line Color')} attr="increasing.line.color" />
@@ -340,9 +341,9 @@ const StyleTracesPanel = ({localize: _}) => (
           {label: _('Hide'), value: false},
         ]}
       />
-    </Section>
+    </PlotlySection>
 
-    <Section name={_('Decreasing Trace Styles')}>
+    <PlotlySection name={_('Decreasing Trace Styles')}>
       <TextEditor label={_('Name')} attr="decreasing.name" richTextOnly />
       <Numeric label={_('Width')} attr="decreasing.line.width" />
       <ColorPicker label={_('Line Color')} attr="decreasing.line.color" />
@@ -356,9 +357,9 @@ const StyleTracesPanel = ({localize: _}) => (
           {label: _('Hide'), value: false},
         ]}
       />
-    </Section>
+    </PlotlySection>
 
-    <Section name={_('Highlight')}>
+    <PlotlySection name={_('Highlight')}>
       <Radio
         attr="boxmean"
         label={_('Mean')}
@@ -375,9 +376,9 @@ const StyleTracesPanel = ({localize: _}) => (
           {label: _('Hide'), value: false},
         ]}
       />
-    </Section>
+    </PlotlySection>
 
-    <Section name={_('On Hover')}>
+    <PlotlySection name={_('On Hover')}>
       <HoverInfo
         attr="hoverinfo"
         label={_('Values Shown On Hover')}
@@ -393,7 +394,7 @@ const StyleTracesPanel = ({localize: _}) => (
       />
       <ColorPicker label={_('Contour Color')} attr="contour.color" />
       <Numeric label={_('Contour Width')} attr="contour.width" />
-    </Section>
+    </PlotlySection>
 
     <TraceTypeSection name={_('Hover Action')} traceTypes={['box']}>
       <Flaglist
diff --git a/src/default_panels/StyleUpdateMenusPanel.js b/src/default_panels/StyleUpdateMenusPanel.js
index 3deaad184..be896f4cf 100644
--- a/src/default_panels/StyleUpdateMenusPanel.js
+++ b/src/default_panels/StyleUpdateMenusPanel.js
@@ -5,7 +5,7 @@ import {
   FontSelector,
   Numeric,
   Radio,
-  Section,
+  PlotlySection,
   UpdateMenuAccordion,
   UpdateMenuButtons,
 } from '../components';
@@ -21,27 +21,27 @@ const StyleUpdateMenusPanel = ({localize: _}) => (
         {label: _('Hide'), value: false},
       ]}
     />
-    <Section name={_('Button Labels')}>
+    <PlotlySection name={_('Button Labels')}>
       <UpdateMenuButtons attr="buttons" />
-    </Section>
-    <Section name={_('Background')}>
+    </PlotlySection>
+    <PlotlySection name={_('Background')}>
       <ColorPicker label={_('Color')} attr="bgcolor" />
-    </Section>
-    <Section name={_('Font')}>
+    </PlotlySection>
+    <PlotlySection name={_('Font')}>
       <FontSelector label={_('Typeface')} attr="font.family" />
       <Numeric label={_('Size')} attr="font.size" />
       <ColorPicker label={_('Color')} attr="font.color" />
-    </Section>
-    <Section name={_('Border')}>
+    </PlotlySection>
+    <PlotlySection name={_('Border')}>
       <Numeric label={_('Width')} attr="borderwidth" />
       <ColorPicker label={_('Color')} attr="bordercolor" />
-    </Section>
-    <Section name={_('Padding')}>
+    </PlotlySection>
+    <PlotlySection name={_('Padding')}>
       <Numeric label={_('Top')} attr="pad.t" showSlider />
       <Numeric label={_('Bottom')} attr="pad.b" showSlider />
       <Numeric label={_('Left')} attr="pad.l" showSlider />
       <Numeric label={_('Right')} attr="pad.r" showSlider />
-    </Section>
+    </PlotlySection>
   </UpdateMenuAccordion>
 );
 
diff --git a/src/index.js b/src/index.js
index 64ccff64a..8c1567261 100644
--- a/src/index.js
+++ b/src/index.js
@@ -44,6 +44,7 @@ import {
   Dropdown,
   Dropzone,
   Flaglist,
+  PlotlyFold,
   Fold,
   FontSelector,
   Info,
@@ -57,9 +58,11 @@ import {
   Numeric,
   AxisRangeValue,
   Text,
+  PlotlyPanel,
   Panel,
   PanelMenuWrapper,
   Radio,
+  PlotlySection,
   Section,
   SingleSidebarItem,
   SymbolSelector,
@@ -69,7 +72,6 @@ import {
   TraceMarkerSection,
   TraceRequiredPanel,
   TraceSelector,
-  SectionHeader,
 } from './components';
 
 import {
@@ -106,7 +108,6 @@ export {
   ColorPicker,
   ColorscalePicker,
   ContourNumeric,
-  SectionHeader,
   ErrorBars,
   DataSelector,
   Dropdown,
@@ -114,6 +115,7 @@ export {
   EDITOR_ACTIONS,
   RangesliderVisible,
   Flaglist,
+  PlotlyFold,
   Fold,
   FontSelector,
   GraphCreatePanel,
@@ -128,9 +130,11 @@ export {
   Numeric,
   AxisRangeValue,
   Text,
+  PlotlyPanel,
   Panel,
   PanelMenuWrapper,
   Radio,
+  PlotlySection,
   Section,
   SingleSidebarItem,
   GraphTransformsPanel,
diff --git a/src/lib/__tests__/connectLayoutToPlot-test.js b/src/lib/__tests__/connectLayoutToPlot-test.js
index 7748f35c6..54ee5f211 100644
--- a/src/lib/__tests__/connectLayoutToPlot-test.js
+++ b/src/lib/__tests__/connectLayoutToPlot-test.js
@@ -1,12 +1,18 @@
 import NumericInput from '../../components/widgets/NumericInput';
 import React from 'react';
 import connectLayoutToPlot from '../connectLayoutToPlot';
-import {Fold, Panel, Section} from '../../components/containers';
+import {
+  PlotlyFold,
+  PlotlyPanel,
+  PlotlySection,
+} from '../../components/containers';
 import {Numeric} from '../../components/fields';
 import {TestEditor, fixtures, plotly} from '../test-utils';
 import {mount} from 'enzyme';
 
-const Layouts = [Panel, Fold, Section].map(connectLayoutToPlot);
+const Layouts = [PlotlyPanel, PlotlyFold, PlotlySection].map(
+  connectLayoutToPlot
+);
 const Editor = props => (
   <TestEditor {...{plotly, onUpdate: jest.fn(), ...props}} />
 );
@@ -16,11 +22,11 @@ Layouts.forEach(Layout => {
     it(`wraps container with fullValue pointing to gd._fullLayout`, () => {
       const wrapper = mount(
         <Editor {...fixtures.scatter({layout: {width: 100}})}>
-          <Panel>
+          <PlotlyPanel>
             <Layout>
               <Numeric label="Width" step={10} attr="width" />
             </Layout>
-          </Panel>
+          </PlotlyPanel>
         </Editor>
       )
         .find('[attr="width"]')
@@ -36,11 +42,11 @@ Layouts.forEach(Layout => {
           beforeUpdateLayout={beforeUpdateLayout}
           {...fixtures.scatter({layout: {width: 100}})}
         >
-          <Panel>
+          <PlotlyPanel>
             <Layout>
               <Numeric label="Width" step={10} attr="width" />
             </Layout>
-          </Panel>
+          </PlotlyPanel>
         </Editor>
       )
         .find('[attr="width"]')
@@ -59,11 +65,11 @@ Layouts.forEach(Layout => {
           onUpdate={onUpdate}
           {...fixtures.scatter({layout: {showlegend: true}})}
         >
-          <Panel>
+          <PlotlyPanel>
             <Layout>
               <Numeric label="Position x" step={0.01} attr="legend.x" />
             </Layout>
-          </Panel>
+          </PlotlyPanel>
         </Editor>
       )
         .find('[attr="legend.x"]')
diff --git a/src/lib/__tests__/connectTraceToPlot-test.js b/src/lib/__tests__/connectTraceToPlot-test.js
index b38cf6719..1d60a89c7 100644
--- a/src/lib/__tests__/connectTraceToPlot-test.js
+++ b/src/lib/__tests__/connectTraceToPlot-test.js
@@ -1,12 +1,16 @@
 import NumericInput from '../../components/widgets/NumericInput';
 import React from 'react';
 import connectTraceToPlot from '../connectTraceToPlot';
-import {Fold, Panel, Section} from '../../components/containers';
+import {
+  PlotlyFold,
+  PlotlyPanel,
+  PlotlySection,
+} from '../../components/containers';
 import {Numeric} from '../../components/fields';
 import {TestEditor, fixtures, plotly} from '../test-utils';
 import {mount} from 'enzyme';
 
-const Traces = [Panel, Fold, Section].map(connectTraceToPlot);
+const Traces = [PlotlyPanel, PlotlyFold, PlotlySection].map(connectTraceToPlot);
 const Editor = props => (
   <TestEditor {...{plotly, onUpdate: jest.fn(), ...props}} />
 );
@@ -18,11 +22,11 @@ Traces.forEach(Trace => {
     it('wraps container with fullValue pointing to gd._fullData[i]', () => {
       const wrapper = mount(
         <Editor {...fixtures.scatter()}>
-          <Panel>
+          <PlotlyPanel>
             <Trace traceIndexes={[0]}>
               <Numeric label="Marker Size" attr="marker.size" />
             </Trace>
-          </Panel>
+          </PlotlyPanel>
         </Editor>
       )
         .find('[attr="marker.size"]')
@@ -35,11 +39,11 @@ Traces.forEach(Trace => {
       const beforeUpdateTraces = jest.fn();
       const wrapper = mount(
         <Editor beforeUpdateTraces={beforeUpdateTraces} {...fixtures.scatter()}>
-          <Panel>
+          <PlotlyPanel>
             <Trace traceIndexes={[0]}>
               <Numeric label="Marker Size" attr="marker.size" />
             </Trace>
-          </Panel>
+          </PlotlyPanel>
         </Editor>
       )
         .find('[attr="marker.size"]')
@@ -57,11 +61,11 @@ Traces.forEach(Trace => {
     it('automatically computes min and max defaults', () => {
       const wrapper = mount(
         <Editor {...fixtures.scatter()}>
-          <Panel>
+          <PlotlyPanel>
             <Trace traceIndexes={[0]}>
               <Numeric label="marker size" attr="marker.size" />
             </Trace>
-          </Panel>
+          </PlotlyPanel>
         </Editor>
       )
         .find('[attr="marker.size"]')
@@ -75,9 +79,9 @@ Traces.forEach(Trace => {
       const name = 'Voldemort';
       const wrapper = mount(
         <Editor {...fixtures.scatter({data: [{name}]})}>
-          <Panel>
+          <PlotlyPanel>
             <Trace traceIndexes={[0]} />
-          </Panel>
+          </PlotlyPanel>
         </Editor>
       )
         .find(Trace)
diff --git a/src/lib/__tests__/nestedContainerConnections-test.js b/src/lib/__tests__/nestedContainerConnections-test.js
index 04bab60b9..d8eaeb560 100644
--- a/src/lib/__tests__/nestedContainerConnections-test.js
+++ b/src/lib/__tests__/nestedContainerConnections-test.js
@@ -1,6 +1,6 @@
 import NumericInput from '../../components/widgets/NumericInput';
 import React from 'react';
-import {Numeric, Section, Panel} from '../../components';
+import {Numeric, PlotlySection, PlotlyPanel} from '../../components';
 import {TestEditor, fixtures, mount} from '../test-utils';
 import {
   connectAxesToLayout,
@@ -55,7 +55,7 @@ describe('Plot Connection', () => {
   });
 
   // see https://github.com/plotly/react-chart-editor/issues/58#issuecomment-345492794
-  it("can't find correct Container when Section divides Trace and Layout", () => {
+  it("can't find correct Container when PlotlySection divides Trace and Layout", () => {
     const fixtureProps = fixtures.scatter({layout: {width: 10}});
     const DeeplyConnectedNumeric = connectTraceToPlot(
       connectLayoutToPlot(
@@ -69,30 +69,30 @@ describe('Plot Connection', () => {
 
     const wrapper = mount(
       <TestEditor {...{...fixtureProps}}>
-        <Section name="Canvas">
+        <PlotlySection name="Canvas">
           <DeeplyConnectedNumeric
             traceIndexes={[0]}
             label="Width"
             attr="width"
           />
-        </Section>
+        </PlotlySection>
       </TestEditor>
     )
       .find('[attr="width"]')
       .find(Numeric);
 
-    // It is 0 because Section is passing _its_ context to unpackPlotProps.
-    // The context of Section is Trace not layout and width isn't defined
+    // It is 0 because PlotlySection is passing _its_ context to unpackPlotProps.
+    // The context of PlotlySection is Trace not layout and width isn't defined
     // in Trace. See next test for workaround.
     expect(wrapper.length).toBe(0);
   });
 
   it('can modify plotProps with <Trace><Section><LayoutComp>', () => {
     const fixtureProps = fixtures.scatter({layout: {width: 10}});
-    const TracePanel = connectTraceToPlot(Panel);
+    const TracePanel = connectTraceToPlot(PlotlyPanel);
 
     const MAXWIDTH = 1000;
-    const LayoutSection = connectLayoutToPlot(Section);
+    const LayoutSection = connectLayoutToPlot(PlotlySection);
     const ModifiedNumeric = connectToContainer(Numeric, {
       modifyPlotProps: (props, context, plotProps) => {
         plotProps.max = MAXWIDTH;

From d050643789ec955bd94204a33fbb7431dfaf180b Mon Sep 17 00:00:00 2001
From: VeraZab <vera.zabeida@gmail.com>
Date: Tue, 27 Mar 2018 16:46:00 -0400
Subject: [PATCH 2/6] Tests + docs

---
 README.md                                     |   8 +-
 src/components/containers/PlotlyFold.js       |  11 +-
 .../ConnectedContainersVisibility-test.js     | 632 ++++++++++++++
 .../UnconnectedContainersVisibility-test.js   | 297 +++++++
 .../containers/__tests__/visibility-test.js   | 782 ------------------
 5 files changed, 941 insertions(+), 789 deletions(-)
 create mode 100644 src/components/containers/__tests__/ConnectedContainersVisibility-test.js
 create mode 100644 src/components/containers/__tests__/UnconnectedContainersVisibility-test.js
 delete mode 100644 src/components/containers/__tests__/visibility-test.js

diff --git a/README.md b/README.md
index f7cab56cf..3456c16c5 100644
--- a/README.md
+++ b/README.md
@@ -66,11 +66,11 @@ The [custom editor example](https://github.com/plotly/react-chart-editor/tree/ma
 
 ### General-purpose Containers
 
-* `<Panel />`: renders as a generic rectangular container with special handling for collapsing/expanding child `<Fold />`s and optionally an 'add' button for creating them
 * `<PanelMenuWrapper />`: renders as a sidebar selector menu for `<Panel />`s
-* `<Fold />`: collapsable container within a `<Panel />`
-* `<Section />`: uncollapsable container within a `<Panel />` or `<Fold />`
-* `<SectionHeader/>`: a `SectionHeader` to use separately with custom layouts.
+* `<PlotlyPanel />`: renders as a generic rectangular container with special handling for collapsing/expanding child `<Fold />`s and optionally an 'add' button for creating them, has special [visibility rules](https://github.com/plotly/react-chart-editor/tree/master/src/components/containers/_tests_/ConnectedContainersVisibility-test.js) that depend on plotly figure
+* `<PlotlyFold />`: collapsable container within a `<Panel />`, has special [visibility rules](https://github.com/plotly/react-chart-editor/tree/master/src/components/containers/_tests_/ConnectedContainersVisibility-test.js) that depend on plotly figure
+* `<PlotlySection />`: uncollapsable container within a `<Panel />` or `<Fold />`, has special [visibility rules](https://github.com/plotly/react-chart-editor/tree/master/src/components/containers/_tests_/ConnectedContainersVisibility-test.js) that depend on plotly figure
+* `<Panel/>`, `<Fold/>`, `<Section/>`: same as `PlotlyPanel`, `PlotlyFold`, `PlotlySection`, but there are no special visibility rules, those containers [always show, and always show their children](https://github.com/plotly/react-chart-editor/tree/master/src/components/containers/_tests_/UnconnectedContainersVisibility-test.js)
 * `<SingleSidebarItem/>`: wraps any item you would like to see appear in the sidebar menu.
 
 ### General-purpose Fields
diff --git a/src/components/containers/PlotlyFold.js b/src/components/containers/PlotlyFold.js
index 2715b5dfa..0421080f9 100644
--- a/src/components/containers/PlotlyFold.js
+++ b/src/components/containers/PlotlyFold.js
@@ -25,6 +25,11 @@ class PlotlyFold extends Component {
   determineVisibility(nextProps, nextContext) {
     this.foldVisible = false;
 
+    if (this.props.forceVisibility) {
+      this.foldVisible = true;
+      return;
+    }
+
     React.Children.forEach(nextProps.children, child => {
       if (!child || this.foldVisible) {
         return;
@@ -149,6 +154,7 @@ PlotlyFold.propTypes = {
   messageIfEmpty: PropTypes.string,
   localize: PropTypes.func,
   name: PropTypes.string,
+  forceVisibility: PropTypes.bool,
 };
 
 PlotlyFold.contextTypes = Object.assign(
@@ -160,8 +166,7 @@ PlotlyFold.contextTypes = Object.assign(
 
 export default localize(PlotlyFold);
 
-// just to keep naming consistent
 export class Fold extends PlotlyFold {}
-Fold.plotly_editor_traits = {
-  foldable: true,
+Fold.defaultProps = {
+  forceVisibility: true,
 };
diff --git a/src/components/containers/__tests__/ConnectedContainersVisibility-test.js b/src/components/containers/__tests__/ConnectedContainersVisibility-test.js
new file mode 100644
index 000000000..847165104
--- /dev/null
+++ b/src/components/containers/__tests__/ConnectedContainersVisibility-test.js
@@ -0,0 +1,632 @@
+import {Numeric, Info} from '../../fields';
+import {LayoutPanel, PlotlyFold, PlotlySection} from '..';
+import React from 'react';
+import {TestEditor, fixtures, mount} from 'lib/test-utils';
+
+// Visibility rules are computed Top -> Down,
+// I.E. PlotlyPanel > PlotlyFold > PlotlySection > Field (Numeric)
+// PlotlyFold decides if it's going to render itself and it's children depending
+// on child type vs PlotlySection communicating visibility decisions up to PlotlyFold
+
+describe('Basic PlotlyPanel rules', () => {
+  describe('no PlotlyPanel, no context for Fields', () => {
+    const wrapper = mount(
+      <TestEditor {...fixtures.scatter()}>
+        <div>
+          <div id="thediv"> ok </div>
+          <Numeric attr="title" />
+        </div>
+      </TestEditor>
+    );
+
+    it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
+    it('SHOWS div which does not need context', () =>
+      expect(wrapper.find('input').length).toEqual(0));
+  });
+
+  describe('PlotlyPanel gives context to Field', () => {
+    const wrapper = mount(
+      <TestEditor {...fixtures.scatter()}>
+        <LayoutPanel>
+          <Numeric attr="title" />
+        </LayoutPanel>
+      </TestEditor>
+    );
+    it('SHOWS Field', () => expect(wrapper.find('input').length).toEqual(1));
+  });
+
+  describe('no PlotlyPanel, does not affect PlotlySection', () => {
+    const wrapper = mount(
+      <TestEditor {...fixtures.scatter()}>
+        <div>
+          <PlotlySection>
+            <div id="thediv"> ok </div>
+            <Numeric attr="title" />
+          </PlotlySection>
+        </div>
+      </TestEditor>
+    );
+
+    it('SHOWS PlotlySection and #thediv', () => {
+      expect(wrapper.find('div.section').length).toEqual(1);
+      expect(wrapper.find('#thediv').length).toEqual(1);
+    });
+
+    it('HIDES Field because it needs context from PlotlyPanel', () =>
+      expect(wrapper.find('input').length).toEqual(0));
+  });
+
+  // describe('no PlotlyPanel, no context for Folds, not usable', () => {
+  //   expect(() => {
+  //     mount(
+  //       <TestEditor {...fixtures.scatter()}>
+  //         <div>
+  //           <PlotlyFold>
+  //             <div id="thediv"> ok </div>
+  //             <Numeric attr="title" />
+  //           </PlotlyFold>
+  //         </div>
+  //       </TestEditor>
+  //     );
+  //   }).toThrow();
+  // });
+});
+
+describe('Basic PlotlySection rules', () => {
+  describe('hides itself when it has no visible children', () => {
+    describe('PlotlyPanel > PlotlySection > Field-with-no-visible-attr', () => {
+      const wrapper = mount(
+        <TestEditor {...fixtures.scatter()}>
+          <LayoutPanel>
+            <PlotlySection>
+              <Numeric attr="not_an_attr" />
+            </PlotlySection>
+          </LayoutPanel>
+        </TestEditor>
+      );
+
+      it('HIDES PlotlySection', () =>
+        expect(wrapper.find('div.section').length).toEqual(0));
+      it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
+    });
+
+    describe('div > PlotlySection > Field-with-visible-attr', () => {
+      const wrapper = mount(
+        <TestEditor {...fixtures.scatter()}>
+          <div>
+            <PlotlySection>
+              <Numeric attr="title" />
+            </PlotlySection>
+          </div>
+        </TestEditor>
+      );
+
+      it('HIDES PlotlySection', () =>
+        expect(wrapper.find('div.section').length).toEqual(0));
+      it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
+    });
+  });
+
+  describe('shows itself when it has visible children', () => {
+    describe('PlotlyPanel > PlotlySection > Field-with-visible-attr', () => {
+      const wrapper = mount(
+        <TestEditor {...fixtures.scatter()}>
+          <LayoutPanel>
+            <PlotlySection>
+              <Numeric attr="title" />
+            </PlotlySection>
+          </LayoutPanel>
+        </TestEditor>
+      );
+
+      it('SHOWS PlotlySection', () =>
+        expect(wrapper.find('div.section').length).toEqual(1));
+      it('SHOWS Field', () => expect(wrapper.find('input').length).toEqual(1));
+    });
+
+    describe('PlotlyPanel > PlotlySection > div', () => {
+      const wrapper = mount(
+        <TestEditor {...fixtures.scatter()}>
+          <LayoutPanel>
+            <PlotlySection>
+              <div id="thediv" />
+              <Numeric attr="not_an_attr" />
+            </PlotlySection>
+          </LayoutPanel>
+        </TestEditor>
+      );
+
+      it('SHOWS PlotlySection', () =>
+        expect(wrapper.find('div.section').length).toEqual(1));
+      it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
+      it('SHOWS div', () => expect(wrapper.find('#thediv').length).toEqual(1));
+    });
+  });
+});
+
+describe('Basic PlotlyFold rules', () => {
+  describe('when children have an attr prop', () => {
+    describe('Field-with-visible-attr', () => {
+      const wrapper = mount(
+        <TestEditor {...fixtures.scatter()}>
+          <LayoutPanel>
+            <PlotlyFold>
+              <Numeric attr="title" />
+            </PlotlyFold>
+          </LayoutPanel>
+        </TestEditor>
+      );
+      it('SHOWS PlotlyFold', () =>
+        expect(wrapper.find('div.fold').length).toEqual(1));
+      it('SHOWS Field', () => expect(wrapper.find('input').length).toEqual(1));
+    });
+
+    describe('Field-with-invisible-attr', () => {
+      const wrapper = mount(
+        <TestEditor {...fixtures.scatter()}>
+          <LayoutPanel>
+            <PlotlyFold>
+              <Numeric attr="not_an_attr" />
+            </PlotlyFold>
+          </LayoutPanel>
+        </TestEditor>
+      );
+
+      it('HIDES PlotlyFold', () =>
+        expect(wrapper.find('div.fold').length).toEqual(0));
+      it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
+    });
+  });
+
+  describe('when childen do not have an attr prop', () => {
+    describe('div', () => {
+      const wrapper = mount(
+        <TestEditor {...fixtures.scatter()}>
+          <LayoutPanel>
+            <PlotlyFold>
+              <div id="thediv"> ok </div>
+            </PlotlyFold>
+          </LayoutPanel>
+        </TestEditor>
+      );
+
+      it('SHOWS PlotlyFold', () =>
+        expect(wrapper.find('div.fold').length).toEqual(1));
+      it('SHOWS div', () => expect(wrapper.find('#thediv').length).toEqual(1));
+    });
+
+    describe('when children have a no_visibility_forcing, plotly_editor_trait', () => {
+      describe('PlotlySection', () => {
+        describe('div', () => {
+          const wrapper = mount(
+            <TestEditor {...fixtures.scatter()}>
+              <LayoutPanel>
+                <PlotlyFold>
+                  <PlotlySection>
+                    <div id="thediv"> ok </div>
+                  </PlotlySection>
+                </PlotlyFold>
+              </LayoutPanel>
+            </TestEditor>
+          );
+          it('HIDES PlotlyFold', () =>
+            expect(wrapper.find('div.fold').length).toEqual(0));
+          it('HIDES PlotlySection', () =>
+            expect(wrapper.find('div.section').length).toEqual(0));
+          it('HIDES div', () =>
+            expect(wrapper.find('#thediv').length).toEqual(0));
+        });
+
+        describe('Field-with-visible-attr', () => {
+          const wrapper = mount(
+            <TestEditor {...fixtures.scatter()}>
+              <LayoutPanel>
+                <PlotlyFold>
+                  <PlotlySection>
+                    <Numeric attr="title" />
+                  </PlotlySection>
+                </PlotlyFold>
+              </LayoutPanel>
+            </TestEditor>
+          );
+          it('HIDES PlotlyFold', () =>
+            expect(wrapper.find('div.fold').length).toEqual(0));
+          it('HIDES PlotlySection', () =>
+            expect(wrapper.find('div.section').length).toEqual(0));
+          it('HIDES Field', () =>
+            expect(wrapper.find('input').length).toEqual(0));
+        });
+
+        describe('Field-with-invisible-attr', () => {
+          const wrapper = mount(
+            <TestEditor {...fixtures.scatter()}>
+              <LayoutPanel>
+                <PlotlyFold>
+                  <PlotlySection>
+                    <Numeric attr="not_an_attr" />
+                  </PlotlySection>
+                </PlotlyFold>
+              </LayoutPanel>
+            </TestEditor>
+          );
+
+          it('HIDES PlotlyFold', () =>
+            expect(wrapper.find('div.fold').length).toEqual(0));
+          it('HIDES PlotlySection', () =>
+            expect(wrapper.find('div.section').length).toEqual(0));
+          it('HIDES Field', () =>
+            expect(wrapper.find('input').length).toEqual(0));
+        });
+      });
+    });
+
+    describe('PlotlyPanel', () => {
+      describe('Field-with-visible-attr', () => {
+        const wrapper = mount(
+          <TestEditor {...fixtures.scatter()}>
+            <LayoutPanel>
+              <PlotlyFold>
+                <LayoutPanel>
+                  <Numeric attr="title" />
+                </LayoutPanel>
+              </PlotlyFold>
+            </LayoutPanel>
+          </TestEditor>
+        );
+
+        it('HIDES PlotlyFold', () =>
+          expect(wrapper.find('div.fold').length).toEqual(0));
+        it('HIDES inner PlotlyPanel', () =>
+          expect(wrapper.find('div.panel').length).toEqual(1));
+        it('HIDES Field', () =>
+          expect(wrapper.find('input').length).toEqual(0));
+      });
+    });
+
+    describe('Info', () => {
+      describe('Field-with-visible-attr', () => {
+        const wrapper = mount(
+          <TestEditor {...fixtures.scatter()}>
+            <LayoutPanel>
+              <PlotlyFold>
+                <Info>
+                  <Numeric attr="title" />
+                </Info>
+              </PlotlyFold>
+            </LayoutPanel>
+          </TestEditor>
+        );
+
+        it('HIDES PlotlyFold', () =>
+          expect(wrapper.find('div.fold').length).toEqual(0));
+        it('HIDES Info', () => expect(wrapper.find(Info).length).toEqual(0));
+        it('HIDES Field', () =>
+          expect(wrapper.find('input').length).toEqual(0));
+      });
+    });
+
+    describe('no_visibility_forcing containers can be visibility forcing with a visible attr', () => {
+      describe('PlotlySection-with-visible-attr', () => {
+        const wrapper = mount(
+          <TestEditor {...fixtures.scatter()}>
+            <LayoutPanel>
+              <PlotlyFold>
+                <PlotlySection attr="title">
+                  <Numeric attr="not_an_attr" />
+                </PlotlySection>
+              </PlotlyFold>
+            </LayoutPanel>
+          </TestEditor>
+        );
+
+        it('SHOWS PlotlyFold', () =>
+          expect(wrapper.find('div.fold').length).toEqual(1));
+        it('SHOWS PlotlySection', () =>
+          expect(wrapper.find('div.section').length).toEqual(1));
+        it('HIDES Field', () =>
+          expect(wrapper.find('input').length).toEqual(0));
+      });
+
+      describe('PlotlySection-with-invisible-attr', () => {
+        const wrapper = mount(
+          <TestEditor {...fixtures.scatter()}>
+            <LayoutPanel>
+              <PlotlyFold>
+                <PlotlySection attr="not_an_attr">
+                  <Numeric attr="title" />
+                </PlotlySection>
+              </PlotlyFold>
+            </LayoutPanel>
+          </TestEditor>
+        );
+
+        it('HIDES PlotlyFold', () =>
+          expect(wrapper.find('div.fold').length).toEqual(0));
+        it('HIDES PlotlySection', () =>
+          expect(wrapper.find('div.section').length).toEqual(0));
+        it('HIDES Field', () =>
+          expect(wrapper.find('input').length).toEqual(0));
+      });
+    });
+  });
+});
+
+describe('Other ways to force PlotlyFold visibility', () => {
+  describe('Adding a custom component as child of PlotlyFold', () => {
+    const wrapper = mount(
+      <TestEditor {...fixtures.scatter()}>
+        <LayoutPanel>
+          <PlotlyFold>
+            <p>I force visibility of the fold</p>
+            <PlotlySection>
+              <div id="thediv"> ok </div>
+            </PlotlySection>
+          </PlotlyFold>
+        </LayoutPanel>
+      </TestEditor>
+    );
+    it('shows PlotlyFold', () =>
+      expect(wrapper.find('div.fold').length).toEqual(1));
+    it('shows PlotlySection', () =>
+      expect(wrapper.find('div.section').length).toEqual(1));
+    it('shows div', () => expect(wrapper.find('#thediv').length).toEqual(1));
+  });
+
+  // What most of DefaultPanels do
+  describe('adding a Field with visible attr as child of PlotlyFold', () => {
+    const wrapper = mount(
+      <TestEditor {...fixtures.scatter()}>
+        <LayoutPanel>
+          <PlotlyFold>
+            <Numeric attr="width" />
+            <PlotlySection>
+              <div id="thediv"> ok </div>
+              <Numeric attr="title" />
+            </PlotlySection>
+          </PlotlyFold>
+        </LayoutPanel>
+      </TestEditor>
+    );
+    it('shows PlotlyFold', () =>
+      expect(wrapper.find('div.fold').length).toEqual(1));
+    it('shows PlotlySection', () =>
+      expect(wrapper.find('div.section').length).toEqual(1));
+    it('shows div', () => expect(wrapper.find('#thediv').length).toEqual(1));
+    it('shows Field in PlotlySection', () =>
+      expect(wrapper.find('input').length).toEqual(2));
+  });
+
+  describe('adding a Field with invisible attr will hide PlotlyFold', () => {
+    const wrapper = mount(
+      <TestEditor {...fixtures.scatter()}>
+        <LayoutPanel>
+          <PlotlyFold>
+            <Numeric attr="not_an_attr" />
+            <PlotlySection>
+              <Numeric attr="not_an_attr" />
+            </PlotlySection>
+          </PlotlyFold>
+        </LayoutPanel>
+      </TestEditor>
+    );
+
+    it('HIDES PlotlyFold', () =>
+      expect(wrapper.find('div.fold').length).toEqual(0));
+    it('HIDES PlotlySection', () =>
+      expect(wrapper.find('div.section').length).toEqual(0));
+    it('HIDES Field in PlotlySection', () =>
+      expect(wrapper.find('input').length).toEqual(0));
+  });
+});
+
+// nothing in the lower level PlotlyFold can force the upper one open
+
+describe('PlotlyPanel > PlotlyFold > PlotlyPanel > PlotlyFold', () => {
+  describe('div', () => {
+    const wrapper = mount(
+      <TestEditor {...fixtures.scatter()}>
+        <LayoutPanel>
+          <PlotlyFold>
+            <LayoutPanel>
+              <PlotlyFold>
+                <div id="thediv"> ok </div>
+              </PlotlyFold>
+            </LayoutPanel>
+          </PlotlyFold>
+        </LayoutPanel>
+      </TestEditor>
+    );
+
+    it('HIDES PlotlyFold', () =>
+      expect(wrapper.find('div.fold').length).toEqual(0));
+    it('HIDES div', () => expect(wrapper.find('#thediv').length).toEqual(0));
+  });
+
+  describe('Field-with-visible-attr', () => {
+    const wrapper = mount(
+      <TestEditor {...fixtures.scatter()}>
+        <LayoutPanel>
+          <PlotlyFold>
+            <LayoutPanel>
+              <PlotlyFold>
+                <Numeric attr="title" />
+              </PlotlyFold>
+            </LayoutPanel>
+          </PlotlyFold>
+        </LayoutPanel>
+      </TestEditor>
+    );
+    it('HIDES PlotlyFold', () =>
+      expect(wrapper.find('div.fold').length).toEqual(0));
+    it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
+  });
+
+  describe('Field-with-invisible-attr', () => {
+    const wrapper = mount(
+      <TestEditor {...fixtures.scatter()}>
+        <LayoutPanel>
+          <PlotlyFold>
+            <LayoutPanel>
+              <PlotlyFold>
+                <Numeric attr="not_an_attr" />
+              </PlotlyFold>
+            </LayoutPanel>
+          </PlotlyFold>
+        </LayoutPanel>
+      </TestEditor>
+    );
+
+    it('HIDES PlotlyFold', () =>
+      expect(wrapper.find('div.fold').length).toEqual(0));
+    it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
+  });
+});
+
+describe('PlotlyPanel > PlotlyFold > PlotlyPanel > PlotlyFold > PlotlySection', () => {
+  describe('div', () => {
+    const wrapper = mount(
+      <TestEditor {...fixtures.scatter()}>
+        <LayoutPanel>
+          <PlotlyFold>
+            <LayoutPanel>
+              <PlotlyFold>
+                <PlotlySection>
+                  <div id="thediv"> ok </div>
+                </PlotlySection>
+              </PlotlyFold>
+            </LayoutPanel>
+          </PlotlyFold>
+        </LayoutPanel>
+      </TestEditor>
+    );
+
+    it('HIDES PlotlyFold', () =>
+      expect(wrapper.find('div.fold').length).toEqual(0));
+    it('HIDES PlotlySection', () =>
+      expect(wrapper.find('div.section').length).toEqual(0));
+    it('HIDES div', () => expect(wrapper.find('#thediv').length).toEqual(0));
+  });
+
+  describe('Field-with-visible-attr', () => {
+    const wrapper = mount(
+      <TestEditor {...fixtures.scatter()}>
+        <LayoutPanel>
+          <PlotlyFold>
+            <LayoutPanel>
+              <PlotlyFold>
+                <PlotlySection>
+                  <Numeric attr="title" />
+                </PlotlySection>
+              </PlotlyFold>
+            </LayoutPanel>
+          </PlotlyFold>
+        </LayoutPanel>
+      </TestEditor>
+    );
+    it('HIDES PlotlyFold', () =>
+      expect(wrapper.find('div.fold').length).toEqual(0));
+    it('HIDES PlotlySection', () =>
+      expect(wrapper.find('div.section').length).toEqual(0));
+    it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
+  });
+
+  describe('Field-with-invisible-attr', () => {
+    const wrapper = mount(
+      <TestEditor {...fixtures.scatter()}>
+        <LayoutPanel>
+          <PlotlyFold>
+            <LayoutPanel>
+              <PlotlyFold>
+                <PlotlySection>
+                  <Numeric attr="not_an_attr" />
+                </PlotlySection>
+              </PlotlyFold>
+            </LayoutPanel>
+          </PlotlyFold>
+        </LayoutPanel>
+      </TestEditor>
+    );
+
+    it('HIDES PlotlyFold', () =>
+      expect(wrapper.find('div.fold').length).toEqual(0));
+    it('HIDES PlotlySection', () =>
+      expect(wrapper.find('div.section').length).toEqual(0));
+    it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
+  });
+});
+
+// Lower level PlotlyPanel with visible attr forces the upper PlotlyFold open, and visible
+// attr on PlotlySection forces the lower PlotlyFold open
+
+describe('PlotlyPanel > PlotlyFold > PlotlyPanel-with-visible-attr > PlotlyFold > PlotlySection-with-visible-attr', () => {
+  describe('div', () => {
+    const wrapper = mount(
+      <TestEditor {...fixtures.scatter()}>
+        <LayoutPanel>
+          <PlotlyFold>
+            <LayoutPanel attr="title">
+              <PlotlyFold>
+                <PlotlySection attr="title">
+                  <div id="thediv"> ok </div>
+                </PlotlySection>
+              </PlotlyFold>
+            </LayoutPanel>
+          </PlotlyFold>
+        </LayoutPanel>
+      </TestEditor>
+    );
+
+    it('shows 2 PlotlyFolds', () =>
+      expect(wrapper.find('div.fold').length).toEqual(2));
+    it('shows PlotlySection', () =>
+      expect(wrapper.find('div.section').length).toEqual(1));
+    it('shows div', () => expect(wrapper.find('#thediv').length).toEqual(1));
+  });
+
+  describe('Field-with-visible-attr', () => {
+    const wrapper = mount(
+      <TestEditor {...fixtures.scatter()}>
+        <LayoutPanel>
+          <PlotlyFold>
+            <LayoutPanel attr="title">
+              <PlotlyFold>
+                <PlotlySection attr="title">
+                  <Numeric attr="title" />
+                </PlotlySection>
+              </PlotlyFold>
+            </LayoutPanel>
+          </PlotlyFold>
+        </LayoutPanel>
+      </TestEditor>
+    );
+    it('shows 2 PlotlyFolds', () =>
+      expect(wrapper.find('div.fold').length).toEqual(2));
+    it('shows PlotlySection', () =>
+      expect(wrapper.find('div.section').length).toEqual(1));
+    it('shows Field', () => expect(wrapper.find('input').length).toEqual(1));
+  });
+
+  describe('Field-with-invisible-attr', () => {
+    const wrapper = mount(
+      <TestEditor {...fixtures.scatter()}>
+        <LayoutPanel>
+          <PlotlyFold>
+            <LayoutPanel attr="title">
+              <PlotlyFold>
+                <PlotlySection attr="title">
+                  <Numeric attr="not_an_attr" />
+                </PlotlySection>
+              </PlotlyFold>
+            </LayoutPanel>
+          </PlotlyFold>
+        </LayoutPanel>
+      </TestEditor>
+    );
+
+    it('shows 2 PlotlyFolds', () =>
+      expect(wrapper.find('div.fold').length).toEqual(2));
+    it('shows PlotlySection', () =>
+      expect(wrapper.find('div.section').length).toEqual(1));
+    it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
+  });
+});
diff --git a/src/components/containers/__tests__/UnconnectedContainersVisibility-test.js b/src/components/containers/__tests__/UnconnectedContainersVisibility-test.js
new file mode 100644
index 000000000..2fbaa8bb5
--- /dev/null
+++ b/src/components/containers/__tests__/UnconnectedContainersVisibility-test.js
@@ -0,0 +1,297 @@
+import {Numeric, Info} from '../../fields';
+import {Panel, Fold, Section, LayoutPanel, PlotlySection} from '..';
+import React from 'react';
+import {TestEditor, fixtures, mount} from 'lib/test-utils';
+
+// Stylistically Panel, Fold, Section are the same as PlotlyPanel, PlotlyFold, PlotlySection
+// but unlike them, they have no special visibility rules, they always display themselves
+// and their children.
+
+describe('Basic Panel rules', () => {
+  describe('not connected, provides no context, cannot use with Fields', () => {
+    const wrapper = mount(
+      <TestEditor {...fixtures.scatter()}>
+        <Panel>
+          <div id="thediv"> ok </div>
+          <Numeric attr="title" />
+        </Panel>
+      </TestEditor>
+    );
+
+    it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
+    it('SHOWS div which does not need context', () =>
+      expect(wrapper.find('input').length).toEqual(0));
+  });
+
+  describe("displays all it's children", () => {
+    const wrapper = mount(
+      <TestEditor {...fixtures.scatter()}>
+        <Panel>
+          <Fold>
+            <Section>
+              <div id="thediv"> ok </div>
+              <Numeric attr="title" />
+            </Section>
+            <div id="theseconddiv" />
+          </Fold>
+        </Panel>
+      </TestEditor>
+    );
+
+    it('SHOWS Section, Fold, #thediv, #theseconddiv', () => {
+      expect(wrapper.find('div.section').length).toEqual(1);
+      expect(wrapper.find('div.fold').length).toEqual(1);
+      expect(wrapper.find('#thediv').length).toEqual(1);
+      expect(wrapper.find('#theseconddiv').length).toEqual(1);
+    });
+
+    it('HIDES Field because it needs context', () =>
+      expect(wrapper.find('input').length).toEqual(0));
+  });
+
+  // describe('no Panel, no context for Folds, not usable', () => {
+  //   expect(() => {
+  //     mount(
+  //       <TestEditor {...fixtures.scatter()}>
+  //         <div>
+  //           <Fold>
+  //             <div id="thediv"> ok </div>
+  //             <Numeric attr="title" />
+  //           </Fold>
+  //         </div>
+  //       </TestEditor>
+  //     );
+  //   }).toThrow();
+  // });
+});
+
+describe('Basic Section rules', () => {
+  describe('always shows itself and its children', () => {
+    describe('Panel > Section > Field-with-visible-attr', () => {
+      const wrapper = mount(
+        <TestEditor {...fixtures.scatter()}>
+          <Panel>
+            <Section>
+              <Numeric attr="title" />
+            </Section>
+          </Panel>
+        </TestEditor>
+      );
+
+      it('SHOWS Section because it always shows itself', () =>
+        expect(wrapper.find('div.section').length).toEqual(1));
+      it("HIDES Field because there's no context for it", () =>
+        expect(wrapper.find('input').length).toEqual(0));
+    });
+
+    describe('PlotlyPanel > Section > Field-with-visible-attr', () => {
+      const wrapper = mount(
+        <TestEditor {...fixtures.scatter()}>
+          <LayoutPanel>
+            <Section>
+              <Numeric attr="title" />
+            </Section>
+          </LayoutPanel>
+        </TestEditor>
+      );
+
+      it('SHOWS Section because it always shows itself', () =>
+        expect(wrapper.find('div.section').length).toEqual(1));
+      it('SHOWS Field', () => expect(wrapper.find('input').length).toEqual(1));
+    });
+
+    describe('Panel > Section > div', () => {
+      const wrapper = mount(
+        <TestEditor {...fixtures.scatter()}>
+          <Panel>
+            <Section>
+              <div id="thediv" />
+            </Section>
+          </Panel>
+        </TestEditor>
+      );
+
+      it('SHOWS PlotlySection', () =>
+        expect(wrapper.find('div.section').length).toEqual(1));
+      it('SHOWS div', () => expect(wrapper.find('#thediv').length).toEqual(1));
+    });
+  });
+});
+
+describe('Basic Fold rules', () => {
+  describe('always shows itself and its children', () => {
+    describe('Panel > Fold > Field-with-visible-attr', () => {
+      const wrapper = mount(
+        <TestEditor {...fixtures.scatter()}>
+          <Panel>
+            <Fold>
+              <Numeric attr="title" />
+            </Fold>
+          </Panel>
+        </TestEditor>
+      );
+      it('SHOWS Fold', () =>
+        expect(wrapper.find('div.fold').length).toEqual(1));
+      it('HIDES Field because it has no context', () =>
+        expect(wrapper.find('input').length).toEqual(0));
+    });
+
+    describe('LayoutPanel > Fold > Field-with-visible-attr', () => {
+      const wrapper = mount(
+        <TestEditor {...fixtures.scatter()}>
+          <LayoutPanel>
+            <Fold>
+              <Numeric attr="title" />
+            </Fold>
+          </LayoutPanel>
+        </TestEditor>
+      );
+
+      it('SHOWS Fold', () =>
+        expect(wrapper.find('div.fold').length).toEqual(1));
+      it('SHOWS Field', () => expect(wrapper.find('input').length).toEqual(1));
+    });
+
+    describe('LayoutPanel > Fold > Field-with-invisible-attr', () => {
+      const wrapper = mount(
+        <TestEditor {...fixtures.scatter()}>
+          <LayoutPanel>
+            <Fold>
+              <Numeric attr="not_an_attr" />
+            </Fold>
+          </LayoutPanel>
+        </TestEditor>
+      );
+
+      it('SHOWS Fold', () =>
+        expect(wrapper.find('div.fold').length).toEqual(1));
+      it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
+    });
+
+    describe('Panel > Fold > div', () => {
+      const wrapper = mount(
+        <TestEditor {...fixtures.scatter()}>
+          <Panel>
+            <Fold>
+              <div id="thediv"> ok </div>
+            </Fold>
+          </Panel>
+        </TestEditor>
+      );
+
+      it('SHOWS Fold', () =>
+        expect(wrapper.find('div.fold').length).toEqual(1));
+      it('SHOWS div', () => expect(wrapper.find('#thediv').length).toEqual(1));
+    });
+
+    describe('no_visibility_forcing, plotly_editor_trait have no effect', () => {
+      describe('PlotlySection', () => {
+        describe('div', () => {
+          const wrapper = mount(
+            <TestEditor {...fixtures.scatter()}>
+              <Panel>
+                <Fold>
+                  <PlotlySection>
+                    <div id="thediv"> ok </div>
+                  </PlotlySection>
+                </Fold>
+              </Panel>
+            </TestEditor>
+          );
+          it('SHOWS Fold', () =>
+            expect(wrapper.find('div.fold').length).toEqual(1));
+          it('SHOWS PlotlySection', () =>
+            expect(wrapper.find('div.section').length).toEqual(1));
+          it('SHOWS div', () =>
+            expect(wrapper.find('#thediv').length).toEqual(1));
+        });
+
+        describe('Field-with-visible-attr', () => {
+          const wrapper = mount(
+            <TestEditor {...fixtures.scatter()}>
+              <LayoutPanel>
+                <Fold>
+                  <PlotlySection>
+                    <Numeric attr="title" />
+                  </PlotlySection>
+                </Fold>
+              </LayoutPanel>
+            </TestEditor>
+          );
+          it('SHOWS Fold', () =>
+            expect(wrapper.find('div.fold').length).toEqual(1));
+          it('SHOWS PlotlySection', () =>
+            expect(wrapper.find('div.section').length).toEqual(1));
+          it('SHOWS Field', () =>
+            expect(wrapper.find('input').length).toEqual(1));
+        });
+
+        describe('Field-with-invisible-attr', () => {
+          const wrapper = mount(
+            <TestEditor {...fixtures.scatter()}>
+              <LayoutPanel>
+                <Fold>
+                  <PlotlySection>
+                    <Numeric attr="not_an_attr" />
+                  </PlotlySection>
+                </Fold>
+              </LayoutPanel>
+            </TestEditor>
+          );
+
+          it('SHOWS Fold', () =>
+            expect(wrapper.find('div.fold').length).toEqual(1));
+          it('HIDES PlotlySection because Plotly Section visibility rules apply', () =>
+            expect(wrapper.find('div.section').length).toEqual(0));
+          it('HIDES Field', () =>
+            expect(wrapper.find('input').length).toEqual(0));
+        });
+      });
+    });
+
+    describe('PlotlyPanel', () => {
+      describe('Field-with-visible-attr', () => {
+        const wrapper = mount(
+          <TestEditor {...fixtures.scatter()}>
+            <LayoutPanel>
+              <Fold>
+                <LayoutPanel>
+                  <Numeric attr="title" />
+                </LayoutPanel>
+              </Fold>
+            </LayoutPanel>
+          </TestEditor>
+        );
+
+        it('SHOWS Fold', () =>
+          expect(wrapper.find('div.fold').length).toEqual(1));
+        it('HIDES PlotlyPanel', () =>
+          expect(wrapper.find('div.panel').length).toEqual(2));
+        it('HIDES Field', () =>
+          expect(wrapper.find('input').length).toEqual(1));
+      });
+    });
+
+    describe('Info', () => {
+      describe('Field-with-visible-attr', () => {
+        const wrapper = mount(
+          <TestEditor {...fixtures.scatter()}>
+            <LayoutPanel>
+              <Fold>
+                <Info>
+                  <Numeric attr="title" />
+                </Info>
+              </Fold>
+            </LayoutPanel>
+          </TestEditor>
+        );
+
+        it('SHOWS Fold', () =>
+          expect(wrapper.find('div.fold').length).toEqual(1));
+        it('SHOWS Info', () => expect(wrapper.find(Info).length).toEqual(1));
+        it('SHOWS Field', () =>
+          expect(wrapper.find('input').length).toEqual(1));
+      });
+    });
+  });
+});
diff --git a/src/components/containers/__tests__/visibility-test.js b/src/components/containers/__tests__/visibility-test.js
deleted file mode 100644
index 52605ce38..000000000
--- a/src/components/containers/__tests__/visibility-test.js
+++ /dev/null
@@ -1,782 +0,0 @@
-import {Numeric} from '../../fields';
-import {LayoutPanel, PlotlyFold, PlotlySection, Panel, Fold, Section} from '..';
-import Field from '../../fields/Field';
-import React from 'react';
-import {TestEditor, fixtures, mount} from 'lib/test-utils';
-
-// Basic PlotlySection visibility rules (in a panel for context)
-describe('PlotlyPanel > PlotlySection', () => {
-  describe('div', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <PlotlySection>
-            <div id="thediv"> ok </div>
-          </PlotlySection>
-        </LayoutPanel>
-      </TestEditor>
-    );
-
-    it('shows PlotlySection', () =>
-      expect(wrapper.find('div.section').length).toEqual(1));
-    it('shows div', () => expect(wrapper.find('#thediv').length).toEqual(1));
-  });
-
-  describe('Field-with-visible-attr', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <PlotlySection>
-            <Numeric attr="title" />
-          </PlotlySection>
-        </LayoutPanel>
-      </TestEditor>
-    );
-    it('shows PlotlySection', () =>
-      expect(wrapper.find('div.section').length).toEqual(1));
-    it('shows Field', () => expect(wrapper.find('input').length).toEqual(1));
-  });
-
-  describe('Field-with-invisible-attr', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <PlotlySection>
-            <Numeric attr="not_an_attr" />
-          </PlotlySection>
-        </LayoutPanel>
-      </TestEditor>
-    );
-
-    it('HIDES PlotlySection', () =>
-      expect(wrapper.find('div.section').length).toEqual(0));
-    it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
-  });
-});
-
-// Basic Section visibility rules
-describe('PlotlyPanel > Section', () => {
-  describe('Field-with-invisible-attr', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <Section name="custom section">
-            <Numeric attr="not_an_attr" />
-          </Section>
-        </LayoutPanel>
-      </TestEditor>
-    );
-
-    it('SHOWS Section', () =>
-      expect(wrapper.find('div.section').length).toEqual(1));
-    it('SHOWS custom title', () => {
-      expect(wrapper.find('.section__heading__text').text()).toEqual(
-        'custom section'
-      );
-    });
-    it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
-  });
-
-  describe('Field-with-custom-component', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <PlotlyFold>
-            <Section name="custom section">
-              <Field>
-                <div id="theDiv" />
-              </Field>
-            </Section>
-          </PlotlyFold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-
-    it('SHOWS Section', () =>
-      expect(wrapper.find('div.section').length).toEqual(1));
-    it('SHOWS custom title', () => {
-      expect(wrapper.find('.section__heading__text').text()).toEqual(
-        'custom section'
-      );
-    });
-    it('SHOWS div', () => expect(wrapper.find('#theDiv').length).toEqual(1));
-    it('SHOWS PlotlyFold', () =>
-      expect(wrapper.find(PlotlyFold).length).toEqual(1));
-  });
-});
-
-describe('Panel > Fold ', () => {
-  describe('unconnected Panel and Fold', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <Panel>
-          <Fold>
-            <div id="theDiv" />
-          </Fold>
-        </Panel>
-      </TestEditor>
-    );
-
-    it('SHOWS Fold', () => expect(wrapper.find(Fold).length).toEqual(1));
-    it('behaves as PlotlyFold', () => {
-      expect(wrapper.find(Fold).props().folded).toEqual(false);
-      expect(typeof wrapper.find(Fold).props().toggleFold).toEqual('function');
-    });
-    it('SHOWS div', () => expect(wrapper.find('#theDiv').length).toEqual(1));
-  });
-});
-
-// Basic PlotlyFold visibility rules
-describe('PlotlyPanel > PlotlyFold', () => {
-  describe('div', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <PlotlyFold>
-            <div id="thediv"> ok </div>
-          </PlotlyFold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-
-    it('shows PlotlyFold', () =>
-      expect(wrapper.find('div.fold').length).toEqual(1));
-    it('shows div', () => expect(wrapper.find('#thediv').length).toEqual(1));
-  });
-
-  describe('Field-with-visible-attr', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <PlotlyFold>
-            <Numeric attr="title" />
-          </PlotlyFold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-    it('shows PlotlyFold', () =>
-      expect(wrapper.find('div.fold').length).toEqual(1));
-    it('shows Field', () => expect(wrapper.find('input').length).toEqual(1));
-  });
-
-  describe('Field-with-invisible-attr', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <PlotlyFold>
-            <Numeric attr="not_an_attr" />
-          </PlotlyFold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-
-    it('HIDES PlotlyFold', () =>
-      expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
-  });
-
-  describe('PlotlyPanel > PlotlyFold > Panel', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <PlotlyFold>
-            <Panel />
-          </PlotlyFold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-
-    it('SHOWS PlotlyFold', () =>
-      expect(wrapper.find(PlotlyFold).length).toEqual(1));
-    it('SHOWS Panel', () => expect(wrapper.find(Panel).length).toEqual(1));
-  });
-});
-
-// Section alone can't force a PlotlyFold to show itself at the moment
-describe('PlotlyPanel > PlotlyFold > PlotlySection', () => {
-  describe('div', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <PlotlyFold>
-            <PlotlySection>
-              <div id="thediv"> ok </div>
-            </PlotlySection>
-          </PlotlyFold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-    it('HIDES PlotlyFold', () =>
-      expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES PlotlySection', () =>
-      expect(wrapper.find('div.section').length).toEqual(0));
-    it('HIDES div', () => expect(wrapper.find('#thediv').length).toEqual(0));
-  });
-
-  describe('Field-with-visible-attr', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <PlotlyFold>
-            <PlotlySection>
-              <Numeric attr="title" />
-            </PlotlySection>
-          </PlotlyFold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-    it('HIDES PlotlyFold', () =>
-      expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES PlotlySection', () =>
-      expect(wrapper.find('div.section').length).toEqual(0));
-    it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
-  });
-
-  describe('Field-with-invisible-attr', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <PlotlyFold>
-            <PlotlySection>
-              <Numeric attr="not_an_attr" />
-            </PlotlySection>
-          </PlotlyFold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-
-    it('HIDES PlotlyFold', () =>
-      expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES PlotlySection', () =>
-      expect(wrapper.find('div.section').length).toEqual(0));
-    it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
-  });
-});
-
-// p forces PlotlyFold open, then normal PlotlySection rules apply
-describe('PlotlyPanel > PlotlyFold > p & PlotlySection', () => {
-  describe('div', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <PlotlyFold>
-            <p>I force visibility of the fold</p>
-            <PlotlySection>
-              <div id="thediv"> ok </div>
-            </PlotlySection>
-          </PlotlyFold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-    it('shows PlotlyFold', () =>
-      expect(wrapper.find('div.fold').length).toEqual(1));
-    it('shows PlotlySection', () =>
-      expect(wrapper.find('div.section').length).toEqual(1));
-    it('shows div', () => expect(wrapper.find('#thediv').length).toEqual(1));
-  });
-
-  describe('Field-with-visible-attr', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <PlotlyFold>
-            <p>I force visibility of the fold</p>
-            <PlotlySection>
-              <Numeric attr="title" />
-            </PlotlySection>
-          </PlotlyFold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-    it('shows PlotlyFold', () =>
-      expect(wrapper.find('div.fold').length).toEqual(1));
-    it('shows PlotlySection', () =>
-      expect(wrapper.find('div.section').length).toEqual(1));
-    it('shows Field', () => expect(wrapper.find('input').length).toEqual(1));
-  });
-
-  describe('Field-with-invisible-attr', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <PlotlyFold>
-            <p>I force visibility of the fold</p>
-            <PlotlySection>
-              <Numeric attr="not_an_attr" />
-            </PlotlySection>
-          </PlotlyFold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-
-    it('shows PlotlyFold', () =>
-      expect(wrapper.find('div.fold').length).toEqual(1));
-    it('HIDES PlotlySection', () =>
-      expect(wrapper.find('div.section').length).toEqual(0));
-    it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
-  });
-});
-
-// Field forces PlotlyFold open, then normal PlotlySection rules apply
-describe('PlotlyPanel > PlotlyFold > Field-with-visible-attr & PlotlySection', () => {
-  describe('div', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <PlotlyFold>
-            <Numeric attr="width" />
-            <PlotlySection>
-              <div id="thediv"> ok </div>
-            </PlotlySection>
-          </PlotlyFold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-    it('shows PlotlyFold', () =>
-      expect(wrapper.find('div.fold').length).toEqual(1));
-    it('shows PlotlySection', () =>
-      expect(wrapper.find('div.section').length).toEqual(1));
-    it('shows div', () => expect(wrapper.find('#thediv').length).toEqual(1));
-  });
-
-  describe('Field-with-visible-attr', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <PlotlyFold>
-            <Numeric attr="width" />
-            <PlotlySection>
-              <Numeric attr="title" />
-            </PlotlySection>
-          </PlotlyFold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-    it('shows PlotlyFold', () =>
-      expect(wrapper.find('div.fold').length).toEqual(1));
-    it('shows PlotlySection', () =>
-      expect(wrapper.find('div.section').length).toEqual(1));
-    it('shows Field in PlotlySection', () =>
-      expect(wrapper.find('input').length).toEqual(2));
-  });
-
-  describe('Field-with-invisible-attr', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <PlotlyFold>
-            <Numeric attr="width" />
-            <PlotlySection>
-              <Numeric attr="not_an_attr" />
-            </PlotlySection>
-          </PlotlyFold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-
-    it('shows PlotlyFold', () =>
-      expect(wrapper.find('div.fold').length).toEqual(1));
-    it('HIDES PlotlySection', () =>
-      expect(wrapper.find('div.section').length).toEqual(0));
-    it('HIDES Field in PlotlySection', () =>
-      expect(wrapper.find('input').length).toEqual(1));
-  });
-});
-
-// invisible Field doesn't forces PlotlyFold open
-describe('PlotlyPanel > PlotlyFold > Field-with-invisible-attr & PlotlySection', () => {
-  describe('div', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <PlotlyFold>
-            <Numeric attr="not_an_attr" />
-            <PlotlySection>
-              <div id="thediv"> ok </div>
-            </PlotlySection>
-          </PlotlyFold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-    it('HIDES PlotlyFold', () =>
-      expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES PlotlySection', () =>
-      expect(wrapper.find('div.section').length).toEqual(0));
-    it('HIDES div', () => expect(wrapper.find('#thediv').length).toEqual(0));
-  });
-
-  describe('Field-with-visible-attr', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <PlotlyFold>
-            <Numeric attr="not_an_attr" />
-            <PlotlySection>
-              <Numeric attr="title" />
-            </PlotlySection>
-          </PlotlyFold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-    it('HIDES PlotlyFold', () =>
-      expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES PlotlySection', () =>
-      expect(wrapper.find('div.section').length).toEqual(0));
-    it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
-  });
-
-  describe('Field-with-invisible-attr', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <PlotlyFold>
-            <Numeric attr="not_an_attr" />
-            <PlotlySection>
-              <Numeric attr="not_an_attr" />
-            </PlotlySection>
-          </PlotlyFold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-    it('HIDES PlotlyFold', () =>
-      expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES PlotlySection', () =>
-      expect(wrapper.find('div.section').length).toEqual(0));
-    it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
-  });
-});
-
-// visible attr on PlotlySection forces PlotlyFold open
-describe('PlotlyPanel > PlotlyFold > PlotlySection-with-visible-attr', () => {
-  describe('div', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <PlotlyFold>
-            <PlotlySection attr="title">
-              <div id="thediv"> ok </div>
-            </PlotlySection>
-          </PlotlyFold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-    it('shows PlotlyFold', () =>
-      expect(wrapper.find('div.fold').length).toEqual(1));
-    it('shows PlotlySection', () =>
-      expect(wrapper.find('div.section').length).toEqual(1));
-    it('shows div', () => expect(wrapper.find('#thediv').length).toEqual(1));
-  });
-
-  describe('Field-with-visible-attr', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <PlotlyFold>
-            <PlotlySection attr="title">
-              <Numeric attr="title" />
-            </PlotlySection>
-          </PlotlyFold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-    it('shows PlotlyFold', () =>
-      expect(wrapper.find('div.fold').length).toEqual(1));
-    it('shows PlotlySection', () =>
-      expect(wrapper.find('div.section').length).toEqual(1));
-    it('shows Field', () => expect(wrapper.find('input').length).toEqual(1));
-  });
-
-  describe('Field-with-invisible-attr', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <PlotlyFold>
-            <PlotlySection attr="title">
-              <Numeric attr="not_an_attr" />
-            </PlotlySection>
-          </PlotlyFold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-
-    it('shows PlotlyFold', () =>
-      expect(wrapper.find('div.fold').length).toEqual(1));
-    it('shows PlotlySection', () =>
-      expect(wrapper.find('div.section').length).toEqual(1));
-    it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
-  });
-});
-
-// invisible attr on Section doesn't force PlotlyFold open
-describe('PlotlyPanel > PlotlyFold > PlotlySection-with-invisible-attr', () => {
-  describe('div', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <PlotlyFold>
-            <PlotlySection attr="not_an_attr">
-              <div id="thediv"> ok </div>
-            </PlotlySection>
-          </PlotlyFold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-    it('HIDES PlotlyFold', () =>
-      expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES PlotlySection', () =>
-      expect(wrapper.find('div.section').length).toEqual(0));
-    it('HIDES div', () => expect(wrapper.find('#thediv').length).toEqual(0));
-  });
-
-  describe('Field-with-visible-attr', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <PlotlyFold>
-            <PlotlySection attr="not_an_attr">
-              <Numeric attr="title" />
-            </PlotlySection>
-          </PlotlyFold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-    it('HIDES PlotlyFold', () =>
-      expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES PlotlySection', () =>
-      expect(wrapper.find('div.section').length).toEqual(0));
-    it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
-  });
-
-  describe('Field-with-invisible-attr', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <PlotlyFold>
-            <PlotlySection attr="not_an_attr">
-              <Numeric attr="not_an_attr" />
-            </PlotlySection>
-          </PlotlyFold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-
-    it('HIDES PlotlyFold', () =>
-      expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES PlotlySection', () =>
-      expect(wrapper.find('div.section').length).toEqual(0));
-    it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
-  });
-});
-
-// nothing in the lower level PlotlyFold can force the upper one open
-describe('PlotlyPanel > PlotlyFold > PlotlyPanel > PlotlyFold', () => {
-  describe('div', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <PlotlyFold>
-            <LayoutPanel>
-              <PlotlyFold>
-                <div id="thediv"> ok </div>
-              </PlotlyFold>
-            </LayoutPanel>
-          </PlotlyFold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-
-    it('HIDES PlotlyFold', () =>
-      expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES div', () => expect(wrapper.find('#thediv').length).toEqual(0));
-  });
-
-  describe('Field-with-visible-attr', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <PlotlyFold>
-            <LayoutPanel>
-              <PlotlyFold>
-                <Numeric attr="title" />
-              </PlotlyFold>
-            </LayoutPanel>
-          </PlotlyFold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-    it('HIDES PlotlyFold', () =>
-      expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
-  });
-
-  describe('Field-with-invisible-attr', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <PlotlyFold>
-            <LayoutPanel>
-              <PlotlyFold>
-                <Numeric attr="not_an_attr" />
-              </PlotlyFold>
-            </LayoutPanel>
-          </PlotlyFold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-
-    it('HIDES PlotlyFold', () =>
-      expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
-  });
-});
-
-// nothing in the lower level PlotlyFold can force the upper one open
-
-describe('PlotlyPanel > PlotlyFold > PlotlyPanel > PlotlyFold > PlotlySection', () => {
-  describe('div', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <PlotlyFold>
-            <LayoutPanel>
-              <PlotlyFold>
-                <PlotlySection>
-                  <div id="thediv"> ok </div>
-                </PlotlySection>
-              </PlotlyFold>
-            </LayoutPanel>
-          </PlotlyFold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-
-    it('HIDES PlotlyFold', () =>
-      expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES PlotlySection', () =>
-      expect(wrapper.find('div.section').length).toEqual(0));
-    it('HIDES div', () => expect(wrapper.find('#thediv').length).toEqual(0));
-  });
-
-  describe('Field-with-visible-attr', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <PlotlyFold>
-            <LayoutPanel>
-              <PlotlyFold>
-                <PlotlySection>
-                  <Numeric attr="title" />
-                </PlotlySection>
-              </PlotlyFold>
-            </LayoutPanel>
-          </PlotlyFold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-    it('HIDES PlotlyFold', () =>
-      expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES PlotlySection', () =>
-      expect(wrapper.find('div.section').length).toEqual(0));
-    it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
-  });
-
-  describe('Field-with-invisible-attr', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <PlotlyFold>
-            <LayoutPanel>
-              <PlotlyFold>
-                <PlotlySection>
-                  <Numeric attr="not_an_attr" />
-                </PlotlySection>
-              </PlotlyFold>
-            </LayoutPanel>
-          </PlotlyFold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-
-    it('HIDES PlotlyFold', () =>
-      expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES PlotlySection', () =>
-      expect(wrapper.find('div.section').length).toEqual(0));
-    it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
-  });
-});
-
-// Lower level PlotlyPanel with visible attr forces the upper PlotlyFold open, and visible
-// attr on PlotlySection forces the lower PlotlyFold open
-
-describe('PlotlyPanel > PlotlyFold > PlotlyPanel-with-visible-attr > PlotlyFold > PlotlySection-with-visible-attr', () => {
-  describe('div', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <PlotlyFold>
-            <LayoutPanel attr="title">
-              <PlotlyFold>
-                <PlotlySection attr="title">
-                  <div id="thediv"> ok </div>
-                </PlotlySection>
-              </PlotlyFold>
-            </LayoutPanel>
-          </PlotlyFold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-
-    it('shows 2 PlotlyFolds', () =>
-      expect(wrapper.find('div.fold').length).toEqual(2));
-    it('shows PlotlySection', () =>
-      expect(wrapper.find('div.section').length).toEqual(1));
-    it('shows div', () => expect(wrapper.find('#thediv').length).toEqual(1));
-  });
-
-  describe('Field-with-visible-attr', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <PlotlyFold>
-            <LayoutPanel attr="title">
-              <PlotlyFold>
-                <PlotlySection attr="title">
-                  <Numeric attr="title" />
-                </PlotlySection>
-              </PlotlyFold>
-            </LayoutPanel>
-          </PlotlyFold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-    it('shows 2 PlotlyFolds', () =>
-      expect(wrapper.find('div.fold').length).toEqual(2));
-    it('shows PlotlySection', () =>
-      expect(wrapper.find('div.section').length).toEqual(1));
-    it('shows Field', () => expect(wrapper.find('input').length).toEqual(1));
-  });
-
-  describe('Field-with-invisible-attr', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <PlotlyFold>
-            <LayoutPanel attr="title">
-              <PlotlyFold>
-                <PlotlySection attr="title">
-                  <Numeric attr="not_an_attr" />
-                </PlotlySection>
-              </PlotlyFold>
-            </LayoutPanel>
-          </PlotlyFold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-
-    it('shows 2 PlotlyFolds', () =>
-      expect(wrapper.find('div.fold').length).toEqual(2));
-    it('shows PlotlySection', () =>
-      expect(wrapper.find('div.section').length).toEqual(1));
-    it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
-  });
-});

From a45317947125ad951ff932734ed452f820471b96 Mon Sep 17 00:00:00 2001
From: VeraZab <vera.zabeida@gmail.com>
Date: Wed, 28 Mar 2018 13:13:04 -0400
Subject: [PATCH 3/6] Rebase

---
 README.md                                     |  2 +-
 src/components/containers/PlotlyFold.js       | 20 ++++-
 src/components/containers/PlotlyPanel.js      |  7 +-
 src/components/containers/PlotlySection.js    |  8 +-
 .../containers/TransformAccordion.js          | 12 ++-
 .../ConnectedContainersVisibility-test.js     | 18 +----
 .../UnconnectedContainersVisibility-test.js   | 76 ++++++++++++-------
 src/components/fields/Info.js                 |  6 +-
 src/default_panels/GraphTransformsPanel.js    |  8 +-
 src/default_panels/StyleTracesPanel.js        |  1 -
 .../nestedContainerConnections-test.js        |  2 +-
 11 files changed, 93 insertions(+), 67 deletions(-)

diff --git a/README.md b/README.md
index 3456c16c5..f8bab0ad8 100644
--- a/README.md
+++ b/README.md
@@ -70,7 +70,7 @@ The [custom editor example](https://github.com/plotly/react-chart-editor/tree/ma
 * `<PlotlyPanel />`: renders as a generic rectangular container with special handling for collapsing/expanding child `<Fold />`s and optionally an 'add' button for creating them, has special [visibility rules](https://github.com/plotly/react-chart-editor/tree/master/src/components/containers/_tests_/ConnectedContainersVisibility-test.js) that depend on plotly figure
 * `<PlotlyFold />`: collapsable container within a `<Panel />`, has special [visibility rules](https://github.com/plotly/react-chart-editor/tree/master/src/components/containers/_tests_/ConnectedContainersVisibility-test.js) that depend on plotly figure
 * `<PlotlySection />`: uncollapsable container within a `<Panel />` or `<Fold />`, has special [visibility rules](https://github.com/plotly/react-chart-editor/tree/master/src/components/containers/_tests_/ConnectedContainersVisibility-test.js) that depend on plotly figure
-* `<Panel/>`, `<Fold/>`, `<Section/>`: same as `PlotlyPanel`, `PlotlyFold`, `PlotlySection`, but there are no special visibility rules, those containers [always show, and always show their children](https://github.com/plotly/react-chart-editor/tree/master/src/components/containers/_tests_/UnconnectedContainersVisibility-test.js)
+* `<Panel/>`, `<Fold/>`, `<Section/>`: same as `PlotlyPanel`, `PlotlyFold`, `PlotlySection`, but there are no special visibility rules, those containers [always show, and always show their children](https://github.com/plotly/react-chart-editor/tree/master/src/components/containers/_tests_/UnconnectedContainersVisibility-test.js), but Fold does not have the canDelete functionality as its context related
 * `<SingleSidebarItem/>`: wraps any item you would like to see appear in the sidebar menu.
 
 ### General-purpose Fields
diff --git a/src/components/containers/PlotlyFold.js b/src/components/containers/PlotlyFold.js
index 0421080f9..b77e26f5f 100644
--- a/src/components/containers/PlotlyFold.js
+++ b/src/components/containers/PlotlyFold.js
@@ -25,7 +25,7 @@ class PlotlyFold extends Component {
   determineVisibility(nextProps, nextContext) {
     this.foldVisible = false;
 
-    if (this.props.forceVisibility) {
+    if (nextProps.forceVisibility) {
       this.foldVisible = true;
       return;
     }
@@ -167,6 +167,24 @@ PlotlyFold.contextTypes = Object.assign(
 export default localize(PlotlyFold);
 
 export class Fold extends PlotlyFold {}
+
+Fold.plotly_editor_traits = {
+  foldable: true,
+};
+
 Fold.defaultProps = {
   forceVisibility: true,
 };
+
+Fold.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  folded: PropTypes.bool,
+  toggleFold: PropTypes.func,
+  hideHeader: PropTypes.bool,
+  icon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
+  messageIfEmpty: PropTypes.string,
+  localize: PropTypes.func,
+  name: PropTypes.string,
+  forceVisibility: PropTypes.bool,
+};
diff --git a/src/components/containers/PlotlyPanel.js b/src/components/containers/PlotlyPanel.js
index 4a89cee6a..75560fc27 100644
--- a/src/components/containers/PlotlyPanel.js
+++ b/src/components/containers/PlotlyPanel.js
@@ -101,6 +101,7 @@ class PlotlyPanel extends Component {
             toggleFold: () => this.toggleFold(index),
           });
         }
+
         return child;
       }
     );
@@ -136,12 +137,6 @@ PlotlyPanel.defaultProps = {
   showExpandCollapse: true,
 };
 
-PlotlyPanel.contextTypes = {
-  layout: PropTypes.object,
-  onUpdate: PropTypes.func,
-  updateContainer: PropTypes.func,
-};
-
 export default PlotlyPanel;
 
 export class Panel extends PlotlyPanel {}
diff --git a/src/components/containers/PlotlySection.js b/src/components/containers/PlotlySection.js
index b82c0c627..9288a00c4 100644
--- a/src/components/containers/PlotlySection.js
+++ b/src/components/containers/PlotlySection.js
@@ -10,9 +10,11 @@ export class Section extends Component {
   render() {
     return (
       <div className="section">
-        <div className="section__heading">
-          <div className="section__heading__text">{this.props.name}</div>
-        </div>
+        {this.props.name ? (
+          <div className="section__heading">
+            <div className="section__heading__text">{this.props.name}</div>
+          </div>
+        ) : null}
         {this.props.children}
       </div>
     );
diff --git a/src/components/containers/TransformAccordion.js b/src/components/containers/TransformAccordion.js
index f57b8a8a8..e661cae08 100644
--- a/src/components/containers/TransformAccordion.js
+++ b/src/components/containers/TransformAccordion.js
@@ -1,10 +1,10 @@
-import Fold from './Fold';
-import Panel from './Panel';
+import PlotlyFold from './PlotlyFold';
+import PlotlyPanel from './PlotlyPanel';
 import PropTypes from 'prop-types';
 import React, {Component} from 'react';
 import {connectTransformToTrace, localize} from 'lib';
 
-const TransformFold = connectTransformToTrace(Fold);
+const TransformFold = connectTransformToTrace(PlotlyFold);
 
 class TransformAccordion extends Component {
   render() {
@@ -50,7 +50,11 @@ class TransformAccordion extends Component {
       }),
     };
 
-    return <Panel addAction={addAction}>{content ? content : null}</Panel>;
+    return (
+      <PlotlyPanel addAction={addAction}>
+        {content ? content : null}
+      </PlotlyPanel>
+    );
   }
 }
 
diff --git a/src/components/containers/__tests__/ConnectedContainersVisibility-test.js b/src/components/containers/__tests__/ConnectedContainersVisibility-test.js
index 847165104..18006e997 100644
--- a/src/components/containers/__tests__/ConnectedContainersVisibility-test.js
+++ b/src/components/containers/__tests__/ConnectedContainersVisibility-test.js
@@ -55,21 +55,6 @@ describe('Basic PlotlyPanel rules', () => {
     it('HIDES Field because it needs context from PlotlyPanel', () =>
       expect(wrapper.find('input').length).toEqual(0));
   });
-
-  // describe('no PlotlyPanel, no context for Folds, not usable', () => {
-  //   expect(() => {
-  //     mount(
-  //       <TestEditor {...fixtures.scatter()}>
-  //         <div>
-  //           <PlotlyFold>
-  //             <div id="thediv"> ok </div>
-  //             <Numeric attr="title" />
-  //           </PlotlyFold>
-  //         </div>
-  //       </TestEditor>
-  //     );
-  //   }).toThrow();
-  // });
 });
 
 describe('Basic PlotlySection rules', () => {
@@ -299,7 +284,8 @@ describe('Basic PlotlyFold rules', () => {
 
         it('HIDES PlotlyFold', () =>
           expect(wrapper.find('div.fold').length).toEqual(0));
-        it('HIDES Info', () => expect(wrapper.find(Info).length).toEqual(0));
+        it('HIDES Info', () =>
+          expect(wrapper.find('.js-test-info').length).toEqual(0));
         it('HIDES Field', () =>
           expect(wrapper.find('input').length).toEqual(0));
       });
diff --git a/src/components/containers/__tests__/UnconnectedContainersVisibility-test.js b/src/components/containers/__tests__/UnconnectedContainersVisibility-test.js
index 2fbaa8bb5..186191eb1 100644
--- a/src/components/containers/__tests__/UnconnectedContainersVisibility-test.js
+++ b/src/components/containers/__tests__/UnconnectedContainersVisibility-test.js
@@ -27,42 +27,47 @@ describe('Basic Panel rules', () => {
     const wrapper = mount(
       <TestEditor {...fixtures.scatter()}>
         <Panel>
+          <Section>
+            <div id="thediv"> ok </div>
+            <Numeric attr="title" />
+          </Section>
           <Fold>
-            <Section>
-              <div id="thediv"> ok </div>
-              <Numeric attr="title" />
-            </Section>
             <div id="theseconddiv" />
           </Fold>
+          <Fold>
+            <Info />
+          </Fold>
         </Panel>
       </TestEditor>
     );
 
-    it('SHOWS Section, Fold, #thediv, #theseconddiv', () => {
+    it('SHOWS Section, Fold, #thediv, #theseconddiv, Info', () => {
       expect(wrapper.find('div.section').length).toEqual(1);
-      expect(wrapper.find('div.fold').length).toEqual(1);
+      expect(wrapper.find('div.fold').length).toEqual(2);
       expect(wrapper.find('#thediv').length).toEqual(1);
       expect(wrapper.find('#theseconddiv').length).toEqual(1);
+      expect(wrapper.find('.js-test-info').length).toEqual(1);
     });
 
     it('HIDES Field because it needs context', () =>
       expect(wrapper.find('input').length).toEqual(0));
-  });
 
-  // describe('no Panel, no context for Folds, not usable', () => {
-  //   expect(() => {
-  //     mount(
-  //       <TestEditor {...fixtures.scatter()}>
-  //         <div>
-  //           <Fold>
-  //             <div id="thediv"> ok </div>
-  //             <Numeric attr="title" />
-  //           </Fold>
-  //         </div>
-  //       </TestEditor>
-  //     );
-  //   }).toThrow();
-  // });
+    it('PANEL shows collapse functionality, FOLD is foldable', () => {
+      expect(wrapper.find('.panel__header__collapse').length).toEqual(1);
+      expect(
+        wrapper
+          .find(Fold)
+          .first()
+          .props().folded
+      ).toBe(false);
+      expect(
+        typeof wrapper
+          .find(Fold)
+          .first()
+          .props().toggleFold
+      ).toBe('function');
+    });
+  });
 });
 
 describe('Basic Section rules', () => {
@@ -100,6 +105,22 @@ describe('Basic Section rules', () => {
       it('SHOWS Field', () => expect(wrapper.find('input').length).toEqual(1));
     });
 
+    describe('PlotlyPanel > Section > Field-with-invisible-attr', () => {
+      const wrapper = mount(
+        <TestEditor {...fixtures.scatter()}>
+          <LayoutPanel>
+            <Section>
+              <Numeric attr="not_an_attr" />
+            </Section>
+          </LayoutPanel>
+        </TestEditor>
+      );
+
+      it('SHOWS Section because it always shows itself', () =>
+        expect(wrapper.find('div.section').length).toEqual(1));
+      it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
+    });
+
     describe('Panel > Section > div', () => {
       const wrapper = mount(
         <TestEditor {...fixtures.scatter()}>
@@ -265,9 +286,9 @@ describe('Basic Fold rules', () => {
 
         it('SHOWS Fold', () =>
           expect(wrapper.find('div.fold').length).toEqual(1));
-        it('HIDES PlotlyPanel', () =>
+        it('SHOWS PlotlyPanel', () =>
           expect(wrapper.find('div.panel').length).toEqual(2));
-        it('HIDES Field', () =>
+        it('SHOWS Field', () =>
           expect(wrapper.find('input').length).toEqual(1));
       });
     });
@@ -278,9 +299,7 @@ describe('Basic Fold rules', () => {
           <TestEditor {...fixtures.scatter()}>
             <LayoutPanel>
               <Fold>
-                <Info>
-                  <Numeric attr="title" />
-                </Info>
+                <Info>ok</Info>
               </Fold>
             </LayoutPanel>
           </TestEditor>
@@ -288,9 +307,8 @@ describe('Basic Fold rules', () => {
 
         it('SHOWS Fold', () =>
           expect(wrapper.find('div.fold').length).toEqual(1));
-        it('SHOWS Info', () => expect(wrapper.find(Info).length).toEqual(1));
-        it('SHOWS Field', () =>
-          expect(wrapper.find('input').length).toEqual(1));
+        it('SHOWS Info', () =>
+          expect(wrapper.find('.js-test-info').length).toEqual(1));
       });
     });
   });
diff --git a/src/components/fields/Info.js b/src/components/fields/Info.js
index 053b669b8..b16ff542b 100644
--- a/src/components/fields/Info.js
+++ b/src/components/fields/Info.js
@@ -3,7 +3,11 @@ import React, {Component} from 'react';
 
 export default class Info extends Component {
   render() {
-    return <Field {...this.props}>{this.props.children}</Field>;
+    return (
+      <Field {...this.props}>
+        <div className="js-test-info">{this.props.children}</div>
+      </Field>
+    );
   }
 }
 
diff --git a/src/default_panels/GraphTransformsPanel.js b/src/default_panels/GraphTransformsPanel.js
index fdc406bc3..8867d17fe 100644
--- a/src/default_panels/GraphTransformsPanel.js
+++ b/src/default_panels/GraphTransformsPanel.js
@@ -6,11 +6,11 @@ import {
   TraceAccordion,
   DataSelector,
   Dropdown,
-  Section,
+  PlotlySection,
 } from '../components';
 import {connectAggregationToTransform, localize} from '../lib';
 
-const AggregationSection = connectAggregationToTransform(Section);
+const AggregationSection = connectAggregationToTransform(PlotlySection);
 
 class UnlocalizedAggregations extends Component {
   render() {
@@ -69,9 +69,9 @@ const GraphTransformsPanel = ({localize: _}) => {
 
         <DataSelector label={_('By')} attr="groups" />
 
-        <Section name={_('Aggregations')} attr="aggregations">
+        <PlotlySection name={_('Aggregations')} attr="aggregations">
           <Aggregations />
-        </Section>
+        </PlotlySection>
       </TransformAccordion>
     </TraceAccordion>
   );
diff --git a/src/default_panels/StyleTracesPanel.js b/src/default_panels/StyleTracesPanel.js
index ca2db8186..0adce7412 100644
--- a/src/default_panels/StyleTracesPanel.js
+++ b/src/default_panels/StyleTracesPanel.js
@@ -12,7 +12,6 @@ import {
   NumericFractionInverse,
   Radio,
   TextEditor,
-  Section,
   PlotlySection,
   LayoutSection,
   SymbolSelector,
diff --git a/src/lib/__tests__/nestedContainerConnections-test.js b/src/lib/__tests__/nestedContainerConnections-test.js
index d8eaeb560..c0fe3e023 100644
--- a/src/lib/__tests__/nestedContainerConnections-test.js
+++ b/src/lib/__tests__/nestedContainerConnections-test.js
@@ -87,7 +87,7 @@ describe('Plot Connection', () => {
     expect(wrapper.length).toBe(0);
   });
 
-  it('can modify plotProps with <Trace><Section><LayoutComp>', () => {
+  it('can modify plotProps with <Trace><PlotlySection><LayoutComp>', () => {
     const fixtureProps = fixtures.scatter({layout: {width: 10}});
     const TracePanel = connectTraceToPlot(PlotlyPanel);
 

From 52109c5dfd155b7ac9b67f0de9f28b1fdc5027a5 Mon Sep 17 00:00:00 2001
From: VeraZab <vera.zabeida@gmail.com>
Date: Wed, 28 Mar 2018 15:41:50 -0400
Subject: [PATCH 4/6] Refactor

---
 src/components/containers/PlotlyFold.js    | 122 +++++++++------------
 src/components/containers/PlotlyPanel.js   |  17 +--
 src/components/containers/PlotlySection.js |  37 ++-----
 3 files changed, 68 insertions(+), 108 deletions(-)

diff --git a/src/components/containers/PlotlyFold.js b/src/components/containers/PlotlyFold.js
index b77e26f5f..0612ad646 100644
--- a/src/components/containers/PlotlyFold.js
+++ b/src/components/containers/PlotlyFold.js
@@ -10,48 +10,10 @@ import {
   striptags,
 } from 'lib';
 
-class PlotlyFold extends Component {
-  constructor(props, context) {
-    super(props, context);
-
-    this.foldVisible = false;
-    this.determineVisibility(props, context);
-  }
-
-  componentWillReceiveProps(nextProps, nextContext) {
-    this.determineVisibility(nextProps, nextContext);
-  }
-
-  determineVisibility(nextProps, nextContext) {
-    this.foldVisible = false;
-
-    if (nextProps.forceVisibility) {
-      this.foldVisible = true;
-      return;
-    }
-
-    React.Children.forEach(nextProps.children, child => {
-      if (!child || this.foldVisible) {
-        return;
-      }
-
-      if (child.props.attr) {
-        // attr components force fold open if they are visible
-        const plotProps = unpackPlotProps(child.props, nextContext);
-        if (child.type.modifyPlotProps) {
-          child.type.modifyPlotProps(child.props, nextContext, plotProps);
-        }
-
-        this.foldVisible = this.foldVisible || plotProps.isVisible;
-        return;
-      }
-
-      if (!(child.type.plotly_editor_traits || {}).no_visibility_forcing) {
-        // non-attr components force visibility (unless they don't via traits)
-        this.foldVisible = true;
-        return;
-      }
-    });
+export class Fold extends Component {
+  constructor() {
+    super();
+    this.foldVisible = true;
   }
 
   render() {
@@ -141,20 +103,63 @@ class PlotlyFold extends Component {
   }
 }
 
-PlotlyFold.plotly_editor_traits = {foldable: true};
+Fold.plotly_editor_traits = {foldable: true};
 
-PlotlyFold.propTypes = {
+Fold.propTypes = {
   canDelete: PropTypes.bool,
   children: PropTypes.node,
   className: PropTypes.string,
-  folded: PropTypes.bool.isRequired,
-  toggleFold: PropTypes.func.isRequired,
+  folded: PropTypes.bool,
+  toggleFold: PropTypes.func,
   hideHeader: PropTypes.bool,
   icon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   messageIfEmpty: PropTypes.string,
   localize: PropTypes.func,
   name: PropTypes.string,
-  forceVisibility: PropTypes.bool,
+};
+
+class PlotlyFold extends Fold {
+  constructor(props, context) {
+    super(props, context);
+
+    this.foldVisible = false;
+    this.determineVisibility(props, context);
+  }
+
+  componentWillReceiveProps(nextProps, nextContext) {
+    this.determineVisibility(nextProps, nextContext);
+  }
+
+  determineVisibility(nextProps, nextContext) {
+    this.foldVisible = false;
+
+    React.Children.forEach(nextProps.children, child => {
+      if (!child || this.foldVisible) {
+        return;
+      }
+
+      if (child.props.attr) {
+        // attr components force fold open if they are visible
+        const plotProps = unpackPlotProps(child.props, nextContext);
+        if (child.type.modifyPlotProps) {
+          child.type.modifyPlotProps(child.props, nextContext, plotProps);
+        }
+
+        this.foldVisible = this.foldVisible || plotProps.isVisible;
+        return;
+      }
+
+      if (!(child.type.plotly_editor_traits || {}).no_visibility_forcing) {
+        // non-attr components force visibility (unless they don't via traits)
+        this.foldVisible = true;
+        return;
+      }
+    });
+  }
+}
+
+PlotlyFold.plotly_editor_traits = {
+  foldable: true,
 };
 
 PlotlyFold.contextTypes = Object.assign(
@@ -165,26 +170,3 @@ PlotlyFold.contextTypes = Object.assign(
 );
 
 export default localize(PlotlyFold);
-
-export class Fold extends PlotlyFold {}
-
-Fold.plotly_editor_traits = {
-  foldable: true,
-};
-
-Fold.defaultProps = {
-  forceVisibility: true,
-};
-
-Fold.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  folded: PropTypes.bool,
-  toggleFold: PropTypes.func,
-  hideHeader: PropTypes.bool,
-  icon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
-  messageIfEmpty: PropTypes.string,
-  localize: PropTypes.func,
-  name: PropTypes.string,
-  forceVisibility: PropTypes.bool,
-};
diff --git a/src/components/containers/PlotlyPanel.js b/src/components/containers/PlotlyPanel.js
index 75560fc27..dc2520995 100644
--- a/src/components/containers/PlotlyPanel.js
+++ b/src/components/containers/PlotlyPanel.js
@@ -26,7 +26,7 @@ PanelErrorImpl.propTypes = {
 
 const PanelError = localize(PanelErrorImpl);
 
-class PlotlyPanel extends Component {
+export class Panel extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -101,7 +101,6 @@ class PlotlyPanel extends Component {
             toggleFold: () => this.toggleFold(index),
           });
         }
-
         return child;
       }
     );
@@ -124,23 +123,19 @@ class PlotlyPanel extends Component {
   }
 }
 
-PlotlyPanel.plotly_editor_traits = {no_visibility_forcing: true};
-
-PlotlyPanel.propTypes = {
+Panel.propTypes = {
   children: PropTypes.node,
   addAction: PropTypes.object,
   showExpandCollapse: PropTypes.bool,
   noPadding: PropTypes.bool,
 };
 
-PlotlyPanel.defaultProps = {
+Panel.defaultProps = {
   showExpandCollapse: true,
 };
 
-export default PlotlyPanel;
-
-export class Panel extends PlotlyPanel {}
+export default class PlotlyPanel extends Panel {}
 
-Panel.plotly_editor_traits = {
-  no_visibility_forcing: false,
+PlotlyPanel.plotly_editor_traits = {
+  no_visibility_forcing: true,
 };
diff --git a/src/components/containers/PlotlySection.js b/src/components/containers/PlotlySection.js
index 9288a00c4..c3c9658f5 100644
--- a/src/components/containers/PlotlySection.js
+++ b/src/components/containers/PlotlySection.js
@@ -7,7 +7,16 @@ import {
 } from '../../lib';
 
 export class Section extends Component {
+  constructor() {
+    super();
+    this.sectionVisible = true;
+  }
+
   render() {
+    if (!this.sectionVisible) {
+      return null;
+    }
+
     return (
       <div className="section">
         {this.props.name ? (
@@ -31,9 +40,6 @@ Section.propTypes = {
 class PlotlySection extends Section {
   constructor(props, context) {
     super(props, context);
-
-    this.sectionVisible = false;
-
     this.determineVisibility(props, context);
   }
 
@@ -46,7 +52,7 @@ class PlotlySection extends Section {
     this.sectionVisible = Boolean(isVisible);
 
     React.Children.forEach(nextProps.children, child => {
-      if (!child || this.foldVisible) {
+      if (!child || this.sectionVisible) {
         return;
       }
 
@@ -66,31 +72,8 @@ class PlotlySection extends Section {
       }
     });
   }
-
-  render() {
-    if (!this.sectionVisible) {
-      return null;
-    }
-    return (
-      <div className="section">
-        {this.props.name ? (
-          <div className="section__heading">
-            <div className="section__heading__text">{this.props.name}</div>
-          </div>
-        ) : null}
-        {this.props.children}
-      </div>
-    );
-  }
 }
 
 PlotlySection.plotly_editor_traits = {no_visibility_forcing: true};
-
-PlotlySection.propTypes = {
-  children: PropTypes.node,
-  name: PropTypes.string,
-  attr: PropTypes.string,
-};
-
 PlotlySection.contextTypes = containerConnectedContextTypes;
 export default localize(PlotlySection);

From e66b34d09121eb2e06b3bec099bd2d42f4e217a7 Mon Sep 17 00:00:00 2001
From: VeraZab <vera.zabeida@gmail.com>
Date: Wed, 28 Mar 2018 16:01:47 -0400
Subject: [PATCH 5/6] Add back isRequired

---
 src/components/containers/PlotlyFold.js    | 14 ++++++++------
 src/components/containers/PlotlyPanel.js   | 10 ++++++----
 src/components/containers/PlotlySection.js | 10 ++++++----
 3 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/components/containers/PlotlyFold.js b/src/components/containers/PlotlyFold.js
index 0612ad646..a55c09dab 100644
--- a/src/components/containers/PlotlyFold.js
+++ b/src/components/containers/PlotlyFold.js
@@ -10,7 +10,7 @@ import {
   striptags,
 } from 'lib';
 
-export class Fold extends Component {
+class UnlocalizedFold extends Component {
   constructor() {
     super();
     this.foldVisible = true;
@@ -103,14 +103,14 @@ export class Fold extends Component {
   }
 }
 
-Fold.plotly_editor_traits = {foldable: true};
+UnlocalizedFold.plotly_editor_traits = {foldable: true};
 
-Fold.propTypes = {
+UnlocalizedFold.propTypes = {
   canDelete: PropTypes.bool,
   children: PropTypes.node,
   className: PropTypes.string,
-  folded: PropTypes.bool,
-  toggleFold: PropTypes.func,
+  folded: PropTypes.bool.isRequired,
+  toggleFold: PropTypes.func.isRequired,
   hideHeader: PropTypes.bool,
   icon: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   messageIfEmpty: PropTypes.string,
@@ -118,7 +118,9 @@ Fold.propTypes = {
   name: PropTypes.string,
 };
 
-class PlotlyFold extends Fold {
+export const Fold = localize(UnlocalizedFold);
+
+class PlotlyFold extends UnlocalizedFold {
   constructor(props, context) {
     super(props, context);
 
diff --git a/src/components/containers/PlotlyPanel.js b/src/components/containers/PlotlyPanel.js
index dc2520995..390e316b6 100644
--- a/src/components/containers/PlotlyPanel.js
+++ b/src/components/containers/PlotlyPanel.js
@@ -26,7 +26,7 @@ PanelErrorImpl.propTypes = {
 
 const PanelError = localize(PanelErrorImpl);
 
-export class Panel extends Component {
+class UnlocalizedPanel extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -123,18 +123,20 @@ export class Panel extends Component {
   }
 }
 
-Panel.propTypes = {
+UnlocalizedPanel.propTypes = {
   children: PropTypes.node,
   addAction: PropTypes.object,
   showExpandCollapse: PropTypes.bool,
   noPadding: PropTypes.bool,
 };
 
-Panel.defaultProps = {
+UnlocalizedPanel.defaultProps = {
   showExpandCollapse: true,
 };
 
-export default class PlotlyPanel extends Panel {}
+export const Panel = localize(UnlocalizedPanel);
+
+export default class PlotlyPanel extends UnlocalizedPanel {}
 
 PlotlyPanel.plotly_editor_traits = {
   no_visibility_forcing: true,
diff --git a/src/components/containers/PlotlySection.js b/src/components/containers/PlotlySection.js
index c3c9658f5..0ed4f517c 100644
--- a/src/components/containers/PlotlySection.js
+++ b/src/components/containers/PlotlySection.js
@@ -6,7 +6,7 @@ import {
   unpackPlotProps,
 } from '../../lib';
 
-export class Section extends Component {
+class UnlocalizedSection extends Component {
   constructor() {
     super();
     this.sectionVisible = true;
@@ -30,14 +30,16 @@ export class Section extends Component {
   }
 }
 
-Section.plotly_editor_traits = {no_visibility_forcing: false};
-Section.propTypes = {
+UnlocalizedSection.plotly_editor_traits = {no_visibility_forcing: false};
+UnlocalizedSection.propTypes = {
   children: PropTypes.node,
   name: PropTypes.string,
   attr: PropTypes.string,
 };
 
-class PlotlySection extends Section {
+export const Section = localize(UnlocalizedSection);
+
+class PlotlySection extends UnlocalizedSection {
   constructor(props, context) {
     super(props, context);
     this.determineVisibility(props, context);

From 4212d4e760e60502c116fb21af3d0aa03dc2d2ee Mon Sep 17 00:00:00 2001
From: VeraZab <vera.zabeida@gmail.com>
Date: Wed, 28 Mar 2018 16:30:03 -0400
Subject: [PATCH 6/6] Localize PlotlyPanel

---
 src/components/containers/PlotlyPanel.js | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/containers/PlotlyPanel.js b/src/components/containers/PlotlyPanel.js
index 390e316b6..2786ef04d 100644
--- a/src/components/containers/PlotlyPanel.js
+++ b/src/components/containers/PlotlyPanel.js
@@ -136,8 +136,10 @@ UnlocalizedPanel.defaultProps = {
 
 export const Panel = localize(UnlocalizedPanel);
 
-export default class PlotlyPanel extends UnlocalizedPanel {}
+class PlotlyPanel extends UnlocalizedPanel {}
 
 PlotlyPanel.plotly_editor_traits = {
   no_visibility_forcing: true,
 };
+
+export default localize(PlotlyPanel);