Skip to content

Commit f087641

Browse files
CITguyCITguy
authored
Merge pull request #152 from rackerlabs/SURF-399-hx-busy
feat(busy): add Busy component
2 parents 14f9271 + 7513a7e commit f087641

File tree

11 files changed

+193
-1
lines changed

11 files changed

+193
-1
lines changed

‎docs/_data/nav.json5‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
{ label: 'Alerts', path: 'alerts' },
2222
{ label: 'Box', path: 'box' },
2323
{ label: 'Breadcrumbs', path: 'breadcrumbs' },
24+
{ label: 'Busy', path: 'busy' },
2425
{ label: 'Buttons', path: 'buttons' },
2526
{ label: 'Checkboxes', path: 'checkboxes' },
2627
//{ label: 'Colors', path: 'colors' },
@@ -55,6 +56,7 @@
5556
label: 'Custom Elements',
5657
path: 'elements',
5758
children: [
59+
{ label: '<hx-busy>', path: 'hx-busy' },
5860
{ label: '<hx-checkbox>', path: 'hx-checkbox' },
5961
{ label: '<hx-dd>', path: 'hx-dd' },
6062
{ label: '<hx-def>', path: 'hx-def' },

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
if (document.getElementById('vue-busyDemo')) {
2+
new Vue({
3+
el: '#vue-busyDemo',
4+
data: {
5+
isPaused: false,
6+
},
7+
});
8+
}

‎docs/components/busy/index.html‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
---
2+
title: Busy
3+
also:
4+
elements/hx-busy: <hx-busy>
5+
---
6+
{% extends 'component.njk' %}
7+
{% block content %}
8+
<section>
9+
<h2 id="demos">Demos</h2>
10+
<div id="vue-busyDemo" class="hxRow" v-cloak>
11+
<div class="hxCol hxSpan-12-xs hxSpan-3-lg hxOrder-2-lg">
12+
<h3>Options</h3>
13+
<p>
14+
<label>
15+
<input type="checkbox" v-model="isPaused" />
16+
Pause
17+
</label>
18+
</p>
19+
</div>
20+
<div class="hxCol hxSpan-12-xs hxSpan-9-lg hxOrder-1-lg">
21+
<section>
22+
<h3>Basic Loader</h3>
23+
<div class="demo">
24+
<hx-busy :paused="isPaused"></hx-busy>
25+
</div>
26+
<template v-if="isPaused">
27+
{% code 'html' %}<hx-busy paused></hx-busy>{% endcode %}
28+
</template>
29+
<template v-else>
30+
{% code 'html' %}<hx-busy></hx-busy>{% endcode %}
31+
</template>
32+
</section>
33+
34+
<section>
35+
<h3>Loader in Button</h3>
36+
<div class="demo">
37+
<button class="hxBtn hxPrimary">
38+
Loading
39+
<hx-busy :paused="isPaused"></hx-busy>
40+
</button>
41+
</div>
42+
<template v-if="isPaused">
43+
{% code 'html' %}
44+
<button class="hxBtn hxPrimary">
45+
Loading
46+
<hx-busy paused></hx-busy>
47+
</button>
48+
{% endcode %}
49+
</template>
50+
<template v-else>
51+
{% code 'html' %}
52+
<button class="hxBtn hxPrimary">
53+
Loading
54+
<hx-busy></hx-busy>
55+
</button>
56+
{% endcode %}
57+
</template>
58+
</section>
59+
</div>
60+
</div>
61+
</section>
62+
{% endblock %}

‎docs/docs.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
'use strict';
22

33
import './components/box/box-demo';
4+
import './components/busy/busy-demo';
45
import './components/buttons/button-demo';
56
import './components/checkboxes/checkbox-demo';
67
import './components/lists/list-demo';

‎docs/elements/hx-busy/index.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
---
2+
title: <hx-busy>
3+
also:
4+
components/busy: Busy
5+
---
6+
{% extends 'element.njk' %}
7+
{% block content %}
8+
<section>
9+
<p>
10+
The custom <code>{{page.title}}</code> element renders a spinning
11+
loading indicator.
12+
</p>
13+
14+
<hx-dl class="hxBox-md metadata">
15+
<hx-def>
16+
<hx-dt>Permitted Parents</hx-dt>
17+
<hx-dd>any</hx-dd>
18+
</hx-def>
19+
<hx-def>
20+
<hx-dt>Permitted Children</hx-dt>
21+
<hx-dd>none (content will be removed upon element upgrade)</hx-dd>
22+
</hx-def>
23+
</hx-dl>
24+
</section>
25+
{% endblock %}
26+
27+
{% block attributes %}
28+
<dl>
29+
<dt>paused</dt>
30+
<dd>Pauses animation, when present</dd>
31+
</dl>
32+
{% endblock %}
33+
34+
{% block properties %}
35+
<dl>
36+
<dt>paused <small>(Boolean [false])</small></dt>
37+
<dd>Pauses animation, when set to true</dd>
38+
</dl>
39+
{% endblock %}

‎docs/elements/hx-checkbox/index.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
also:
44
components/checkboxes: Checkboxes
55
---
6-
---
76
{% extends 'element.njk' %}
87
{% block content %}
98
<section>

‎src/helix-ui.less‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,11 @@
1010
@import url("https://fonts.googleapis.com/css?family=Roboto+Mono:400,100,100italic,300,300italic,400italic,700,700italic");
1111
@import (reference) 'vars';
1212

13+
@keyframes hx-spin {
14+
0% { transform: rotate(0deg); }
15+
100% { transform: rotate(360deg); }
16+
}
17+
1318

1419
/* ========== RESETS ========== *\
1520
- Element & Pseudo Selectors
@@ -36,6 +41,7 @@ figure {
3641
}
3742

3843
// Core CSS
44+
@import 'core/hx-busy';
3945
@import 'core/hx-checkbox';
4046
@import 'core/hx-dd';
4147
@import 'core/hx-def';

‎src/helix-ui/elements.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
export { HXBusyElement } from './elements/HXBusyElement.js';
12
export { HXCheckboxElement } from './elements/HXCheckboxElement.js';
23
export { HXDisclosureElement } from './elements/HXDisclosureElement.js';
34
export { HXIconElement } from './elements/HXIconElement.js';

‎src/helix-ui/elements/HXBusyElement.js‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { HXElement } from './HXElement';
2+
3+
const tagName = 'hx-busy';
4+
// leave ShadowDOM template empty to remove LightDOM children
5+
const template = document.createElement('template');
6+
7+
export class HXBusyElement extends HXElement {
8+
static get is () {
9+
return tagName;
10+
}
11+
12+
constructor () {
13+
super(tagName, template);
14+
}
15+
16+
connectedCallback () {
17+
this.$upgradeProperty('paused');
18+
this.$defaultAttribute('aria-hidden', true);
19+
}
20+
21+
get paused () {
22+
return this.hasAttribute('paused');
23+
}
24+
25+
set paused (isPaused) {
26+
if (isPaused) {
27+
this.setAttribute('paused', '');
28+
} else {
29+
this.removeAttribute('paused');
30+
}
31+
}
32+
}//HXBusyElement

‎src/helix-ui/styles/core/hx-busy.less‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
/*
2+
NOTE: This implementation is known to be slightly buggy with IE11.
3+
In various scenarious, IE11 will render the element with a
4+
"squigglevision"-like appearance. We were unable to pinpoint what
5+
causes the bug, but factors contributing to it are sub-pixel calculations,
6+
display + animation property issues, and even border-radius of the parent.
7+
8+
There's very little we can do about it, because the bug resides in the
9+
IE rendering engine (which is no longer receiving updates). Design is aware
10+
of the issue, and has noted that the issue is acceptable for IE compatibility.
11+
12+
1: explicitly set transform-box for IE/Edge compatibility
13+
2: explicitly set transform-origin with full X/Y/Z values for IE/Edge compatibility
14+
*/
15+
hx-busy {
16+
animation-play-state: running;
17+
animation: hx-spin 0.8s linear infinite;
18+
border-color: transparent currentColor currentColor;
19+
border-radius: 1em;
20+
border-style: solid;
21+
border-width: 2px;
22+
box-sizing: border-box;
23+
display: inline-block;
24+
height: 1em;
25+
transform-box: border-box; // 1
26+
transform-origin: 0.5em 0.5em 0.5em; // 2
27+
vertical-align: middle;
28+
width: 1em;
29+
30+
&[paused] {
31+
animation-play-state: paused;
32+
}
33+
}

0 commit comments

Comments
 (0)