@bitrise/bitkit 12.68.0 → 12.69.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/package.json +1 -1
- package/src/Components/Icons/Icons.tsx +70 -11
package/package.json
CHANGED
|
@@ -19,6 +19,44 @@ import FilterSwitch from '../Form/FilterSwitch/FilterSwitch';
|
|
|
19
19
|
import * as bigIcons from './24x24';
|
|
20
20
|
import { FigmaIcon, figmaIcons } from './figmaIcons';
|
|
21
21
|
|
|
22
|
+
const iconSizeTooltipSytle: SystemStyleObject = {
|
|
23
|
+
backgroundColor: 'purple.50',
|
|
24
|
+
color: 'neutral.100',
|
|
25
|
+
borderRadius: '3px',
|
|
26
|
+
position: 'absolute',
|
|
27
|
+
fontSize: '8px',
|
|
28
|
+
padding: '2px 4px',
|
|
29
|
+
lineHeight: '8px',
|
|
30
|
+
display: 'none',
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
const iconSizeTooltipHoverStyle: SystemStyleObject = {
|
|
34
|
+
svg: {
|
|
35
|
+
border: '1px dotted transparent',
|
|
36
|
+
},
|
|
37
|
+
'&:hover svg.icon-preview': {
|
|
38
|
+
borderColor: 'purple.50',
|
|
39
|
+
},
|
|
40
|
+
'&:hover .icon-size-tooltip': {
|
|
41
|
+
display: 'block',
|
|
42
|
+
},
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
const IconSizeTooltip = ({ size }: { size: '24' | '16' }) => {
|
|
46
|
+
return (
|
|
47
|
+
<Box
|
|
48
|
+
className="icon-size-tooltip"
|
|
49
|
+
sx={{
|
|
50
|
+
...iconSizeTooltipSytle,
|
|
51
|
+
marginLeft: size === '24' ? '-1px' : '-5px',
|
|
52
|
+
marginTop: size === '24' ? '2px' : '0px',
|
|
53
|
+
}}
|
|
54
|
+
>
|
|
55
|
+
{`${size}px`}
|
|
56
|
+
</Box>
|
|
57
|
+
);
|
|
58
|
+
};
|
|
59
|
+
|
|
22
60
|
const IconCard = ({ figmaIcon, sx }: { figmaIcon: FigmaIcon; sx?: SystemStyleObject }) => {
|
|
23
61
|
const { onCopy } = useClipboard(figmaIcon.iconName, {});
|
|
24
62
|
const toast = useToast();
|
|
@@ -27,9 +65,7 @@ const IconCard = ({ figmaIcon, sx }: { figmaIcon: FigmaIcon; sx?: SystemStyleObj
|
|
|
27
65
|
<Tooltip
|
|
28
66
|
label={
|
|
29
67
|
<Text textAlign="center">
|
|
30
|
-
{figmaIcon.iconName}
|
|
31
|
-
<br />
|
|
32
|
-
{figmaIcon.tags}
|
|
68
|
+
{figmaIcon.iconName || 'Missing!'}
|
|
33
69
|
<br />
|
|
34
70
|
click to copy <Icon size="16" color="white" name="Duplicate" />
|
|
35
71
|
</Text>
|
|
@@ -42,7 +78,13 @@ const IconCard = ({ figmaIcon, sx }: { figmaIcon: FigmaIcon; sx?: SystemStyleObj
|
|
|
42
78
|
marginBottom={8}
|
|
43
79
|
color={name.match(/White$/) ? 'neutral.100' : 'text.body'}
|
|
44
80
|
background={name.match(/White$/) ? 'brand.primary' : 'neutral.100'}
|
|
45
|
-
sx={
|
|
81
|
+
sx={{
|
|
82
|
+
'&:hover': {
|
|
83
|
+
borderColor: 'purple.50',
|
|
84
|
+
},
|
|
85
|
+
...iconSizeTooltipHoverStyle,
|
|
86
|
+
...sx,
|
|
87
|
+
}}
|
|
46
88
|
>
|
|
47
89
|
<Grid
|
|
48
90
|
onClick={() => {
|
|
@@ -61,11 +103,17 @@ const IconCard = ({ figmaIcon, sx }: { figmaIcon: FigmaIcon; sx?: SystemStyleObj
|
|
|
61
103
|
gridTemplateColumns="1f 1f"
|
|
62
104
|
padding={8}
|
|
63
105
|
paddingTop={16}
|
|
64
|
-
gap="
|
|
106
|
+
gap="16"
|
|
65
107
|
alignItems="center"
|
|
66
108
|
>
|
|
67
|
-
<
|
|
68
|
-
|
|
109
|
+
<Box marginX="auto" opacity={figmaIcon.iconName === '' ? 0 : 1}>
|
|
110
|
+
<Icon className="icon-preview" name={name} size="24" />
|
|
111
|
+
<IconSizeTooltip size="24" />
|
|
112
|
+
</Box>
|
|
113
|
+
<Box marginX="auto" opacity={figmaIcon.iconName === '' ? 0 : 1}>
|
|
114
|
+
<Icon className="icon-preview" name={name} size="16" />
|
|
115
|
+
<IconSizeTooltip size="16" />
|
|
116
|
+
</Box>
|
|
69
117
|
<GridItem as={Text} hasEllipsis textAlign="center" fontSize="2" lineHeight="1.25rem" colSpan={2}>
|
|
70
118
|
{figmaIcon.iconName || '???'}
|
|
71
119
|
{figmaIcon.figmaToken && (
|
|
@@ -107,17 +155,28 @@ const IconRow = ({ figmaIcon, sx }: { figmaIcon: FigmaIcon; sx?: SystemStyleObje
|
|
|
107
155
|
|
|
108
156
|
const cellStyle = {
|
|
109
157
|
color: name.match(/White$/) ? 'neutral.100' : 'text.body',
|
|
110
|
-
|
|
158
|
+
backgroundColor: name.match(/White$/) ? 'purple.10' : 'neutral.100',
|
|
111
159
|
...sx,
|
|
112
160
|
};
|
|
161
|
+
const cellStyleHover = {
|
|
162
|
+
backgroundColor: name.match(/White$/) ? 'purple.20' : 'neutral.95',
|
|
163
|
+
};
|
|
113
164
|
|
|
114
165
|
return (
|
|
115
|
-
<Tr
|
|
166
|
+
<Tr
|
|
167
|
+
className="icon-row"
|
|
168
|
+
sx={{
|
|
169
|
+
...iconSizeTooltipHoverStyle,
|
|
170
|
+
'&.icon-row:hover td': cellStyleHover,
|
|
171
|
+
}}
|
|
172
|
+
>
|
|
116
173
|
<Td sx={cellStyle} width={32}>
|
|
117
|
-
<Icon
|
|
174
|
+
<Icon className="icon-preview" name={name} size="24" opacity={figmaIcon.iconName === '' ? 0 : 1} />
|
|
175
|
+
{figmaIcon.iconName !== '' && <IconSizeTooltip size="24" />}
|
|
118
176
|
</Td>
|
|
119
177
|
<Td sx={cellStyle} width={32}>
|
|
120
|
-
<Icon
|
|
178
|
+
<Icon className="icon-preview" name={name} size="16" opacity={figmaIcon.iconName === '' ? 0 : 1} />
|
|
179
|
+
{figmaIcon.iconName !== '' && <IconSizeTooltip size="16" />}
|
|
121
180
|
</Td>
|
|
122
181
|
<Td sx={cellStyle} width="20%">
|
|
123
182
|
{figmaIcon.iconName || '???'}
|