Skip to content

Commit 48522a5

Browse files
CITguyCITguy
authored
Merge pull request #438 from rackerlabs/docs-issue-426
docs(Buttons): clarify need for span around text node children
2 parents b99e4fd + 7563f26 commit 48522a5

File tree

2 files changed

+222
-13
lines changed

2 files changed

+222
-13
lines changed

‎docs/components/buttons/index.html‎

Lines changed: 40 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
minver: 0.1.6
44
also:
55
components/buttons/test.html: Testing - Buttons
6+
components/loaders/#busy: Busy Loader
7+
components/files/#file-selector: File Selector
68
components/menus: Menus
79
components/popovers: Popovers
810
components/reveals: Reveals
@@ -61,23 +63,51 @@ <h2 id="basic-button">Basic Button</h2>
6163
</header>
6264

6365
<div>
64-
<button :class="classes" type="button">Button</button>
65-
<a href="#" :class="classes">Link</a>
66-
<input type="button" :class="classes" value="Input" @click.prevent />
67-
<input type="submit" :class="classes" value="Submit" @click.prevent />
68-
<input type="reset" :class="classes" value="Reset" @click.prevent />
66+
<p>
67+
<button :class="classes" type="button">
68+
Press Me
69+
</button>
70+
</p>
71+
<p>
72+
<button :class="classes" disabled>
73+
<span>Loading</span>
74+
<hx-busy></hx-busy>
75+
</button>
76+
</p>
77+
<p>
78+
<a href="#" :class="classes">
79+
<hx-icon type="download"></hx-icon>
80+
<span>Download</span>
81+
</a>
82+
</p>
6983
</div>
7084

7185
<footer>
7286
{% code 'html' %}{% raw %}
73-
<button class="{{classes}}">Button</button>
74-
<a href="#" class="{{classes}}">Link</a>
75-
<input type="button" class="{{classes}}" value="Input" />
76-
<input type="submit" class="{{classes}}" value="Submit" />
77-
<input type="reset" class="{{classes}}" value="Reset" />{% endraw %}
87+
<!-- text-only (no span necessary) -->
88+
<button class="{{classes}}">
89+
Press Me
90+
</button>
91+
92+
<!-- text + non-text (span around text required) -->
93+
<button class="{{classes}}" disabled>
94+
<span>Loading</span>
95+
<hx-busy></hx-busy>
96+
</button>
97+
98+
<!-- non-text + text (span around text required) -->
99+
<a href="#" class="{{classes}}">
100+
<hx-icon type="download"></hx-icon>
101+
<span>Download</span>
102+
</a>{% endraw %}
78103
{% endcode %}
79104
</footer>
80105
</div>
106+
<p class="hxSubBody hxSubdued">
107+
<hx-icon type="info-circle"></hx-icon>
108+
Text nodes within buttons <i>must</i> be wrapped in a <code>&lt;span&gt;</code>,
109+
if non-text siblings are present.
110+
</p>
81111
</section>
82112

83113
<section>

‎docs/components/buttons/test.html‎

Lines changed: 182 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@
2525

2626
<!-- Button Element -->
2727
<section>
28-
<h3>Button Element</h3>
28+
<h2>Button Element</h2>
2929
<p>Using: <code>&lt;button&gt;</code></p>
3030
<table class="hxTable hxTable--condensed">
3131
{% for _variant in variants %}
@@ -47,7 +47,7 @@ <h3>Button Element</h3>
4747

4848
<!-- Anchor Element -->
4949
<section>
50-
<h3>Anchor Element</h3>
50+
<h2>Anchor Element</h2>
5151
<p>Using: <code>&lt;a&gt;</code></p>
5252
<table class="hxTable hxTable--condensed">
5353
{% for _variant in variants %}
@@ -69,7 +69,7 @@ <h3>Anchor Element</h3>
6969

