Skip to content

Commit 9c0c0c1

Browse files
juliajforestijuliajforesti
authored
fix: colors and button flags (#750)
1 parent 17012f8 commit 9c0c0c1

File tree

11 files changed

+68
-100
lines changed

11 files changed

+68
-100
lines changed

‎packages/fuselage/src/components/Button/Button.stories.tsx

+15-14
Original file line numberDiff line numberDiff line change
@@ -54,23 +54,23 @@ export const Variants: ComponentStory<typeof Button> = () => (
5454
<Button m='2px' danger>
5555
Danger
5656
</Button>
57-
<Button m='2px' secondaryDanger>
57+
<Button m='2px' secondary danger>
5858
Secondary Danger
5959
</Button>
6060
</Box>
6161
<Box display='flex' flexDirection='column'>
6262
<Button m='2px' warning>
6363
Warning
6464
</Button>
65-
<Button m='2px' secondaryWarning>
65+
<Button m='2px' secondary warning>
6666
Secondary Warning
6767
</Button>
6868
</Box>
6969
<Box display='flex' flexDirection='column'>
7070
<Button m='2px' success>
7171
Success
7272
</Button>
73-
<Button m='2px' secondarySuccess>
73+
<Button m='2px' secondary success>
7474
Secondary Success
7575
</Button>
7676
</Box>
@@ -147,23 +147,26 @@ export const States = () => (
147147
},
148148
'secondary-danger': {
149149
children: 'Button',
150-
secondaryDanger: true,
150+
secondary: true,
151+
danger: true,
151152
},
152153
'warning': {
153154
children: 'Button',
154155
warning: true,
155156
},
156157
'secondary-warning': {
157158
children: 'Button',
158-
secondaryWarning: true,
159+
secondary: true,
160+
warning: true,
159161
},
160162
'success': {
161163
children: 'Button',
162164
success: true,
163165
},
164166
'secondary-success': {
165167
children: 'Button',
166-
secondarySuccess: true,
168+
secondary: true,
169+
success: true,
167170
},
168171
}}
169172
/>
@@ -209,23 +212,26 @@ export const States = () => (
209212
},
210213
'secondary-danger': {
211214
children: 'Button',
212-
secondaryDanger: true,
215+
secondary: true,
216+
danger: true,
213217
},
214218
'warning': {
215219
children: 'Button',
216220
warning: true,
217221
},
218222
'secondary-warning': {
219223
children: 'Button',
220-
secondaryWarning: true,
224+
secondary: true,
225+
warning: true,
221226
},
222227
'success': {
223228
children: 'Button',
224229
success: true,
225230
},
226231
'secondary-success': {
227232
children: 'Button',
228-
secondarySuccess: true,
233+
secondary: true,
234+
success: true,
229235
},
230236
}}
231237
/>
@@ -235,8 +241,3 @@ export const States = () => (
235241
export const AsIconButton: ComponentStory<typeof IconButton> = (args) => (
236242
<IconButton {...args} icon='arrow-back' onClick={action('click')} />
237243
);
238-
239-
// export const Variants = Group.bind({});
240-
// export const Variants = Group.bind({});
241-
// export const Variants = Group.bind({});
242-
// export const Variants = Group.bind({});

‎packages/fuselage/src/components/Button/Button.tsx

+8-22
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,8 @@ export type ButtonProps = ComponentProps<typeof Box> & {
77
primary?: boolean;
88
secondary?: boolean;
99
danger?: boolean;
10-
secondaryDanger?: boolean;
1110
warning?: boolean;
12-
secondaryWarning?: boolean;
1311
success?: boolean;
14-
secondarySuccess?: boolean;
1512

1613
disabled?: boolean;
1714
small?: boolean;
@@ -26,11 +23,8 @@ export const Button = forwardRef(function Button(
2623
primary,
2724
secondary,
2825
danger,
29-
secondaryDanger,
3026
warning,
31-
secondaryWarning,
3227
success,
33-
secondarySuccess,
3428
external,
3529
is = 'button',
3630
rel: _rel,
@@ -55,31 +49,23 @@ export const Button = forwardRef(function Button(
5549
const kindAndVariantProps = useMemo(() => {
5650
const variant =
5751
(primary && 'primary') ||
58-
(secondary && 'secondary') ||
59-
(danger && 'danger') ||
60-
(secondaryDanger && 'secondary-danger') ||
61-
(warning && 'warning') ||
62-
(secondaryWarning && 'secondary-warning') ||
52+
(secondary && success && 'secondary-success') ||
53+
(secondary && warning && 'secondary-warning') ||
54+
(secondary && danger && 'secondary-danger') ||
6355
(success && 'success') ||
64-
(secondarySuccess && 'secondary-success');
56+
(warning && 'warning') ||
57+
(danger && 'danger') ||
58+
(secondary && 'secondary');
6559

60+
console.log(variant);
6661
if (variant) {
6762
return {
6863
[`rcx-button--${[variant].filter(Boolean).join('-')}`]: true,
6964
};
7065
}
7166

7267
return {};
73-
}, [
74-
primary,
75-
secondary,
76-
secondaryDanger,
77-
danger,
78-
warning,
79-
secondaryWarning,
80-
success,
81-
secondarySuccess,
82-
]);
68+
}, [primary, secondary, danger, warning, success]);
8369

8470
return (
8571
<Box

‎packages/fuselage/src/components/Button/IconButton.stories.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -46,25 +46,25 @@ export const _IconButtonInfo: ComponentStory<typeof IconButton> = () => (
4646
);
4747
export const _IconButtonSecondaryInfo: ComponentStory<
4848
typeof IconButton
49-
> = () => <IconButton icon='balloon' secondaryInfo />;
49+
> = () => <IconButton icon='balloon' secondary info />;
5050

5151
export const _IconButtonSuccess: ComponentStory<typeof IconButton> = () => (
5252
<IconButton icon='balloon' success />
5353
);
5454
export const _IconButtonSecondarySuccess: ComponentStory<
5555
typeof IconButton
56-
> = () => <IconButton icon='balloon' secondarySuccess />;
56+
> = () => <IconButton icon='balloon' secondary success />;
5757

5858
export const _IconButtonWarning: ComponentStory<typeof IconButton> = () => (
5959
<IconButton icon='balloon' warning />
6060
);
6161
export const _IconButtonSecondaryWarning: ComponentStory<
6262
typeof IconButton
63-
> = () => <IconButton icon='balloon' secondaryWarning />;
63+
> = () => <IconButton icon='balloon' secondary warning />;
6464

6565
export const _IconButtonDanger: ComponentStory<typeof IconButton> = () => (
6666
<IconButton icon='balloon' danger />
6767
);
6868
export const _IconButtonSecondaryDanger: ComponentStory<
6969
typeof IconButton
70-
> = () => <IconButton icon='balloon' secondaryDanger />;
70+
> = () => <IconButton icon='balloon' secondary danger />;

‎packages/fuselage/src/components/Button/IconButton.tsx

+8-27
Original file line numberDiff line numberDiff line change
@@ -18,13 +18,9 @@ type IconButtonProps = ComponentProps<typeof Box> &
1818
primary?: boolean;
1919
secondary?: boolean;
2020
info?: boolean;
21-
secondaryInfo?: boolean;
2221
danger?: boolean;
23-
secondaryDanger?: boolean;
2422
warning?: boolean;
25-
secondaryWarning?: boolean;
2623
success?: boolean;
27-
secondarySuccess?: boolean;
2824
};
2925

3026
const getSize = ({ mini }: ButtonSize) => (mini ? 'x16' : 'x20');
@@ -37,13 +33,9 @@ export const IconButton = forwardRef(
3733
primary,
3834
info,
3935
secondary,
40-
secondaryInfo,
4136
danger,
42-
secondaryDanger,
4337
warning,
44-
secondaryWarning,
4538
success,
46-
secondarySuccess,
4739
square,
4840
small,
4941
tiny,
@@ -54,15 +46,15 @@ export const IconButton = forwardRef(
5446
) => {
5547
const kindAndVariantProps = useMemo(() => {
5648
const variant =
49+
(secondary && info && 'secondary-info') ||
50+
(secondary && danger && 'secondary-danger') ||
51+
(secondary && warning && 'secondary-warning') ||
52+
(secondary && success && 'secondary-success') ||
5753
((primary || info) && 'info') ||
58-
(secondary && 'secondary') ||
59-
(secondaryInfo && 'secondary-info') ||
60-
(danger && 'danger') ||
61-
(secondaryDanger && 'secondary-danger') ||
62-
(warning && 'warning') ||
63-
(secondaryWarning && 'secondary-warning') ||
6454
(success && 'success') ||
65-
(secondarySuccess && 'secondary-success');
55+
(warning && 'warning') ||
56+
(danger && 'danger') ||
57+
(secondary && 'secondary');
6658

6759
if (variant) {
6860
return {
@@ -71,18 +63,7 @@ export const IconButton = forwardRef(
7163
}
7264

7365
return {};
74-
}, [
75-
primary,
76-
info,
77-
secondary,
78-
secondaryInfo,
79-
danger,
80-
secondaryDanger,
81-
warning,
82-
secondaryWarning,
83-
success,
84-
secondarySuccess,
85-
]);
66+
}, [primary, info, secondary, danger, warning, success]);
8667

8768
return (
8869
<Box

‎packages/fuselage/src/components/Sidebar/Item.stories.tsx

+9-9
Original file line numberDiff line numberDiff line change
@@ -65,9 +65,9 @@ export const Default: ComponentStory<typeof SidebarItem> = () => (
6565
</SidebarItemContent>
6666
<SidebarItemContainer>
6767
<SidebarItemActions>
68-
<SidebarItemAction secondarySuccess icon='phone' />
69-
<SidebarItemAction secondaryDanger icon='circle-cross' />
70-
<SidebarItemAction secondaryInfo icon='trash' />
68+
<SidebarItemAction secondary success icon='phone' />
69+
<SidebarItemAction secondary danger icon='circle-cross' />
70+
<SidebarItemAction secondary info icon='trash' />
7171
<SidebarItemAction secondary icon='phone' />
7272
</SidebarItemActions>
7373
</SidebarItemContainer>
@@ -92,9 +92,9 @@ export const Default: ComponentStory<typeof SidebarItem> = () => (
9292
</SidebarItemContent>
9393
<SidebarItemContainer>
9494
<SidebarItemActions>
95-
<SidebarItemAction secondarySuccess icon='phone' />
96-
<SidebarItemAction secondaryDanger icon='circle-cross' />
97-
<SidebarItemAction secondaryInfo icon='trash' />
95+
<SidebarItemAction secondary success icon='phone' />
96+
<SidebarItemAction secondary danger icon='circle-cross' />
97+
<SidebarItemAction secondary info icon='trash' />
9898
<SidebarItemAction secondary icon='phone' />
9999
</SidebarItemActions>
100100
</SidebarItemContainer>
@@ -129,9 +129,9 @@ export const Default: ComponentStory<typeof SidebarItem> = () => (
129129
</SidebarItemContent>
130130
<SidebarItemContainer>
131131
<SidebarItemActions>
132-
<SidebarItemAction secondarySuccess icon='phone' />
133-
<SidebarItemAction secondaryDanger icon='circle-cross' />
134-
<SidebarItemAction secondaryInfo icon='trash' />
132+
<SidebarItemAction secondary success icon='phone' />
133+
<SidebarItemAction secondary danger icon='circle-cross' />
134+
<SidebarItemAction secondary info icon='trash' />
135135
<SidebarItemAction secondary icon='phone' />
136136
</SidebarItemActions>
137137
</SidebarItemContainer>

‎packages/fuselage/src/components/Sidebar/Sidebar.stories.tsx

+19-19
Original file line numberDiff line numberDiff line change
@@ -91,9 +91,9 @@ export const Default: ComponentStory<typeof Sidebar> = () => (
9191
</SidebarItemContent>
9292
<SidebarItemContainer>
9393
<SidebarItemActions>
94-
<SidebarItemAction secondarySuccess icon='phone' />
95-
<SidebarItemAction secondaryDanger icon='circle-cross' />
96-
<SidebarItemAction secondaryInfo icon='trash' />
94+
<SidebarItemAction secondary success icon='phone' />
95+
<SidebarItemAction secondary danger icon='circle-cross' />
96+
<SidebarItemAction secondary info icon='trash' />
9797
<SidebarItemAction icon='phone' secondary />
9898
</SidebarItemActions>
9999
</SidebarItemContainer>
@@ -118,9 +118,9 @@ export const Default: ComponentStory<typeof Sidebar> = () => (
118118
</SidebarItemContent>
119119
<SidebarItemContainer>
120120
<SidebarItemActions>
121-
<SidebarItemAction secondarySuccess icon='phone' />
122-
<SidebarItemAction secondaryDanger icon='circle-cross' />
123-
<SidebarItemAction secondaryInfo icon='trash' />
121+
<SidebarItemAction secondary success icon='phone' />
122+
<SidebarItemAction secondary danger icon='circle-cross' />
123+
<SidebarItemAction secondary info icon='trash' />
124124
<SidebarItemAction icon='phone' secondary />
125125
</SidebarItemActions>
126126
</SidebarItemContainer>
@@ -155,9 +155,9 @@ export const Default: ComponentStory<typeof Sidebar> = () => (
155155
</SidebarItemContent>
156156
<SidebarItemContainer>
157157
<SidebarItemActions>
158-
<SidebarItemAction secondarySuccess icon='phone' />
159-
<SidebarItemAction secondaryDanger icon='circle-cross' />
160-
<SidebarItemAction secondaryInfo icon='trash' />
158+
<SidebarItemAction secondary success icon='phone' />
159+
<SidebarItemAction secondary danger icon='circle-cross' />
160+
<SidebarItemAction secondary info icon='trash' />
161161
<SidebarItemAction icon='phone' secondary />
162162
</SidebarItemActions>
163163
</SidebarItemContainer>
@@ -218,9 +218,9 @@ export const WithFooter: ComponentStory<typeof Sidebar> = () => (
218218
</SidebarItemContent>
219219
<SidebarItemContainer>
220220
<SidebarItemActions>
221-
<SidebarItemAction secondarySuccess icon='phone' />
222-
<SidebarItemAction secondaryDanger icon='circle-cross' />
223-
<SidebarItemAction secondaryInfo icon='trash' />
221+
<SidebarItemAction secondary success icon='phone' />
222+
<SidebarItemAction secondary danger icon='circle-cross' />
223+
<SidebarItemAction secondary info icon='trash' />
224224
<SidebarItemAction icon='phone' secondary />
225225
</SidebarItemActions>
226226
</SidebarItemContainer>
@@ -245,9 +245,9 @@ export const WithFooter: ComponentStory<typeof Sidebar> = () => (
245245
</SidebarItemContent>
246246
<SidebarItemContainer>
247247
<SidebarItemActions>
248-
<SidebarItemAction secondarySuccess icon='phone' />
249-
<SidebarItemAction secondaryDanger icon='circle-cross' />
250-
<SidebarItemAction secondaryInfo icon='trash' />
248+
<SidebarItemAction secondary success icon='phone' />
249+
<SidebarItemAction secondary danger icon='circle-cross' />
250+
<SidebarItemAction secondary info icon='trash' />
251251
<SidebarItemAction icon='phone' secondary />
252252
</SidebarItemActions>
253253
</SidebarItemContainer>
@@ -282,9 +282,9 @@ export const WithFooter: ComponentStory<typeof Sidebar> = () => (
282282
</SidebarItemContent>
283283
<SidebarItemContainer>
284284
<SidebarItemActions>
285-
<SidebarItemAction secondarySuccess icon='phone' />
286-
<SidebarItemAction secondaryDanger icon='circle-cross' />
287-
<SidebarItemAction secondaryInfo icon='trash' />
285+
<SidebarItemAction secondary success icon='phone' />
286+
<SidebarItemAction secondary danger icon='circle-cross' />
287+
<SidebarItemAction secondary info icon='trash' />
288288
<SidebarItemAction icon='phone' secondary />
289289
</SidebarItemActions>
290290
</SidebarItemContainer>
@@ -336,7 +336,7 @@ export const WithFooter: ComponentStory<typeof Sidebar> = () => (
336336
</SidebarItemContent>
337337
<SidebarItemContainer>
338338
<SidebarItemActions>
339-
<SidebarItemAction secondaryDanger icon='phone-off' />
339+
<SidebarItemAction secondary danger icon='phone-off' />
340340
</SidebarItemActions>
341341
</SidebarItemContainer>
342342
</SidebarItem>

‎packages/fuselage/src/components/StatusBullet/icons/away.svg

+1-1
Loading

0 commit comments

Comments
 (0)