title -> title.text

Author: nicolaskruchten

examples/custom/src/CustomEditor.js

@@ -57,7 +57,7 @@ export default class CustomEditor extends Component {
               />
               <Flaglist
                 label="Flaglist"
-                attr="titlefont.family"
+                attr="title.font.family"
                 show
                 options={[{label: 'Yes', value: 'y'}, {label: 'No', value: 'n'}]}
               />

src/default_panels/StyleAxesPanel.js

@@ -31,10 +31,10 @@ class StyleAxesPanel extends Component {
           name={_('Titles')}
           axisFilter={axis => !(axis._name.includes('angular') || axis._subplot.includes('geo'))}
         >
-          <TextEditor attr="title" />
-          <FontSelector label={_('Typeface')} attr="titlefont.family" />
-          <Numeric label={_('Font Size')} attr="titlefont.size" units="px" />
-          <ColorPicker label={_('Font Color')} attr="titlefont.color" />
+          <TextEditor attr="title.text" />
+          <FontSelector label={_('Typeface')} attr="title.font.family" />
+          <Numeric label={_('Font Size')} attr="title.font.size" units="px" />
+          <ColorPicker label={_('Font Color')} attr="title.font.color" />
         </AxesFold>
 
         <AxesFold name={_('Range')}>

src/default_panels/StyleColorbarsPanel.js

@@ -38,20 +38,20 @@ const StyleColorBarsPanel = (props, {localize: _}) => {
 
                 <Dropdown
                   label={_('Location')}
-                  attr={prefix + 'colorbar.titleside'}
+                  attr={prefix + 'colorbar.title.side'}
                   options={[
                     {label: _('Top'), value: 'top'},
                     {label: _('Right'), value: 'right'},
                     {label: _('Bottom'), value: 'bottom'},
                   ]}
                 />
-                <FontSelector label={_('Typeface')} attr={prefix + 'colorbar.titlefont.family'} />
+                <FontSelector label={_('Typeface')} attr={prefix + 'colorbar.title.font.family'} />
                 <Numeric
                   label={_('Font Size')}
-                  attr={prefix + 'colorbar.titlefont.size'}
+                  attr={prefix + 'colorbar.title.font.size'}
                   units="px"
                 />
-                <ColorPicker label={_('Font Color')} attr={prefix + 'colorbar.titlefont.color'} />
+                <ColorPicker label={_('Font Color')} attr={prefix + 'colorbar.title.font.color'} />
               </PlotlyFold>
               <PlotlyFold name={_('Size and Positioning')}>
                 <PlotlySection name={_('Size')} attr={prefix + 'colorbar.len'}>

src/default_panels/StyleLayoutPanel.js

@@ -40,12 +40,11 @@ const StyleLayoutPanel = (props, {localize: _}) => (
     </PlotlyFold>
 
     <PlotlyFold name={_('Title')}>
-      <PlotlySection name={_('Title')} attr="title">
-        <TextEditor attr="title" />
-        <FontSelector label={_('Typeface')} attr="titlefont.family" clearable={false} />
-        <Numeric label={_('Font Size')} attr="titlefont.size" units="px" />
-        <ColorPicker label={_('Font Color')} attr="titlefont.color" />
-      </PlotlySection>
+      <TextEditor attr="title.text" />
+      <FontSelector label={_('Typeface')} attr="title.font.family" clearable={false} />
+      <Numeric label={_('Font Size')} attr="title.font.size" units="px" />
+      <ColorPicker label={_('Font Color')} attr="title.font.color" />
+      <Numeric label={_('Horizontal Position')} showSlider step={0.02} attr="title.x" />
     </PlotlyFold>
 
     <PlotlyFold name={_('Modebar')}>

src/default_panels/StyleTracesPanel.js

@@ -86,8 +86,8 @@ const StyleTracesPanel = (props, {localize: _}) => (
         />
       </LayoutSection>
     </TraceTypeSection>
-    <PlotlySection name={_('Pie Title')} attr="title">
-      <TextEditor label={_('Name')} attr="title" />
+    <PlotlySection name={_('Pie Title')} attr="title.text">
+      <TextEditor label={_('Name')} attr="title.text" />
       <Dropdown
         label={'Title Position'}
         attr="titleposition"
@@ -101,8 +101,8 @@ const StyleTracesPanel = (props, {localize: _}) => (
           {label: _('Bottom Right'), value: 'bottom right'},
         ]}
       />
-      <FontSelector label={_('Typeface')} attr="titlefont.family" clearable={false} />
-      <Numeric label={_('Font Size')} attr="titlefont.size" units="px" />
+      <FontSelector label={_('Typeface')} attr="title.font.family" clearable={false} />
+      <Numeric label={_('Font Size')} attr="title.font.size" units="px" />
     </PlotlySection>
     <PlotlySection name={_('Values')}>
       <BinningDropdown label={_('Histogram Function')} attr="histfunc" />