Merge pull request #57 from styled-components/inputs

Adds Text Inputs and Buttons Selector Shorthand
styled-components · Dec 16, 2016 · c800b90 · c800b90
2 parents 0ac5814 + 46aeb71
commit c800b90
Show file tree

Hide file tree

Showing 13 changed files with 2,583 additions and 38 deletions.
diff --git a/.documentation.json b/.documentation.json
@@ -23,6 +23,8 @@
       "description": "Functions that help write nicer code. They're shorter, of course, but they also make it easy to pass in multiple variables without resorting to string concatenation."
     },
     "animation",
+    "buttons",
+    "textInputs",
     {
       "name": "Helpers",
       "description": "Tiny helper functions that make your life easier."

diff --git a/docs/docs/index.html b/docs/docs/index.html
@@ -155,6 +155,26 @@ <h3 class='mb0 no-anchor'>polished</h3>
               </li>
 
 
+              <li><a
+                href='#buttons'
+                class="">
+                buttons
+
+              </a>
+
+              </li>
+
+
+              <li><a
+                href='#textinputs'
+                class="">
+                textInputs
+
+              </a>
+
+              </li>
+
+
               <li><a
                 href='#helpers'
                 class="h5 bold black caps">
@@ -239,7 +259,7 @@ <h3 class='fl m0' id='clearfix'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/90b1b6bbb8354d52069c26863b6197f865595c5b/src/mixins/clearFix.js#L26-L35'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/86cc9d322b52dd9966fb5f1f48559e4213c69272/src/mixins/clearFix.js#L26-L35'>
       <span>src/mixins/clearFix.js</span>
       </a>
 
@@ -325,7 +345,7 @@ <h3 class='fl m0' id='ellipsis'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/90b1b6bbb8354d52069c26863b6197f865595c5b/src/mixins/ellipsis.js#L29-L38'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/86cc9d322b52dd9966fb5f1f48559e4213c69272/src/mixins/ellipsis.js#L29-L38'>
       <span>src/mixins/ellipsis.js</span>
       </a>
 
@@ -414,7 +434,7 @@ <h3 class='fl m0' id='hidpi'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/90b1b6bbb8354d52069c26863b6197f865595c5b/src/mixins/hiDPI.js#L32-L40'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/86cc9d322b52dd9966fb5f1f48559e4213c69272/src/mixins/hiDPI.js#L32-L40'>
       <span>src/mixins/hiDPI.js</span>
       </a>
 
@@ -506,7 +526,7 @@ <h3 class='fl m0' id='hidetext'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/90b1b6bbb8354d52069c26863b6197f865595c5b/src/mixins/hideText.js#L29-L35'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/86cc9d322b52dd9966fb5f1f48559e4213c69272/src/mixins/hideText.js#L29-L35'>
       <span>src/mixins/hideText.js</span>
       </a>
 
@@ -581,7 +601,7 @@ <h3 class='fl m0' id='placeholder'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/90b1b6bbb8354d52069c26863b6197f865595c5b/src/mixins/placeholder.js#L35-L50'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/86cc9d322b52dd9966fb5f1f48559e4213c69272/src/mixins/placeholder.js#L35-L50'>
       <span>src/mixins/placeholder.js</span>
       </a>
 
@@ -684,7 +704,7 @@ <h3 class='fl m0' id='retinaimage'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/90b1b6bbb8354d52069c26863b6197f865595c5b/src/mixins/retinaImage.js#L33-L48'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/86cc9d322b52dd9966fb5f1f48559e4213c69272/src/mixins/retinaImage.js#L33-L48'>
       <span>src/mixins/retinaImage.js</span>
       </a>
 
@@ -809,7 +829,7 @@ <h3 class='fl m0' id='selection'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/90b1b6bbb8354d52069c26863b6197f865595c5b/src/mixins/selection.js#L31-L40'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/86cc9d322b52dd9966fb5f1f48559e4213c69272/src/mixins/selection.js#L31-L40'>
       <span>src/mixins/selection.js</span>
       </a>
 
@@ -908,7 +928,7 @@ <h3 class='fl m0' id='size'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/90b1b6bbb8354d52069c26863b6197f865595c5b/src/mixins/size.js#L24-L29'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/86cc9d322b52dd9966fb5f1f48559e4213c69272/src/mixins/size.js#L24-L29'>
       <span>src/mixins/size.js</span>
       </a>
 
@@ -1001,7 +1021,7 @@ <h3 class='fl m0' id='timingfunctions'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/90b1b6bbb8354d52069c26863b6197f865595c5b/src/mixins/timingFunctions.js#L81-L83'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/86cc9d322b52dd9966fb5f1f48559e4213c69272/src/mixins/timingFunctions.js#L81-L83'>
       <span>src/mixins/timingFunctions.js</span>
       </a>
 
@@ -1084,7 +1104,7 @@ <h3 class='fl m0' id='wordwrap'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/90b1b6bbb8354d52069c26863b6197f865595c5b/src/mixins/wordWrap.js#L26-L33'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/86cc9d322b52dd9966fb5f1f48559e4213c69272/src/mixins/wordWrap.js#L26-L33'>
       <span>src/mixins/wordWrap.js</span>
       </a>
 
@@ -1185,7 +1205,7 @@ <h3 class='fl m0' id='animation'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/90b1b6bbb8354d52069c26863b6197f865595c5b/src/shorthands/animation.js#L41-L61'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/86cc9d322b52dd9966fb5f1f48559e4213c69272/src/shorthands/animation.js#L41-L61'>
       <span>src/shorthands/animation.js</span>
       </a>
 
@@ -1271,6 +1291,198 @@ <h3 class='fl m0' id='animation'>
 
 
 
+</section>
+
+
+
+
+          <section class='p2 mb2 clearfix bg-white minishadow'>
+
+
+  <div class='clearfix'>
+
+    <h3 class='fl m0' id='buttons'>
+      buttons
+    </h3>
+
+
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/86cc9d322b52dd9966fb5f1f48559e4213c69272/src/shorthands/buttons.js#L47-L49'>
+      <span>src/shorthands/buttons.js</span>
+      </a>
+
+  </div>
+
+
+  <p>Populates selectors that target all buttons. You can pass optional states to append to the selectors.</p>
+
+
+  <div class='pre p1 fill-light mt0'>buttons(states: ...<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&lt;State&gt;)</div>
+
+
+
+
+
+
+
+
+
+
+    <div class='py1 quiet mt1 prose-big'>Parameters</div>
+    <div class='prose'>
+
+        <div class='space-bottom0'>
+          <div>
+            <span class='code bold'>states</span> <code class='quiet'>(...<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&lt;State&gt;)</code>
+
+          </div>
+
+        </div>
+
+    </div>
+
+
+
+
+
+
+
+
+
+    <div class='py1 quiet mt1 prose-big'>Example</div>
+
+
+      <pre class='p1 overflow-auto round fill-light'><span class="hljs-comment">// Styles as object usage</span>
+const styles = {
+  [buttons(<span class="hljs-symbol">'activ</span>e')]: {
+    <span class="hljs-symbol">'borde</span>r': <span class="hljs-symbol">'non</span>e'
+  }
+}
+
+<span class="hljs-comment">// styled-components usage</span>
+const div = styled.div`
+  &gt; ${buttons(<span class="hljs-symbol">'activ</span>e')} {
+    border: none;
+  }
+`
+
+<span class="hljs-comment">// CSS in JS Output</span>
+
+ <span class="hljs-symbol">'button</span>:active,
+ <span class="hljs-symbol">'input</span>[<span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"button"</span>]:active,
+ <span class="hljs-symbol">'input</span>[<span class="hljs-class"><span class="hljs-keyword">type</span><span class="hljs-title">=\</span>"<span class="hljs-title">reset\</span>"]</span>:active,
+ <span class="hljs-symbol">'input</span>[<span class="hljs-class"><span class="hljs-keyword">type</span><span class="hljs-title">=\</span>"<span class="hljs-title">submit\</span>"]</span>:active: {
+  <span class="hljs-symbol">'borde</span>r': <span class="hljs-symbol">'non</span>e'
+}</pre>
+
+
+
+
+
+
+
+
+</section>
+
+
+
+
+          <section class='p2 mb2 clearfix bg-white minishadow'>
+
+
+  <div class='clearfix'>
+
+    <h3 class='fl m0' id='textinputs'>
+      textInputs
+    </h3>
+
+
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/86cc9d322b52dd9966fb5f1f48559e4213c69272/src/shorthands/textInputs.js#L71-L73'>
+      <span>src/shorthands/textInputs.js</span>
+      </a>
+
+  </div>
+
+
+  <p>Populates selectors that target all text inputs. You can pass optional states to append to the selectors.</p>
+
+
+  <div class='pre p1 fill-light mt0'>textInputs(states: ...<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&lt;State&gt;)</div>
+
+
+
+
+
+
+
+
+
+
+    <div class='py1 quiet mt1 prose-big'>Parameters</div>
+    <div class='prose'>
+
+        <div class='space-bottom0'>
+          <div>
+            <span class='code bold'>states</span> <code class='quiet'>(...<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a>&lt;State&gt;)</code>
+
+          </div>
+
+        </div>
+
+    </div>
+
+
+
+
+
+
+
+
+
+    <div class='py1 quiet mt1 prose-big'>Example</div>
+
+
+      <pre class='p1 overflow-auto round fill-light'><span class="hljs-comment">// Styles as object usage</span>
+const styles = {
+  [textInputs(<span class="hljs-symbol">'activ</span>e')]: {
+    <span class="hljs-symbol">'borde</span>r': <span class="hljs-symbol">'non</span>e'
+  }
+}
+
+<span class="hljs-comment">// styled-components usage</span>
+const div = styled.div`
+  &gt; ${textInputs(<span class="hljs-symbol">'activ</span>e')} {
+    border: none;
+  }
+`
+
+<span class="hljs-comment">// CSS in JS Output</span>
+
+ '<span class="hljs-symbol">'input</span>[<span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"color"</span>]:active,
+ <span class="hljs-symbol">'input</span>[<span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"date"</span>]:active,
+ <span class="hljs-symbol">'input</span>[<span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"datetime"</span>]:active,
+ <span class="hljs-symbol">'input</span>[<span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"datetime-local"</span>]:active,
+ <span class="hljs-symbol">'input</span>[<span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"email"</span>]:active,
+ <span class="hljs-symbol">'input</span>[<span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"month"</span>]:active,
+ <span class="hljs-symbol">'input</span>[<span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"number"</span>]:active,
+ <span class="hljs-symbol">'input</span>[<span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"password"</span>]:active,
+ <span class="hljs-symbol">'input</span>[<span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"search"</span>]:active,
+ <span class="hljs-symbol">'input</span>[<span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"tel"</span>]:active,
+ <span class="hljs-symbol">'input</span>[<span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"text"</span>]:active,
+ <span class="hljs-symbol">'input</span>[<span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"time"</span>]:active,
+ <span class="hljs-symbol">'input</span>[<span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"url"</span>]:active,
+ <span class="hljs-symbol">'input</span>[<span class="hljs-class"><span class="hljs-keyword">type</span></span>=<span class="hljs-string">"week"</span>]:active,
+ input:not([<span class="hljs-class"><span class="hljs-keyword">type</span>])</span>:active,
+ textarea:active': {
+  <span class="hljs-symbol">'borde</span>r': <span class="hljs-symbol">'non</span>e'
+}</pre>
+
+
+
+
+
+
+
+
 </section>
 
 
