Skip to content

Commit b72e07a

Browse files
eshankvaisheshankvaish
committed
feat: add disabled state
1 parent 3264057 commit b72e07a

File tree

3 files changed

+35
-134
lines changed

3 files changed

+35
-134
lines changed

‎src/Shared/Components/Button/Button.component.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,17 @@ const Button = ({
1414
text,
1515
startIcon,
1616
endIcon,
17+
disabled,
1718
}: ButtonProps) => {
1819
const iconClass = `dc__no-shrink flex dc__fill-available-space ${BUTTON_SIZE_TO_ICON_CLASS_NAME_MAP[size]}`
1920

2021
return (
2122
<button
2223
{...buttonProps}
24+
disabled={disabled}
2325
// eslint-disable-next-line react/button-has-type
2426
type={buttonProps.type || 'button'}
25-
className={`br-4 flex cursor dc__mnw-100 ${getButtonDerivedClass({ size, variant, style })} ${buttonProps.className || ''}`}
27+
className={`br-4 flex cursor dc__mnw-100 dc__tab-focus ${getButtonDerivedClass({ size, variant, style })} ${disabled ? 'dc__disabled' : ''} ${buttonProps.className || ''}`}
2628
>
2729
{startIcon && <span className={iconClass}>{startIcon}</span>}
2830
<span className="dc__mxw-150 dc__align-left dc__truncate">{text}</span>

‎src/Shared/Components/Button/button.scss

Lines changed: 29 additions & 132 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,24 @@
33
color: $text-color;
44
border: 1px solid $border-color;
55

6-
svg {
6+
svg,
7+
svg>* {
78
stroke: $text-color;
89
}
910
}
1011

12+
@mixin pseudo-states($hover-bg-color, $active-bg-color) {
13+
$parent-selector: &;
14+
15+
&:hover:enabled {
16+
background: $hover-bg-color;
17+
}
18+
19+
&:active:enabled {
20+
background: $active-bg-color;
21+
}
22+
}
23+
1124
.button {
1225
// Reset the default styles
1326
background: none;
@@ -17,81 +30,35 @@
1730
text-decoration: none;
1831
text-transform: capitalize;
1932

20-
// &:focus,
21-
// &:active,
22-
// &:hover {
23-
// outline: unset;
24-
// // border: unset;
25-
// }
26-
27-
// &:focus {
28-
// outline: auto;
29-
// }
30-
3133
&__primary {
3234
$border-color: transparent;
3335
$text-color: var(--N0);
3436

3537
&--default {
3638
@include button-variant-styles(var(--B500), $text-color, $border-color);
37-
38-
&:hover {
39-
background: var(--B600);
40-
}
41-
42-
&:active {
43-
background: var(--B700);
44-
}
39+
@include pseudo-states(var(--B600), var(--B700));
4540
}
4641

4742
&--negative {
4843
@include button-variant-styles(var(--R500), $text-color, $border-color);
49-
50-
&:hover {
51-
background: var(--R600);
52-
}
53-
54-
&:active {
55-
background: var(--R700);
56-
}
44+
@include pseudo-states(var(--R600), var(--R700));
5745
}
5846

5947
&--positive {
6048
@include button-variant-styles(var(--G500), $text-color, $border-color);
61-
62-
&:hover {
63-
background: var(--G600);
64-
}
65-
66-
&:active {
67-
background: var(--G700);
68-
}
49+
@include pseudo-states(var(--G600), var(--G700));
6950
}
7051

7152
&--warning {
7253
$text-color: var(--N900);
7354

7455
@include button-variant-styles(var(--Y500), $text-color, $border-color);
75-
76-
&:hover {
77-
background: var(--Y600);
78-
}
79-
80-
&:active {
81-
background: var(--Y700);
82-
}
56+
@include pseudo-states(var(--Y600), var(--Y700));
8357
}
8458

8559
&--neutral {
8660
@include button-variant-styles(var(--N500), $text-color, $border-color);
87-
88-
&:hover {
89-
background: var(--N600);
90-
}
91-
92-
&:active {
93-
background: var(--N700);
94-
}
61+
@include pseudo-states(var(--N600), var(--N700));
9562
}
9663
}
9764

@@ -101,62 +68,27 @@
10168

10269
&--default {
10370
@include button-variant-styles($background, var(--B500), $border-color);
104-
105-
&:hover {
106-
background: var(--B100);
107-
}
108-
109-
&:active {
110-
background: var(--B200);
111-
}
71+
@include pseudo-states(var(--B100), var(--B200));
11272
}
11373

11474
&--negative {
11575
@include button-variant-styles($background, var(--R600), $border-color);
116-
117-
&:hover {
118-
background: var(--R100);
119-
}
120-
121-
&:active {
122-
background: var(--R200);
123-
}
76+
@include pseudo-states(var(--R100), var(--R200));
12477
}
12578

12679
&--positive {
12780
@include button-variant-styles($background, var(--G600), $border-color);
128-
129-
&:hover {
130-
background: var(--G100);
131-
}
132-
133-
&:active {
134-
background: var(--G200);
135-
}
81+
@include pseudo-states(var(--G100), var(--G200));
13682
}
13783

13884
&--warning {
13985
@include button-variant-styles($background, var(--Y700), $border-color);
140-
141-
&:hover {
142-
background: var(--Y100);
143-
}
144-
145-
&:active {
146-
background: var(--Y200);
147-
}
86+
@include pseudo-states(var(--Y100), var(--Y200));
14887
}
14988

15089
&--neutral {
15190
@include button-variant-styles($background, var(--N700), $border-color);
152-
153-
&:hover {
154-
background: var(--N100);
155-
}
156-
157-
&:active {
158-
background: var(--N200);
159-
}
91+
@include pseudo-states(var(--N100), var(--N200));
16092
}
16193
}
16294

@@ -188,58 +120,23 @@
188120

189121
&__text {
190122
&--default {
191-
192-
&:hover {
193-
background: var(--B100);
194-
}
195-
196-
&:active {
197-
background: var(--B200);
198-
}
123+
@include pseudo-states(var(--B100), var(--B200));
199124
}
200125

201126
&--negative {
202-
203-
&:hover {
204-
background: var(--R100);
205-
}
206-
207-
&:active {
208-
background: var(--R200);
209-
}
127+
@include pseudo-states(var(--R100), var(--R200));
210128
}
211129

212130
&--positive {
213-
214-
&:hover {
215-
background: var(--G100);
216-
}
217-
218-
&:active {
219-
background: var(--G200);
220-
}
131+
@include pseudo-states(var(--G100), var(--G200));
221132
}
222133

223134
&--warning {
224-
225-
&:hover {
226-
background: var(--Y100);
227-
}
228-
229-
&:active {
230-
background: var(--Y200);
231-
}
135+
@include pseudo-states(var(--Y100), var(--Y200));
232136
}
233137

234138
&--neutral {
235-
236-
&:hover {
237-
background: var(--N100);
238-
}
239-
240-
&:active {
241-
background: var(--N200);
242-
}
139+
@include pseudo-states(var(--N100), var(--N200));
243140
}
244141
}
245142

‎src/Shared/Components/Button/types.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,13 @@ export enum ButtonStyleType {
1717
}
1818

1919
export interface ButtonProps {
20-
buttonProps?: ButtonHTMLAttributes<HTMLButtonElement>
20+
buttonProps?: Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'disabled'>
2121
variant?: ButtonVariantType
2222
size?: ComponentSizeType
2323
style?: ButtonStyleType
2424
text: string
2525
startIcon?: ReactElement
2626
endIcon?: ReactElement
27+
disabled?: boolean
28+
isLoading?: boolean
2729
}

0 commit comments

Comments
 (0)