Merge pull request #478 from hshoff/harry-axis-docs-fix

[docs][axis] fix tickLabelProps() prop default args for docs, update docs
airbnb · Jul 9, 2019 · c2c49d6 · c2c49d6
2 parents cf1bbb9 + bc47a69
commit c2c49d6
Show file tree

Hide file tree

Showing 11 changed files with 23 additions and 155 deletions.
diff --git a/packages/vx-axis/Readme.md b/packages/vx-axis/Readme.md
@@ -184,7 +184,7 @@ A [d3 formatter](https://github.com/d3/d3-scale/blob/master/README.md#continuous
 
 <a id="#AxisBottom__tickLabelProps" name="AxisBottom__tickLabelProps" href="#AxisBottom__tickLabelProps">#</a> *AxisBottom*.**tickLabelProps**&lt;func&gt; 
 
-A function that returns props for a given tick label. <table><tr><td><strong>Default</strong></td><td>({ tick, index }) => ({
+A function that returns props for a given tick label. <table><tr><td><strong>Default</strong></td><td>(tickValue, index) => ({
   dy: '0.25em',
   fill: 'black',
   fontFamily: 'Arial',
@@ -256,7 +256,7 @@ A top pixel offset applied to the entire axis.
 
 <a id="#AxisLeft__tickFormat" name="AxisLeft__tickFormat" href="#AxisLeft__tickFormat">#</a> *AxisLeft*.**tickFormat**&lt;func&gt;  
 
-<a id="#AxisLeft__tickLabelProps" name="AxisLeft__tickLabelProps" href="#AxisLeft__tickLabelProps">#</a> *AxisLeft*.**tickLabelProps**&lt;func&gt;  <table><tr><td><strong>Default</strong></td><td>({ tick, index }) => ({
+<a id="#AxisLeft__tickLabelProps" name="AxisLeft__tickLabelProps" href="#AxisLeft__tickLabelProps">#</a> *AxisLeft*.**tickLabelProps**&lt;func&gt;  <table><tr><td><strong>Default</strong></td><td>(tickValue, index) => ({
   dx: '-0.25em',
   dy: '0.25em',
   fill: 'black',
@@ -319,7 +319,7 @@ A top pixel offset applied to the entire axis.
 
 <a id="#AxisRight__tickFormat" name="AxisRight__tickFormat" href="#AxisRight__tickFormat">#</a> *AxisRight*.**tickFormat**&lt;func&gt;  
 
-<a id="#AxisRight__tickLabelProps" name="AxisRight__tickLabelProps" href="#AxisRight__tickLabelProps">#</a> *AxisRight*.**tickLabelProps**&lt;func&gt;  <table><tr><td><strong>Default</strong></td><td>({ tick, index }) => ({
+<a id="#AxisRight__tickLabelProps" name="AxisRight__tickLabelProps" href="#AxisRight__tickLabelProps">#</a> *AxisRight*.**tickLabelProps**&lt;func&gt;  <table><tr><td><strong>Default</strong></td><td>(tickValue, index) => ({
   dx: '0.25em',
   dy: '0.25em',
   fill: 'black',
@@ -382,7 +382,7 @@ A top pixel offset applied to the entire axis.
 
 <a id="#AxisTop__tickFormat" name="AxisTop__tickFormat" href="#AxisTop__tickFormat">#</a> *AxisTop*.**tickFormat**&lt;func&gt;  
 
-<a id="#AxisTop__tickLabelProps" name="AxisTop__tickLabelProps" href="#AxisTop__tickLabelProps">#</a> *AxisTop*.**tickLabelProps**&lt;func&gt;  <table><tr><td><strong>Default</strong></td><td>({ tick, index }) => ({
+<a id="#AxisTop__tickLabelProps" name="AxisTop__tickLabelProps" href="#AxisTop__tickLabelProps">#</a> *AxisTop*.**tickLabelProps**&lt;func&gt;  <table><tr><td><strong>Default</strong></td><td>(tickValue, index) => ({
   dy: '-0.25em',
   fill: 'black',
   fontFamily: 'Arial',

diff --git a/packages/vx-axis/docs/api.md b/packages/vx-axis/docs/api.md
@@ -150,7 +150,7 @@ A [d3 formatter](https://github.com/d3/d3-scale/blob/master/README.md#continuous
 
 <a id="#AxisBottom__tickLabelProps" name="AxisBottom__tickLabelProps" href="#AxisBottom__tickLabelProps">#</a> *AxisBottom*.**tickLabelProps**&lt;func&gt; 
 
-A function that returns props for a given tick label. <table><tr><td><strong>Default</strong></td><td>({ tick, index }) => ({
+A function that returns props for a given tick label. <table><tr><td><strong>Default</strong></td><td>(tickValue, index) => ({
   dy: '0.25em',
   fill: 'black',
   fontFamily: 'Arial',
@@ -222,7 +222,7 @@ A top pixel offset applied to the entire axis.
 
 <a id="#AxisLeft__tickFormat" name="AxisLeft__tickFormat" href="#AxisLeft__tickFormat">#</a> *AxisLeft*.**tickFormat**&lt;func&gt;  
 
-<a id="#AxisLeft__tickLabelProps" name="AxisLeft__tickLabelProps" href="#AxisLeft__tickLabelProps">#</a> *AxisLeft*.**tickLabelProps**&lt;func&gt;  <table><tr><td><strong>Default</strong></td><td>({ tick, index }) => ({
+<a id="#AxisLeft__tickLabelProps" name="AxisLeft__tickLabelProps" href="#AxisLeft__tickLabelProps">#</a> *AxisLeft*.**tickLabelProps**&lt;func&gt;  <table><tr><td><strong>Default</strong></td><td>(tickValue, index) => ({
   dx: '-0.25em',
   dy: '0.25em',
   fill: 'black',
@@ -285,7 +285,7 @@ A top pixel offset applied to the entire axis.
 
 <a id="#AxisRight__tickFormat" name="AxisRight__tickFormat" href="#AxisRight__tickFormat">#</a> *AxisRight*.**tickFormat**&lt;func&gt;  
 
-<a id="#AxisRight__tickLabelProps" name="AxisRight__tickLabelProps" href="#AxisRight__tickLabelProps">#</a> *AxisRight*.**tickLabelProps**&lt;func&gt;  <table><tr><td><strong>Default</strong></td><td>({ tick, index }) => ({
+<a id="#AxisRight__tickLabelProps" name="AxisRight__tickLabelProps" href="#AxisRight__tickLabelProps">#</a> *AxisRight*.**tickLabelProps**&lt;func&gt;  <table><tr><td><strong>Default</strong></td><td>(tickValue, index) => ({
   dx: '0.25em',
   dy: '0.25em',
   fill: 'black',
@@ -348,7 +348,7 @@ A top pixel offset applied to the entire axis.
 
 <a id="#AxisTop__tickFormat" name="AxisTop__tickFormat" href="#AxisTop__tickFormat">#</a> *AxisTop*.**tickFormat**&lt;func&gt;  
 
-<a id="#AxisTop__tickLabelProps" name="AxisTop__tickLabelProps" href="#AxisTop__tickLabelProps">#</a> *AxisTop*.**tickLabelProps**&lt;func&gt;  <table><tr><td><strong>Default</strong></td><td>({ tick, index }) => ({
+<a id="#AxisTop__tickLabelProps" name="AxisTop__tickLabelProps" href="#AxisTop__tickLabelProps">#</a> *AxisTop*.**tickLabelProps**&lt;func&gt;  <table><tr><td><strong>Default</strong></td><td>(tickValue, index) => ({
   dy: '-0.25em',
   fill: 'black',
   fontFamily: 'Arial',

diff --git a/packages/vx-axis/docs/docs.md b/packages/vx-axis/docs/docs.md
@@ -184,7 +184,7 @@ A [d3 formatter](https://github.com/d3/d3-scale/blob/master/README.md#continuous
 
 <a id="#AxisBottom__tickLabelProps" name="AxisBottom__tickLabelProps" href="#AxisBottom__tickLabelProps">#</a> *AxisBottom*.**tickLabelProps**&lt;func&gt; 
 
-A function that returns props for a given tick label. <table><tr><td><strong>Default</strong></td><td>({ tick, index }) => ({
+A function that returns props for a given tick label. <table><tr><td><strong>Default</strong></td><td>(tickValue, index) => ({
   dy: '0.25em',
   fill: 'black',
   fontFamily: 'Arial',
@@ -256,7 +256,7 @@ A top pixel offset applied to the entire axis.
 
 <a id="#AxisLeft__tickFormat" name="AxisLeft__tickFormat" href="#AxisLeft__tickFormat">#</a> *AxisLeft*.**tickFormat**&lt;func&gt;  
 
-<a id="#AxisLeft__tickLabelProps" name="AxisLeft__tickLabelProps" href="#AxisLeft__tickLabelProps">#</a> *AxisLeft*.**tickLabelProps**&lt;func&gt;  <table><tr><td><strong>Default</strong></td><td>({ tick, index }) => ({
+<a id="#AxisLeft__tickLabelProps" name="AxisLeft__tickLabelProps" href="#AxisLeft__tickLabelProps">#</a> *AxisLeft*.**tickLabelProps**&lt;func&gt;  <table><tr><td><strong>Default</strong></td><td>(tickValue, index) => ({
   dx: '-0.25em',
   dy: '0.25em',
   fill: 'black',
@@ -319,7 +319,7 @@ A top pixel offset applied to the entire axis.
 
 <a id="#AxisRight__tickFormat" name="AxisRight__tickFormat" href="#AxisRight__tickFormat">#</a> *AxisRight*.**tickFormat**&lt;func&gt;  
 
-<a id="#AxisRight__tickLabelProps" name="AxisRight__tickLabelProps" href="#AxisRight__tickLabelProps">#</a> *AxisRight*.**tickLabelProps**&lt;func&gt;  <table><tr><td><strong>Default</strong></td><td>({ tick, index }) => ({
+<a id="#AxisRight__tickLabelProps" name="AxisRight__tickLabelProps" href="#AxisRight__tickLabelProps">#</a> *AxisRight*.**tickLabelProps**&lt;func&gt;  <table><tr><td><strong>Default</strong></td><td>(tickValue, index) => ({
   dx: '0.25em',
   dy: '0.25em',
   fill: 'black',
@@ -382,7 +382,7 @@ A top pixel offset applied to the entire axis.
 
 <a id="#AxisTop__tickFormat" name="AxisTop__tickFormat" href="#AxisTop__tickFormat">#</a> *AxisTop*.**tickFormat**&lt;func&gt;  
 
-<a id="#AxisTop__tickLabelProps" name="AxisTop__tickLabelProps" href="#AxisTop__tickLabelProps">#</a> *AxisTop*.**tickLabelProps**&lt;func&gt;  <table><tr><td><strong>Default</strong></td><td>({ tick, index }) => ({
+<a id="#AxisTop__tickLabelProps" name="AxisTop__tickLabelProps" href="#AxisTop__tickLabelProps">#</a> *AxisTop*.**tickLabelProps**&lt;func&gt;  <table><tr><td><strong>Default</strong></td><td>(tickValue, index) => ({
   dy: '-0.25em',
   fill: 'black',
   fontFamily: 'Arial',

diff --git a/packages/vx-axis/src/axis/AxisBottom.js b/packages/vx-axis/src/axis/AxisBottom.js
@@ -128,7 +128,7 @@ export default function AxisBottom({
   strokeDasharray,
   tickClassName,
   tickFormat,
-  tickLabelProps = ({ tick, index }) => ({
+  tickLabelProps = (tickValue, index) => ({
     dy: '0.25em',
     fill: 'black',
     fontFamily: 'Arial',

diff --git a/packages/vx-axis/src/axis/AxisLeft.js b/packages/vx-axis/src/axis/AxisLeft.js
@@ -53,7 +53,7 @@ export default function AxisLeft({
   strokeDasharray,
   tickClassName,
   tickFormat,
-  tickLabelProps = ({ tick, index }) => ({
+  tickLabelProps = (tickValue, index) => ({
     dx: '-0.25em',
     dy: '0.25em',
     fill: 'black',

diff --git a/packages/vx-axis/src/axis/AxisRight.js b/packages/vx-axis/src/axis/AxisRight.js
@@ -53,7 +53,7 @@ export default function AxisRight({
   strokeDasharray,
   tickClassName,
   tickFormat,
-  tickLabelProps = ({ tick, index }) => ({
+  tickLabelProps = (tickValue, index) => ({
     dx: '0.25em',
     dy: '0.25em',
     fill: 'black',

diff --git a/packages/vx-axis/src/axis/AxisTop.js b/packages/vx-axis/src/axis/AxisTop.js
@@ -53,7 +53,7 @@ export default function AxisTop({
   strokeDasharray,
   tickClassName,
   tickFormat,
-  tickLabelProps = ({ tick, index }) => ({
+  tickLabelProps = (tickValue, index) => ({
     dy: '-0.25em',
     fill: 'black',
     fontFamily: 'Arial',

diff --git a/packages/vx-demo/static/docs/vx-axis.html b/packages/vx-demo/static/docs/vx-axis.html
@@ -138,7 +138,7 @@ <h3 id="axisbottom-">&lt;AxisBottom /&gt;</h3>
 <p><a id="#AxisBottom__tickFormat" name="AxisBottom__tickFormat" href="#AxisBottom__tickFormat">#</a> <em>AxisBottom</em>.<strong>tickFormat</strong>&lt;func&gt; </p>
 <p>A <a href="https://github.com/d3/d3-scale/blob/master/README.md#continuous_tickFormat">d3 formatter</a> for the tick text. </p>
 <p><a id="#AxisBottom__tickLabelProps" name="AxisBottom__tickLabelProps" href="#AxisBottom__tickLabelProps">#</a> <em>AxisBottom</em>.<strong>tickLabelProps</strong>&lt;func&gt; </p>
-<p>A function that returns props for a given tick label. <table><tr><td><strong>Default</strong></td><td>({ tick, index }) =&gt; ({
+<p>A function that returns props for a given tick label. <table><tr><td><strong>Default</strong></td><td>(tickValue, index) =&gt; ({
   dy: &#39;0.25em&#39;,
   fill: &#39;black&#39;,
   fontFamily: &#39;Arial&#39;,
@@ -179,7 +179,7 @@ <h3 id="axisleft-">&lt;AxisLeft /&gt;</h3>
 <p><a id="#AxisLeft__tickClassName" name="AxisLeft__tickClassName" href="#AxisLeft__tickClassName">#</a> <em>AxisLeft</em>.<strong>tickClassName</strong>&lt;string&gt;  </p>
 <p><a id="#AxisLeft__tickComponent" name="AxisLeft__tickComponent" href="#AxisLeft__tickComponent">#</a> <em>AxisLeft</em>.<strong>tickComponent</strong>&lt;func&gt;  </p>
 <p><a id="#AxisLeft__tickFormat" name="AxisLeft__tickFormat" href="#AxisLeft__tickFormat">#</a> <em>AxisLeft</em>.<strong>tickFormat</strong>&lt;func&gt;  </p>
-<p><a id="#AxisLeft__tickLabelProps" name="AxisLeft__tickLabelProps" href="#AxisLeft__tickLabelProps">#</a> <em>AxisLeft</em>.<strong>tickLabelProps</strong>&lt;func&gt;  <table><tr><td><strong>Default</strong></td><td>({ tick, index }) =&gt; ({
+<p><a id="#AxisLeft__tickLabelProps" name="AxisLeft__tickLabelProps" href="#AxisLeft__tickLabelProps">#</a> <em>AxisLeft</em>.<strong>tickLabelProps</strong>&lt;func&gt;  <table><tr><td><strong>Default</strong></td><td>(tickValue, index) =&gt; ({
   dx: &#39;-0.25em&#39;,
   dy: &#39;0.25em&#39;,
   fill: &#39;black&#39;,
@@ -216,7 +216,7 @@ <h3 id="axisright-">&lt;AxisRight /&gt;</h3>
 <p><a id="#AxisRight__tickClassName" name="AxisRight__tickClassName" href="#AxisRight__tickClassName">#</a> <em>AxisRight</em>.<strong>tickClassName</strong>&lt;string&gt;  </p>
 <p><a id="#AxisRight__tickComponent" name="AxisRight__tickComponent" href="#AxisRight__tickComponent">#</a> <em>AxisRight</em>.<strong>tickComponent</strong>&lt;func&gt;  </p>
 <p><a id="#AxisRight__tickFormat" name="AxisRight__tickFormat" href="#AxisRight__tickFormat">#</a> <em>AxisRight</em>.<strong>tickFormat</strong>&lt;func&gt;  </p>
-<p><a id="#AxisRight__tickLabelProps" name="AxisRight__tickLabelProps" href="#AxisRight__tickLabelProps">#</a> <em>AxisRight</em>.<strong>tickLabelProps</strong>&lt;func&gt;  <table><tr><td><strong>Default</strong></td><td>({ tick, index }) =&gt; ({
+<p><a id="#AxisRight__tickLabelProps" name="AxisRight__tickLabelProps" href="#AxisRight__tickLabelProps">#</a> <em>AxisRight</em>.<strong>tickLabelProps</strong>&lt;func&gt;  <table><tr><td><strong>Default</strong></td><td>(tickValue, index) =&gt; ({
   dx: &#39;0.25em&#39;,
   dy: &#39;0.25em&#39;,
   fill: &#39;black&#39;,
@@ -253,7 +253,7 @@ <h3 id="axistop-">&lt;AxisTop /&gt;</h3>
 <p><a id="#AxisTop__tickClassName" name="AxisTop__tickClassName" href="#AxisTop__tickClassName">#</a> <em>AxisTop</em>.<strong>tickClassName</strong>&lt;string&gt;  </p>
 <p><a id="#AxisTop__tickComponent" name="AxisTop__tickComponent" href="#AxisTop__tickComponent">#</a> <em>AxisTop</em>.<strong>tickComponent</strong>&lt;func&gt;  </p>
 <p><a id="#AxisTop__tickFormat" name="AxisTop__tickFormat" href="#AxisTop__tickFormat">#</a> <em>AxisTop</em>.<strong>tickFormat</strong>&lt;func&gt;  </p>
-<p><a id="#AxisTop__tickLabelProps" name="AxisTop__tickLabelProps" href="#AxisTop__tickLabelProps">#</a> <em>AxisTop</em>.<strong>tickLabelProps</strong>&lt;func&gt;  <table><tr><td><strong>Default</strong></td><td>({ tick, index }) =&gt; ({
+<p><a id="#AxisTop__tickLabelProps" name="AxisTop__tickLabelProps" href="#AxisTop__tickLabelProps">#</a> <em>AxisTop</em>.<strong>tickLabelProps</strong>&lt;func&gt;  <table><tr><td><strong>Default</strong></td><td>(tickValue, index) =&gt; ({
   dy: &#39;-0.25em&#39;,
   fill: &#39;black&#39;,
   fontFamily: &#39;Arial&#39;,

diff --git a/packages/vx-demo/static/docs/vx-glyph.html b/packages/vx-demo/static/docs/vx-glyph.html
@@ -37,47 +37,7 @@ <h1 id="-vx-glyph">@vx/glyph</h1>
 <p><a title="@vx/glyph npm downloads" href="https://www.npmjs.com/package/@vx/glyph">
   <img src="https://img.shields.io/npm/dm/@vx/glyph.svg?style=flat-square" />
 </a></p>
-<p>Glyphs are small icons that you can use in your graphs. Some elements, like <code>LinePath</code>, can take a function that returns a glyph.</p>
-<p>For example:</p>
-<pre><code class="lang-js">import { LinePath } from &#39;@vx/shape&#39;;
-import { GlyphDot } from &#39;@vx/glyph&#39;;
-
-let line = (
-  &lt;LinePath
-    ...
-    glyph={(d, i) =&gt; {
-      return (
-        &lt;GlyphDot
-          className={&quot;glyph-dots&quot;}
-          key={&#39;line-dot-{i}&#39;}
-          cx={xScale(x(d))}
-          cy={yScale(y(d))}
-          r={6}
-          fill={&quot;white&quot;}
-          stroke={&quot;black&quot;}
-          strokeWidth={3} /&gt;
-      )
-    }}
-  /&gt;
-)
-</code></pre>
-<p>You also can incorporate child elements into your glyph to add labels and such.</p>
-<pre><code class="lang-js">import { Dot } from &#39;@vx/glyph&#39;;
-
-&lt;GlyphDot ... &gt;
-  &lt;text
-    x={xScale(x(d))}
-    y={yScale(y(d))}
-    dx={10}
-    fill={&quot;white&quot;}
-    stroke={&quot;black&quot;}
-    strokeWidth={6}
-    fontSize={11}
-  &gt;
-    {&quot;Hi there!&quot;}
-  &lt;/text&gt;
-&lt;/GlyphDot&gt;
-</code></pre>
+<p>Glyphs are small icons that you can use in your graphs. Example: <a href="https://vx-demo.now.sh/glyphs">https://vx-demo.now.sh/glyphs</a></p>
 <h2 id="installation">Installation</h2>
 <pre><code>npm install --save @vx/glyph
 </code></pre><h2 id="components">Components</h2>

diff --git a/packages/vx-glyph/docs/description.md b/packages/vx-glyph/docs/description.md
@@ -4,50 +4,4 @@
   <img src="https://img.shields.io/npm/dm/@vx/glyph.svg?style=flat-square" />
 </a>
 
-Glyphs are small icons that you can use in your graphs. Some elements, like `LinePath`, can take a function that returns a glyph.
-
-For example:
-
-```js
-import { LinePath } from '@vx/shape';
-import { GlyphDot } from '@vx/glyph';
-
-let line = (
-  <LinePath
-    ...
-    glyph={(d, i) => {
-      return (
-        <GlyphDot
-          className={"glyph-dots"}
-          key={'line-dot-{i}'}
-          cx={xScale(x(d))}
-          cy={yScale(y(d))}
-          r={6}
-          fill={"white"}
-          stroke={"black"}
-          strokeWidth={3} />
-      )
-    }}
-  />
-)
-```
-
-You also can incorporate child elements into your glyph to add labels and such.
-
-```js
-import { Dot } from '@vx/glyph';
-
-<GlyphDot ... >
-  <text
-    x={xScale(x(d))}
-    y={yScale(y(d))}
-    dx={10}
-    fill={"white"}
-    stroke={"black"}
-    strokeWidth={6}
-    fontSize={11}
-  >
-    {"Hi there!"}
-  </text>
-</GlyphDot>
-```
+Glyphs are small icons that you can use in your graphs. Example: [https://vx-demo.now.sh/glyphs](https://vx-demo.now.sh/glyphs)
diff --git a/packages/vx-glyph/docs/docs.md b/packages/vx-glyph/docs/docs.md
@@ -4,53 +4,7 @@
   <img src="https://img.shields.io/npm/dm/@vx/glyph.svg?style=flat-square" />
 </a>
 
-Glyphs are small icons that you can use in your graphs. Some elements, like `LinePath`, can take a function that returns a glyph.
-
-For example:
-
-```js
-import { LinePath } from '@vx/shape';
-import { GlyphDot } from '@vx/glyph';
-
-let line = (
-  <LinePath
-    ...
-    glyph={(d, i) => {
-      return (
-        <GlyphDot
-          className={"glyph-dots"}
-          key={'line-dot-{i}'}
-          cx={xScale(x(d))}
-          cy={yScale(y(d))}
-          r={6}
-          fill={"white"}
-          stroke={"black"}
-          strokeWidth={3} />
-      )
-    }}
-  />
-)
-```
-
-You also can incorporate child elements into your glyph to add labels and such.
-
-```js
-import { Dot } from '@vx/glyph';
-
-<GlyphDot ... >
-  <text
-    x={xScale(x(d))}
-    y={yScale(y(d))}
-    dx={10}
-    fill={"white"}
-    stroke={"black"}
-    strokeWidth={6}
-    fontSize={11}
-  >
-    {"Hi there!"}
-  </text>
-</GlyphDot>
-```
+Glyphs are small icons that you can use in your graphs. Example: [https://vx-demo.now.sh/glyphs](https://vx-demo.now.sh/glyphs)
 
 
 ## Installation