Skip to content

Commit 6e9d3af

Browse files
100stacks100stacks
authored
Merge pull request #659 from HelixDesignSystem/surf-1889-convert-buttons-to-scss
feat(Buttons): update and convert styles to SCSS
2 parents 5a1583f + a25049b commit 6e9d3af

33 files changed

+637
-650
lines changed

‎docs/_darkButtons.scss‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
.hxBtn,
2+
a[href].hxBtn {
3+
&.beta-hxDark {
4+
border-color: $cyan-500;
5+
color: $cyan-500;
6+
7+
&:hover {
8+
color: $gray-0;
9+
}
10+
11+
&:active {
12+
border-color: transparent;
13+
}
14+
15+
&:focus {
16+
box-shadow: 0 0 4px 2px rgba($cyan-500, 0.6);
17+
}
18+
}
19+
}

‎docs/components/_index.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@
66
@import "checkbox/spec";
77
@import "choice-tile/spec";
88
@import "dropdown-select/spec";
9+
@import "file/spec";
910
@import "menu/spec";
1011
@import "popover/spec";
1112
@import "textarea/spec";

‎docs/components/button/_spec.scss‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
@import "components/button/config";
2+
3+
.button-spec {
4+
.hxBtn {
5+
&[class*="mock"] {
6+
pointer-events: none;
7+
}
8+
9+
// SECONDARY
10+
&.mock-hover {
11+
@include hxButton-hover--secondary;
12+
}
13+
&.mock-active {
14+
@include hxButton-active--secondary;
15+
}
16+
&.mock-focus {
17+
@include hxButton-focus--secondary;
18+
}
19+
20+
// PRIMARY
21+
&.hxPrimary {
22+
&.mock-hover {
23+
@include hxButton-hover--primary;
24+
}
25+
&.mock-active {
26+
@include hxButton-active--primary;
27+
}
28+
&.mock-focus {
29+
@include hxButton-focus--primary;
30+
}
31+
}
32+
33+
// TERTIARY
34+
&.hxTertiary {
35+
&.mock-hover {
36+
@include hxButton-hover--tertiary;
37+
}
38+
&.mock-active {
39+
@include hxButton-active--tertiary;
40+
}
41+
&.mock-focus {
42+
@include hxButton-focus--tertiary;
43+
}
44+
}
45+
}
46+
}

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

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
{ label: 'Large', val: 'hxLg' },
66
];
77

8-
const VARIANTS = [
8+
const WEIGHTS = [
99
{ label: 'Primary', val: 'hxPrimary' },
1010
{ label: 'Secondary', val: '', default: true },
1111
{ label: 'Tertiary', val: 'hxTertiary' },
@@ -17,45 +17,45 @@
1717
data: {
1818
size: SIZES[1],
1919
sizes: SIZES,
20-
variant: VARIANTS[1],
21-
variants: VARIANTS,
20+
weight: WEIGHTS[1],
21+
weights: WEIGHTS,
2222
},
2323
computed: {
2424
classes: function () {
2525
let out = [ 'hxBtn' ];
2626
if (this.size.val !== '') {
2727
out.push(this.size.val);
2828
}
29-
if (this.variant.val !== '') {
30-
out.push(this.variant.val);
29+
if (this.weight.val !== '') {
30+
out.push(this.weight.val);
3131
}
3232
return out.join(' ');
3333
},
3434
},
3535
});
3636
}//#vue-basicButtonDemo
3737

38-
if (document.getElementById('vue-buttonGroupDemo')) {
38+
if (document.getElementById('vue-buttonBarDemo')) {
3939
new Vue({
40-
el: '#vue-buttonGroupDemo',
40+
el: '#vue-buttonBarDemo',
4141
data: {
4242
size: SIZES[1],
4343
sizes: SIZES,
44-
variant: VARIANTS[1],
45-
variants: VARIANTS,
44+
weight: WEIGHTS[1],
45+
weights: WEIGHTS,
4646
},
4747
computed: {
4848
classes: function () {
49-
let out = [ 'hxBtnGroup' ];
49+
let out = [ 'hxButtonBar' ];
5050
if (this.size.val !== '') {
5151
out.push(this.size.val);
5252
}
53-
if (this.variant.val !== '') {
54-
out.push(this.variant.val);
53+
if (this.weight.val !== '') {
54+
out.push(this.weight.val);
5555
}
5656
return out.join(' ');
5757
},
5858
},
5959
});
60-
}//#vue-buttonGroupDemo
60+
}//#vue-buttonBarDemo
6161
})();

