Skip to content

Commit 4c5d819

Browse files
CITguyCITguy
authored
Merge pull request #85 from rackerlabs/refactor-text-inputs
Refactor text inputs
2 parents 1e29c20 + 9b1201a commit 4c5d819

File tree

2 files changed

+79
-146
lines changed

2 files changed

+79
-146
lines changed

‎source/components/text-input/index.html‎

Lines changed: 69 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -5,158 +5,95 @@
55
---
66
{% extends 'component.njk' %}
77
{% block content %}
8-
98
<section>
10-
<h2 class="hxSectionTitle" id="text">Text</h2>
11-
<div class="demo">
12-
<form>
13-
<div class="hxFormGroup">
14-
<label for="txt">Default</label>
15-
<input type="text" id="txt" placeholder="Text">
16-
</div>
17-
<div class="hxFormGroup">
18-
<label for="txtInvalid">Invalid</label>
19-
<input type="text" class="-hxInvalid" id="txtInvalid" placeholder="Text">
20-
</div>
21-
<div class="hxFormGroup">
22-
<label for="txtDisabled">Disabled</label>
23-
<input type="text" id="txtDisabled" placeholder="Text" disabled>
24-
</div>
25-
</form>
26-
</div>
27-
{% code 'html' %}
28-
<form>
29-
<div class="hxFormGroup">
30-
<label for="txt">Default</label>
31-
<input type="text" id="txt" placeholder="Text">
32-
</div>
33-
<div class="hxFormGroup">
34-
<label for="txtInvalid">Invalid</label>
35-
<input type="text" class="-hxInvalid" id="txtInvalid" placeholder="Text">
36-
</div>
37-
<div class="hxFormGroup">
38-
<label for="txtDisabled">Disabled</label>
39-
<input type="text" id="txtDisabled" placeholder="Text" disabled>
40-
</div>
41-
</form>
42-
{% endcode %}
9+
<p>
10+
Use the <code>.hxTextCtrl</code> CSS class to apply styles to text-like form controls.
11+
</p>
4312
</section>
4413

4514
<section>
46-
<h2 class="hxSectionTitle" id="email">Email</h2>
15+
<h2 class="hxSectionTitle" id="single-line-text">Single-Line Text</h2>
4716
<div class="demo">
48-
<form>
49-
<div class="hxFormGroup">
50-
<label for="txtEmail">Default</label>
51-
<input type="email" id="txtEmail" placeholder="Email">
52-
</div>
53-
<div class="hxFormGroup">
54-
<label for="txtInvalidEmail">Invalid</label>
55-
<input type="email" class="-hxInvalid" id="txtInvalidEmail" placeholder="Email">
56-
</div>
57-
<div class="hxFormGroup">
58-
<label for="txtDisabledEmail">Disabled</label>
59-
<input type="email" id="txtDisabledEmail" placeholder="Email" disabled>
60-
</div>
61-
</form>
62-
</div>
63-
{% code 'html' %}
64-
<form>
65-
<div class="hxFormGroup">
66-
<label for="txtEmail">Default</label>
67-
<input type="email" id="txtEmail" placeholder="Email">
68-
</div>
69-
<div class="hxFormGroup">
70-
<label for="txtInvalidEmail">Invalid</label>
71-
<input type="email" class="-hxInvalid" id="txtInvalidEmail" placeholder="Email">
72-
</div>
73-
<div class="hxFormGroup">
74-
<label for="txtDisabledEmail">Disabled</label>
75-
<input type="email" id="txtDisabledEmail" placeholder="Email" disabled>
76-
</div>
77-
</form>
78-
{% endcode %}
79-
</section>
17+
<input
18+
class="hxTextCtrl"
19+
placeholder="Default Text Input"
20+
type="text" />
21+
<br />
8022

81-
<section>
82-
<h2 class="hxSectionTitle" id="password">Password</h2>
83-
<div class="demo">
84-
<form>
85-
<div class="hxFormGroup">
86-
<label for="txtPassword">Password</label>
87-
<input type="password" id="txtPassword" placeholder="Password">
88-
</div>
89-
<div class="hxFormGroup">
90-
<label for="txtInvalidPassword">Invalid</label>
91-
<input type="password" class="-hxInvalid" id="txtInvalidPassword" placeholder="Password">
92-
</div>
93-
<div class="hxFormGroup">
94-
<label for="txtDisabledPassword">Disabled</label>
95-
<input type="password" id="txtDisabledPassword" placeholder="Password" disabled>
96-
</div>
97-
</form>
23+
<input
24+
class="hxTextCtrl"
25+
invalid
26+
placeholder="Invalid Text Input"
27+
type="text" />
28+
<br />
29+
30+
<input
31+
class="hxTextCtrl"
32+
disabled
33+
placeholder="Disabled Text Input"
34+
type="text" />
9835
</div>
9936
{% code 'html' %}
100-
<form>
101-
<div class="hxFormGroup">
102-
<label for="txtPassword">Password</label>
103-
<input type="password" id="txtPassword" placeholder="Password">
104-
</div>
105-
<div class="hxFormGroup">
106-
<label for="txtInvalidPassword">Invalid</label>
107-
<input type="password" class="-hxInvalid" id="txtInvalidPassword" placeholder="Password">
108-
</div>
109-
<div class="hxFormGroup">
110-
<label for="txtDisabledPassword">Disabled</label>
111-
<input type="password" id="txtDisabledPassword" placeholder="Password" disabled>
112-
</div>
113-
</form>
37+
<input
38+
class="hxTextCtrl"
39+
placeholder="Default Text Input"
40+
type="text" />
41+
42+
<input
43+
class="hxTextCtrl"
44+
invalid
45+
placeholder="Invalid Text Input"
46+
type="text" />
47+
48+
<input
49+
class="hxTextCtrl"
50+
disabled
51+
placeholder="Disabled Text Input"
52+
type="text" />
11453
{% endcode %}
11554
</section>
11655

