Skip to content

Commit 6ed926c

Browse files
author
Ryan A. Johnson
committed
refactor(TextControls): phase 2.5 CSS refactoring
1 parent 754780d commit 6ed926c

File tree

5 files changed

+90
-282
lines changed

5 files changed

+90
-282
lines changed

‎docs/components/dropdown-select/test.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -62,8 +62,8 @@
6262
<table>
6363
<thead>
6464
<tr>
65-
<th>Valid</th>
66-
<th>Invalid{{ '*' if not isRequired }}</th>
65+
<th>:valid</th>
66+
<th>:invalid{{ '*' if not isRequired }}</th>
6767
</tr>
6868
</thead>
6969
<tbody>

‎docs/components/text-input/test.html‎

Lines changed: 36 additions & 121 deletions
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,11 @@
33
---
44
{% set contentClasses = 'text-input-spec' %}
55
{% extends 'test.njk' %}
6-
{% macro textInput(id='', wasChanged=false, wasTouched=false, className='', isRequired=false, isDisabled=false, isFocused=false, isValid=true) %}
7-
{% set isPristine = (className === '') and not (wasChanged or wasTouched) %}
6+
{% macro textInput(id='', isDirty=false, className='', isRequired=false, isDisabled=false, isFocused=false, isValid=true) %}
7+
{% set isPristine = (className === '') and not isDirty %}
88

99
{% set idAttr -%}textInput-
10-
{{- 'p' if not (wasChanged or wasTouched) -}}
11-
{{- 'c' if wasChanged -}}
12-
{{- 't' if wasTouched -}}
10+
{{- 'd' if isDirty else 'p' -}}
1311
{{- 'R' if isRequired else 'O' -}}
1412
{{- 'D' if isDisabled else 'E' -}}
1513
{{- 'V' if isValid else 'I' -}}
@@ -20,8 +18,7 @@
2018

2119
<hx-text-control
2220
{% if className !== '' %}class="{{className}}" {% endif %}
23-
{% if wasChanged %}hx-changed {% endif %}
24-
{% if wasTouched %}hx-touched {% endif %}
21+
{% if isDirty %}hx-dirty {% endif %}
2522
>
2623
<input
2724
type="text"
@@ -40,8 +37,7 @@
4037
Pristine,
4138
{% else %}
4239
{% if className !== '' %}.{{ className }},{% endif %}
43-
{% if wasChanged %}Changed,{% endif %}
44-
{% if wasTouched %}Touched,{% endif %}
40+
{% if isDirty %}Dirty,{% endif %}
4541
{% endif %}
4642
{{ 'Required' if isRequired else 'Optional' }},
4743
{{ 'Disabled' if isDisabled else 'Enabled' }},
@@ -74,8 +70,8 @@ <h3>Optional</h3>
7470
<table>
7571
<thead>
7672
<tr>
77-
<th>Valid</th>
78-
<th>Invalid</th>
73+
<th>:valid</th>
74+
<th>:invalid</th>
7975
</tr>
8076
</thead>
8177
<tbody>
@@ -111,8 +107,8 @@ <h3>Required</h3>
111107
<table>
112108
<thead>
113109
<tr>
114-
<th>Valid</th>
115-
<th>Invalid</th>
110+
<th>:valid</th>
111+
<th>:invalid</th>
116112
</tr>
117113
</thead>
118114
<tbody>
@@ -143,8 +139,8 @@ <h3>Required</h3>
143139

144140
<section>
145141
<header>
146-
<h2 id="test-changed">Changed</h2>
147-
<code>&lt;hx-text-control hx-changed&gt;</code>
142+
<h2 id="test-dirty">Dirty</h2>
143+
<code>&lt;hx-text-control hx-dirty&gt;</code>
148144
</header>
149145

