Merge pull request #131 from primer/text-input-changes

Add onChange handler to TextInput

.eslintrc.json

@@ -3,8 +3,5 @@
     "plugin:github/es6",
     "plugin:github/react",
     "plugin:jsx-a11y/recommended"
-  ],
-  "rules": {
-    "jsx-a11y/no-autofocus": "warn"
-  }
+  ]
 }

docs/sandbox/index.html

@@ -9,9 +9,14 @@
       margin: 0;
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
       line-height: 1.5;
-    }</style><div class="text-dark-gray"><nav class="UnderlineNav"><div class="UnderlineNav-body"><a class="UnderlineNav-item no-underline px-3" href="/primer-react/components">Components</a><a class="UnderlineNav-item no-underline px-3" href="/primer-react/demos">Demos</a><a class="UnderlineNav-item no-underline px-3 selected" aria-current="page" href="/primer-react/sandbox">Sandbox</a></div><div class="UnderlineNav-actions"><span class="px-4 text-gray-light text-mono"><svg aria-hidden="true" class="mr-2" height="16" role="img" viewBox="0 0 16 16" width="16" style="display:inline-block;fill:currentColor;user-select:none;vertical-align:text-bottom"><path fill-rule="evenodd" d="M1 4.732v7.47c0 .45.3.84.75.97l6.5 1.73c.16.05.34.05.5 0l6.5-1.73c.45-.13.75-.52.75-.97v-7.47c0-.45-.3-.84-.75-.97l-6.5-1.74a1.4 1.4 0 0 0-.5 0l-6.5 1.74c-.45.13-.75.52-.75.97zm7 9.09l-6-1.59v-6.77l6 1.61v6.75zm-6-9.36l2.5-.67 6.5 1.73-2.5.67L2 4.463zm13 7.77l-6 1.59v-6.75l2-.55v2.44l2-.53v-2.44l2-.53v6.77zm-2-7.24l-6.5-1.73 2-.53 6.5 1.73-2 .53z"></path></svg><a class="text-blue" href="https://github.com/primer/primer-react/releases/v0.0.10-beta">primer-react@0.0.10-beta</a></span></div></nav><div class="react-live"><div class="nano13x0vfn"><div class="react-live-preview"><div><div class="p-4"><h1 class="m-0 f1">Hello World!</h1><span class="">To get started with the Sandbox, start adding some primer-react components</span></div></div></div><div mt="2" class="nano1c0guhj"><pre class="prism-code nano11r6mrt" spellcheck="false" contenteditable="true">
+    }</style><div class="text-dark-gray"><nav class="UnderlineNav"><div class="UnderlineNav-body"><a class="UnderlineNav-item no-underline px-3" href="/primer-react/components">Components</a><a class="UnderlineNav-item no-underline px-3" href="/primer-react/demos">Demos</a><a class="UnderlineNav-item no-underline px-3 selected" aria-current="page" href="/primer-react/sandbox">Sandbox</a></div><div class="UnderlineNav-actions"><span class="px-4 text-gray-light text-mono"><svg aria-hidden="true" class="mr-2" height="16" role="img" viewBox="0 0 16 16" width="16" style="display:inline-block;fill:currentColor;user-select:none;vertical-align:text-bottom"><path fill-rule="evenodd" d="M1 4.732v7.47c0 .45.3.84.75.97l6.5 1.73c.16.05.34.05.5 0l6.5-1.73c.45-.13.75-.52.75-.97v-7.47c0-.45-.3-.84-.75-.97l-6.5-1.74a1.4 1.4 0 0 0-.5 0l-6.5 1.74c-.45.13-.75.52-.75.97zm7 9.09l-6-1.59v-6.77l6 1.61v6.75zm-6-9.36l2.5-.67 6.5 1.73-2.5.67L2 4.463zm13 7.77l-6 1.59v-6.75l2-.55v2.44l2-.53v-2.44l2-.53v6.77zm-2-7.24l-6.5-1.73 2-.53 6.5 1.73-2 .53z"></path></svg><a class="text-blue" href="https://github.com/primer/primer-react/releases/v0.0.11-beta">primer-react@0.0.11-beta</a></span></div></nav><div class="p-3"><div class="react-live"><div class="nano13x0vfn"><div class="react-live-preview"><div><div class="p-4"><h1 class="m-0 f1">Hello World!</h1><p class="">All of the primer-react <a href="/primer-react/components">components</a> are available in this sandbox!</p><div class="my-4 p-2 border bg-white rounded-1">This is a box with <span class="text-mono">some mono text</span>.</div></div></div></div><div mt="2" class="nano1c0guhj"><pre class="prism-code nano11r6mrt" spellcheck="false" contenteditable="true">
 
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Block</span> <span class="token attr-name">p</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Heading</span><span class="token punctuation">></span></span>Hello World<span class="token operator">!</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Heading</span><span class="token punctuation">></span></span>
-    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Text</span><span class="token punctuation">></span></span>To <span class="token keyword">get</span> started <span class="token keyword">with</span> the Sandbox<span class="token punctuation">,</span> start adding some primer<span class="token operator">-</span>react components<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Text</span><span class="token punctuation">></span></span>
-  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Block</span><span class="token punctuation">></span></span></pre><style>.nano11r6mrt{font-family:Menlo, monospace;font-size:14px;padding:8px;background-color:#f6f6f6;outline:none}</style></div><style>.nano1c0guhj{margin-top:8px}</style><div w="1" class="nanoxtup2y"></div><style>.nanoxtup2y{width:100%}</style></div></div></div></div></body></html><script src="/primer-react/bundle.js"></script>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Block</span> <span class="token attr-name">p</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Heading</span><span class="token punctuation">></span></span>Hello World<span class="token operator">!</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Heading</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Text</span> <span class="token attr-name">tag</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>p<span class="token punctuation">'</span></span><span class="token punctuation">></span></span>
+    All <span class="token keyword">of</span> the primer<span class="token operator">-</span>react <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>NavLink</span> <span class="token attr-name">to</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">'</span>/components<span class="token punctuation">'</span></span><span class="token punctuation">></span></span>components<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>NavLink</span><span class="token punctuation">></span></span> are available <span class="token keyword">in</span> <span class="token keyword">this</span> sandbox<span class="token operator">!</span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Text</span><span class="token punctuation">></span></span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Box</span> <span class="token attr-name">my</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">4</span><span class="token punctuation">}</span></span> <span class="token attr-name">p</span><span class="token script language-javascript"><span class="token script-punctuation punctuation">=</span><span class="token punctuation">{</span><span class="token number">2</span><span class="token punctuation">}</span></span><span class="token punctuation">></span></span>
+    This is a box <span class="token keyword">with</span> <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>Text</span> <span class="token attr-name">mono</span><span class="token punctuation">></span></span>some mono text<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Text</span><span class="token punctuation">></span></span><span class="token punctuation">.</span>
+  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Box</span><span class="token punctuation">></span></span>
+<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>Block</span><span class="token punctuation">></span></span></pre><style>.nano11r6mrt{font-family:Menlo, monospace;font-size:14px;padding:8px;background-color:#f6f6f6;outline:none}</style></div><style>.nano1c0guhj{margin-top:8px}</style><div w="1" class="nanoxtup2y"></div><style>.nanoxtup2y{width:100%}</style></div></div></div></div></div></body></html><script src="/primer-react/bundle.js"></script>