@atlaskit/forge-react-types 0.37.14 → 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 +12 -0
- package/dist/cjs/components/__generated__/BoxProps.codegen.js +2 -2
- package/dist/cjs/components/__generated__/PressableProps.codegen.js +183 -1
- package/dist/es2019/components/__generated__/BoxProps.codegen.js +2 -2
- package/dist/es2019/components/__generated__/PressableProps.codegen.js +182 -0
- package/dist/esm/components/__generated__/BoxProps.codegen.js +2 -2
- package/dist/esm/components/__generated__/PressableProps.codegen.js +182 -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 +1 -1
- package/scripts/codegen/codeGenerator.ts +12 -3
- package/src/components/__generated__/BoxProps.codegen.tsx +3 -3
- package/src/components/__generated__/PressableProps.codegen.tsx +238 -63
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
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
|
+
|
|
3
15
|
## 0.37.14
|
|
4
16
|
|
|
5
17
|
### 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
|
|
|
@@ -2,4 +2,186 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
|
-
});
|
|
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
|
|
|
@@ -1 +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
|
+
*/
|
|
1
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
|
|
|
@@ -1 +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
|
+
*/
|
|
1
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
|
@@ -502,7 +502,7 @@ const baseGenerateComponentPropTypeSourceCode = (
|
|
|
502
502
|
});
|
|
503
503
|
};
|
|
504
504
|
|
|
505
|
-
const
|
|
505
|
+
const handleXCSSProp: CodeConsolidator = ({
|
|
506
506
|
sourceFile,
|
|
507
507
|
importCode,
|
|
508
508
|
externalTypesCode,
|
|
@@ -510,7 +510,14 @@ const boxPropsCodeConsolidator: CodeConsolidator = ({
|
|
|
510
510
|
componentPropCode,
|
|
511
511
|
componentTypeCode,
|
|
512
512
|
}) => {
|
|
513
|
-
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();
|
|
514
521
|
|
|
515
522
|
const utilsFile = sourceFile
|
|
516
523
|
.getProject()
|
|
@@ -522,6 +529,7 @@ const boxPropsCodeConsolidator: CodeConsolidator = ({
|
|
|
522
529
|
const xcssValidatorVariableDeclarationCode = [
|
|
523
530
|
xcssValidatorDeclarationCode,
|
|
524
531
|
`const ${xcssValidator};`,
|
|
532
|
+
XCSSPropType,
|
|
525
533
|
].join('\n');
|
|
526
534
|
|
|
527
535
|
return [
|
|
@@ -541,7 +549,8 @@ const boxPropsCodeConsolidator: CodeConsolidator = ({
|
|
|
541
549
|
};
|
|
542
550
|
|
|
543
551
|
const codeConsolidators: Record<string, CodeConsolidator> = {
|
|
544
|
-
BoxProps:
|
|
552
|
+
BoxProps: handleXCSSProp,
|
|
553
|
+
PressableProps: handleXCSSProp,
|
|
545
554
|
};
|
|
546
555
|
|
|
547
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
|
/**
|
|
@@ -3,80 +3,255 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Extract component prop types from UIKit 2 components - PressableProps
|
|
5
5
|
*
|
|
6
|
-
* @codegen <<SignedSource::
|
|
6
|
+
* @codegen <<SignedSource::515984e69408f30f333241c0b51ceb31>>
|
|
7
7
|
* @codegenCommand yarn workspace @atlaskit/forge-react-types codegen
|
|
8
|
-
* @codegenDependency ../../../../forge-ui/src/components/UIKit/pressable/__generated__/index.partial.tsx <<SignedSource::
|
|
8
|
+
* @codegenDependency ../../../../forge-ui/src/components/UIKit/pressable/__generated__/index.partial.tsx <<SignedSource::a7f457ec091071415e904b705d62f605>>
|
|
9
9
|
*/
|
|
10
|
-
/* eslint @
|
|
10
|
+
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage/preview */
|
|
11
11
|
|
|
12
12
|
import React from 'react';
|
|
13
13
|
import { Pressable as PlatformPressable } from '@atlaskit/primitives';
|
|
14
14
|
|
|
15
|
-
type
|
|
16
|
-
|
|
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
|
+
};
|
|
17
44
|
/**
|
|
18
|
-
*
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
*
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
* Handler called on click. The second argument provides an Atlaskit UI analytics event that can be fired to a listening channel. See the ['analytics-next' package](https://atlaskit.atlassian.com/packages/analytics/analytics-next) documentation for more information.
|
|
27
|
-
*/
|
|
28
|
-
onClick?: _PlatformPressableProps['onClick'];
|
|
29
|
-
/**
|
|
30
|
-
* Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
|
|
31
|
-
*
|
|
32
|
-
* @see paddingBlock
|
|
33
|
-
* @see paddingInline
|
|
34
|
-
*/
|
|
35
|
-
padding?: _PlatformPressableProps['padding'];
|
|
36
|
-
/**
|
|
37
|
-
* Tokens representing CSS shorthand `paddingBlock`.
|
|
38
|
-
*
|
|
39
|
-
* @see paddingBlockStart
|
|
40
|
-
* @see paddingBlockEnd
|
|
41
|
-
*/
|
|
42
|
-
paddingBlock?: _PlatformPressableProps['paddingBlock'];
|
|
43
|
-
/**
|
|
44
|
-
* Tokens representing CSS `paddingBlockEnd`.
|
|
45
|
-
*/
|
|
46
|
-
paddingBlockEnd?: _PlatformPressableProps['paddingBlockEnd'];
|
|
47
|
-
/**
|
|
48
|
-
* Tokens representing CSS `paddingBlockStart`.
|
|
49
|
-
*/
|
|
50
|
-
paddingBlockStart?: _PlatformPressableProps['paddingBlockStart'];
|
|
51
|
-
/**
|
|
52
|
-
* Tokens representing CSS shorthand `paddingInline`.
|
|
53
|
-
*
|
|
54
|
-
* @see paddingInlineStart
|
|
55
|
-
* @see paddingInlineEnd
|
|
56
|
-
*/
|
|
57
|
-
paddingInline?: _PlatformPressableProps['paddingInline'];
|
|
58
|
-
/**
|
|
59
|
-
* Tokens representing CSS `paddingInlineEnd`.
|
|
60
|
-
*/
|
|
61
|
-
paddingInlineEnd?: _PlatformPressableProps['paddingInlineEnd'];
|
|
62
|
-
/**
|
|
63
|
-
* Tokens representing CSS `paddingInlineStart`.
|
|
64
|
-
*/
|
|
65
|
-
paddingInlineStart?: _PlatformPressableProps['paddingInlineStart'];
|
|
66
|
-
/**
|
|
67
|
-
* A unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.
|
|
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.
|
|
68
53
|
*/
|
|
69
|
-
|
|
70
|
-
|
|
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
|
+
},
|
|
71
91
|
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
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
|
+
}
|
|
76
251
|
|
|
77
252
|
/**
|
|
78
253
|
* A pressable is a primitive for building custom buttons.
|
|
79
|
-
*
|
|
80
|
-
* @
|
|
254
|
+
*
|
|
255
|
+
* @see [Pressable](https://developer.atlassian.com/platform/forge/ui-kit/components/pressable/) in UI Kit documentation for more information
|
|
81
256
|
*/
|
|
82
257
|
export type TPressable<T> = (props: PressableProps) => T;
|