@apify/ui-library 1.90.1 → 1.92.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/src/components/badge.d.ts +1 -1
- package/dist/src/components/badge.d.ts.map +1 -1
- package/dist/src/components/badge.js +11 -6
- package/dist/src/components/badge.js.map +1 -1
- package/dist/tsconfig.build.tsbuildinfo +1 -1
- package/package.json +3 -3
- package/src/components/badge.stories.jsx +6 -0
- package/src/components/badge.tsx +12 -7
- package/src/components/button.stories.jsx +17 -19
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@apify/ui-library",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.92.0",
|
|
4
4
|
"description": "React UI library used by apify.com",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"type": "module",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"It's not nice, but helps us to get around the problem of multiple react instances."
|
|
27
27
|
],
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@apify/ui-icons": "^1.
|
|
29
|
+
"@apify/ui-icons": "^1.16.0",
|
|
30
30
|
"@floating-ui/react": "^0.26.2",
|
|
31
31
|
"@react-hook/resize-observer": "^2.0.2",
|
|
32
32
|
"clsx": "^2.0.0",
|
|
@@ -66,5 +66,5 @@
|
|
|
66
66
|
"src",
|
|
67
67
|
"style"
|
|
68
68
|
],
|
|
69
|
-
"gitHead": "
|
|
69
|
+
"gitHead": "11dbfebf682791f049f490ff208aec3eb7475170"
|
|
70
70
|
}
|
package/src/components/badge.tsx
CHANGED
|
@@ -10,17 +10,19 @@ import { Box, type MarginSpacingProps, type RegularBoxProps } from './box.js';
|
|
|
10
10
|
import { Text } from './text/index.js';
|
|
11
11
|
import type { SharedTextSize, SharedTextType } from './text/text_shared.js';
|
|
12
12
|
|
|
13
|
-
export type BadgeSize = 'regular' | 'small' | 'extra_small';
|
|
14
|
-
export const BADGE_SIZES: BadgeSize[] = ['regular', 'small'];
|
|
13
|
+
export type BadgeSize = 'large' | 'regular' | 'small' | 'extra_small';
|
|
14
|
+
export const BADGE_SIZES: BadgeSize[] = ['large', 'regular', 'small', 'extra_small'];
|
|
15
15
|
|
|
16
16
|
const BADGE_ICON_SIZES = {
|
|
17
|
-
|
|
17
|
+
large: '16',
|
|
18
|
+
regular: '12',
|
|
18
19
|
small: '12',
|
|
19
20
|
extra_small: '12',
|
|
20
21
|
} satisfies Record<BadgeSize, IconSize>;
|
|
21
22
|
|
|
22
23
|
const BADGE_TEXT_SIZES = {
|
|
23
|
-
|
|
24
|
+
large: 'regular',
|
|
25
|
+
regular: 'small',
|
|
24
26
|
small: 'small',
|
|
25
27
|
extra_small: 'small',
|
|
26
28
|
} satisfies Record<BadgeSize, SharedTextSize>;
|
|
@@ -38,18 +40,21 @@ export type BadgeProps = SharedBadgeProps & {
|
|
|
38
40
|
};
|
|
39
41
|
|
|
40
42
|
const badgeSizeStyle = {
|
|
41
|
-
|
|
43
|
+
large: css`
|
|
42
44
|
padding: ${theme.space.space4} ${theme.space.space8};
|
|
43
45
|
border-radius: ${theme.radius.radius6};
|
|
44
46
|
`,
|
|
47
|
+
regular: css`
|
|
48
|
+
padding: ${theme.space.space4} ${theme.space.space6};
|
|
49
|
+
border-radius: ${theme.radius.radius4};
|
|
50
|
+
`,
|
|
45
51
|
small: css`
|
|
46
|
-
height: 2rem;
|
|
47
52
|
padding: ${theme.space.space2} ${theme.space.space6};
|
|
48
53
|
border-radius: ${theme.radius.radius4};
|
|
49
54
|
`,
|
|
50
55
|
extra_small: css`
|
|
51
56
|
height: ${theme.space.space16};
|
|
52
|
-
padding:
|
|
57
|
+
padding: 0 ${theme.space.space4};
|
|
53
58
|
border-radius: ${theme.radius.radius4};
|
|
54
59
|
`,
|
|
55
60
|
} satisfies Record<BadgeSize, FlattenSimpleInterpolation>;
|
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
1
|
import styled from 'styled-components';
|
|
3
2
|
|
|
4
|
-
|
|
5
|
-
import { X16 } from '@apify/icons';
|
|
3
|
+
import { CrossIcon } from '@apify/ui-icons';
|
|
6
4
|
|
|
7
5
|
import { theme } from '../design_system/theme.ts';
|
|
8
6
|
import { Button } from './button.tsx';
|
|
@@ -53,50 +51,50 @@ const ButtonSection = ({
|
|
|
53
51
|
|
|
54
52
|
<h6>With leading icon</h6>
|
|
55
53
|
<ButtonGrid>
|
|
56
|
-
<Button {...props} LeftIcon={
|
|
57
|
-
<Button {...props} LeftIcon={
|
|
58
|
-
<Button {...props} LeftIcon={
|
|
59
|
-
<Button {...props} LeftIcon={
|
|
54
|
+
<Button {...props} LeftIcon={CrossIcon} variant='primary'>Primary</Button>
|
|
55
|
+
<Button {...props} LeftIcon={CrossIcon} variant='secondary'>Secondary</Button>
|
|
56
|
+
<Button {...props} LeftIcon={CrossIcon} variant='tertiary'>Tertiary</Button>
|
|
57
|
+
<Button {...props} LeftIcon={CrossIcon} disabled>Disabled</Button>
|
|
60
58
|
</ButtonGrid>
|
|
61
59
|
|
|
62
60
|
<h6>With trailing icon</h6>
|
|
63
61
|
<ButtonGrid>
|
|
64
|
-
<Button {...props} RightIcon={
|
|
65
|
-
<Button {...props} RightIcon={
|
|
66
|
-
<Button {...props} RightIcon={
|
|
67
|
-
<Button {...props} RightIcon={
|
|
62
|
+
<Button {...props} RightIcon={CrossIcon} variant='primary'>Primary</Button>
|
|
63
|
+
<Button {...props} RightIcon={CrossIcon} variant='secondary'>Secondary</Button>
|
|
64
|
+
<Button {...props} RightIcon={CrossIcon} variant='tertiary'>Tertiary</Button>
|
|
65
|
+
<Button {...props} RightIcon={CrossIcon} disabled>Disabled</Button>
|
|
68
66
|
</ButtonGrid>
|
|
69
67
|
|
|
70
68
|
<h6>With both icons</h6>
|
|
71
69
|
<ButtonGrid>
|
|
72
70
|
<Button
|
|
73
71
|
{...props}
|
|
74
|
-
RightIcon={
|
|
75
|
-
LeftIcon={
|
|
72
|
+
RightIcon={CrossIcon}
|
|
73
|
+
LeftIcon={CrossIcon}
|
|
76
74
|
variant='primary'
|
|
77
75
|
>
|
|
78
76
|
Primary test
|
|
79
77
|
</Button>
|
|
80
78
|
<Button
|
|
81
79
|
{...props}
|
|
82
|
-
RightIcon={
|
|
83
|
-
LeftIcon={
|
|
80
|
+
RightIcon={CrossIcon}
|
|
81
|
+
LeftIcon={CrossIcon}
|
|
84
82
|
variant='secondary'
|
|
85
83
|
>
|
|
86
84
|
Secondary
|
|
87
85
|
</Button>
|
|
88
86
|
<Button
|
|
89
87
|
{...props}
|
|
90
|
-
RightIcon={
|
|
91
|
-
LeftIcon={
|
|
88
|
+
RightIcon={CrossIcon}
|
|
89
|
+
LeftIcon={CrossIcon}
|
|
92
90
|
variant='tertiary'
|
|
93
91
|
>
|
|
94
92
|
Tertiary
|
|
95
93
|
</Button>
|
|
96
94
|
<Button
|
|
97
95
|
{...props}
|
|
98
|
-
RightIcon={
|
|
99
|
-
LeftIcon={
|
|
96
|
+
RightIcon={CrossIcon}
|
|
97
|
+
LeftIcon={CrossIcon}
|
|
100
98
|
disabled
|
|
101
99
|
>
|
|
102
100
|
Disabled
|