7070
<!-- Link Element -->
7171
<section>
72-
<h3>Link Element</h3>
72+
<h2>Link Element</h2>
7373
<p>Using: <code>&lt;a href="#"&gt;</code></p>
7474
<table class="hxTable hxTable--condensed">
7575
{% for _variant in variants %}
@@ -112,4 +112,183 @@ <h2>{{_type | title}} Input Element</h2>
112112
</table>
113113
</section>
114114
{% endfor %}
115+
116+
<!-- Various Element Children -->
117+
<section>
118+
<h2>Various Element Children</h2>
119+
<!-- konami icons -->
120+
<p>
121+
{% for _variant in variants %}
122+
<button class="hxBtn {{_variant.style}}">
123+
<hx-icon type="kbd-arrow-up"></hx-icon>
124+
<hx-icon type="kbd-arrow-up"></hx-icon>
125+
<hx-icon type="kbd-arrow-down"></hx-icon>
126+
<hx-icon type="kbd-arrow-down"></hx-icon>
127+
<hx-icon type="kbd-arrow-left"></hx-icon>
128+
<hx-icon type="kbd-arrow-right"></hx-icon>
129+
<hx-icon type="kbd-arrow-left"></hx-icon>
130+
<hx-icon type="kbd-arrow-right"></hx-icon>
131+
</button>
132+
{% endfor %}
133+
</p>
134+
<!-- hx-icon + hx-icon -->
135+
<p>
136+
{% for _variant in variants %}
137+
<button class="hxBtn {{_variant.style}}">
138+
<hx-icon type="flag"></hx-icon>
139+
<hx-icon type="angle-right"></hx-icon>
140+
</button>
141+
{% endfor %}
142+
</p>
143+
<!-- hx-busy + hx-icon -->
144+
<p>
145+
{% for _variant in variants %}
146+
<button class="hxBtn {{_variant.style}}">
147+
<hx-busy></hx-busy>
148+
<hx-icon type="filter"></hx-icon>
149+
</button>
150+
{% endfor %}
151+
</p>
152+
<!-- hx-icon + hx-busy -->
153+
<p>
154+
{% for _variant in variants %}
155+
<button class="hxBtn {{_variant.style}}">
156+
<hx-icon type="phone"></hx-icon>
157+
<hx-busy></hx-busy>
158+
</button>
159+
{% endfor %}
160+
</p>
161+
<!-- hx-icon + hx-busy + hx-icon -->
162+
<p>
163+
{% for _variant in variants %}
164+
<button class="hxBtn {{_variant.style}}">
165+
<hx-icon type="pencil"></hx-icon>
166+
<hx-busy></hx-busy>
167+
<hx-icon type="angle-right"></hx-icon>
168+
</button>
169+
{% endfor %}
170+
</p>
171+
<!-- hx-busy + hx-icon + hx-busy -->
172+
<p>
173+
{% for _variant in variants %}
174+
<button class="hxBtn {{_variant.style}}">
175+
<hx-busy></hx-busy>
176+
<hx-icon type="calendar"></hx-icon>
177+
<hx-busy></hx-busy>
178+
</button>
179+
{% endfor %}
180+
</p>
181+
</section>
182+
183+
<!-- Supported Markup (text + non-text children ) -->
184+
<section>
185+
<h2>Supported Markup</h2>
186+
<p>
187+
The following examples are supported and should have correct spacing.
188+
</p>
189+
<!-- hx-icon + text -->
190+
<p>
191+
{% for _variant in variants %}
192+
<button class="hxBtn {{_variant.style}}">
193+
<hx-icon type="angle-left"></hx-icon>
194+
<span>prev</span>
195+
</button>
196+
{% endfor %}
197+
</p>
198+
<!-- text + hx-icon -->
199+
<p>
200+
{% for _variant in variants %}
201+
<button class="hxBtn {{_variant.style}}">
202+
<span>next</span>
203+
<hx-icon type="angle-right"></hx-icon>
204+
</button>
205+
{% endfor %}
206+
</p>
207+
<!-- hx-icon + text + hx-icon -->
208+
<p>
209+
{% for _variant in variants %}
210+
<button class="hxBtn {{_variant.style}}">
211+
<hx-icon type="cog"></hx-icon>
212+
<span>actions</span>
213+
<hx-icon type="angle-down"></hx-icon>
214+
</button>
215+
{% endfor %}
216+
</p>
217+
<!-- text + hx-busy -->
218+
<p>
219+
{% for _variant in variants %}
220+
<button class="hxBtn {{_variant.style}}" disabled>
221+
<span>Loading</span>
222+
<hx-busy></hx-busy>
223+
</button>
224+
{% endfor %}
225+
</p>
226+
<!-- hx-icon + text + hx-busy -->
227+
<p>
228+
{% for _variant in variants %}
229+
<button class="hxBtn {{_variant.style}}">
230+
<hx-icon type="cog"></hx-icon>
231+
<span>wrapped text</span>
232+
<hx-busy></hx-busy>
233+
</button>
234+
{% endfor %}
235+
</p>
236+
</section>
237+
238+
<hr />
239+
240+
<!-- Unsupported Markup (text + non-text children ) -->
241+
<section>
242+
<h2>Unsupported Markup</h2>
243+
<p>
244+
The following examples are not supported for button children spacing.
245+
</p>
246+
<!-- hx-icon + text -->
247+
<p>
248+
{% for _variant in variants %}
249+
<button class="hxBtn {{_variant.style}}">
250+
<hx-icon type="angle-left"></hx-icon>
251+
prev
252+
</button>
253+
{% endfor %}
254+
</p>
255+
<!-- text + hx-icon -->
256+
<p>
257+
{% for _variant in variants %}
258+
<button class="hxBtn {{_variant.style}}">
259+
next
260+
<hx-icon type="angle-right"></hx-icon>
261+
</button>
262+
{% endfor %}
263+
</p>
264+
<!-- hx-icon + text + hx-icon -->
265+
<p>
266+
{% for _variant in variants %}
267+
<button class="hxBtn {{_variant.style}}">
268+
<hx-icon type="cog"></hx-icon>
269+
actions
270+
<hx-icon type="angle-down"></hx-icon>
271+
</button>
272+
{% endfor %}
273+
</p>
274+
<!-- text + hx-busy -->
275+
<p>
276+
{% for _variant in variants %}
277+
<button class="hxBtn {{_variant.style}}" disabled>
278+
Loading
279+
<hx-busy></hx-busy>
280+
</button>
281+
{% endfor %}
282+
</p>
283+
<!-- hx-icon + text + hx-busy -->
284+
<p>
285+
{% for _variant in variants %}
286+
<button class="hxBtn {{_variant.style}}">
287+
<hx-icon type="cog"></hx-icon>
288+
unwrapped text
289+
<hx-busy></hx-busy>
290+
</button>
291+
{% endfor %}
292+
</p>
293+
</section>
115294
{% endblock %}

0 commit comments

Comments
 (0)