Fix axis title style bug (uber#652)

l328747807 · Nov 2, 2017 · 29e92ea · 29e92ea
1 parent 3be2bec
commit 29e92ea
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 2 deletions.
diff --git a/showcase/axes/custom-axis.js b/showcase/axes/custom-axis.js
@@ -31,6 +31,17 @@ import {
 
 export default class Example extends React.Component {
   render() {
+    const axisStyle = {
+      ticks: {
+        fontSize: '14px',
+        color: '#333'
+      },
+      title: {
+        fontSize: '16px',
+        color: '#333'
+      }
+    };
+
     return (
       <XYPlot
         width={300}
@@ -42,7 +53,8 @@ export default class Example extends React.Component {
           title="X"
           labelFormat={v => `Value is ${v}`}
           labelValues={[2]}
-          tickValues={[1, 1.5, 2, 3]}/>
+          tickValues={[1, 1.5, 2, 3]}
+          style={axisStyle}/>
         <YAxis hideTicks/>
         <LineSeries
           data={[

diff --git a/src/plot/axis/axis-title.js b/src/plot/axis/axis-title.js
@@ -81,7 +81,7 @@ function AxisTitle({orientation, width, height, style, title}) {
   return (
     <g transform={outerGroupTransform} className="rv-xy-plot__axis__title">
       <g style={{textAnchor, ...style}} transform={innerGroupTransform}>
-        <text>{title}</text>
+        <text style={style}>{title}</text>
       </g>
     </g>
   );

diff --git a/tests/components/axes-tests.js b/tests/components/axes-tests.js
@@ -22,6 +22,9 @@ test('Axis: Showcase Example - Custom axis', t => {
   t.equal($.text(), '1.01.52.03.0X', 'should find appropriate text');
   t.equal($.find('.rv-xy-plot__series--line').length, 1, 'should find the right number of lines');
   t.equal($.find('line').length, 15, 'should find the right number of grid lines');
+
+  const titleStyle = $.find('.rv-xy-plot__axis__title text').prop('style');
+  t.equal(titleStyle.fontSize, '16px', 'Styling: should honor title fontSize');
   t.end();
 });