Skip to content

Commit 99be881

Browse files
committedDec 31, 2019
Introduce animation helpers for loading icons
·
v0.60.0v0.24.0
1 parent 4a943d4 commit 99be881

File tree

10 files changed

+84
-32
lines changed

10 files changed

+84
-32
lines changed
 

‎README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,11 +36,12 @@ To use React UI in your app:
3636
import '@react-ui-org/react-ui/src/lib/theme.scss';
3737
import '@react-ui-org/react-ui/src/lib/foundation.scss';
3838
```
39-
4. Optionally add the **utility classes** bundle:
39+
4. Optionally add the **helper and utility classes** bundles:
4040
```js
4141
// app.jsx
4242
import '@react-ui-org/react-ui/src/lib/theme.scss';
4343
import '@react-ui-org/react-ui/src/lib/foundation.scss';
44+
import '@react-ui-org/react-ui/src/lib/helpers.scss';
4445
import '@react-ui-org/react-ui/src/lib/utilities.scss';
4546
```
4647
5. Finally, use React UI **components** just like you are used to:

‎demo/generated/demo.js

Lines changed: 5 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/index.html

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -51,8 +51,8 @@
5151
}
5252

5353
.loader--rotate {
54-
-webkit-animation: spin 1s infinite linear;
55-
animation: spin 1s infinite linear;
54+
-webkit-animation: spin 2.2s infinite cubic-bezier(0.31, 0.3, 0.34, -0.17);
55+
animation: spin 2.2s infinite cubic-bezier(0.31, 0.3, 0.34, -0.17);
5656
}
5757

5858
@-webkit-keyframes spin {
@@ -62,8 +62,8 @@
6262
}
6363

6464
to {
65-
-webkit-transform: rotate(360deg);
66-
transform: rotate(360deg);
65+
-webkit-transform: rotate(1440deg);
66+
transform: rotate(1440deg);
6767
}
6868
}
6969

@@ -74,8 +74,8 @@
7474
}
7575

7676
to {
77-
-webkit-transform: rotate(360deg);
78-
transform: rotate(360deg);
77+
-webkit-transform: rotate(1440deg);
78+
transform: rotate(1440deg);
7979
}
8080
}
8181
</style>

‎dist/lib.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package-lock.json

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@react-ui-org/react-ui",
3-
"version": "0.23.2",
3+
"version": "0.24.0",
44
"license": "MIT",
55
"main": "dist/lib.js",
66
"repository": {

‎src/demo/pages/DemoContainer.jsx

Lines changed: 34 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import React from 'react';
33
// React UI CSS theme and foundation
44
import '../../lib/theme.scss';
55
import '../../lib/foundation.scss';
6+
import '../../lib/helpers.scss';
67

78
// React UI components
89
import {
@@ -635,13 +636,13 @@ class DemoContainer extends React.Component {
635636
<Button
636637
clickHandler={loggerClick}
637638
label="Loading button"
638-
loadingIcon={<Icon icon="sync" />}
639+
loadingIcon={<span className="d-inline-flex animation-spin-counterclockwise"><Icon icon="sync" /></span>}
639640
/>
640641
<Button
641642
clickHandler={loggerClick}
642643
label="Loading button with icon and badge"
643644
afterLabel={<Icon icon="stars" />}
644-
loadingIcon={<Icon icon="sync" />}
645+
loadingIcon={<span className="d-inline-flex animation-spin-counterclockwise"><Icon icon="sync" /></span>}
645646
startCorner={<Badge label={3} />}
646647
/>
647648
</>
@@ -2464,12 +2465,42 @@ class DemoContainer extends React.Component {
24642465
/>
24652466
</section>
24662467
<hr />
2468+
<section id="helpers" className="mb-7">
2469+
<h2 className="typography-size-5 mb-6">Helpers</h2>
2470+
<p>
2471+
Helpers are CSS class names for common situations.
2472+
</p>
2473+
<h3 id="helpers-animation" className="typography-size-4 mb-6">Animation</h3>
2474+
<p>
2475+
Remember that non-block inline elements cannot be animated.
2476+
</p>
2477+
<Documentation
2478+
name="Animation"
2479+
component={(
2480+
<>
2481+
<p>
2482+
<code className="mr-3">.animation-spin-clockwise</code>
2483+
<span className="d-inline-flex animation-spin-clockwise">
2484+
<Icon icon="sync" />
2485+
</span>
2486+
</p>
2487+
<p>
2488+
<code className="mr-3">.animation-spin-counterclockwise</code>
2489+
<span className="d-inline-flex animation-spin-counterclockwise">
2490+
<Icon icon="sync" />
2491+
</span>
2492+
</p>
2493+
</>
2494+
)}
2495+
/>
2496+
</section>
2497+
<hr />
24672498
<section id="utilities" className="mb-7">
24682499
<h2 className="typography-size-5 mb-6">Utilities</h2>
24692500
<p>
24702501
Utilities are CSS class names that do just one thing.
24712502
</p>
2472-
<h3 id="utilities-block-alignment" className="typography-size-4 mb-6">Box Alignment</h3>
2503+
<h3 id="utilities-box-alignment" className="typography-size-4 mb-6">Box Alignment</h3>
24732504
<p>
24742505
Class name notation is
24752506
{' '}

‎src/demo/pages/navigation.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,16 @@ export default [
135135
link: '#screens',
136136
title: 'Screens',
137137
},
138+
{
139+
items: [
140+
{
141+
link: '#helpers-animation',
142+
title: 'Animation',
143+
},
144+
],
145+
link: '#helpers',
146+
title: 'Helpers',
147+
},
138148
{
139149
items: [
140150
{

‎src/lib/components/ui/Button/Button.scss

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,6 @@
55
@import 'mixins';
66
@import 'variables';
77

8-
@keyframes rotateIcon {
9-
from {
10-
transform: rotate(0);
11-
}
12-
13-
to {
14-
transform: rotate(-360deg);
15-
}
16-
}
17-
188
.root {
199
@include button();
2010
@include form-field-horizontal-neighbor();
@@ -34,10 +24,6 @@
3424
justify-content: center;
3525
}
3626

37-
.loadingIcon {
38-
animation: rotateIcon 2s linear infinite;
39-
}
40-
4127
.beforeLabel {
4228
margin-right: $button-icon-offset;
4329
}

‎src/lib/helpers.scss

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
// General purpose helpers for common situations. Unlike utilities, helpers usually cover more CSS
2+
// properties than one. And unlike with utilities, using `!important` is not allowed here.
3+
4+
$_spin-count: 4;
5+
$_spin-duration: 2.2s;
6+
$_spin-easing: cubic-bezier(0.31, 0.3, 0.34, -0.17);
7+
8+
@keyframes spin {
9+
0% {
10+
transform: rotate(0 * 360deg);
11+
}
12+
13+
100% {
14+
transform: rotate($_spin-count * 360deg);
15+
}
16+
}
17+
18+
:global(.animation-spin-clockwise) {
19+
animation: spin $_spin-duration $_spin-easing infinite;
20+
}
21+
22+
:global(.animation-spin-counterclockwise) {
23+
animation: spin $_spin-duration $_spin-easing infinite reverse;
24+
}

0 commit comments

Comments
 (0)
Please sign in to comment.