Skip to content

Commit 31cb488

Browse files
CITguyCITguy
authored
Merge pull request #256 from rackerlabs/fix-bugs
Fix Bugs / Update Buttons / Update Links
2 parents 5453285 + 832f6e7 commit 31cb488

File tree

11 files changed

+359
-287
lines changed

11 files changed

+359
-287
lines changed

‎docs/components/buttons/button-demo.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
if (document.getElementById('vue-buttonDemo')) {
22
const SIZES = [
33
{ label: 'Small', val: 'hxSm' },
4-
{ label: 'Medium', val: '' },
4+
{ label: 'Medium', val: '', default: true },
55
{ label: 'Large', val: 'hxLg' },
66
];
77

88
const VARIANTS = [
9-
{ label: 'Default', val: '' },
109
{ label: 'Primary', val: 'hxPrimary' },
11-
{ label: 'Link', val: 'hxLink' },
10+
{ label: 'Secondary', val: '', default: true },
11+
{ label: 'Tertiary', val: 'hxTertiary' },
1212
];
1313

1414
new Vue({
1515
el: '#vue-buttonDemo',
1616
data: {
1717
size: SIZES[1],
1818
sizes: SIZES,
19-
variant: VARIANTS[0],
19+
variant: VARIANTS[1],
2020
variants: VARIANTS,
2121
},
2222
computed: {

‎docs/components/buttons/index.html‎

Lines changed: 35 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,17 @@
22
title: Buttons
33
minver: 0.1.6
44
also:
5+
components/buttons/test.html: Button Tests
56
components/menus: Menus
67
components/popovers: Popovers
78
components/reveals: Reveals
89
---
910
{% extends 'component.njk' %}
1011
{% block content %}
1112
<section>
12-
<h2 id="demos">Demos</h2>
1313
<div id="vue-buttonDemo" class="hxRow" v-cloak>
1414
<div class="hxCol hxSpan-12-xs hxSpan-3-lg hxOrder-2-lg">
15-
<h3>Options</h3>
15+
<h2>Options</h2>
1616
<div class="hxRow">
1717
<div class="hxCol hxSpan-12-lg hxSpan-6-xs">
1818
<b>Variant:</b><br />
@@ -23,7 +23,10 @@ <h3>Options</h3>
2323
name="variant"
2424
v-model="variant"
2525
:value="_variant" />
26-
{% raw %}{{ _variant.label }}{% endraw %}
26+
{% raw %}
27+
{{ _variant.label }}
28+
<em class="hxSubBody" v-if="_variant.default">(default)</em>
29+
{% endraw %}
2730
</label>
2831
<br />
2932
</template>
@@ -38,7 +41,10 @@ <h3>Options</h3>
3841
name="size"
3942
v-model="size"
4043
:value="_size" />
41-
{% raw %}{{ _size.label }}{% endraw %}
44+
{% raw %}
45+
{{ _size.label }}
46+
<em class="hxSubBody" v-if="_size.default">(default)</em>
47+
{% endraw %}
4248
</label>
4349
<br />
4450
</template>
@@ -47,19 +53,37 @@ <h3>Options</h3>
4753
</div>
4854
<div class="hxCol hxSpan-12-xs hxSpan-9-lg hxOrder-1-lg">
4955
<section>
50-
<h3>Single Button</h3>
56+
<h2 id="single-button">Single Button</h2>
57+
<p>
58+
The <code>.hxBtn</code> classes are designed to be used with the
59+
<code>&lt;button&gt;</code> element. However, you can use them on
60+
<code>&lt;a&gt;</code> and <code>&lt;input&gt;</code> elements.
61+
</p>
62+
<hx-alert static type="info" status="info">
63+
Only "button", "submit", and "reset" inputs are supported.
64+
</hx-alert>
5165
<div class="demo button-demo">
52-
<button :class="loneClasses">
53-
{% raw %}{{size.label}} {{variant.label}}{% endraw %}
54-
</button>
66+
{% raw %}
67+
<button :class="loneClasses" type="button">Button</button>
68+
<a :class="loneClasses">Anchor</a>
69+
<a href="#" :class="loneClasses">Link</a>
70+
<input type="button" :class="loneClasses" value="Input" @click.prevent />
71+
<input type="submit" :class="loneClasses" value="Submit" @click.prevent />
72+
<input type="reset" :class="loneClasses" value="Reset" @click.prevent />
73+
{% endraw %}
5574
</div>
56-
{% code 'html' %}
57-
{% raw %}<button class="{{loneClasses}}">...</button>{% endraw %}
75+
{% code 'html' %}{% raw %}
76+
<button class="{{loneClasses}}">Button</button>
77+
<a class="{{loneClasses}}">Anchor</a>
78+
<a href="#" class="{{loneClasses}}">Link</a>
79+
<input type="button" class="{{loneClasses}}" value="Input" />
80+
<input type="submit" class="{{loneClasses}}" value="Submit" />
81+
<input type="reset" class="{{loneClasses}}" value="Reset" />{% endraw %}
5882
{% endcode %}
5983
</section>
6084

6185
<section>
62-
<h3>Button Group</h3>
86+
<h2 id="button-group">Button Group</h2>
6387
<div class="demo button-demo">
6488
<div :class="groupClasses">
6589
<button class="hxBtn">First</button>
@@ -82,33 +106,4 @@ <h3>Button Group</h3>
82106
</div>
83107
</div>
84108
</section>
85-
86-
<section data-visreg="button-states">
87-
<h2 id="button-states">Button States</h2>
88-
<table class="hxTable">
89-
<tbody>
90-
<tr>
91-
<td>Default</td>
92-
<td><button class="hxBtn">Normal</button></td>
93-
<td><button class="hxBtn pseudo-hover">Hover</button></td>
94-
<td><button class="hxBtn pseudo-active">Pressed</button></td>
95-
<td><button class="hxBtn" disabled>Disabled</button></td>
96-
</tr>
97-
<tr>
98-
<td>Primary</td>
99-
<td><button class="hxBtn hxPrimary">Normal</button></td>
100-
<td><button class="hxBtn hxPrimary pseudo-hover">Hover</button></td>
101-
<td><button class="hxBtn hxPrimary pseudo-active">Pressed</button></td>
102-
<td><button class="hxBtn hxPrimary" disabled>Disabled</button></td>
103-
</tr>
104-
<tr>
105-
<td>Link</td>
106-
<td><button class="hxBtn hxLink">Normal</button></td>
107-
<td><button class="hxBtn hxLink pseudo-hover">Hover</button></td>
108-
<td><button class="hxBtn hxLink pseudo-active">Pressed</button></td>
109-
<td><button class="hxBtn hxLink" disabled>Disabled</button></td>
110-
</tr>
111-
</tbody>
112-
</table>
113-
</section>
114109
{% endblock %}

‎docs/components/buttons/test.html‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
---
2+
title: Button Tests
3+
---
4+
{% extends 'test.njk' %}
5+
{% block content %}
6+
<section>
7+
<nav class="hxBreadcrumb">
8+
<a href="components/buttons">Buttons</a>
9+
<hx-icon class="delimiter" type="angle-right"></hx-icon>
10+
<a href="#">{{page.title}}</a>
11+
</nav>
12+
</section>
13+
14+
{% set variants = [
15+
{ label: 'Primary', style: 'hxPrimary' },
16+
{ label: 'Secondary', style: '' },
17+
{ label: 'Tertiary', style: 'hxTertiary' }
18+
] %}
19+
{% set sizes = [
20+
{ label: 'SM', style: 'hxSm' },
21+
{ label: 'MD', style: '' },
22+
{ label: 'LG', style: 'hxLg' }
23+
] %}
24+
{% set inputTypes = [ 'button', 'submit', 'reset' ] %}
25+
26+
<!-- Button Element -->
27+
<section>
28+
<h3>Button Element</h3>
29+
<p>Using: <code>&lt;button&gt;</code></p>
30+
<table class="hxTable hxTable--condensed">
31+
{% for _variant in variants %}
32+
<tbody>
33+
{% for _size in sizes %}
34+
<tr>
35+
<td>{{_variant.label}} Button ({{_size.label}})</td>
36+
<td><button class="hxBtn {{_variant.style}} {{_size.style}}">Normal</button></td>
37+
<td><button class="hxBtn {{_variant.style}} {{_size.style}} pseudo-focus">Focused</button></td>
38+
<td><button class="hxBtn {{_variant.style}} {{_size.style}} pseudo-hover">Hover</button></td>
39+
<td><button class="hxBtn {{_variant.style}} {{_size.style}} pseudo-active">Pressed</button></td>
40+
<td><button class="hxBtn {{_variant.style}} {{_size.style}}" disabled>Disabled</button></td>
41+
</tr>
42+
{% endfor %}
43+
</tbody>
44+
{% endfor %}
45+
</table>
46+
</section>
47+
48+
<!-- Anchor Element -->
49+
<section>
50+
<h3>Anchor Element</h3>
51+
<p>Using: <code>&lt;a&gt;</code></p>
52+
<table class="hxTable hxTable--condensed">
53+
{% for _variant in variants %}
54+
<tbody>
55+
{% for _size in sizes %}
56+
<tr>
57+
<td>{{_variant.label}} Anchor ({{_size.label}})</td>
58+
<td><a class="hxBtn {{_variant.style}} {{_size.style}}">Normal</a></td>
59+
<td><a class="hxBtn {{_variant.style}} {{_size.style}} pseudo-focus">Focused</a></td>
60+
<td><a class="hxBtn {{_variant.style}} {{_size.style}} pseudo-hover">Hover</a></td>
61+
<td><a class="hxBtn {{_variant.style}} {{_size.style}} pseudo-active">Pressed</a></td>
62+
<td><a class="hxBtn {{_variant.style}} {{_size.style}}" disabled>Disabled</a></td>
63+
</tr>
64+
{% endfor %}
65+
</tbody>
66+
{% endfor %}
67+
</table>
68+
</section>
69+
70+
<!-- Link Element -->
71+
<section>
72+
<h3>Link Element</h3>
73+
<p>Using: <code>&lt;a href="#"&gt;</code></p>
74+
<table class="hxTable hxTable--condensed">
75+
{% for _variant in variants %}
76+
<tbody>
77+
{% for _size in sizes %}
78+
<tr>
79+
<td>{{_variant.label}} Anchor ({{_size.label}})</td>
80+
<td><a href="#" class="hxBtn {{_variant.style}} {{_size.style}}">Normal</a></td>
81+
<td><a href="#" class="hxBtn {{_variant.style}} {{_size.style}} pseudo-focus">Focused</a></td>
82+
<td><a href="#" class="hxBtn {{_variant.style}} {{_size.style}} pseudo-hover">Hover</a></td>
83+
<td><a href="#" class="hxBtn {{_variant.style}} {{_size.style}} pseudo-active">Pressed</a></td>
84+
<td><a href="#" class="hxBtn {{_variant.style}} {{_size.style}}" disabled>Disabled</a></td>
85+
</tr>
86+
{% endfor %}
87+
</tbody>
88+
{% endfor %}
89+
</table>
90+
</section>
91+
92+
<!-- Input Element -->
93+
{% for _type in inputTypes %}
94+
<section>
95+
<h2>{{_type | title}} Input Element</h2>
96+
<p>Using: <code>&lt;input type="{{_type}}" /&gt;</code></p>
97+
<table class="hxTable hxTable--condensed">
98+
{% for _variant in variants %}
99+
<tbody>
100+
{% for _size in sizes %}
101+
<tr>
102+
<td>{{_variant.label}} Anchor ({{_size.label}})</td>
103+
<td><input type="{{_type}}" class="hxBtn {{_variant.style}} {{_size.style}}" value="Normal"/></td>
104+
<td><input type="{{_type}}" class="hxBtn {{_variant.style}} {{_size.style}} pseudo-focus" value="Focused"/></td>
105+
<td><input type="{{_type}}" class="hxBtn {{_variant.style}} {{_size.style}} pseudo-hover" value="Hover"/></td>
106+
<td><input type="{{_type}}" class="hxBtn {{_variant.style}} {{_size.style}} pseudo-active" value="Pressed"/></td>
107+
<td><input type="{{_type}}" class="hxBtn {{_variant.style}} {{_size.style}}" disabled value="Disabled"/></td>
108+
</tr>
109+
{% endfor %}
110+
</tbody>
111+
{% endfor %}
112+
</table>
113+
</section>
114+
{% endfor %}
115+
{% endblock %}

‎docs/components/modals/index.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ <h3>Demo Modal Header</h3>
2828
</p>
2929
</hx-modalbody>
3030
<hx-modalfoot>
31-
<button class="hxBtn hxBtn--primary">Confirm</button>
31+
<button class="hxBtn hxPrimary">Confirm</button>
3232
<button class="hxBtn">Cancel</button>
3333
</hx-modalfoot>
3434
</hx-modal>
@@ -49,7 +49,7 @@ <h3>Demo Modal Header</h3>
4949
</p>
5050
</hx-modalbody>
5151
<hx-modalfoot>
52-
<button class="hxBtn hxBtn--primary">Confirm</button>
52+
<button class="hxBtn hxPrimary">Confirm</button>
5353
<button class="hxBtn">Cancel</button>
5454
</hx-modalfoot>
5555
</hx-modal>

‎docs/components/typography/index.html‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -143,22 +143,26 @@ <h2 id="links">Links</h2>
143143
<p>
144144
Links should be used to refer a user to a resource or location.
145145
</p>
146-
<div class="hxAlert">
147-
<div class="hxAlert__icon">
148-
<hx-icon type="info-circle"></hx-icon>
149-
</div>
150-
<div class="hxAlert__text">
151-
<span class="hxAlert__status">Note</span>
152-
Buttons are better suited to initiate in-page actions.
153-
</div>
154-
</div>
146+
<hx-alert static type="info" status="note">
147+
Buttons are better suited to initiate in-page actions.
148+
</hx-alert>
149+
<hx-alert static type="warning" status="warning">
150+
Adding the <code>disabled</code> attribute to a link <b>will not</b>
151+
prevent user interaction. Consider using a <code>&lt;button&gt;</code>
152+
instead.
153+
</hx-alert>
155154

156155
<div class="demo" data-visreg="typography-link">
157156
<ul>
158157
<li><a href="#">Normal Link</a></li>
159158
<li><a href="#" class="pseudo-active">Pressed Link</a></li>
159+
<li><a href="#" disabled>"Disabled" Link</a></li>
160160
</ul>
161161
</div>
162+
{% code 'html' %}
163+
<a href="#">Normal Link</a>
164+
<a href="#" disabled>"Disabled" Link</a>
165+
{% endcode %}
162166
</section>
163167

164168
<section><!-- Inline Code -->

‎docs/styles/demo/button-docs.less‎

Lines changed: 25 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,41 @@
11
@import (reference) 'components/buttons';
22

3-
.button-demo {
4-
height: 6rem;
5-
}
6-
73
.hxBtn {
8-
&.pseudo-hover {
9-
&:extend(.hxBtn:hover);
4+
&[class*="pseudo"] {
105
pointer-events: none;
116
}
127

13-
&.pseudo-active {
14-
&:extend(.hxBtn:active);
15-
pointer-events: none;
16-
}
17-
18-
&.pseudo-focus {
19-
&:extend(.hxBtn:focus);
20-
pointer-events: none;
21-
}
8+
&.pseudo-hover:extend(.hxBtn:hover) {}
9+
&.pseudo-active:extend(.hxBtn:active) {}
10+
&.pseudo-focus:extend(.hxBtn:focus) {}
2211

2312
&.hxPrimary {
24-
&.pseudo-hover {
25-
&:extend(.hxBtn.hxPrimary:hover);
26-
pointer-events: none;
27-
}
28-
29-
&.pseudo-active {
30-
&:extend(.hxBtn.hxPrimary:active);
31-
pointer-events: none;
32-
}
13+
&.pseudo-hover:extend(.hxBtn.hxPrimary:hover) {}
14+
&.pseudo-active:extend(.hxBtn.hxPrimary:active) {}
15+
&.pseudo-focus:extend(.hxBtn.hxPrimary:focus) {}
16+
}
3317

34-
&.pseudo-focus {
35-
&:extend(.hxBtn.hxPrimary:focus);
36-
pointer-events: none;
37-
}
18+
&.hxTertiary {
19+
&.pseudo-hover:extend(.hxBtn.hxTertiary:hover) {}
20+
&.pseudo-active:extend(.hxBtn.hxTertiary:active) {}
21+
&.pseudo-focus:extend(.hxBtn.hxTertiary:focus) {}
3822
}
3923

40-
&.hxLink {
41-
&.pseudo-hover {
42-
&:extend(.hxBtn.hxLink:hover);
43-
pointer-events: none;
24+
a[href]& {
25+
&.pseudo-hover:extend(a[href].hxBtn:hover) {}
26+
&.pseudo-active:extend(a[href].hxBtn:active) {}
27+
&.pseudo-focus::extend(a[href].hxBtn:focus) {}
28+
29+
&.hxPrimary {
30+
&.pseudo-hover:extend(a[href].hxBtn.hxPrimary:hover) {}
31+
&.pseudo-active:extend(a[href].hxBtn.hxPrimary:active) {}
32+
&.pseudo-focus:extend(a[href].hxBtn.hxPrimary:focus) {}
4433
}
4534

46-
&.pseudo-active {
47-
&:extend(.hxBtn.hxLink:active);
48-
pointer-events: none;
35+
&.hxTertiary {
36+
&.pseudo-hover:extend(a[href].hxBtn.hxTertiary:hover) {}
37+
&.pseudo-active:extend(a[href].hxBtn.hxTertiary:active) {}
38+
&.pseudo-focus:extend(a[href].hxBtn.hxTertiary:focus) {}
4939
}
5040
}
5141
}

0 commit comments

Comments
 (0)