Skip to content

Commit 355ee59

Browse files
committed
Update style for loading button
Signed-off-by: Leonardo Rossi <[email protected]>
1 parent cbe3e02 commit 355ee59

File tree

6 files changed

+91
-6
lines changed

6 files changed

+91
-6
lines changed

src/components/Button.jsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import {
1212
ACTIVE_AND_INACTIVE_STATUS,
1313
TRANSPARENT
1414
} from './constants'
15-
import SpinnerCircular from './loaders/SpinnerCircular'
15+
import SpinnerCircularV2 from './loaders/SpinnerCircularV2'
1616

1717
function Button ({
1818
textClass = '',
@@ -111,7 +111,8 @@ function Button ({
111111
return (
112112
<button className={`${buttonClassName} ${restClassName()} ${borderedClassName}`} disabled={disabled} alt={label} {...rest} onMouseLeave={() => setHover(false)} onMouseOver={() => setHover(true)}>
113113
<div className={`${contentClassName} ${backgroundClassName}`}>
114-
{loading ? <SpinnerCircular className={styles.spinner} size={30} thickness={2} color={color} /> : null}
114+
{loading ? <SpinnerCircularV2 className={styles.spinner} size={28} thickness={1} color={color} /> : null}
115+
115116
{platformaticIcon ? <PlatformaticIcon key='left' iconName={platformaticIcon.iconName} color={platformaticIcon.color} data-testid='button-icon' onClick={null} inactive={inactive} /> : null}
116117
<span className={styles.label}>{label}</span>
117118
{platformaticIconAfter ? <PlatformaticIcon key='right' iconName={platformaticIconAfter.iconName} color={platformaticIconAfter.color} data-testid='button-icon' onClick={null} inactive={inactive} /> : null}

src/components/Button.module.css

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -147,5 +147,5 @@
147147
@apply cursor-default;
148148
}
149149
.spinner {
150-
@apply z-50 relative top-[20px] left-[20px] transform -translate-x-1/2 -translate-y-1/2
150+
@apply z-50 relative transform -translate-x-1/2 -translate-y-1/2
151151
}

src/components/LoadingSpinner.jsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,13 @@ import React from 'react'
22
import styles from './LoadingSpinner.module.css'
33
import SpinnerCircular from './loaders/SpinnerCircular'
44

5-
function LoadingSpinner ({ loading = false }) {
5+
function LoadingSpinner ({ loading = false, size = 60 }) {
66
// If null then loading not started, if true then loading, if false then done loading
77
return loading
88
? (
99
<div className={styles.container} data-testid='loading-spinner'>
1010
<div data-testid='loading-spinner-content' className={styles.relative}>
11-
<SpinnerCircular className={styles.spinner} size={60} />
11+
<SpinnerCircular className={styles.spinner} size={size} />
1212
</div>
1313
</div>
1414
)
Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
// https://loading.io/css/
2+
import React from 'react'
3+
import styles from './SpinnerCircularV2.module.css'
4+
import { WHITE } from '../constants'
5+
6+
function SpinnerCircular ({
7+
className = '',
8+
color = WHITE,
9+
size = 60,
10+
thickness = 4
11+
}) {
12+
const styleRing = { width: `${size / 4}px`, height: `${size / 4}px` }
13+
const styleDiv = {
14+
width: `${size - 16}px`,
15+
height: `${size - 16}px`,
16+
margin: `${thickness}px`,
17+
borderWidth: `${thickness}px`
18+
}
19+
20+
const spinnerClassName = styles[`ring${color}`] + ` ${styles.ring} ${className}`
21+
return (
22+
<div className={spinnerClassName} style={styleRing}>
23+
<div style={styleDiv} />
24+
<div style={styleDiv} />
25+
<div style={styleDiv} />
26+
<div style={styleDiv} />
27+
</div>
28+
)
29+
}
30+
31+
export default SpinnerCircular
Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
.ringwhite {
2+
color: white;
3+
}
4+
.ring,
5+
.ring div {
6+
box-sizing: border-box;
7+
}
8+
.ring div {
9+
box-sizing: border-box;
10+
display: block;
11+
position: absolute;
12+
border-style: solid;
13+
border-color: currentColor;
14+
border-radius: 50%;
15+
animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
16+
border-color: currentColor transparent transparent transparent;
17+
}
18+
.ring div:nth-child(1) {
19+
animation-delay: -0.45s;
20+
}
21+
.ring div:nth-child(2) {
22+
animation-delay: -0.3s;
23+
}
24+
.ring div:nth-child(3) {
25+
animation-delay: -0.15s;
26+
}
27+
@keyframes lds-ring {
28+
0% {
29+
transform: rotate(0deg);
30+
}
31+
100% {
32+
transform: rotate(360deg);
33+
}
34+
}

src/stories/Button.stories.jsx

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import React from 'react'
1+
import React, { useState } from 'react'
22
import Button from '../components/Button'
33
import {
44
ALTERNATE_RICH_BLACK,
@@ -676,3 +676,22 @@ LoadingButton.args = {
676676
label: 'Loading Button',
677677
loading: true
678678
}
679+
680+
export const ClickToLoad = (args) => {
681+
const [loading, setLoading] = useState(false)
682+
return (
683+
<Button
684+
label='Click to Load'
685+
loading={loading}
686+
onClick={() => {
687+
setLoading(true)
688+
setTimeout(() => setLoading(false), 2000)
689+
}}
690+
/>
691+
)
692+
}
693+
694+
ClickToLoad.args = {
695+
label: 'Click to Load',
696+
loading: false
697+
}

0 commit comments

Comments
 (0)