150146
<section>
@@ -155,29 +151,29 @@ <h3>Optional</h3>
155151
<table>
156152
<thead>
157153
<tr>
158-
<th>Valid</th>
159-
<th>Invalid</th>
154+
<th>:valid</th>
155+
<th>:invalid</th>
160156
</tr>
161157
</thead>
162158
<tbody>
163159
<tr>
164160
<td>
165-
{{textInput('changed', wasChanged=true )}}
166-
{{textInput('changed', wasChanged=true, isFocused=true)}}
161+
{{textInput('dirty', isDirty=true )}}
162+
{{textInput('dirty', isDirty=true, isFocused=true)}}
167163
</td>
168164
<td>
169-
{{textInput('changed', wasChanged=true, isValid=false)}}
170-
{{textInput('changed', wasChanged=true, isValid=false, isFocused=true)}}
165+
{{textInput('dirty', isDirty=true, isValid=false)}}
166+
{{textInput('dirty', isDirty=true, isValid=false, isFocused=true)}}
171167
</td>
172168
</tr>
173169
<tr>
174170
<td>
175-
{{textInput('changed', wasChanged=true, isDisabled=true)}}
176-
{{textInput('changed', wasChanged=true, isDisabled=true, isFocused=true)}}
171+
{{textInput('dirty', isDirty=true, isDisabled=true)}}
172+
{{textInput('dirty', isDirty=true, isDisabled=true, isFocused=true)}}
177173
</td>
178174
<td>
179-
{{textInput('changed', wasChanged=true, isValid=false, isDisabled=true)}}
180-
{{textInput('changed', wasChanged=true, isValid=false, isDisabled=true, isFocused=true)}}
175+
{{textInput('dirty', isDirty=true, isValid=false, isDisabled=true)}}
176+
{{textInput('dirty', isDirty=true, isValid=false, isDisabled=true, isFocused=true)}}
181177
</td>
182178
</tr>
183179
</tbody>
@@ -192,29 +188,29 @@ <h3>Required</h3>
192188
<table>
193189
<thead>
194190
<tr>
195-
<th>Valid</th>
196-
<th>Invalid</th>
191+
<th>:valid</th>
192+
<th>:invalid</th>
197193
</tr>
198194
</thead>
199195
<tbody>
200196
<tr>
201197
<td>
202-
{{textInput('changed', wasChanged=true, isRequired=true)}}
203-
{{textInput('changed', wasChanged=true, isRequired=true, isFocused=true)}}
198+
{{textInput('dirty', isDirty=true, isRequired=true)}}
199+
{{textInput('dirty', isDirty=true, isRequired=true, isFocused=true)}}
204200
</td>
205201
<td>
206-
{{textInput('changed', wasChanged=true, isRequired=true, isValid=false)}}
207-
{{textInput('changed', wasChanged=true, isRequired=true, isValid=false, isFocused=true)}}
202+
{{textInput('dirty', isDirty=true, isRequired=true, isValid=false)}}
203+
{{textInput('dirty', isDirty=true, isRequired=true, isValid=false, isFocused=true)}}
208204
</td>
209205
</tr>
210206
<tr>
211207
<td>
212-
{{textInput('changed', wasChanged=true, isRequired=true, isDisabled=true)}}
213-
{{textInput('changed', wasChanged=true, isRequired=true, isDisabled=true, isFocused=true)}}
208+
{{textInput('dirty', isDirty=true, isRequired=true, isDisabled=true)}}
209+
{{textInput('dirty', isDirty=true, isRequired=true, isDisabled=true, isFocused=true)}}
214210
</td>
215211
<td>
216-
{{textInput('changed', wasChanged=true, isRequired=true, isValid=false, isDisabled=true)}}
217-
{{textInput('changed', wasChanged=true, isRequired=true, isValid=false, isDisabled=true, isFocused=true)}}
212+
{{textInput('dirty', isDirty=true, isRequired=true, isValid=false, isDisabled=true)}}
213+
{{textInput('dirty', isDirty=true, isRequired=true, isValid=false, isDisabled=true, isFocused=true)}}
218214
</td>
219215
</tr>
220216
</tbody>
@@ -224,88 +220,7 @@ <h3>Required</h3>
224220

