Skip to content

Commit

Permalink
Merge pull request #57 from styled-components/inputs
Browse files Browse the repository at this point in the history 
Adds Text Inputs and Buttons Selector Shorthand
  • Loading branch information
@mxstbr
mxstbr authored Dec 16, 2016
2 parents 0ac5814 + 46aeb71 commit c800b90
Show file tree
Hide file tree
Showing 13 changed files with 2,583 additions and 38 deletions.
2 changes: 2 additions & 0 deletions .documentation.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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."
Expand Down
242 changes: 227 additions & 15 deletions docs/docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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>


Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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>

Expand Down Expand Up @@ -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>

Expand Down
Loading

0 comments on commit c800b90

Please sign in to comment.