Skip to content

Commit 37fc29c

Browse files
arsengitarsengit
committed
[feat] Create ToggleButton component for UI kit v2 (#2572)
1 parent 629b6b8 commit 37fc29c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

87 files changed

+6017
-3347
lines changed

‎aim/web/ui/package-lock.json

+3,393-1,550
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎aim/web/ui/package.json

+3-3
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,15 @@
1313
"@radix-ui/react-dialog": "^1.0.2",
1414
"@radix-ui/react-popover": "^1.0.2",
1515
"@radix-ui/react-radio-group": "^1.1.0",
16-
"@radix-ui/react-slider": "^1.1.0",
1716
"@radix-ui/react-separator": "^1.0.1",
17+
"@radix-ui/react-slider": "^1.1.0",
1818
"@radix-ui/react-slot": "^1.0.1",
19-
"@radix-ui/react-switch": "^1.0.1",
19+
"@radix-ui/react-switch": "^1.0.1",
2020
"@radix-ui/react-toast": "^1.1.2",
2121
"@radix-ui/react-tooltip": "^1.0.3",
2222
"@stitches/react": "^1.2.8",
2323
"@storybook/react": "^6.5.12",
24-
"@tabler/icons": "^1.110.0",
24+
"@tabler/icons-react": "^2.2.0",
2525
"@uiw/react-textarea-code-editor": "^1.4.14",
2626
"antd": "^4.23.6",
2727
"bs58check": "^2.1.2",

‎aim/web/ui/src/components/kit_v2/Badge/Badge.d.ts

+7-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ColorPaletteEnum } from 'config/stitches/stitches.config';
1+
import { CSS, ColorPaletteType } from 'config/stitches/types';
22

33
export interface IBadgeProps {
44
/**
@@ -9,7 +9,7 @@ export interface IBadgeProps {
99
* @description Badge color
1010
* @default 'primary'
1111
*/
12-
color?: ColorPaletteEnum;
12+
color?: ColorPaletteType;
1313
/**
1414
* @description Badge size
1515
* @default 'md'
@@ -32,4 +32,9 @@ export interface IBadgeProps {
3232
* @type boolean
3333
*/
3434
monospace?: boolean;
35+
/**
36+
* @description Badge stitches css prop object
37+
* @example { backgroundColor: 'red' }
38+
*/
39+
css?: CSS;
3540
}

‎aim/web/ui/src/components/kit_v2/Badge/Badge.style.ts

+106
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import Icon from 'components/kit_v2/Icon';
2+
3+
import { styled } from 'config/stitches';
4+
import { CSS } from 'config/stitches/types';
5+
6+
function getColors({
7+
color,
8+
disabled,
9+
}: {
10+
color: string | undefined;
11+
disabled: boolean;
12+
}): CSS {
13+
if (color) {
14+
return {
15+
bc: `$${color}${disabled ? 50 : 70}`,
16+
'&:hover': {
17+
bc: `$${color}80`,
18+
},
19+
};
20+
}
21+
return {
22+
bc: 'white',
23+
bs: '0 0 0 1px $colors$secondary50',
24+
color: disabled ? '$textPrimary50' : '$textPrimary',
25+
'&:hover': {
26+
bc: '$colors$secondary10',
27+
},
28+
};
29+
}
30+
31+
const BadgeContainer = styled('div', {
32+
width: 'fit-content',
33+
display: 'inline-flex',
34+
ai: 'center',
35+
br: '$3',
36+
color: '$textPrimary',
37+
fontWeight: '$2',
38+
lineHeight: '1',
39+
transition: 'all 0.2s ease-out',
40+
variants: {
41+
font: {
42+
mono: {
43+
fontMono: 14,
44+
},
45+
default: {
46+
fontSize: '$3',
47+
},
48+
},
49+
rightIcon: { true: {} },
50+
size: {
51+
xs: {
52+
height: '$1',
53+
p: '0 $4',
54+
},
55+
sm: {
56+
height: '$2',
57+
p: '0 $4',
58+
},
59+
md: {
60+
height: '$3',
61+
p: '0 $6',
62+
},
63+
lg: {
64+
height: '$5',
65+
p: '0 $6',
66+
},
67+
},
68+
disabled: {
69+
true: {
70+
userSelect: 'none',
71+
cursor: 'not-allowed',
72+
pointerEvents: 'none',
73+
color: '$textPrimary50',
74+
},
75+
},
76+
},
77+
compoundVariants: [
78+
{
79+
rightIcon: true,
80+
css: {
81+
pr: '0',
82+
},
83+
},
84+
],
85+
});
86+
87+
const RightIcon: any = styled(Icon, {
88+
display: 'flex',
89+
ai: 'center',
90+
jc: 'center',
91+
size: '$1',
92+
ml: '$2',
93+
fontFamily: '$mono',
94+
cursor: 'pointer',
95+
userSelect: 'none',
96+
variants: {
97+
inputSize: {
98+
xs: { mr: '$2' },
99+
sm: { mr: '$2' },
100+
md: { mr: '$4' },
101+
lg: { mr: '$4' },
102+
},
103+
},
104+
});
105+
106+
export { BadgeContainer, RightIcon, getColors };