11756
<section>
118-
<h2 class="hxSectionTitle" id="text-area">Text Area</h2>
57+
<h2 class="hxSectionTitle" id="multi-line-text">Multi-line Text</h2>
11958
<div class="demo">
120-
<form>
121-
<div class="hxFormGroup">
122-
<label for="txtArea">Default</label>
123-
<textarea rows="3" id="txtArea" placeholder="Enter your comment here"></textarea>
124-
</div>
125-
<div class="hxFormGroup">
126-
<label for="txtAreaInvalid">Invalid</label>
127-
<textarea rows="3" class="-hxInvalid" id="txtAreaInvalid" placeholder="Enter your comment here"></textarea>
128-
</div>
129-
<div class="hxFormGroup">
130-
<label for="txtAreaDisabled">Disabled</label>
131-
<textarea rows="3" id="txtAreaDisabled" placeholder="Enter your comment here" disabled></textarea>
132-
</div>
133-
</form>
59+
<textarea
60+
class="hxTextCtrl"
61+
placeholder="Default Text Area"></textarea>
62+
<br />
63+
64+
<textarea
65+
class="hxTextCtrl"
66+
invalid
67+
placeholder="Invalid Text Area"></textarea>
68+
<br />
69+
70+
<textarea
71+
class="hxTextCtrl"
72+
disabled
73+
placeholder="Disabled Text Area"></textarea>
13474
</div>
13575
{% code 'html' %}
136-
<form>
137-
<div class="hxFormGroup">
138-
<label for="txtArea">Default</label>
139-
<textarea rows="3" id="txtArea" placeholder="Enter your comment here"></textarea>
140-
</div>
141-
<div class="hxFormGroup">
142-
<label for="txtAreaInvalid">Invalid</label>
143-
<textarea rows="3" class="-hxInvalid" id="txtAreaInvalid" placeholder="Enter your comment here"></textarea>
144-
</div>
145-
<div class="hxFormGroup">
146-
<label for="txtAreaDisabled">Disabled</label>
147-
<textarea rows="3" id="txtAreaDisabled" placeholder="Enter your comment here" disabled></textarea>
148-
</div>
149-
</form>
76+
<textarea
77+
class="hxTextCtrl"
78+
placeholder="Default Text Area"></textarea>
79+
80+
<textarea
81+
class="hxTextCtrl"
82+
invalid
83+
placeholder="Invalid Text Area"></textarea>
84+
85+
<textarea
86+
class="hxTextCtrl"
87+
disabled
88+
placeholder="Disabled Text Area"></textarea>
15089
{% endcode %}
15190
</section>
15291

15392
<section>
154-
<h2 class="hxSectionTitle" id="css-classes">CSS Classes</h2>
155-
93+
<h2 class="hxSectionTitle" id="attributes">Attributes</h2>
15694
<dl>
157-
<dt><code>.-hxInvalid</code></dt>
158-
<dd>Add to form input to apply invalid styling</dd>
95+
<dt>invalid (Boolean)</dt>
96+
<dd>When present, indicates that a text control is not valid for submission.</dd>
15997
</dl>
16098
</section>
161-
16299
{% endblock %}

‎source/components/text-input/text-input.less‎

Lines changed: 10 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
html input,
2-
textarea {
1+
.hxTextCtrl {
32
background-color: @gray-0;
43
border: 1px solid @gray-500;
54
border-radius: 2px;
@@ -9,8 +8,13 @@ textarea {
98
padding: 8px;
109
width: 100%;
1110

11+
textarea& {
12+
min-height: 5.75rem; // ~92px
13+
resize: vertical;
14+
}
15+
1216
/*
13-
https://css-tricks.com/snippets/css/style-placeholder-text/
17+
https://css-tricks.com/snippets/css/style-placeholder-text/
1418
*/
1519
&::-webkit-input-placeholder { // Chrome
1620
color: @gray-600;
@@ -25,7 +29,7 @@ textarea {
2529
color: @gray-600;
2630
}
2731

28-
&::placeholder {
32+
&::placeholder { // w3c spec
2933
color: @gray-600;
3034
}
3135

@@ -38,7 +42,7 @@ textarea {
3842
}
3943
}
4044

41-
&.-hxInvalid {
45+
&[invalid] {
4246
border: 2px solid @red-900;
4347
}
4448

@@ -47,14 +51,6 @@ textarea {
4751
border-color: @gray-300;
4852
color: @gray-400;
4953
cursor: not-allowed;
54+
resize: none;
5055
}
5156
}
52-
53-
textarea[disabled] {
54-
resize: none;
55-
}
56-
57-
// TODO: move to appropriate file
58-
.hxFormGroup {
59-
margin-bottom: 1rem;
60-
}

0 commit comments

Comments
 (0)