@@ -1301,7 +1513,7 @@ <h3 class='fl m0' id='em'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/90b1b6bbb8354d52069c26863b6197f865595c5b/src/helpers/em.js#L29-L29'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/86cc9d322b52dd9966fb5f1f48559e4213c69272/src/helpers/em.js#L29-L29'>
       <span>src/helpers/em.js</span>
       </a>
 
@@ -1394,7 +1606,7 @@ <h3 class='fl m0' id='modularscale'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/90b1b6bbb8354d52069c26863b6197f865595c5b/src/helpers/modularScale.js#L66-L82'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/86cc9d322b52dd9966fb5f1f48559e4213c69272/src/helpers/modularScale.js#L66-L82'>
       <span>src/helpers/modularScale.js</span>
       </a>
 
@@ -1497,7 +1709,7 @@ <h3 class='fl m0' id='rem'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/90b1b6bbb8354d52069c26863b6197f865595c5b/src/helpers/rem.js#L28-L28'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/86cc9d322b52dd9966fb5f1f48559e4213c69272/src/helpers/rem.js#L28-L28'>
       <span>src/helpers/rem.js</span>
       </a>
 
@@ -1590,7 +1802,7 @@ <h3 class='fl m0' id='stripunit'>
     </h3>
 
 
-      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/90b1b6bbb8354d52069c26863b6197f865595c5b/src/helpers/stripUnit.js#L24-L28'>
+      <a class='fr fill-darken0 round round pad1x quiet h5' href='https://github.com/styled-components/polished/blob/86cc9d322b52dd9966fb5f1f48559e4213c69272/src/helpers/stripUnit.js#L24-L28'>
       <span>src/helpers/stripUnit.js</span>
       </a>