diff --git a/README.md b/README.md
index f7cab56cf..f8bab0ad8 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), 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/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 90%
rename from src/components/containers/Fold.js
rename to src/components/containers/PlotlyFold.js
index 4cb2c69d7..a55c09dab 100644
--- a/src/components/containers/Fold.js
+++ b/src/components/containers/PlotlyFold.js
@@ -10,43 +10,10 @@ import {
   striptags,
 } from 'lib';
 
-class Fold 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;
-
-    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;
-      }
-    });
+class UnlocalizedFold extends Component {
+  constructor() {
+    super();
+    this.foldVisible = true;
   }
 
   render() {
@@ -136,9 +103,9 @@ 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,
@@ -151,11 +118,57 @@ Fold.propTypes = {
   name: PropTypes.string,
 };
 
-Fold.contextTypes = Object.assign(
+export const Fold = localize(UnlocalizedFold);
+
+class PlotlyFold extends UnlocalizedFold {
+  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(
   {
     deleteContainer: PropTypes.func,
   },
   containerConnectedContextTypes
 );
 
-export default localize(Fold);
+export default localize(PlotlyFold);
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..2786ef04d 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 UnlocalizedPanel extends Component {
   constructor(props) {
     super(props);
     this.state = {
@@ -123,23 +123,23 @@ class Panel extends Component {
   }
 }
 
-Panel.plotly_editor_traits = {no_visibility_forcing: true};
-
-Panel.propTypes = {
+UnlocalizedPanel.propTypes = {
   children: PropTypes.node,
   addAction: PropTypes.object,
   showExpandCollapse: PropTypes.bool,
   noPadding: PropTypes.bool,
 };
 
-Panel.defaultProps = {
+UnlocalizedPanel.defaultProps = {
   showExpandCollapse: true,
 };
 
-Panel.contextTypes = {
-  layout: PropTypes.object,
-  onUpdate: PropTypes.func,
-  updateContainer: PropTypes.func,
+export const Panel = localize(UnlocalizedPanel);
+
+class PlotlyPanel extends UnlocalizedPanel {}
+
+PlotlyPanel.plotly_editor_traits = {
+  no_visibility_forcing: true,
 };
 
-export default Panel;
+export default localize(PlotlyPanel);
diff --git a/src/components/containers/Section.js b/src/components/containers/PlotlySection.js
similarity index 66%
rename from src/components/containers/Section.js
rename to src/components/containers/PlotlySection.js
index f196a2ec5..0ed4f517c 100644
--- a/src/components/containers/Section.js
+++ b/src/components/containers/PlotlySection.js
@@ -5,14 +5,43 @@ import {
   localize,
   unpackPlotProps,
 } from '../../lib';
-import SectionHeader from './SectionHeader';
 
-class Section extends Component {
-  constructor(props, context) {
-    super(props, context);
+class UnlocalizedSection extends Component {
+  constructor() {
+    super();
+    this.sectionVisible = true;
+  }
+
+  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>
+    );
+  }
+}
+
+UnlocalizedSection.plotly_editor_traits = {no_visibility_forcing: false};
+UnlocalizedSection.propTypes = {
+  children: PropTypes.node,
+  name: PropTypes.string,
+  attr: PropTypes.string,
+};
 
-    this.sectionVisible = false;
+export const Section = localize(UnlocalizedSection);
 
+class PlotlySection extends UnlocalizedSection {
+  constructor(props, context) {
+    super(props, context);
     this.determineVisibility(props, context);
   }
 
@@ -25,7 +54,7 @@ class Section extends Component {
     this.sectionVisible = Boolean(isVisible);
 
     React.Children.forEach(nextProps.children, child => {
-      if (!child || this.foldVisible) {
+      if (!child || this.sectionVisible) {
         return;
       }
 
@@ -45,27 +74,8 @@ class Section extends Component {
       }
     });
   }
-
-  render() {
-    if (!this.sectionVisible) {
-      return null;
-    }
-    return (
-      <div className="section">
-        {this.props.name && <SectionHeader name={this.props.name} />}
-        {this.props.children}
-      </div>
-    );
-  }
 }
 
-Section.plotly_editor_traits = {no_visibility_forcing: true};
-
-Section.propTypes = {
-  children: PropTypes.node,
-  name: PropTypes.string,
-  attr: PropTypes.string,
-};
-
-Section.contextTypes = containerConnectedContextTypes;
-export default localize(Section);
+PlotlySection.plotly_editor_traits = {no_visibility_forcing: true};
+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/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/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__/ConnectedContainersVisibility-test.js b/src/components/containers/__tests__/ConnectedContainersVisibility-test.js
new file mode 100644
index 000000000..18006e997
--- /dev/null
+++ b/src/components/containers/__tests__/ConnectedContainersVisibility-test.js
@@ -0,0 +1,618 @@
+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('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('.js-test-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__/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__/UnconnectedContainersVisibility-test.js b/src/components/containers/__tests__/UnconnectedContainersVisibility-test.js
new file mode 100644
index 000000000..186191eb1
--- /dev/null
+++ b/src/components/containers/__tests__/UnconnectedContainersVisibility-test.js
@@ -0,0 +1,315 @@
+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>
+          <Section>
+            <div id="thediv"> ok </div>
+            <Numeric attr="title" />
+          </Section>
+          <Fold>
+            <div id="theseconddiv" />
+          </Fold>
+          <Fold>
+            <Info />
+          </Fold>
+        </Panel>
+      </TestEditor>
+    );
+
+    it('SHOWS Section, Fold, #thediv, #theseconddiv, Info', () => {
+      expect(wrapper.find('div.section').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));
+
+    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', () => {
+  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('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()}>
+          <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('SHOWS PlotlyPanel', () =>
+          expect(wrapper.find('div.panel').length).toEqual(2));
+        it('SHOWS Field', () =>
+          expect(wrapper.find('input').length).toEqual(1));
+      });
+    });
+
+    describe('Info', () => {
+      describe('Field-with-visible-attr', () => {
+        const wrapper = mount(
+          <TestEditor {...fixtures.scatter()}>
+            <LayoutPanel>
+              <Fold>
+                <Info>ok</Info>
+              </Fold>
+            </LayoutPanel>
+          </TestEditor>
+        );
+
+        it('SHOWS Fold', () =>
+          expect(wrapper.find('div.fold').length).toEqual(1));
+        it('SHOWS Info', () =>
+          expect(wrapper.find('.js-test-info').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 ec759fb81..000000000
--- a/src/components/containers/__tests__/visibility-test.js
+++ /dev/null
@@ -1,666 +0,0 @@
-import {Numeric} from '../../fields';
-import {LayoutPanel, Fold, Section} from '..';
-import React from 'react';
-import {TestEditor, fixtures, mount} from 'lib/test-utils';
-
-// Basic Section visibility rules (in a panel for context)
-describe('Panel > Section', () => {
-  describe('div', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <Section>
-            <div id="thediv"> ok </div>
-          </Section>
-        </LayoutPanel>
-      </TestEditor>
-    );
-
-    it('shows Section', () =>
-      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>
-          <Section>
-            <Numeric attr="title" />
-          </Section>
-        </LayoutPanel>
-      </TestEditor>
-    );
-    it('shows Section', () =>
-      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>
-          <Section>
-            <Numeric attr="not_an_attr" />
-          </Section>
-        </LayoutPanel>
-      </TestEditor>
-    );
-
-    it('HIDES Section', () =>
-      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', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <Fold>
-            <div id="thediv"> ok </div>
-          </Fold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-
-    it('shows Fold', () => 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>
-          <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('Field-with-invisible-attr', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <Fold>
-            <Numeric attr="not_an_attr" />
-          </Fold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-
-    it('HIDES Fold', () => expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES Field', () => expect(wrapper.find('input').length).toEqual(0));
-  });
-});
-
-// Section alone can't force a Fold to show itself at the moment
-describe('Panel > Fold > Section', () => {
-  describe('div', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <Fold>
-            <Section>
-              <div id="thediv"> ok </div>
-            </Section>
-          </Fold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-    it('HIDES Fold', () => expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES Section', () =>
-      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>
-          <Fold>
-            <Section>
-              <Numeric attr="title" />
-            </Section>
-          </Fold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-    it('HIDES Fold', () => expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES Section', () =>
-      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>
-          <Fold>
-            <Section>
-              <Numeric attr="not_an_attr" />
-            </Section>
-          </Fold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-
-    it('HIDES Fold', () => expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES Section', () =>
-      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', () => {
-  describe('div', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <Fold>
-            <p>I force visibility of the fold</p>
-            <Section>
-              <div id="thediv"> ok </div>
-            </Section>
-          </Fold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-    it('shows Fold', () => expect(wrapper.find('div.fold').length).toEqual(1));
-    it('shows Section', () =>
-      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>
-            <p>I force visibility of the fold</p>
-            <Section>
-              <Numeric attr="title" />
-            </Section>
-          </Fold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-    it('shows Fold', () => expect(wrapper.find('div.fold').length).toEqual(1));
-    it('shows Section', () =>
-      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>
-            <p>I force visibility of the fold</p>
-            <Section>
-              <Numeric attr="not_an_attr" />
-            </Section>
-          </Fold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-
-    it('shows Fold', () => expect(wrapper.find('div.fold').length).toEqual(1));
-    it('HIDES Section', () =>
-      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', () => {
-  describe('div', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <Fold>
-            <Numeric attr="width" />
-            <Section>
-              <div id="thediv"> ok </div>
-            </Section>
-          </Fold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-    it('shows Fold', () => expect(wrapper.find('div.fold').length).toEqual(1));
-    it('shows Section', () =>
-      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>
-            <Numeric attr="width" />
-            <Section>
-              <Numeric attr="title" />
-            </Section>
-          </Fold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-    it('shows Fold', () => expect(wrapper.find('div.fold').length).toEqual(1));
-    it('shows Section', () =>
-      expect(wrapper.find('div.section').length).toEqual(1));
-    it('shows Field in Section', () =>
-      expect(wrapper.find('input').length).toEqual(2));
-  });
-
-  describe('Field-with-invisible-attr', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <Fold>
-            <Numeric attr="width" />
-            <Section>
-              <Numeric attr="not_an_attr" />
-            </Section>
-          </Fold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-
-    it('shows Fold', () => expect(wrapper.find('div.fold').length).toEqual(1));
-    it('HIDES Section', () =>
-      expect(wrapper.find('div.section').length).toEqual(0));
-    it('HIDES Field in Section', () =>
-      expect(wrapper.find('input').length).toEqual(1));
-  });
-});
-
-// invisible Field doesn't forces Fold open
-describe('Panel > Fold > Field-with-invisible-attr & Section', () => {
-  describe('div', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <Fold>
-            <Numeric attr="not_an_attr" />
-            <Section>
-              <div id="thediv"> ok </div>
-            </Section>
-          </Fold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-    it('HIDES Fold', () => expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES Section', () =>
-      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>
-          <Fold>
-            <Numeric attr="not_an_attr" />
-            <Section>
-              <Numeric attr="title" />
-            </Section>
-          </Fold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-    it('HIDES Fold', () => expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES Section', () =>
-      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>
-          <Fold>
-            <Numeric attr="not_an_attr" />
-            <Section>
-              <Numeric attr="not_an_attr" />
-            </Section>
-          </Fold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-    it('HIDES Fold', () => expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES Section', () =>
-      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', () => {
-  describe('div', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <Fold>
-            <Section attr="title">
-              <div id="thediv"> ok </div>
-            </Section>
-          </Fold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-    it('shows Fold', () => expect(wrapper.find('div.fold').length).toEqual(1));
-    it('shows Section', () =>
-      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>
-            <Section attr="title">
-              <Numeric attr="title" />
-            </Section>
-          </Fold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-    it('shows Fold', () => expect(wrapper.find('div.fold').length).toEqual(1));
-    it('shows Section', () =>
-      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>
-            <Section attr="title">
-              <Numeric attr="not_an_attr" />
-            </Section>
-          </Fold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-
-    it('shows Fold', () => expect(wrapper.find('div.fold').length).toEqual(1));
-    it('shows Section', () =>
-      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', () => {
-  describe('div', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <Fold>
-            <Section attr="not_an_attr">
-              <div id="thediv"> ok </div>
-            </Section>
-          </Fold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-    it('HIDES Fold', () => expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES Section', () =>
-      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>
-          <Fold>
-            <Section attr="not_an_attr">
-              <Numeric attr="title" />
-            </Section>
-          </Fold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-    it('HIDES Fold', () => expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES Section', () =>
-      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>
-          <Fold>
-            <Section attr="not_an_attr">
-              <Numeric attr="not_an_attr" />
-            </Section>
-          </Fold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-
-    it('HIDES Fold', () => expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES Section', () =>
-      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', () => {
-  describe('div', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <Fold>
-            <LayoutPanel>
-              <Fold>
-                <div id="thediv"> ok </div>
-              </Fold>
-            </LayoutPanel>
-          </Fold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-
-    it('HIDES Fold', () => 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>
-          <Fold>
-            <LayoutPanel>
-              <Fold>
-                <Numeric attr="title" />
-              </Fold>
-            </LayoutPanel>
-          </Fold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-    it('HIDES Fold', () => 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>
-          <Fold>
-            <LayoutPanel>
-              <Fold>
-                <Numeric attr="not_an_attr" />
-              </Fold>
-            </LayoutPanel>
-          </Fold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-
-    it('HIDES Fold', () => 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
-
-describe('Panel > Fold > Panel > Fold > Section', () => {
-  describe('div', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <Fold>
-            <LayoutPanel>
-              <Fold>
-                <Section>
-                  <div id="thediv"> ok </div>
-                </Section>
-              </Fold>
-            </LayoutPanel>
-          </Fold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-
-    it('HIDES Fold', () => expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES Section', () =>
-      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>
-          <Fold>
-            <LayoutPanel>
-              <Fold>
-                <Section>
-                  <Numeric attr="title" />
-                </Section>
-              </Fold>
-            </LayoutPanel>
-          </Fold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-    it('HIDES Fold', () => expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES Section', () =>
-      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>
-          <Fold>
-            <LayoutPanel>
-              <Fold>
-                <Section>
-                  <Numeric attr="not_an_attr" />
-                </Section>
-              </Fold>
-            </LayoutPanel>
-          </Fold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-
-    it('HIDES Fold', () => expect(wrapper.find('div.fold').length).toEqual(0));
-    it('HIDES Section', () =>
-      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
-
-describe('Panel > Fold > Panel-with-visible-attr > Fold > Section-with-visible-attr', () => {
-  describe('div', () => {
-    const wrapper = mount(
-      <TestEditor {...fixtures.scatter()}>
-        <LayoutPanel>
-          <Fold>
-            <LayoutPanel attr="title">
-              <Fold>
-                <Section attr="title">
-                  <div id="thediv"> ok </div>
-                </Section>
-              </Fold>
-            </LayoutPanel>
-          </Fold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-
-    it('shows 2 Folds', () =>
-      expect(wrapper.find('div.fold').length).toEqual(2));
-    it('shows Section', () =>
-      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>
-            <LayoutPanel attr="title">
-              <Fold>
-                <Section attr="title">
-                  <Numeric attr="title" />
-                </Section>
-              </Fold>
-            </LayoutPanel>
-          </Fold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-    it('shows 2 Folds', () =>
-      expect(wrapper.find('div.fold').length).toEqual(2));
-    it('shows Section', () =>
-      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>
-            <LayoutPanel attr="title">
-              <Fold>
-                <Section attr="title">
-                  <Numeric attr="not_an_attr" />
-                </Section>
-              </Fold>
-            </LayoutPanel>
-          </Fold>
-        </LayoutPanel>
-      </TestEditor>
-    );
-
-    it('shows 2 Folds', () =>
-      expect(wrapper.find('div.fold').length).toEqual(2));
-    it('shows Section', () =>
-      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/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/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/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/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..0adce7412 100644
--- a/src/default_panels/StyleTracesPanel.js
+++ b/src/default_panels/StyleTracesPanel.js
@@ -12,7 +12,7 @@ import {
   NumericFractionInverse,
   Radio,
   TextEditor,
-  Section,
+  PlotlySection,
   LayoutSection,
   SymbolSelector,
   TraceAccordion,
@@ -42,7 +42,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 +52,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 +71,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 +90,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 +109,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 +148,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 +222,7 @@ const StyleTracesPanel = ({localize: _}) => (
       />
     </TraceTypeSection>
 
-    <Section name={_('Colorscale')}>
+    <PlotlySection name={_('Colorscale')}>
       <ColorscalePicker label={_('Colorscale')} attr="colorscale" />
       <Radio
         label={_('Orientation')}
@@ -250,12 +250,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 +271,7 @@ const StyleTracesPanel = ({localize: _}) => (
       />
     </TraceTypeSection>
 
-    <Section name={_('Contours')}>
+    <PlotlySection name={_('Contours')}>
       <Radio
         label={_('Coloring')}
         attr="contours.coloring"
@@ -302,9 +302,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 +318,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 +340,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 +356,9 @@ const StyleTracesPanel = ({localize: _}) => (
           {label: _('Hide'), value: false},
         ]}
       />
-    </Section>
+    </PlotlySection>
 
-    <Section name={_('Highlight')}>
+    <PlotlySection name={_('Highlight')}>
       <Radio
         attr="boxmean"
         label={_('Mean')}
@@ -375,9 +375,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 +393,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..c0fe3e023 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>', () => {
+  it('can modify plotProps with <Trace><PlotlySection><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;