Skip to content

Commit 4e7464a

Browse files
frozenheliumfrozenhelium
committed
Simplify button styling
1 parent 0a3814d commit 4e7464a

2 files changed

Lines changed: 132 additions & 159 deletions

File tree

‎components/Action/Button/index.js‎

Lines changed: 81 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ eslint css-modules/no-unused-class: [
1818
}
1919
]
2020
*/
21+
2122
import styles from './styles.scss';
2223

2324
const propTypes = {
@@ -99,34 +100,42 @@ const defaultProps = {
99100
onClickParams: undefined,
100101
};
101102

102-
/**
103-
* Basic button component
104-
*/
105-
class Button extends React.PureComponent {
106-
static propTypes = propTypes;
107-
108-
static defaultProps = defaultProps;
109-
110-
componentWillUnmount() {
111-
if (this.changeTimeout) {
112-
clearTimeout(this.changeTimeout);
103+
function Button(props) {
104+
const {
105+
onClick,
106+
onClickParams,
107+
changeDelay,
108+
iconName,
109+
children,
110+
disabled,
111+
pending,
112+
type,
113+
buttonType,
114+
className: classNameFromProps,
115+
smallHorizontalPadding,
116+
smallVerticalPadding,
117+
transparent,
118+
119+
...otherProps
120+
} = props;
121+
122+
const changeTimeoutRef = React.useRef(null);
123+
124+
React.useEffect(() => (
125+
() => {
126+
window.clearTimeout(changeTimeoutRef.current);
113127
}
114-
}
128+
), []);
115129

116-
handleClick = (e) => {
117-
clearTimeout(this.changeTimeout);
118-
const {
119-
onClick,
120-
onClickParams,
121-
changeDelay,
122-
} = this.props;
130+
const handleClick = React.useCallback((e) => {
131+
clearTimeout(changeTimeoutRef.current);
123132

124133
if (!onClick) {
125134
return;
126135
}
127136

128137

129-
this.changeTimeout = setTimeout(
138+
changeTimeoutRef.current = window.setTimeout(
130139
() => {
131140
onClick({
132141
event: e,
@@ -135,76 +144,58 @@ class Button extends React.PureComponent {
135144
},
136145
changeDelay,
137146
);
138-
}
139-
140-
render() {
141-
const {
142-
iconName,
143-
children,
144-
disabled,
145-
pending,
146-
type,
147-
buttonType,
148-
className: classNameFromProps,
149-
smallHorizontalPadding,
150-
smallVerticalPadding,
151-
transparent,
152-
153-
onClick, // eslint-disable-line no-unused-vars, @typescript-eslint/no-unused-vars
154-
onClickParams, // eslint-disable-line no-unused-vars, @typescript-eslint/no-unused-vars
155-
changeDelay, // eslint-disable-line no-unused-vars, @typescript-eslint/no-unused-vars
156-
...otherProps
157-
} = this.props;
158-
159-
const buttonClassName = _cs(
160-
classNameFromProps,
161-
'button',
162-
styles.button,
163-
buttonType,
164-
buttonType && styles[buttonType],
165-
iconName && children && 'with-icon-and-children',
166-
iconName && children && styles.withIconAndChildren,
167-
168-
smallHorizontalPadding && 'small-horizontal-padding',
169-
smallHorizontalPadding && styles.smallHorizontalPadding,
170-
smallVerticalPadding && 'small-vertical-padding',
171-
smallVerticalPadding && styles.smallVerticalPadding,
172-
173-
transparent && 'transparent',
174-
transparent && styles.transparent,
175-
);
176-
177-
const iconClassName = _cs(
178-
'icon',
179-
styles.icon,
180-
// pending && styles.pendingIcon,
181-
);
182-
183-
/* eslint-disable react/button-has-type */
184-
return (
185-
<button
186-
className={buttonClassName}
187-
disabled={disabled || pending}
188-
onClick={this.handleClick}
189-
type={type}
190-
{...otherProps}
191-
>
192-
{pending ? (
193-
<Spinner
194-
className={styles.spinner}
195-
size="small"
196-
/>
197-
) : (
198-
<Icon
199-
name={iconName}
200-
className={iconClassName}
201-
/>
202-
)}
203-
{ children }
204-
</button>
205-
);
206-
/* eslint-enable react/button-has-type */
207-
}
147+
}, [onClick, changeDelay, onClickParams]);
148+
149+
const buttonClassName = _cs(
150+
classNameFromProps,
151+
'button',
152+
styles.button,
153+
buttonType,
154+
buttonType && styles[buttonType],
155+
iconName && children && 'with-icon-and-children',
156+
iconName && children && styles.withIconAndChildren,
157+
158+
smallHorizontalPadding && 'small-horizontal-padding',
159+
smallHorizontalPadding && styles.smallHorizontalPadding,
160+
smallVerticalPadding && 'small-vertical-padding',
161+
smallVerticalPadding && styles.smallVerticalPadding,
162+
163+
transparent && 'transparent',
164+
transparent && styles.transparent,
165+
);
166+
167+
const iconClassName = _cs(
168+
'icon',
169+
styles.icon,
170+
);
171+
172+
/* eslint-disable react/button-has-type */
173+
return (
174+
<button
175+
className={buttonClassName}
176+
disabled={disabled || pending}
177+
onClick={handleClick}
178+
type={type}
179+
{...otherProps}
180+
>
181+
{pending ? (
182+
<Spinner
183+
className={styles.spinner}
184+
size="small"
185+
/>
186+
) : (
187+
<Icon
188+
name={iconName}
189+
className={iconClassName}
190+
/>
191+
)}
192+
{ children }
193+
</button>
194+
);
195+
/* eslint-enable react/button-has-type */
208196
}
209197

198+
Button.propTypes = propTypes;
199+
Button.defaultProps = defaultProps;
200+
210201
export default FaramActionElement(Button);

‎components/Action/Button/styles.scss‎

Lines changed: 51 additions & 69 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
11
@import '../../../stylesheets/utils';
22

3-
:root {
4-
--radius-button-border: 2px;
5-
}
6-
73
@mixin button-props($base-color) {
84
// border: var(--width-separator-thin) solid var(--color-separator-light);
95
// color: var(--color-text);
@@ -35,113 +31,99 @@
3531
}
3632

3733
.button {
38-
border: var(--width-separator-thin) solid var(--color-separator-light);
34+
--background-color: transparent;
35+
--color: var(--color-text);
36+
--border-color: transparent;
37+
38+
border: var(--width-separator-thin) solid var(--border-color);
3939
border-radius: var(--radius-button-border);
40-
background-color: transparent;
40+
background-color: var(--background-color);
4141
padding: var(--spacing-small) var(--spacing-small-alt);
4242
text-transform: uppercase;
43+
color: var(--color);
4344
font-family: inherit;
4445
font-size: var(--font-size-small);
4546
font-weight: var(--font-weight-bold);
4647

47-
&:not(:disabled) {
48-
cursor: pointer;
48+
&:disabled {
49+
--background-color: var(--color-background-disabled);
50+
--color: var(--color-text-disabled);
51+
--border-color: var(--color-separator-light);
4952
}
5053

5154
&:not(:disabled) {
52-
&:active {
53-
// @include shadow-button-active;
54-
transform: translateY(1px);
55-
}
56-
}
57-
58-
&:not(.transparent) {
59-
&:not(:disabled) {
60-
// @include shadow-button;
61-
}
55+
cursor: pointer;
6256

6357
&.button-default {
64-
background-color: var(--color-foreground);
65-
color: var(--color-text);
66-
67-
&:focus {
68-
// @include outline-button(var(--color-separator-alt));
69-
}
70-
71-
&:not(:disabled) {
72-
border: var(--width-separator-thin) solid var(--color-separator-alt);
73-
74-
&:hover {
75-
background-color: var(--color-background-hover);
76-
// color: var(--color-text);
77-
// background-color: get-hover-color($base-color);
78-
}
79-
}
80-
// @include button-props(var(--color-foreground-alt));
58+
--color: var(--color-text);
8159
}
8260

8361
&.button-accent {
84-
@include button-props(var(--color-accent));
62+
--color: var(--color-accent);
8563
}
8664

8765
&.button-primary {
88-
@include button-props(var(--color-primary));
66+
--color: var(--color-primary);
8967
}
9068

9169
&.button-danger {
92-
@include button-props(var(--color-danger));
70+
--color: var(--color-danger);
9371
}
9472

9573
&.button-success {
96-
@include button-props(var(--color-success));
74+
--color: var(--color-success);
9775
}
9876

9977
&.button-warning {
100-
@include button-props(var(--color-warning));
78+
--color: var(--color-warning);
10179
}
10280

103-
&:disabled {
104-
background-color: var(--color-background-disabled);
105-
color: var(--color-text-disabled);
81+
&:active {
82+
transform: translateY(1px);
10683
}
107-
}
10884

109-
&.transparent {
110-
border: 0;
85+
&:not(.transparent) {
86+
--background-color: var(--color-foreground);
11187

112-
&:focus {
113-
border-bottom: 0;
114-
}
88+
&.button-default {
89+
--border-color: var(--color-separator);
90+
}
11591

116-
&.button-default {
117-
@include transparent-button-props(var(--color-text));
118-
}
92+
&.button-accent {
93+
--border-color: var(--color-accent);
94+
}
11995

120-
&.button-accent {
121-
@include transparent-button-props(var(--color-accent));
122-
}
96+
&.button-primary {
97+
--border-color: var(--color-primary);
98+
}
12399

124-
&.button-primary {
125-
@include transparent-button-props(var(--color-primary));
126-
}
100+
&.button-danger {
101+
--border-color: var(--color-danger);
102+
}
127103

128-
&.button-danger {
129-
@include transparent-button-props(var(--color-danger));
130-
}
104+
&.button-success {
105+
--border-color: var(--color-success);
106+
}
131107

132-
&.button-success {
133-
@include transparent-button-props(var(--color-success));
134-
}
108+
&.button-warning {
109+
--border-color: var(--color-warning);
110+
}
135111

136-
&.button-warning {
137-
@include transparent-button-props(var(--color-warning));
112+
&:hover {
113+
--background-color: var(--color-background-hover);
114+
}
138115
}
139116

117+
}
118+
119+
120+
&.transparent {
121+
--background-color: transparent;
122+
--border-color: transparent;
123+
140124
&:disabled {
141-
cursor: default;
142-
color: var(--color-text-disabled);
125+
--color: var(--color-text-disabled);
143126
}
144-
145127
}
146128

147129
.spinner {

0 commit comments

Comments
 (0)