225221
<section>
226222
<header>
227-
<h2 id="test-touched">Touched</h2>
228-
<code>&lt;hx-text-control hx-touched&gt;</code>
229-
</header>
230-
231-
<section>
232-
<header>
233-
<h3>Optional</h3>
234-
<code>&lt;input type="text"&gt;</code>
235-
</header>
236-
<table>
237-
<thead>
238-
<tr>
239-
<th>Valid</th>
240-
<th>Invalid</th>
241-
</tr>
242-
</thead>
243-
<tbody>
244-
<tr>
245-
<td>
246-
{{textInput('touched', wasTouched=true )}}
247-
{{textInput('touched', wasTouched=true, isFocused=true)}}
248-
</td>
249-
<td>
250-
{{textInput('touched', wasTouched=true, isValid=false)}}
251-
{{textInput('touched', wasTouched=true, isValid=false, isFocused=true)}}
252-
</td>
253-
</tr>
254-
<tr>
255-
<td>
256-
{{textInput('touched', wasTouched=true, isDisabled=true)}}
257-
{{textInput('touched', wasTouched=true, isDisabled=true, isFocused=true)}}
258-
</td>
259-
<td>
260-
{{textInput('touched', wasTouched=true, isValid=false, isDisabled=true)}}
261-
{{textInput('touched', wasTouched=true, isValid=false, isDisabled=true, isFocused=true)}}
262-
</td>
263-
</tr>
264-
</tbody>
265-
</table>
266-
</section>
267-
268-
<section>
269-
<header>
270-
<h3>Required</h3>
271-
<code>&lt;input type="text" required&gt;</code>
272-
</header>
273-
<table>
274-
<thead>
275-
<tr>
276-
<th>Valid</th>
277-
<th>Invalid</th>
278-
</tr>
279-
</thead>
280-
<tbody>
281-
<tr>
282-
<td>
283-
{{textInput('touched', wasTouched=true, isRequired=true)}}
284-
{{textInput('touched', wasTouched=true, isRequired=true, isFocused=true)}}
285-
</td>
286-
<td>
287-
{{textInput('touched', wasTouched=true, isRequired=true, isValid=false)}}
288-
{{textInput('touched', wasTouched=true, isRequired=true, isValid=false, isFocused=true)}}
289-
</td>
290-
</tr>
291-
<tr>
292-
<td>
293-
{{textInput('touched', wasTouched=true, isRequired=true, isDisabled=true)}}
294-
{{textInput('touched', wasTouched=true, isRequired=true, isDisabled=true, isFocused=true)}}
295-
</td>
296-
<td>
297-
{{textInput('touched', wasTouched=true, isRequired=true, isValid=false, isDisabled=true)}}
298-
{{textInput('touched', wasTouched=true, isRequired=true, isValid=false, isDisabled=true, isFocused=true)}}
299-
</td>
300-
</tr>
301-
</tbody>
302-
</table>
303-
</section>
304-
</section>
305-
306-
<section>
307-
<header>
308-
<h2 id="test-styled-invalid">Styled Invalid</h2>
223+
<h2 id="test-visually-invalid">Visually Invalid</h2>
309224
<code>&lt;hx-text-control class="hxInvalid"&gt;</code>
310225
</header>
311226

@@ -317,8 +232,8 @@ <h3>Optional</h3>
317232
<table>
318233
<thead>
319234
<tr>
320-
<th>Valid</th>
321-
<th>Invalid</th>
235+
<th>:valid</th>
236+
<th>:invalid</th>
322237
</tr>
323238
</thead>
324239
<tbody>
@@ -354,8 +269,8 @@ <h3>Required</h3>
354269
<table>
355270
<thead>
356271
<tr>
357-
<th>Valid</th>
358-
<th>Invalid</th>
272+
<th>:valid</th>
273+
<th>:invalid</th>
359274
</tr>
360275
</thead>
361276
<tbody>

0 commit comments

Comments
 (0)