@atlaskit/forge-react-types 0.37.13 → 0.38.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/CHANGELOG.md +18 -0
- package/dist/cjs/components/__generated__/BoxProps.codegen.js +2 -2
- package/dist/cjs/components/__generated__/PressableProps.codegen.js +187 -0
- package/dist/es2019/components/__generated__/BoxProps.codegen.js +2 -2
- package/dist/es2019/components/__generated__/PressableProps.codegen.js +183 -0
- package/dist/esm/components/__generated__/BoxProps.codegen.js +2 -2
- package/dist/esm/components/__generated__/PressableProps.codegen.js +183 -0
- package/dist/types/components/__generated__/BoxProps.codegen.d.ts +3 -3
- package/dist/types-ts4.5/components/__generated__/BoxProps.codegen.d.ts +3 -3
- package/package.json +7 -7
- package/scripts/codegen/codeGenerator.ts +27 -7
- package/src/components/__generated__/BoxProps.codegen.tsx +3 -3
- package/src/components/__generated__/PressableProps.codegen.tsx +257 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,23 @@
|
|
|
1
1
|
# @atlaskit/forge-react-types
|
|
2
2
|
|
|
3
|
+
## 0.38.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#130951](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/130951)
|
|
8
|
+
[`2741aeb65fe46`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2741aeb65fe46) -
|
|
9
|
+
Allow xcss in Pressable
|
|
10
|
+
|
|
11
|
+
### Patch Changes
|
|
12
|
+
|
|
13
|
+
- Updated dependencies
|
|
14
|
+
|
|
15
|
+
## 0.37.14
|
|
16
|
+
|
|
17
|
+
### Patch Changes
|
|
18
|
+
|
|
19
|
+
- Updated dependencies
|
|
20
|
+
|
|
3
21
|
## 0.37.13
|
|
4
22
|
|
|
5
23
|
### Patch Changes
|
|
@@ -8,9 +8,9 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
8
8
|
*
|
|
9
9
|
* Extract component prop types from UIKit 2 components - BoxProps
|
|
10
10
|
*
|
|
11
|
-
* @codegen <<SignedSource::
|
|
11
|
+
* @codegen <<SignedSource::c3ad3413cf478b4f6da470a99c029688>>
|
|
12
12
|
* @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
|
|
13
|
-
* @codegenDependency ../../../../forge-ui/src/components/UIKit/box/__generated__/index.partial.tsx <<SignedSource::
|
|
13
|
+
* @codegenDependency ../../../../forge-ui/src/components/UIKit/box/__generated__/index.partial.tsx <<SignedSource::cd2255d6156809f22f110b9eb0936c9d>>
|
|
14
14
|
*/
|
|
15
15
|
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
|
|
16
16
|
|
|
@@ -0,0 +1,187 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
/**
|
|
7
|
+
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
8
|
+
*
|
|
9
|
+
* Extract component prop types from UIKit 2 components - PressableProps
|
|
10
|
+
*
|
|
11
|
+
* @codegen <<SignedSource::515984e69408f30f333241c0b51ceb31>>
|
|
12
|
+
* @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
|
|
13
|
+
* @codegenDependency ../../../../forge-ui/src/components/UIKit/pressable/__generated__/index.partial.tsx <<SignedSource::a7f457ec091071415e904b705d62f605>>
|
|
14
|
+
*/
|
|
15
|
+
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
|
|
16
|
+
|
|
17
|
+
/**
|
|
18
|
+
*
|
|
19
|
+
* @param supportedXCSSProps - the list of css props to be supported for the intended component.
|
|
20
|
+
* If not provided, all the props will be supported. The props could be either standard css props
|
|
21
|
+
* or design token based props. If the prop is a design token based prop, the value of the prop
|
|
22
|
+
* will be validated against the design tokens map to ensure the value is a valid design token string.
|
|
23
|
+
* @returns a function that takes a style object and returns a style object with only the supported props
|
|
24
|
+
* as specified in the supportedXCSSProps list. The props that are not supported will be removed from the
|
|
25
|
+
* returned style object and a warning will be logged in the console.
|
|
26
|
+
*/
|
|
27
|
+
|
|
28
|
+
var xcssValidator = makeXCSSValidator({
|
|
29
|
+
// color related props
|
|
30
|
+
color: true,
|
|
31
|
+
boxShadow: true,
|
|
32
|
+
opacity: true,
|
|
33
|
+
backgroundColor: true,
|
|
34
|
+
borderColor: true,
|
|
35
|
+
borderBlockColor: true,
|
|
36
|
+
borderBlockEndColor: true,
|
|
37
|
+
borderBlockStartColor: true,
|
|
38
|
+
borderBottomColor: true,
|
|
39
|
+
borderInlineColor: true,
|
|
40
|
+
borderInlineEndColor: true,
|
|
41
|
+
borderInlineStartColor: true,
|
|
42
|
+
borderLeftColor: true,
|
|
43
|
+
borderRightColor: true,
|
|
44
|
+
borderTopColor: true,
|
|
45
|
+
overflow: {
|
|
46
|
+
supportedValues: ['hidden', 'visible', 'scroll', 'auto']
|
|
47
|
+
},
|
|
48
|
+
overflowX: {
|
|
49
|
+
supportedValues: ['hidden', 'visible', 'scroll', 'auto']
|
|
50
|
+
},
|
|
51
|
+
overflowY: {
|
|
52
|
+
supportedValues: ['hidden', 'visible', 'scroll', 'auto']
|
|
53
|
+
},
|
|
54
|
+
// layout and space related props
|
|
55
|
+
display: {
|
|
56
|
+
supportedValues: ['block', 'inline-block', 'inline', 'none']
|
|
57
|
+
},
|
|
58
|
+
flexGrow: {
|
|
59
|
+
allowCSS: true
|
|
60
|
+
},
|
|
61
|
+
width: {
|
|
62
|
+
allowCSS: true
|
|
63
|
+
},
|
|
64
|
+
height: {
|
|
65
|
+
allowCSS: true
|
|
66
|
+
},
|
|
67
|
+
minWidth: {
|
|
68
|
+
allowCSS: true
|
|
69
|
+
},
|
|
70
|
+
maxWidth: {
|
|
71
|
+
allowCSS: true
|
|
72
|
+
},
|
|
73
|
+
minHeight: {
|
|
74
|
+
allowCSS: true
|
|
75
|
+
},
|
|
76
|
+
maxHeight: {
|
|
77
|
+
allowCSS: true
|
|
78
|
+
},
|
|
79
|
+
margin: true,
|
|
80
|
+
marginBlock: true,
|
|
81
|
+
marginBlockEnd: true,
|
|
82
|
+
marginBlockStart: true,
|
|
83
|
+
marginBottom: true,
|
|
84
|
+
marginInline: true,
|
|
85
|
+
marginInlineEnd: true,
|
|
86
|
+
marginInlineStart: true,
|
|
87
|
+
marginLeft: true,
|
|
88
|
+
marginRight: true,
|
|
89
|
+
marginTop: true,
|
|
90
|
+
padding: true,
|
|
91
|
+
paddingBlock: true,
|
|
92
|
+
paddingBlockEnd: true,
|
|
93
|
+
paddingBlockStart: true,
|
|
94
|
+
paddingBottom: true,
|
|
95
|
+
paddingInline: true,
|
|
96
|
+
paddingInlineEnd: true,
|
|
97
|
+
paddingInlineStart: true,
|
|
98
|
+
paddingLeft: true,
|
|
99
|
+
paddingRight: true,
|
|
100
|
+
paddingTop: true,
|
|
101
|
+
// other box related props
|
|
102
|
+
borderRadius: {
|
|
103
|
+
supportedValues: ['border.radius']
|
|
104
|
+
},
|
|
105
|
+
borderBottomLeftRadius: {
|
|
106
|
+
supportedValues: ['border.radius']
|
|
107
|
+
},
|
|
108
|
+
borderBottomRightRadius: {
|
|
109
|
+
supportedValues: ['border.radius']
|
|
110
|
+
},
|
|
111
|
+
borderTopLeftRadius: {
|
|
112
|
+
supportedValues: ['border.radius']
|
|
113
|
+
},
|
|
114
|
+
borderTopRightRadius: {
|
|
115
|
+
supportedValues: ['border.radius']
|
|
116
|
+
},
|
|
117
|
+
borderEndEndRadius: {
|
|
118
|
+
supportedValues: ['border.radius']
|
|
119
|
+
},
|
|
120
|
+
borderEndStartRadius: {
|
|
121
|
+
supportedValues: ['border.radius']
|
|
122
|
+
},
|
|
123
|
+
borderStartEndRadius: {
|
|
124
|
+
supportedValues: ['border.radius']
|
|
125
|
+
},
|
|
126
|
+
borderStartStartRadius: {
|
|
127
|
+
supportedValues: ['border.radius']
|
|
128
|
+
},
|
|
129
|
+
borderWidth: {
|
|
130
|
+
supportedValues: ['border.width']
|
|
131
|
+
},
|
|
132
|
+
borderBlockWidth: {
|
|
133
|
+
supportedValues: ['border.width']
|
|
134
|
+
},
|
|
135
|
+
borderBlockEndWidth: {
|
|
136
|
+
supportedValues: ['border.width']
|
|
137
|
+
},
|
|
138
|
+
borderBlockStartWidth: {
|
|
139
|
+
supportedValues: ['border.width']
|
|
140
|
+
},
|
|
141
|
+
borderBottomWidth: {
|
|
142
|
+
supportedValues: ['border.width']
|
|
143
|
+
},
|
|
144
|
+
borderInlineWidth: {
|
|
145
|
+
supportedValues: ['border.width']
|
|
146
|
+
},
|
|
147
|
+
borderInlineEndWidth: {
|
|
148
|
+
supportedValues: ['border.width']
|
|
149
|
+
},
|
|
150
|
+
borderInlineStartWidth: {
|
|
151
|
+
supportedValues: ['border.width']
|
|
152
|
+
},
|
|
153
|
+
borderLeftWidth: {
|
|
154
|
+
supportedValues: ['border.width']
|
|
155
|
+
},
|
|
156
|
+
borderRightWidth: {
|
|
157
|
+
supportedValues: ['border.width']
|
|
158
|
+
},
|
|
159
|
+
borderTopWidth: {
|
|
160
|
+
supportedValues: ['border.width']
|
|
161
|
+
},
|
|
162
|
+
// other props not in tokens based props
|
|
163
|
+
borderTopStyle: {
|
|
164
|
+
supportedValues: ['dotted', 'dashed', 'solid', 'none', 'hidden']
|
|
165
|
+
},
|
|
166
|
+
borderBottomStyle: {
|
|
167
|
+
supportedValues: ['dotted', 'dashed', 'solid', 'none', 'hidden']
|
|
168
|
+
},
|
|
169
|
+
borderRightStyle: {
|
|
170
|
+
supportedValues: ['dotted', 'dashed', 'solid', 'none', 'hidden']
|
|
171
|
+
},
|
|
172
|
+
borderLeftStyle: {
|
|
173
|
+
supportedValues: ['dotted', 'dashed', 'solid', 'none', 'hidden']
|
|
174
|
+
},
|
|
175
|
+
borderStyle: {
|
|
176
|
+
supportedValues: ['dotted', 'dashed', 'solid', 'none', 'hidden']
|
|
177
|
+
},
|
|
178
|
+
position: {
|
|
179
|
+
supportedValues: ['relative', 'static']
|
|
180
|
+
}
|
|
181
|
+
});
|
|
182
|
+
|
|
183
|
+
/**
|
|
184
|
+
* A pressable is a primitive for building custom buttons.
|
|
185
|
+
*
|
|
186
|
+
* @see [Pressable](https://developer.atlassian.com/platform/forge/ui-kit/components/pressable/) in UI Kit documentation for more information
|
|
187
|
+
*/
|
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Extract component prop types from UIKit 2 components - BoxProps
|
|
5
5
|
*
|
|
6
|
-
* @codegen <<SignedSource::
|
|
6
|
+
* @codegen <<SignedSource::c3ad3413cf478b4f6da470a99c029688>>
|
|
7
7
|
* @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
|
|
8
|
-
* @codegenDependency ../../../../forge-ui/src/components/UIKit/box/__generated__/index.partial.tsx <<SignedSource::
|
|
8
|
+
* @codegenDependency ../../../../forge-ui/src/components/UIKit/box/__generated__/index.partial.tsx <<SignedSource::cd2255d6156809f22f110b9eb0936c9d>>
|
|
9
9
|
*/
|
|
10
10
|
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
|
|
11
11
|
|
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
3
|
+
*
|
|
4
|
+
* Extract component prop types from UIKit 2 components - PressableProps
|
|
5
|
+
*
|
|
6
|
+
* @codegen <<SignedSource::515984e69408f30f333241c0b51ceb31>>
|
|
7
|
+
* @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
|
|
8
|
+
* @codegenDependency ../../../../forge-ui/src/components/UIKit/pressable/__generated__/index.partial.tsx <<SignedSource::a7f457ec091071415e904b705d62f605>>
|
|
9
|
+
*/
|
|
10
|
+
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
*
|
|
14
|
+
* @param supportedXCSSProps - the list of css props to be supported for the intended component.
|
|
15
|
+
* If not provided, all the props will be supported. The props could be either standard css props
|
|
16
|
+
* or design token based props. If the prop is a design token based prop, the value of the prop
|
|
17
|
+
* will be validated against the design tokens map to ensure the value is a valid design token string.
|
|
18
|
+
* @returns a function that takes a style object and returns a style object with only the supported props
|
|
19
|
+
* as specified in the supportedXCSSProps list. The props that are not supported will be removed from the
|
|
20
|
+
* returned style object and a warning will be logged in the console.
|
|
21
|
+
*/
|
|
22
|
+
|
|
23
|
+
const xcssValidator = makeXCSSValidator({
|
|
24
|
+
// color related props
|
|
25
|
+
color: true,
|
|
26
|
+
boxShadow: true,
|
|
27
|
+
opacity: true,
|
|
28
|
+
backgroundColor: true,
|
|
29
|
+
borderColor: true,
|
|
30
|
+
borderBlockColor: true,
|
|
31
|
+
borderBlockEndColor: true,
|
|
32
|
+
borderBlockStartColor: true,
|
|
33
|
+
borderBottomColor: true,
|
|
34
|
+
borderInlineColor: true,
|
|
35
|
+
borderInlineEndColor: true,
|
|
36
|
+
borderInlineStartColor: true,
|
|
37
|
+
borderLeftColor: true,
|
|
38
|
+
borderRightColor: true,
|
|
39
|
+
borderTopColor: true,
|
|
40
|
+
overflow: {
|
|
41
|
+
supportedValues: ['hidden', 'visible', 'scroll', 'auto']
|
|
42
|
+
},
|
|
43
|
+
overflowX: {
|
|
44
|
+
supportedValues: ['hidden', 'visible', 'scroll', 'auto']
|
|
45
|
+
},
|
|
46
|
+
overflowY: {
|
|
47
|
+
supportedValues: ['hidden', 'visible', 'scroll', 'auto']
|
|
48
|
+
},
|
|
49
|
+
// layout and space related props
|
|
50
|
+
display: {
|
|
51
|
+
supportedValues: ['block', 'inline-block', 'inline', 'none']
|
|
52
|
+
},
|
|
53
|
+
flexGrow: {
|
|
54
|
+
allowCSS: true
|
|
55
|
+
},
|
|
56
|
+
width: {
|
|
57
|
+
allowCSS: true
|
|
58
|
+
},
|
|
59
|
+
height: {
|
|
60
|
+
allowCSS: true
|
|
61
|
+
},
|
|
62
|
+
minWidth: {
|
|
63
|
+
allowCSS: true
|
|
64
|
+
},
|
|
65
|
+
maxWidth: {
|
|
66
|
+
allowCSS: true
|
|
67
|
+
},
|
|
68
|
+
minHeight: {
|
|
69
|
+
allowCSS: true
|
|
70
|
+
},
|
|
71
|
+
maxHeight: {
|
|
72
|
+
allowCSS: true
|
|
73
|
+
},
|
|
74
|
+
margin: true,
|
|
75
|
+
marginBlock: true,
|
|
76
|
+
marginBlockEnd: true,
|
|
77
|
+
marginBlockStart: true,
|
|
78
|
+
marginBottom: true,
|
|
79
|
+
marginInline: true,
|
|
80
|
+
marginInlineEnd: true,
|
|
81
|
+
marginInlineStart: true,
|
|
82
|
+
marginLeft: true,
|
|
83
|
+
marginRight: true,
|
|
84
|
+
marginTop: true,
|
|
85
|
+
padding: true,
|
|
86
|
+
paddingBlock: true,
|
|
87
|
+
paddingBlockEnd: true,
|
|
88
|
+
paddingBlockStart: true,
|
|
89
|
+
paddingBottom: true,
|
|
90
|
+
paddingInline: true,
|
|
91
|
+
paddingInlineEnd: true,
|
|
92
|
+
paddingInlineStart: true,
|
|
93
|
+
paddingLeft: true,
|
|
94
|
+
paddingRight: true,
|
|
95
|
+
paddingTop: true,
|
|
96
|
+
// other box related props
|
|
97
|
+
borderRadius: {
|
|
98
|
+
supportedValues: ['border.radius']
|
|
99
|
+
},
|
|
100
|
+
borderBottomLeftRadius: {
|
|
101
|
+
supportedValues: ['border.radius']
|
|
102
|
+
},
|
|
103
|
+
borderBottomRightRadius: {
|
|
104
|
+
supportedValues: ['border.radius']
|
|
105
|
+
},
|
|
106
|
+
borderTopLeftRadius: {
|
|
107
|
+
supportedValues: ['border.radius']
|
|
108
|
+
},
|
|
109
|
+
borderTopRightRadius: {
|
|
110
|
+
supportedValues: ['border.radius']
|
|
111
|
+
},
|
|
112
|
+
borderEndEndRadius: {
|
|
113
|
+
supportedValues: ['border.radius']
|
|
114
|
+
},
|
|
115
|
+
borderEndStartRadius: {
|
|
116
|
+
supportedValues: ['border.radius']
|
|
117
|
+
},
|
|
118
|
+
borderStartEndRadius: {
|
|
119
|
+
supportedValues: ['border.radius']
|
|
120
|
+
},
|
|
121
|
+
borderStartStartRadius: {
|
|
122
|
+
supportedValues: ['border.radius']
|
|
123
|
+
},
|
|
124
|
+
borderWidth: {
|
|
125
|
+
supportedValues: ['border.width']
|
|
126
|
+
},
|
|
127
|
+
borderBlockWidth: {
|
|
128
|
+
supportedValues: ['border.width']
|
|
129
|
+
},
|
|
130
|
+
borderBlockEndWidth: {
|
|
131
|
+
supportedValues: ['border.width']
|
|
132
|
+
},
|
|
133
|
+
borderBlockStartWidth: {
|
|
134
|
+
supportedValues: ['border.width']
|
|
135
|
+
},
|
|
136
|
+
borderBottomWidth: {
|
|
137
|
+
supportedValues: ['border.width']
|
|
138
|
+
},
|
|
139
|
+
borderInlineWidth: {
|
|
140
|
+
supportedValues: ['border.width']
|
|
141
|
+
},
|
|
142
|
+
borderInlineEndWidth: {
|
|
143
|
+
supportedValues: ['border.width']
|
|
144
|
+
},
|
|
145
|
+
borderInlineStartWidth: {
|
|
146
|
+
supportedValues: ['border.width']
|
|
147
|
+
},
|
|
148
|
+
borderLeftWidth: {
|
|
149
|
+
supportedValues: ['border.width']
|
|
150
|
+
},
|
|
151
|
+
borderRightWidth: {
|
|
152
|
+
supportedValues: ['border.width']
|
|
153
|
+
},
|
|
154
|
+
borderTopWidth: {
|
|
155
|
+
supportedValues: ['border.width']
|
|
156
|
+
},
|
|
157
|
+
// other props not in tokens based props
|
|
158
|
+
borderTopStyle: {
|
|
159
|
+
supportedValues: ['dotted', 'dashed', 'solid', 'none', 'hidden']
|
|
160
|
+
},
|
|
161
|
+
borderBottomStyle: {
|
|
162
|
+
supportedValues: ['dotted', 'dashed', 'solid', 'none', 'hidden']
|
|
163
|
+
},
|
|
164
|
+
borderRightStyle: {
|
|
165
|
+
supportedValues: ['dotted', 'dashed', 'solid', 'none', 'hidden']
|
|
166
|
+
},
|
|
167
|
+
borderLeftStyle: {
|
|
168
|
+
supportedValues: ['dotted', 'dashed', 'solid', 'none', 'hidden']
|
|
169
|
+
},
|
|
170
|
+
borderStyle: {
|
|
171
|
+
supportedValues: ['dotted', 'dashed', 'solid', 'none', 'hidden']
|
|
172
|
+
},
|
|
173
|
+
position: {
|
|
174
|
+
supportedValues: ['relative', 'static']
|
|
175
|
+
}
|
|
176
|
+
});
|
|
177
|
+
|
|
178
|
+
/**
|
|
179
|
+
* A pressable is a primitive for building custom buttons.
|
|
180
|
+
*
|
|
181
|
+
* @see [Pressable](https://developer.atlassian.com/platform/forge/ui-kit/components/pressable/) in UI Kit documentation for more information
|
|
182
|
+
*/
|
|
183
|
+
export {};
|
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Extract component prop types from UIKit 2 components - BoxProps
|
|
5
5
|
*
|
|
6
|
-
* @codegen <<SignedSource::
|
|
6
|
+
* @codegen <<SignedSource::c3ad3413cf478b4f6da470a99c029688>>
|
|
7
7
|
* @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
|
|
8
|
-
* @codegenDependency ../../../../forge-ui/src/components/UIKit/box/__generated__/index.partial.tsx <<SignedSource::
|
|
8
|
+
* @codegenDependency ../../../../forge-ui/src/components/UIKit/box/__generated__/index.partial.tsx <<SignedSource::cd2255d6156809f22f110b9eb0936c9d>>
|
|
9
9
|
*/
|
|
10
10
|
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
|
|
11
11
|
|
|
@@ -0,0 +1,183 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
3
|
+
*
|
|
4
|
+
* Extract component prop types from UIKit 2 components - PressableProps
|
|
5
|
+
*
|
|
6
|
+
* @codegen <<SignedSource::515984e69408f30f333241c0b51ceb31>>
|
|
7
|
+
* @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
|
|
8
|
+
* @codegenDependency ../../../../forge-ui/src/components/UIKit/pressable/__generated__/index.partial.tsx <<SignedSource::a7f457ec091071415e904b705d62f605>>
|
|
9
|
+
*/
|
|
10
|
+
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
*
|
|
14
|
+
* @param supportedXCSSProps - the list of css props to be supported for the intended component.
|
|
15
|
+
* If not provided, all the props will be supported. The props could be either standard css props
|
|
16
|
+
* or design token based props. If the prop is a design token based prop, the value of the prop
|
|
17
|
+
* will be validated against the design tokens map to ensure the value is a valid design token string.
|
|
18
|
+
* @returns a function that takes a style object and returns a style object with only the supported props
|
|
19
|
+
* as specified in the supportedXCSSProps list. The props that are not supported will be removed from the
|
|
20
|
+
* returned style object and a warning will be logged in the console.
|
|
21
|
+
*/
|
|
22
|
+
|
|
23
|
+
var xcssValidator = makeXCSSValidator({
|
|
24
|
+
// color related props
|
|
25
|
+
color: true,
|
|
26
|
+
boxShadow: true,
|
|
27
|
+
opacity: true,
|
|
28
|
+
backgroundColor: true,
|
|
29
|
+
borderColor: true,
|
|
30
|
+
borderBlockColor: true,
|
|
31
|
+
borderBlockEndColor: true,
|
|
32
|
+
borderBlockStartColor: true,
|
|
33
|
+
borderBottomColor: true,
|
|
34
|
+
borderInlineColor: true,
|
|
35
|
+
borderInlineEndColor: true,
|
|
36
|
+
borderInlineStartColor: true,
|
|
37
|
+
borderLeftColor: true,
|
|
38
|
+
borderRightColor: true,
|
|
39
|
+
borderTopColor: true,
|
|
40
|
+
overflow: {
|
|
41
|
+
supportedValues: ['hidden', 'visible', 'scroll', 'auto']
|
|
42
|
+
},
|
|
43
|
+
overflowX: {
|
|
44
|
+
supportedValues: ['hidden', 'visible', 'scroll', 'auto']
|
|
45
|
+
},
|
|
46
|
+
overflowY: {
|
|
47
|
+
supportedValues: ['hidden', 'visible', 'scroll', 'auto']
|
|
48
|
+
},
|
|
49
|
+
// layout and space related props
|
|
50
|
+
display: {
|
|
51
|
+
supportedValues: ['block', 'inline-block', 'inline', 'none']
|
|
52
|
+
},
|
|
53
|
+
flexGrow: {
|
|
54
|
+
allowCSS: true
|
|
55
|
+
},
|
|
56
|
+
width: {
|
|
57
|
+
allowCSS: true
|
|
58
|
+
},
|
|
59
|
+
height: {
|
|
60
|
+
allowCSS: true
|
|
61
|
+
},
|
|
62
|
+
minWidth: {
|
|
63
|
+
allowCSS: true
|
|
64
|
+
},
|
|
65
|
+
maxWidth: {
|
|
66
|
+
allowCSS: true
|
|
67
|
+
},
|
|
68
|
+
minHeight: {
|
|
69
|
+
allowCSS: true
|
|
70
|
+
},
|
|
71
|
+
maxHeight: {
|
|
72
|
+
allowCSS: true
|
|
73
|
+
},
|
|
74
|
+
margin: true,
|
|
75
|
+
marginBlock: true,
|
|
76
|
+
marginBlockEnd: true,
|
|
77
|
+
marginBlockStart: true,
|
|
78
|
+
marginBottom: true,
|
|
79
|
+
marginInline: true,
|
|
80
|
+
marginInlineEnd: true,
|
|
81
|
+
marginInlineStart: true,
|
|
82
|
+
marginLeft: true,
|
|
83
|
+
marginRight: true,
|
|
84
|
+
marginTop: true,
|
|
85
|
+
padding: true,
|
|
86
|
+
paddingBlock: true,
|
|
87
|
+
paddingBlockEnd: true,
|
|
88
|
+
paddingBlockStart: true,
|
|
89
|
+
paddingBottom: true,
|
|
90
|
+
paddingInline: true,
|
|
91
|
+
paddingInlineEnd: true,
|
|
92
|
+
paddingInlineStart: true,
|
|
93
|
+
paddingLeft: true,
|
|
94
|
+
paddingRight: true,
|
|
95
|
+
paddingTop: true,
|
|
96
|
+
// other box related props
|
|
97
|
+
borderRadius: {
|
|
98
|
+
supportedValues: ['border.radius']
|
|
99
|
+
},
|
|
100
|
+
borderBottomLeftRadius: {
|
|
101
|
+
supportedValues: ['border.radius']
|
|
102
|
+
},
|
|
103
|
+
borderBottomRightRadius: {
|
|
104
|
+
supportedValues: ['border.radius']
|
|
105
|
+
},
|
|
106
|
+
borderTopLeftRadius: {
|
|
107
|
+
supportedValues: ['border.radius']
|
|
108
|
+
},
|
|
109
|
+
borderTopRightRadius: {
|
|
110
|
+
supportedValues: ['border.radius']
|
|
111
|
+
},
|
|
112
|
+
borderEndEndRadius: {
|
|
113
|
+
supportedValues: ['border.radius']
|
|
114
|
+
},
|
|
115
|
+
borderEndStartRadius: {
|
|
116
|
+
supportedValues: ['border.radius']
|
|
117
|
+
},
|
|
118
|
+
borderStartEndRadius: {
|
|
119
|
+
supportedValues: ['border.radius']
|
|
120
|
+
},
|
|
121
|
+
borderStartStartRadius: {
|
|
122
|
+
supportedValues: ['border.radius']
|
|
123
|
+
},
|
|
124
|
+
borderWidth: {
|
|
125
|
+
supportedValues: ['border.width']
|
|
126
|
+
},
|
|
127
|
+
borderBlockWidth: {
|
|
128
|
+
supportedValues: ['border.width']
|
|
129
|
+
},
|
|
130
|
+
borderBlockEndWidth: {
|
|
131
|
+
supportedValues: ['border.width']
|
|
132
|
+
},
|
|
133
|
+
borderBlockStartWidth: {
|
|
134
|
+
supportedValues: ['border.width']
|
|
135
|
+
},
|
|
136
|
+
borderBottomWidth: {
|
|
137
|
+
supportedValues: ['border.width']
|
|
138
|
+
},
|
|
139
|
+
borderInlineWidth: {
|
|
140
|
+
supportedValues: ['border.width']
|
|
141
|
+
},
|
|
142
|
+
borderInlineEndWidth: {
|
|
143
|
+
supportedValues: ['border.width']
|
|
144
|
+
},
|
|
145
|
+
borderInlineStartWidth: {
|
|
146
|
+
supportedValues: ['border.width']
|
|
147
|
+
},
|
|
148
|
+
borderLeftWidth: {
|
|
149
|
+
supportedValues: ['border.width']
|
|
150
|
+
},
|
|
151
|
+
borderRightWidth: {
|
|
152
|
+
supportedValues: ['border.width']
|
|
153
|
+
},
|
|
154
|
+
borderTopWidth: {
|
|
155
|
+
supportedValues: ['border.width']
|
|
156
|
+
},
|
|
157
|
+
// other props not in tokens based props
|
|
158
|
+
borderTopStyle: {
|
|
159
|
+
supportedValues: ['dotted', 'dashed', 'solid', 'none', 'hidden']
|
|
160
|
+
},
|
|
161
|
+
borderBottomStyle: {
|
|
162
|
+
supportedValues: ['dotted', 'dashed', 'solid', 'none', 'hidden']
|
|
163
|
+
},
|
|
164
|
+
borderRightStyle: {
|
|
165
|
+
supportedValues: ['dotted', 'dashed', 'solid', 'none', 'hidden']
|
|
166
|
+
},
|
|
167
|
+
borderLeftStyle: {
|
|
168
|
+
supportedValues: ['dotted', 'dashed', 'solid', 'none', 'hidden']
|
|
169
|
+
},
|
|
170
|
+
borderStyle: {
|
|
171
|
+
supportedValues: ['dotted', 'dashed', 'solid', 'none', 'hidden']
|
|
172
|
+
},
|
|
173
|
+
position: {
|
|
174
|
+
supportedValues: ['relative', 'static']
|
|
175
|
+
}
|
|
176
|
+
});
|
|
177
|
+
|
|
178
|
+
/**
|
|
179
|
+
* A pressable is a primitive for building custom buttons.
|
|
180
|
+
*
|
|
181
|
+
* @see [Pressable](https://developer.atlassian.com/platform/forge/ui-kit/components/pressable/) in UI Kit documentation for more information
|
|
182
|
+
*/
|
|
183
|
+
export {};
|
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Extract component prop types from UIKit 2 components - BoxProps
|
|
5
5
|
*
|
|
6
|
-
* @codegen <<SignedSource::
|
|
6
|
+
* @codegen <<SignedSource::c3ad3413cf478b4f6da470a99c029688>>
|
|
7
7
|
* @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
|
|
8
|
-
* @codegenDependency ../../../../forge-ui/src/components/UIKit/box/__generated__/index.partial.tsx <<SignedSource::
|
|
8
|
+
* @codegenDependency ../../../../forge-ui/src/components/UIKit/box/__generated__/index.partial.tsx <<SignedSource::cd2255d6156809f22f110b9eb0936c9d>>
|
|
9
9
|
*/
|
|
10
10
|
import React from 'react';
|
|
11
11
|
import { Box as PlatformBox } from '@atlaskit/primitives';
|
|
@@ -2358,8 +2358,8 @@ declare const xcssValidator: (styleObj: SafeCSSObject<keyof CSSProperties, keyof
|
|
|
2358
2358
|
at?: boolean | undefined;
|
|
2359
2359
|
} | undefined;
|
|
2360
2360
|
}>;
|
|
2361
|
-
type PlatformBoxProps = React.ComponentProps<typeof PlatformBox>;
|
|
2362
2361
|
type XCSSProp = ReturnType<typeof xcssValidator>;
|
|
2362
|
+
type PlatformBoxProps = React.ComponentProps<typeof PlatformBox>;
|
|
2363
2363
|
export type BoxProps = Pick<PlatformBoxProps, 'children' | 'ref' | 'testId'> & {
|
|
2364
2364
|
/**
|
|
2365
2365
|
* A shorthand for `paddingBlock` and `paddingInline` together.
|
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Extract component prop types from UIKit 2 components - BoxProps
|
|
5
5
|
*
|
|
6
|
-
* @codegen <<SignedSource::
|
|
6
|
+
* @codegen <<SignedSource::c3ad3413cf478b4f6da470a99c029688>>
|
|
7
7
|
* @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
|
|
8
|
-
* @codegenDependency ../../../../forge-ui/src/components/UIKit/box/__generated__/index.partial.tsx <<SignedSource::
|
|
8
|
+
* @codegenDependency ../../../../forge-ui/src/components/UIKit/box/__generated__/index.partial.tsx <<SignedSource::cd2255d6156809f22f110b9eb0936c9d>>
|
|
9
9
|
*/
|
|
10
10
|
import React from 'react';
|
|
11
11
|
import { Box as PlatformBox } from '@atlaskit/primitives';
|
|
@@ -2358,8 +2358,8 @@ declare const xcssValidator: (styleObj: SafeCSSObject<keyof CSSProperties, keyof
|
|
|
2358
2358
|
at?: boolean | undefined;
|
|
2359
2359
|
} | undefined;
|
|
2360
2360
|
}>;
|
|
2361
|
-
type PlatformBoxProps = React.ComponentProps<typeof PlatformBox>;
|
|
2362
2361
|
type XCSSProp = ReturnType<typeof xcssValidator>;
|
|
2362
|
+
type PlatformBoxProps = React.ComponentProps<typeof PlatformBox>;
|
|
2363
2363
|
export type BoxProps = Pick<PlatformBoxProps, 'children' | 'ref' | 'testId'> & {
|
|
2364
2364
|
/**
|
|
2365
2365
|
* A shorthand for `paddingBlock` and `paddingInline` together.
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/forge-react-types",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.38.0",
|
|
4
4
|
"description": "Component types for Forge UI Kit React components",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -28,23 +28,23 @@
|
|
|
28
28
|
"@atlaskit/button": "^21.1.0",
|
|
29
29
|
"@atlaskit/calendar": "^17.1.0",
|
|
30
30
|
"@atlaskit/checkbox": "^17.0.0",
|
|
31
|
-
"@atlaskit/code": "^16.
|
|
32
|
-
"@atlaskit/datetime-picker": "^16.
|
|
31
|
+
"@atlaskit/code": "^16.1.0",
|
|
32
|
+
"@atlaskit/datetime-picker": "^16.2.0",
|
|
33
33
|
"@atlaskit/dynamic-table": "^18.0.0",
|
|
34
34
|
"@atlaskit/empty-state": "^9.0.0",
|
|
35
35
|
"@atlaskit/form": "^12.0.0",
|
|
36
36
|
"@atlaskit/heading": "^5.1.0",
|
|
37
37
|
"@atlaskit/inline-edit": "^15.1.0",
|
|
38
38
|
"@atlaskit/lozenge": "^12.2.0",
|
|
39
|
-
"@atlaskit/modal-dialog": "^
|
|
39
|
+
"@atlaskit/modal-dialog": "^14.0.0",
|
|
40
40
|
"@atlaskit/popup": "^2.0.0",
|
|
41
|
-
"@atlaskit/primitives": "^14.
|
|
41
|
+
"@atlaskit/primitives": "^14.2.0",
|
|
42
42
|
"@atlaskit/progress-bar": "^4.0.0",
|
|
43
43
|
"@atlaskit/progress-tracker": "^10.0.0",
|
|
44
44
|
"@atlaskit/radio": "^8.0.0",
|
|
45
45
|
"@atlaskit/range": "^9.0.0",
|
|
46
|
-
"@atlaskit/renderer": "^114.
|
|
47
|
-
"@atlaskit/section-message": "^8.
|
|
46
|
+
"@atlaskit/renderer": "^114.5.0",
|
|
47
|
+
"@atlaskit/section-message": "^8.2.0",
|
|
48
48
|
"@atlaskit/select": "^20.0.0",
|
|
49
49
|
"@atlaskit/spinner": "^18.0.0",
|
|
50
50
|
"@atlaskit/tabs": "^18.0.0",
|
|
@@ -60,10 +60,16 @@ const getDependentTypeDeclarations = (baseComponentPropSymbol: Symbol, sourceFil
|
|
|
60
60
|
for (const declaration of declarations) {
|
|
61
61
|
// further extract dependent types from the dependent type declarations, if it is not yet the base component prop symbol
|
|
62
62
|
// e.g. Text component depends on OriginalPlatformProps which depends on PlatformTextProps
|
|
63
|
-
if (
|
|
63
|
+
if (
|
|
64
|
+
!declaration.getName().startsWith('_Platform') &&
|
|
65
|
+
!declaration.getName().startsWith('Platform')
|
|
66
|
+
) {
|
|
64
67
|
const typeAliasSymbol = declaration.getSymbolOrThrow();
|
|
65
68
|
const baseComponentPropCode = getDeclaration(baseComponentPropSymbol).getText();
|
|
66
|
-
for (const dependentTypeAliasDeclaration of getDependentTypeDeclarationsBase(
|
|
69
|
+
for (const dependentTypeAliasDeclaration of getDependentTypeDeclarationsBase(
|
|
70
|
+
typeAliasSymbol,
|
|
71
|
+
sourceFile,
|
|
72
|
+
)) {
|
|
67
73
|
if (baseComponentPropCode !== dependentTypeAliasDeclaration.getText()) {
|
|
68
74
|
declarations.push(dependentTypeAliasDeclaration);
|
|
69
75
|
}
|
|
@@ -73,7 +79,10 @@ const getDependentTypeDeclarations = (baseComponentPropSymbol: Symbol, sourceFil
|
|
|
73
79
|
return declarations;
|
|
74
80
|
};
|
|
75
81
|
|
|
76
|
-
const getDependentTypeDeclarationsBase = (
|
|
82
|
+
const getDependentTypeDeclarationsBase = (
|
|
83
|
+
baseComponentPropSymbol: Symbol,
|
|
84
|
+
sourceFile: SourceFile,
|
|
85
|
+
) => {
|
|
77
86
|
return sourceFile.getTypeAliases().reduce((declarations, typeAlias) => {
|
|
78
87
|
const typeAliasName = typeAlias.getName();
|
|
79
88
|
if (typeAliasName !== baseComponentPropSymbol.getName()) {
|
|
@@ -438,7 +447,9 @@ const getUIKitComponentDocUrl = (componentName: string) => {
|
|
|
438
447
|
return null;
|
|
439
448
|
}
|
|
440
449
|
const baseComponentPath = matchedComponentPath ?? kebabCase(componentName);
|
|
441
|
-
const componentPath = baseComponentPath.includes('/#')
|
|
450
|
+
const componentPath = baseComponentPath.includes('/#')
|
|
451
|
+
? baseComponentPath
|
|
452
|
+
: `${baseComponentPath}/`;
|
|
442
453
|
|
|
443
454
|
return `/platform/forge/ui-kit/components/${componentPath}`;
|
|
444
455
|
};
|
|
@@ -491,7 +502,7 @@ const baseGenerateComponentPropTypeSourceCode = (
|
|
|
491
502
|
});
|
|
492
503
|
};
|
|
493
504
|
|
|
494
|
-
const
|
|
505
|
+
const handleXCSSProp: CodeConsolidator = ({
|
|
495
506
|
sourceFile,
|
|
496
507
|
importCode,
|
|
497
508
|
externalTypesCode,
|
|
@@ -499,7 +510,14 @@ const boxPropsCodeConsolidator: CodeConsolidator = ({
|
|
|
499
510
|
componentPropCode,
|
|
500
511
|
componentTypeCode,
|
|
501
512
|
}) => {
|
|
502
|
-
const
|
|
513
|
+
const xcssValidatorfile = sourceFile
|
|
514
|
+
.getProject()
|
|
515
|
+
.addSourceFileAtPath(require.resolve('@atlassian/forge-ui/utils/xcssValidator'));
|
|
516
|
+
const xcssValidator = xcssValidatorfile.getVariableDeclarationOrThrow('xcssValidator').getText();
|
|
517
|
+
const XCSSPropType = xcssValidatorfile
|
|
518
|
+
.getTypeAliasOrThrow('XCSSProp')
|
|
519
|
+
.setIsExported(false)
|
|
520
|
+
.getText();
|
|
503
521
|
|
|
504
522
|
const utilsFile = sourceFile
|
|
505
523
|
.getProject()
|
|
@@ -511,6 +529,7 @@ const boxPropsCodeConsolidator: CodeConsolidator = ({
|
|
|
511
529
|
const xcssValidatorVariableDeclarationCode = [
|
|
512
530
|
xcssValidatorDeclarationCode,
|
|
513
531
|
`const ${xcssValidator};`,
|
|
532
|
+
XCSSPropType,
|
|
514
533
|
].join('\n');
|
|
515
534
|
|
|
516
535
|
return [
|
|
@@ -530,7 +549,8 @@ const boxPropsCodeConsolidator: CodeConsolidator = ({
|
|
|
530
549
|
};
|
|
531
550
|
|
|
532
551
|
const codeConsolidators: Record<string, CodeConsolidator> = {
|
|
533
|
-
BoxProps:
|
|
552
|
+
BoxProps: handleXCSSProp,
|
|
553
|
+
PressableProps: handleXCSSProp,
|
|
534
554
|
};
|
|
535
555
|
|
|
536
556
|
const generateComponentPropTypeSourceCode = (
|
|
@@ -3,9 +3,9 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Extract component prop types from UIKit 2 components - BoxProps
|
|
5
5
|
*
|
|
6
|
-
* @codegen <<SignedSource::
|
|
6
|
+
* @codegen <<SignedSource::c3ad3413cf478b4f6da470a99c029688>>
|
|
7
7
|
* @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
|
|
8
|
-
* @codegenDependency ../../../../forge-ui/src/components/UIKit/box/__generated__/index.partial.tsx <<SignedSource::
|
|
8
|
+
* @codegenDependency ../../../../forge-ui/src/components/UIKit/box/__generated__/index.partial.tsx <<SignedSource::cd2255d6156809f22f110b9eb0936c9d>>
|
|
9
9
|
*/
|
|
10
10
|
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
|
|
11
11
|
|
|
@@ -186,9 +186,9 @@ const xcssValidator = makeXCSSValidator({
|
|
|
186
186
|
supportedValues: ['relative', 'static'],
|
|
187
187
|
},
|
|
188
188
|
});
|
|
189
|
+
type XCSSProp = ReturnType<typeof xcssValidator>;
|
|
189
190
|
|
|
190
191
|
type PlatformBoxProps = React.ComponentProps<typeof PlatformBox>;
|
|
191
|
-
type XCSSProp = ReturnType<typeof xcssValidator>;
|
|
192
192
|
|
|
193
193
|
export type BoxProps = Pick<PlatformBoxProps, 'children' | 'ref' | 'testId'> & {
|
|
194
194
|
/**
|
|
@@ -0,0 +1,257 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
3
|
+
*
|
|
4
|
+
* Extract component prop types from UIKit 2 components - PressableProps
|
|
5
|
+
*
|
|
6
|
+
* @codegen <<SignedSource::515984e69408f30f333241c0b51ceb31>>
|
|
7
|
+
* @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
|
|
8
|
+
* @codegenDependency ../../../../forge-ui/src/components/UIKit/pressable/__generated__/index.partial.tsx <<SignedSource::a7f457ec091071415e904b705d62f605>>
|
|
9
|
+
*/
|
|
10
|
+
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
|
|
11
|
+
|
|
12
|
+
import React from 'react';
|
|
13
|
+
import { Pressable as PlatformPressable } from '@atlaskit/primitives';
|
|
14
|
+
|
|
15
|
+
import type { CSSProperties } from '@emotion/serialize';
|
|
16
|
+
import type * as CSS from 'csstype';
|
|
17
|
+
import type { MediaQuery } from '@atlaskit/primitives';
|
|
18
|
+
import { tokensMap } from '@atlaskit/primitives';
|
|
19
|
+
type TokensMap = typeof tokensMap;
|
|
20
|
+
type TokensMapPropKey = keyof TokensMap;
|
|
21
|
+
type TokenizedProps = {
|
|
22
|
+
[K in TokensMapPropKey]?: keyof TokensMap[K];
|
|
23
|
+
};
|
|
24
|
+
type RawCSSValue = string & {};
|
|
25
|
+
type RelaxedTokenizedProps = {
|
|
26
|
+
[K in TokensMapPropKey]?: keyof TokensMap[K] | RawCSSValue;
|
|
27
|
+
};
|
|
28
|
+
type AllMedia = MediaQuery | '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)' | '@media (prefers-color-scheme: dark)' | '@media (prefers-color-scheme: light)' | '@media (prefers-reduced-motion: reduce)';
|
|
29
|
+
type StandardCSSProps = Omit<CSSProperties, TokensMapPropKey>;
|
|
30
|
+
type RestrictedPropsSpec = RelaxedTokenizedProps & StandardCSSProps;
|
|
31
|
+
type SafeCSSObject<SupportedPropKeys extends keyof CSSProperties = keyof CSSProperties, RawCSSPropKeys extends SupportedPropKeys = SupportedPropKeys, RestrictedProps extends RestrictedPropsSpec = RestrictedPropsSpec> = {
|
|
32
|
+
[MQ in AllMedia]?: Omit<SafeCSSObject<SupportedPropKeys, RawCSSPropKeys, RestrictedPropsSpec>, AllMedia>;
|
|
33
|
+
} & {
|
|
34
|
+
[Pseudo in CSS.Pseudos]?: Omit<SafeCSSObject<SupportedPropKeys, RawCSSPropKeys, RestrictedPropsSpec>, CSS.Pseudos | AllMedia>;
|
|
35
|
+
} & Pick<TokenizedProps, Exclude<Extract<SupportedPropKeys, TokensMapPropKey>, RawCSSPropKeys | keyof RestrictedProps>> & Pick<StandardCSSProps, Exclude<Extract<SupportedPropKeys, keyof StandardCSSProps>, RawCSSPropKeys | keyof RestrictedProps>> & // force standard css prop values for allowCSS: true
|
|
36
|
+
Pick<CSSProperties, Extract<RawCSSPropKeys, keyof CSSProperties>> & RestrictedProps;
|
|
37
|
+
type XCSSValidatorParam = {
|
|
38
|
+
[key in keyof CSSProperties]: true | {
|
|
39
|
+
supportedValues: Array<RestrictedPropsSpec[key]>;
|
|
40
|
+
} | {
|
|
41
|
+
allowCSS: true;
|
|
42
|
+
};
|
|
43
|
+
};
|
|
44
|
+
/**
|
|
45
|
+
*
|
|
46
|
+
* @param supportedXCSSProps - the list of css props to be supported for the intended component.
|
|
47
|
+
* If not provided, all the props will be supported. The props could be either standard css props
|
|
48
|
+
* or design token based props. If the prop is a design token based prop, the value of the prop
|
|
49
|
+
* will be validated against the design tokens map to ensure the value is a valid design token string.
|
|
50
|
+
* @returns a function that takes a style object and returns a style object with only the supported props
|
|
51
|
+
* as specified in the supportedXCSSProps list. The props that are not supported will be removed from the
|
|
52
|
+
* returned style object and a warning will be logged in the console.
|
|
53
|
+
*/
|
|
54
|
+
declare const makeXCSSValidator: <U extends XCSSValidatorParam>(supportedXCSSProps: U) => (styleObj: SafeCSSObject<keyof CSSProperties, keyof CSSProperties, RestrictedPropsSpec> | SafeCSSObject<Extract<keyof U, keyof CSSProperties>, Extract<{ [K in Extract<keyof U, keyof CSSProperties>]: U[K] extends {
|
|
55
|
+
allowCSS: true;
|
|
56
|
+
} ? K : never; }[Extract<keyof U, keyof CSSProperties>], Extract<keyof U, keyof CSSProperties>>, { [K_2 in Extract<{ [K_1 in Extract<keyof U, keyof CSSProperties>]: U[K_1] extends {
|
|
57
|
+
supportedValues: RestrictedPropsSpec[K_1][];
|
|
58
|
+
} ? K_1 : never; }[Extract<keyof U, keyof CSSProperties>], Extract<keyof U, keyof CSSProperties>>]?: (U[K_2] extends {
|
|
59
|
+
supportedValues: infer V;
|
|
60
|
+
} ? Exclude<V[keyof V], number | Function> : never) | undefined; }>) => SafeCSSObject<Extract<keyof U, keyof CSSProperties>, Extract<{ [K in Extract<keyof U, keyof CSSProperties>]: U[K] extends {
|
|
61
|
+
allowCSS: true;
|
|
62
|
+
} ? K : never; }[Extract<keyof U, keyof CSSProperties>], Extract<keyof U, keyof CSSProperties>>, { [K_2 in Extract<{ [K_1 in Extract<keyof U, keyof CSSProperties>]: U[K_1] extends {
|
|
63
|
+
supportedValues: RestrictedPropsSpec[K_1][];
|
|
64
|
+
} ? K_1 : never; }[Extract<keyof U, keyof CSSProperties>], Extract<keyof U, keyof CSSProperties>>]?: (U[K_2] extends {
|
|
65
|
+
supportedValues: infer V;
|
|
66
|
+
} ? Exclude<V[keyof V], number | Function> : never) | undefined; }>;
|
|
67
|
+
export { makeXCSSValidator };
|
|
68
|
+
export type { SafeCSSObject };
|
|
69
|
+
|
|
70
|
+
const xcssValidator = makeXCSSValidator({
|
|
71
|
+
// color related props
|
|
72
|
+
color: true,
|
|
73
|
+
boxShadow: true,
|
|
74
|
+
opacity: true,
|
|
75
|
+
backgroundColor: true,
|
|
76
|
+
borderColor: true,
|
|
77
|
+
borderBlockColor: true,
|
|
78
|
+
borderBlockEndColor: true,
|
|
79
|
+
borderBlockStartColor: true,
|
|
80
|
+
borderBottomColor: true,
|
|
81
|
+
borderInlineColor: true,
|
|
82
|
+
borderInlineEndColor: true,
|
|
83
|
+
borderInlineStartColor: true,
|
|
84
|
+
borderLeftColor: true,
|
|
85
|
+
borderRightColor: true,
|
|
86
|
+
borderTopColor: true,
|
|
87
|
+
|
|
88
|
+
overflow: {
|
|
89
|
+
supportedValues: ['hidden', 'visible', 'scroll', 'auto'],
|
|
90
|
+
},
|
|
91
|
+
|
|
92
|
+
overflowX: {
|
|
93
|
+
supportedValues: ['hidden', 'visible', 'scroll', 'auto'],
|
|
94
|
+
},
|
|
95
|
+
overflowY: {
|
|
96
|
+
supportedValues: ['hidden', 'visible', 'scroll', 'auto'],
|
|
97
|
+
},
|
|
98
|
+
|
|
99
|
+
// layout and space related props
|
|
100
|
+
display: {
|
|
101
|
+
supportedValues: ['block', 'inline-block', 'inline', 'none'],
|
|
102
|
+
},
|
|
103
|
+
flexGrow: {
|
|
104
|
+
allowCSS: true,
|
|
105
|
+
},
|
|
106
|
+
width: {
|
|
107
|
+
allowCSS: true,
|
|
108
|
+
},
|
|
109
|
+
height: {
|
|
110
|
+
allowCSS: true,
|
|
111
|
+
},
|
|
112
|
+
minWidth: {
|
|
113
|
+
allowCSS: true,
|
|
114
|
+
},
|
|
115
|
+
maxWidth: {
|
|
116
|
+
allowCSS: true,
|
|
117
|
+
},
|
|
118
|
+
minHeight: {
|
|
119
|
+
allowCSS: true,
|
|
120
|
+
},
|
|
121
|
+
maxHeight: {
|
|
122
|
+
allowCSS: true,
|
|
123
|
+
},
|
|
124
|
+
margin: true,
|
|
125
|
+
marginBlock: true,
|
|
126
|
+
marginBlockEnd: true,
|
|
127
|
+
marginBlockStart: true,
|
|
128
|
+
marginBottom: true,
|
|
129
|
+
marginInline: true,
|
|
130
|
+
marginInlineEnd: true,
|
|
131
|
+
marginInlineStart: true,
|
|
132
|
+
marginLeft: true,
|
|
133
|
+
marginRight: true,
|
|
134
|
+
marginTop: true,
|
|
135
|
+
padding: true,
|
|
136
|
+
paddingBlock: true,
|
|
137
|
+
paddingBlockEnd: true,
|
|
138
|
+
paddingBlockStart: true,
|
|
139
|
+
paddingBottom: true,
|
|
140
|
+
paddingInline: true,
|
|
141
|
+
paddingInlineEnd: true,
|
|
142
|
+
paddingInlineStart: true,
|
|
143
|
+
paddingLeft: true,
|
|
144
|
+
paddingRight: true,
|
|
145
|
+
paddingTop: true,
|
|
146
|
+
|
|
147
|
+
// other box related props
|
|
148
|
+
borderRadius: { supportedValues: ['border.radius'] },
|
|
149
|
+
borderBottomLeftRadius: { supportedValues: ['border.radius'] },
|
|
150
|
+
borderBottomRightRadius: { supportedValues: ['border.radius'] },
|
|
151
|
+
borderTopLeftRadius: { supportedValues: ['border.radius'] },
|
|
152
|
+
borderTopRightRadius: { supportedValues: ['border.radius'] },
|
|
153
|
+
borderEndEndRadius: { supportedValues: ['border.radius'] },
|
|
154
|
+
borderEndStartRadius: { supportedValues: ['border.radius'] },
|
|
155
|
+
borderStartEndRadius: { supportedValues: ['border.radius'] },
|
|
156
|
+
borderStartStartRadius: { supportedValues: ['border.radius'] },
|
|
157
|
+
borderWidth: { supportedValues: ['border.width'] },
|
|
158
|
+
borderBlockWidth: { supportedValues: ['border.width'] },
|
|
159
|
+
borderBlockEndWidth: { supportedValues: ['border.width'] },
|
|
160
|
+
borderBlockStartWidth: { supportedValues: ['border.width'] },
|
|
161
|
+
borderBottomWidth: { supportedValues: ['border.width'] },
|
|
162
|
+
borderInlineWidth: { supportedValues: ['border.width'] },
|
|
163
|
+
borderInlineEndWidth: { supportedValues: ['border.width'] },
|
|
164
|
+
borderInlineStartWidth: { supportedValues: ['border.width'] },
|
|
165
|
+
borderLeftWidth: { supportedValues: ['border.width'] },
|
|
166
|
+
borderRightWidth: { supportedValues: ['border.width'] },
|
|
167
|
+
borderTopWidth: { supportedValues: ['border.width'] },
|
|
168
|
+
|
|
169
|
+
// other props not in tokens based props
|
|
170
|
+
borderTopStyle: {
|
|
171
|
+
supportedValues: ['dotted', 'dashed', 'solid', 'none', 'hidden'],
|
|
172
|
+
},
|
|
173
|
+
borderBottomStyle: {
|
|
174
|
+
supportedValues: ['dotted', 'dashed', 'solid', 'none', 'hidden'],
|
|
175
|
+
},
|
|
176
|
+
borderRightStyle: {
|
|
177
|
+
supportedValues: ['dotted', 'dashed', 'solid', 'none', 'hidden'],
|
|
178
|
+
},
|
|
179
|
+
borderLeftStyle: {
|
|
180
|
+
supportedValues: ['dotted', 'dashed', 'solid', 'none', 'hidden'],
|
|
181
|
+
},
|
|
182
|
+
borderStyle: {
|
|
183
|
+
supportedValues: ['dotted', 'dashed', 'solid', 'none', 'hidden'],
|
|
184
|
+
},
|
|
185
|
+
position: {
|
|
186
|
+
supportedValues: ['relative', 'static'],
|
|
187
|
+
},
|
|
188
|
+
});
|
|
189
|
+
type XCSSProp = ReturnType<typeof xcssValidator>;
|
|
190
|
+
|
|
191
|
+
type PlatformPressableProps = React.ComponentProps<typeof PlatformPressable>;
|
|
192
|
+
|
|
193
|
+
export type PressableProps = Pick<PlatformPressableProps, 'children' | 'ref' | 'testId'> & {
|
|
194
|
+
/**
|
|
195
|
+
* Token representing background color with a built-in fallback value.
|
|
196
|
+
*/
|
|
197
|
+
backgroundColor?: PlatformPressableProps['backgroundColor'],
|
|
198
|
+
/**
|
|
199
|
+
* Whether the button is disabled.
|
|
200
|
+
*/
|
|
201
|
+
isDisabled?: PlatformPressableProps['isDisabled'],
|
|
202
|
+
/**
|
|
203
|
+
* Handler called on click.
|
|
204
|
+
*/
|
|
205
|
+
onClick?: () => void,
|
|
206
|
+
/**
|
|
207
|
+
* Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
|
|
208
|
+
*
|
|
209
|
+
* @see paddingBlock
|
|
210
|
+
* @see paddingInline
|
|
211
|
+
*/
|
|
212
|
+
padding?: PlatformPressableProps['padding'],
|
|
213
|
+
/**
|
|
214
|
+
* Tokens representing CSS shorthand `paddingBlock`.
|
|
215
|
+
*
|
|
216
|
+
* @see paddingBlockStart
|
|
217
|
+
* @see paddingBlockEnd
|
|
218
|
+
*/
|
|
219
|
+
paddingBlock?: PlatformPressableProps['paddingBlock'],
|
|
220
|
+
/**
|
|
221
|
+
* Tokens representing CSS `paddingBlockEnd`.
|
|
222
|
+
*/
|
|
223
|
+
paddingBlockEnd?: PlatformPressableProps['paddingBlockEnd'],
|
|
224
|
+
/**
|
|
225
|
+
* Tokens representing CSS `paddingBlockStart`.
|
|
226
|
+
*/
|
|
227
|
+
paddingBlockStart?: PlatformPressableProps['paddingBlockStart'],
|
|
228
|
+
/**
|
|
229
|
+
* Tokens representing CSS shorthand `paddingInline`.
|
|
230
|
+
*
|
|
231
|
+
* @see paddingInlineStart
|
|
232
|
+
* @see paddingInlineEnd
|
|
233
|
+
*/
|
|
234
|
+
paddingInline?: PlatformPressableProps['paddingInline'],
|
|
235
|
+
/**
|
|
236
|
+
* Tokens representing CSS `paddingInlineEnd`.
|
|
237
|
+
*/
|
|
238
|
+
paddingInlineEnd?: PlatformPressableProps['paddingInlineEnd'],
|
|
239
|
+
/**
|
|
240
|
+
* Tokens representing CSS `paddingInlineStart`.
|
|
241
|
+
*/
|
|
242
|
+
paddingInlineStart?: PlatformPressableProps['paddingInlineStart'],
|
|
243
|
+
/**
|
|
244
|
+
* Apply a subset of permitted styles, powered by Atlassian Design System tokens.
|
|
245
|
+
* For a list of supported style properties on this component, see [here](https://developer.atlassian.com/platform/forge/ui-kit/components/xcss).
|
|
246
|
+
*
|
|
247
|
+
* @type XCSSProp
|
|
248
|
+
*/
|
|
249
|
+
xcss?: XCSSProp;
|
|
250
|
+
}
|
|
251
|
+
|
|
252
|
+
/**
|
|
253
|
+
* A pressable is a primitive for building custom buttons.
|
|
254
|
+
*
|
|
255
|
+
* @see [Pressable](https://developer.atlassian.com/platform/forge/ui-kit/components/pressable/) in UI Kit documentation for more information
|
|
256
|
+
*/
|
|
257
|
+
export type TPressable<T> = (props: PressableProps) => T;
|