Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Adds Text Inputs and Buttons Selector Shorthand #57

Merged
merged 5 commits into from Dec 16, 2016
Merged

Adds Text Inputs and Buttons Selector Shorthand #57

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ebc1c1c
chore(textInput): textInput shorthand
bhough Dec 16, 2016
7bea560
chore(shorthand): Simplify Buttons and Inputs to use shared helper
bhough Dec 16, 2016
9b42eff
chore(docs): Changes to buttons and textInputs docs
bhough Dec 16, 2016
86cc9d3
chore(docs): Update TOC with missing modules
bhough Dec 16, 2016
46aeb71
chore(docs): Rebuild
bhough Dec 16, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 2 additions & 0 deletions .documentation.json
View file
Open in desktop
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
Open in desktop
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