‎aim/web/ui/src/components/kit_v2/Badge/Badge.tsx

+10-104
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,17 @@
11
import React from 'react';
22

3-
import ErrorBoundary from 'components/ErrorBoundary/ErrorBoundary';
4-
import Icon from 'components/kit/Icon';
3+
import { IconX } from '@tabler/icons-react';
54

6-
import { ColorPaletteEnum, styled } from 'config/stitches/stitches.config';
5+
import ErrorBoundary from 'components/ErrorBoundary/ErrorBoundary';
76

87
import { IBadgeProps } from './Badge.d';
9-
10-
const getColors = (color: string, disabled: boolean) => {
11-
if (color) {
12-
return {
13-
bc: `$${color}${disabled ? 50 : 70}`,
14-
'&:hover': {
15-
bc: `$${color}80`,
16-
},
17-
};
18-
}
19-
return {
20-
bc: 'white',
21-
bs: '0 0 0 1px $colors$secondary50',
22-
color: disabled ? '$textPrimary50' : '$textPrimary',
23-
'&:hover': {
24-
bc: '$colors$secondary10',
25-
},
26-
};
27-
};
28-
29-
const BadgeContainer = styled('div', {
30-
width: 'fit-content',
31-
display: 'inline-flex',
32-
ai: 'center',
33-
br: '$3',
34-
color: '$textPrimary',
35-
fontWeight: '$2',
36-
lineHeight: '1',
37-
transition: 'all 0.2s ease-out',
38-
variants: {
39-
font: {
40-
mono: {
41-
fontMono: 14,
42-
},
43-
default: {
44-
fontSize: '$3',
45-
},
46-
},
47-
rightIcon: { true: {} },
48-
size: {
49-
xs: {
50-
height: '$1',
51-
p: '0 $4',
52-
},
53-
sm: {
54-
height: '$2',
55-
p: '0 $4',
56-
},
57-
md: {
58-
height: '$3',
59-
p: '0 $6',
60-
},
61-
lg: {
62-
height: '$5',
63-
p: '0 $6',
64-
},
65-
},
66-
disabled: {
67-
true: {
68-
userSelect: 'none',
69-
cursor: 'not-allowed',
70-
pointerEvents: 'none',
71-
color: '$textPrimary50',
72-
},
73-
},
74-
},
75-
compoundVariants: [
76-
{
77-
rightIcon: true,
78-
css: {
79-
pr: '0',
80-
},
81-
},
82-
],
83-
});
84-
85-
const RightIcon = styled(Icon, {
86-
display: 'flex',
87-
ai: 'center',
88-
jc: 'center',
89-
size: '$1',
90-
ml: '$2',
91-
fontFamily: '$mono',
92-
cursor: 'pointer',
93-
userSelect: 'none',
94-
variants: {
95-
size: {
96-
xs: { mr: '$2' },
97-
sm: { mr: '$2' },
98-
md: { mr: '$4' },
99-
lg: { mr: '$4' },
100-
},
101-
},
102-
});
8+
import { BadgeContainer, getColors, RightIcon } from './Badge.style';
1039

10410
/**
10511
* Badge component params
10612
* @param {string} label - Label of the badge
10713
* @param {string} size - Size of the badge
108-
* @param {ColorPaletteEnum} color - Color of the badge
14+
* @param {ColorPaletteType} color - Color of the badge
10915
* @param {boolean} disabled - Disabled state of the badge
11016
* @param {boolean} monospace - Monospace font of the badge
11117
* @param {function} onDelete - Callback function for delete action
@@ -119,7 +25,8 @@ const Badge = React.forwardRef<
11925
{
12026
label,
12127
size = 'md',
122-
color = ColorPaletteEnum.pink,
28+
color,
29+
css,
12330
monospace = false,
12431
disabled = false,
12532
onDelete,
@@ -132,7 +39,7 @@ const Badge = React.forwardRef<
13239
<BadgeContainer
13340
{...rest}
13441
size={size}
135-
css={getColors(color, disabled)}
42+
css={{ ...css, ...getColors({ color, disabled }) }}
13643
role='button'
13744
font={monospace ? 'mono' : 'default'}
13845
rightIcon={!!onDelete}
@@ -143,9 +50,9 @@ const Badge = React.forwardRef<
14350
{onDelete ? (
14451
<RightIcon
14552
role='button'
146-
name='close'
147-
fontSize={10}
148-
size={size}
53+
icon={<IconX />}
54+
inputSize={size}
55+
size='md'
14956
onClick={() => onDelete(label)}
15057
/>
15158
) : null}
@@ -156,5 +63,4 @@ const Badge = React.forwardRef<
15663
);
15764

15865
Badge.displayName = 'Badge';
159-
16066
export default Badge;

0 commit comments

Comments
 (0)