‎docs/components/button/index.html‎

Lines changed: 74 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818
{% endblock %}
1919

2020
{% block content %}
21+
{# SINGLE BUTTON #}
2122
<section>
2223
<header>
2324
<h2 id="basic-button">Basic Button</h2>
@@ -43,21 +44,21 @@ <h2 id="basic-button">Basic Button</h2>
4344
<header>
4445
<form class="beta-hxForm">
4546
<fieldset>
46-
<legend class="beta-hxFieldName">Variant</legend>
47+
<legend class="beta-hxFieldName">Weight</legend>
4748
<hx-radio-set>
48-
<hx-radio-control v-for="(_variant, idx) in variants">
49+
<hx-radio-control v-for="(_weight, idx) in weights">
4950
<input
50-
:id="'radBasicVariant' + idx"
51-
:value="_variant"
52-
name="variant"
51+
:id="'radBasicWeight' + idx"
52+
:value="_weight"
53+
name="weight"
5354
type="radio"
54-
v-model="variant"
55+
v-model="weight"
5556
/>
56-
<label :for="'radBasicVariant' + idx">
57+
<label :for="'radBasicWeight' + idx">
5758
<hx-radio></hx-radio>
58-
{% raw %}{{_variant.label}}{% endraw %}
59+
{% raw %}{{_weight.label}}{% endraw %}
5960
</label>
60-
<p v-if="_variant.default">(default)</p>
61+
<p v-if="_weight.default">(default)</p>
6162
</hx-radio-control>
6263
</hx-radio-set>
6364
</fieldset>
@@ -135,40 +136,36 @@ <h2 id="basic-button">Basic Button</h2>
135136
</footer>
136137
</section>
137138

139+
{# BUTTON BAR #}
138140
<section>
139141
<header>
140-
<h2 id="button-group">Button Group</h2>
142+
<h2 id="button-bar">Button Bar</h2>
141143
<p>
142-
A button group is built by placing several buttons within a
143-
<code>&lt;div&gt;</code> element having the <code>.hxBtnGroup</code>
144+
A button bar is built by placing several buttons within a
145+
<code>&lt;div&gt;</code> element having the <code>.hxButtonBar</code>
144146
CSS class.
145147
</p>
146148
</header>
147149

148-
<p>
149-
Button variant classes are added to the wrapper instead of the individual
150-
buttons in order to apply the same style to all buttons within the group.
151-
</p>
152-
153-
<div class="example" id="vue-buttonGroupDemo" v-cloak>
150+
<div class="example" id="vue-buttonBarDemo" v-cloak>
154151
<header>
155152
<form class="beta-hxForm">
156153
<fieldset>
157-
<legend class="beta-hxFieldName">Variant</legend>
154+
<legend class="beta-hxFieldName">Weight</legend>
158155
<hx-radio-set>
159-
<hx-radio-control v-for="(_variant, idx) in variants">
156+
<hx-radio-control v-for="(_weight, idx) in weights">
160157
<input
161-
:id="'radGroupVariant' + idx"
162-
:value="_variant"
163-
name="variant"
158+
:id="'radBarWeight' + idx"
159+
:value="_weight"
160+
name="weight"
164161
type="radio"
165-
v-model="variant"
162+
v-model="weight"
166163
/>
167-
<label :for="'radGroupVariant' + idx">
164+
<label :for="'radBarWeight' + idx">
168165
<hx-radio></hx-radio>
169-
{% raw %}{{_variant.label}}{% endraw %}
166+
{% raw %}{{_weight.label}}{% endraw %}
170167
</label>
171-
<p v-if="_variant.default">(default)</p>
168+
<p v-if="_weight.default">(default)</p>
172169
</hx-radio-control>
173170
</hx-radio-set>
174171
</fieldset>
@@ -178,13 +175,13 @@ <h2 id="button-group">Button Group</h2>
178175
<hx-radio-set>
179176
<hx-radio-control v-for="(_size, idx) in sizes">
180177
<input
181-
:id="'radGroupSize' + idx"
178+
:id="'radBarSize' + idx"
182179
:value="_size"
183180
name="size"
184181
type="radio"
185182
v-model="size"
186183
/>
187-
<label :for="'radGroupSize' + idx">
184+
<label :for="'radBarSize' + idx">
188185
<hx-radio></hx-radio>
189186
{% raw %}{{_size.label}}{% endraw %}
190187
</label>
@@ -217,5 +214,53 @@ <h2 id="button-group">Button Group</h2>
217214
{% endcode %}
218215
</footer>
219216
</div>
217+
<p class="hxSubdued hxSubBody">
218+
<hx-icon type="exclamation-triangle"></hx-icon>
219+
Size and Weight classes are applied to the <em>entire</em> bar, not to individual buttons.
220+
</p>
221+
</section>
222+
223+
{# BUTTON SET #}
224+
<section>
225+
<header>
226+
<h2 id="button-set">Button Set</h2>
227+
{# TODO: add section description #}
228+
</header>
229+
230+
<div class="example">
231+
<div>
232+
<div class="hxButtonSet">
233+
<button class="hxBtn hxPrimary">
234+
Primary Button
235+
</button>
236+
237+
<button class="hxBtn">
238+
Secondary Button
239+
</button>
240+
241+
<button class="hxBtn hxTertiary">
242+
Tertiary Button
243+
</button>
244+
</div>
245+
</div>
246+
247+
<footer>
248+
{% code 'html' %}
249+
<div class="hxButtonSet">
250+
<button class="hxBtn hxPrimary">
251+
Primary Button
252+
</button>
253+
254+
<button class="hxBtn">
255+
Secondary Button
256+
</button>
257+
258+
<button class="hxBtn hxTertiary">
259+
Tertiary Button
260+
</button>
261+
</div>
262+
{% endcode %}
263+
</footer>
264+
</div>
220265
</section>
221266
{% endblock %}

‎docs/components/button/test.html‎

Lines changed: 22 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,16 @@
77
{% extends 'test.njk' %}
88
{% set contentClasses = 'button-spec' %}
99

10+
{# TODO
11+
- additional state combos
12+
- Focused + Pressed (:focus:active)
13+
- Focused + Hover (:focus:hover)
14+
- Disabled + Hover (:disabled:hover)
15+
- Cog Button states (.hxBtn.hxCog)
16+
- Deprecated Stuff
17+
- .hxBtnGroup (should look like .hxButtonBar)
18+
#}
19+
1020
{% block content %}
1121
{% set variants = [
1222
{ label: 'Primary', style: 'hxPrimary' },
@@ -31,9 +41,9 @@ <h2>Button Element</h2>
3141
<tr>
3242
<td>{{_variant.label}} Button ({{_size.label}})</td>
3343
<td><button class="hxBtn {{_variant.style}} {{_size.style}}">Normal</button></td>
34-
<td><button class="hxBtn {{_variant.style}} {{_size.style}} pseudo-focus">Focused</button></td>
35-
<td><button class="hxBtn {{_variant.style}} {{_size.style}} pseudo-hover">Hover</button></td>
36-
<td><button class="hxBtn {{_variant.style}} {{_size.style}} pseudo-active">Pressed</button></td>
44+
<td><button class="hxBtn {{_variant.style}} {{_size.style}} mock-focus">Focused</button></td>
45+
<td><button class="hxBtn {{_variant.style}} {{_size.style}} mock-hover">Hover</button></td>
46+
<td><button class="hxBtn {{_variant.style}} {{_size.style}} mock-active">Pressed</button></td>
3747
<td><button class="hxBtn {{_variant.style}} {{_size.style}}" disabled>Disabled</button></td>
3848
</tr>
3949
{% endfor %}
@@ -53,9 +63,9 @@ <h2>Anchor Element</h2>
5363
<tr>
5464
<td>{{_variant.label}} Anchor ({{_size.label}})</td>
5565
<td><a class="hxBtn {{_variant.style}} {{_size.style}}">Normal</a></td>
56-
<td><a class="hxBtn {{_variant.style}} {{_size.style}} pseudo-focus">Focused</a></td>
57-
<td><a class="hxBtn {{_variant.style}} {{_size.style}} pseudo-hover">Hover</a></td>
58-
<td><a class="hxBtn {{_variant.style}} {{_size.style}} pseudo-active">Pressed</a></td>
66+
<td><a class="hxBtn {{_variant.style}} {{_size.style}} mock-focus">Focused</a></td>
67+
<td><a class="hxBtn {{_variant.style}} {{_size.style}} mock-hover">Hover</a></td>
68+
<td><a class="hxBtn {{_variant.style}} {{_size.style}} mock-active">Pressed</a></td>
5969
<td><a class="hxBtn {{_variant.style}} {{_size.style}}" disabled>Disabled</a></td>
6070
</tr>
6171
{% endfor %}
@@ -75,9 +85,9 @@ <h2>Link Element</h2>
7585
<tr>
7686
<td>{{_variant.label}} Anchor ({{_size.label}})</td>
7787
<td><a href="#" class="hxBtn {{_variant.style}} {{_size.style}}">Normal</a></td>
78-
<td><a href="#" class="hxBtn {{_variant.style}} {{_size.style}} pseudo-focus">Focused</a></td>
79-
<td><a href="#" class="hxBtn {{_variant.style}} {{_size.style}} pseudo-hover">Hover</a></td>
80-
<td><a href="#" class="hxBtn {{_variant.style}} {{_size.style}} pseudo-active">Pressed</a></td>
88+
<td><a href="#" class="hxBtn {{_variant.style}} {{_size.style}} mock-focus">Focused</a></td>
89+
<td><a href="#" class="hxBtn {{_variant.style}} {{_size.style}} mock-hover">Hover</a></td>
90+
<td><a href="#" class="hxBtn {{_variant.style}} {{_size.style}} mock-active">Pressed</a></td>
8191
<td><a href="#" class="hxBtn {{_variant.style}} {{_size.style}}" disabled>Disabled</a></td>
8292
</tr>
8393
{% endfor %}
@@ -98,9 +108,9 @@ <h2>{{_type | title}} Input Element</h2>
98108
<tr>
99109
<td>{{_variant.label}} Anchor ({{_size.label}})</td>
100110
<td><input type="{{_type}}" class="hxBtn {{_variant.style}} {{_size.style}}" value="Normal"/></td>
101-
<td><input type="{{_type}}" class="hxBtn {{_variant.style}} {{_size.style}} pseudo-focus" value="Focused"/></td>
102-
<td><input type="{{_type}}" class="hxBtn {{_variant.style}} {{_size.style}} pseudo-hover" value="Hover"/></td>
103-
<td><input type="{{_type}}" class="hxBtn {{_variant.style}} {{_size.style}} pseudo-active" value="Pressed"/></td>
111+
<td><input type="{{_type}}" class="hxBtn {{_variant.style}} {{_size.style}} mock-focus" value="Focused"/></td>
112+
<td><input type="{{_type}}" class="hxBtn {{_variant.style}} {{_size.style}} mock-hover" value="Hover"/></td>
113+
<td><input type="{{_type}}" class="hxBtn {{_variant.style}} {{_size.style}} mock-active" value="Pressed"/></td>
104114
<td><input type="{{_type}}" class="hxBtn {{_variant.style}} {{_size.style}}" disabled value="Disabled"/></td>
105115
</tr>
106116
{% endfor %}

‎docs/components/file/_spec.scss‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
@import 'components/button/config';
2+
3+
.file-input-spec {
4+
hx-file-control {
5+
hx-file-input.hxBtn.mock-hover {
6+
@include hxButton-hover--secondary;
7+
8+
&.hxPrimary {
9+
@include hxButton-hover--primary;
10+
}
11+
12+
&.hxTertiary {
13+
@include hxButton-hover--tertiary;
14+
}
15+
}
16+
}
17+
}

0 commit comments

Comments
 (0)