Style General and Style Axes - folds folded by default

Author: dmt0

src/DefaultEditor.js

@@ -88,9 +88,9 @@ class DefaultEditor extends Component {
         {this.hasTransforms() && (
           <GraphTransformsPanel group={_('Structure')} name={_('Transforms')} />
         )}
-        <StyleLayoutPanel group={_('Style')} name={_('General')} />
+        <StyleLayoutPanel group={_('Style')} name={_('General')} collapsedOnStart />
         <StyleTracesPanel group={_('Style')} name={_('Traces')} />
-        {this.hasAxes() && <StyleAxesPanel group={_('Style')} name={_('Axes')} />}
+        {this.hasAxes() && <StyleAxesPanel group={_('Style')} name={_('Axes')} collapsedOnStart />}
         {this.hasMaps() && <StyleMapsPanel group={_('Style')} name={_('Maps')} />}
         {this.hasLegend() && <StyleLegendPanel group={_('Style')} name={_('Legend')} />}
         {this.hasColorbars() && <StyleColorbarsPanel group={_('Style')} name={_('Color Bars')} />}

src/components/containers/PlotlyPanel.js

@@ -68,7 +68,7 @@ export class Panel extends Component {
     });
 
     if (this.state.individualFoldStates.length !== numFolds) {
-      const newFoldStates = new Array(numFolds).fill(false);
+      const newFoldStates = new Array(numFolds).fill(this.props.collapsedOnStart);
       this.setState({
         individualFoldStates: this.props.addAction
           ? newFoldStates.map((e, i) => i !== numFolds - 1)
@@ -129,10 +129,12 @@ Panel.propTypes = {
   noPadding: PropTypes.bool,
   showExpandCollapse: PropTypes.bool,
   canReorder: PropTypes.bool,
+  collapsedOnStart: PropTypes.bool,
 };
 
 Panel.defaultProps = {
   showExpandCollapse: true,
+  collapsedOnStart: false,
 };
 
 Panel.contextTypes = {

src/default_panels/StyleAxesPanel.js

@@ -27,7 +27,7 @@ class StyleAxesPanel extends Component {
   render() {
     const {localize: _} = this.context;
     return (
-      <LayoutPanel>
+      <LayoutPanel {...this.props}>
         <AxesFold
           name={_('Titles')}
           axisFilter={(axis) => !(axis._name.includes('angular') || axis._subplot.includes('geo'))}

src/default_panels/StyleLayoutPanel.js

@@ -21,7 +21,7 @@ import {HoverColor} from '../components/fields/derived';
 import DataSelector from '../components/fields/DataSelector';
 
 const StyleLayoutPanel = (props, {localize: _}) => (
-  <LayoutPanel>
+  <LayoutPanel {...props}>
     <PlotlyFold name={_('Defaults')}>
       <ColorPicker label={_('Plot Background')} attr="plot_bgcolor" />
       <ColorPicker label={_('Margin Color')} attr="paper_bgcolor" />