@workday/canvas-kit-docs 14.0.0-alpha.1227-next.0 → 14.0.0-alpha.1230-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/es6/lib/docs.js +44 -870
- package/dist/es6/lib/stackblitzFiles/packageJSONFile.js +5 -5
- package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts +5 -5
- package/dist/mdx/14.0-UPGRADE-GUIDE.mdx +82 -4
- package/dist/mdx/preview-react/text-input/examples/ThemedError.tsx +4 -3
- package/package.json +6 -6
package/dist/es6/lib/docs.js
CHANGED
|
@@ -193951,564 +193951,6 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
193951
193951
|
]
|
|
193952
193952
|
}
|
|
193953
193953
|
},
|
|
193954
|
-
{
|
|
193955
|
-
"name": "InputProviderProps",
|
|
193956
|
-
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/InputProvider.tsx",
|
|
193957
|
-
"description": "",
|
|
193958
|
-
"declarations": [
|
|
193959
|
-
{
|
|
193960
|
-
"name": "InputProviderProps",
|
|
193961
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/InputProvider.tsx"
|
|
193962
|
-
}
|
|
193963
|
-
],
|
|
193964
|
-
"tags": {},
|
|
193965
|
-
"type": {
|
|
193966
|
-
"kind": "alias",
|
|
193967
|
-
"name": "InputProvider"
|
|
193968
|
-
}
|
|
193969
|
-
},
|
|
193970
|
-
{
|
|
193971
|
-
"name": "InputType",
|
|
193972
|
-
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/InputProvider.tsx",
|
|
193973
|
-
"description": "",
|
|
193974
|
-
"declarations": [
|
|
193975
|
-
{
|
|
193976
|
-
"name": "InputType",
|
|
193977
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/InputProvider.tsx"
|
|
193978
|
-
}
|
|
193979
|
-
],
|
|
193980
|
-
"tags": {},
|
|
193981
|
-
"type": {
|
|
193982
|
-
"kind": "object",
|
|
193983
|
-
"typeParameters": [],
|
|
193984
|
-
"properties": [
|
|
193985
|
-
{
|
|
193986
|
-
"kind": "property",
|
|
193987
|
-
"name": "Initial",
|
|
193988
|
-
"type": {
|
|
193989
|
-
"kind": "string",
|
|
193990
|
-
"value": "initial"
|
|
193991
|
-
}
|
|
193992
|
-
},
|
|
193993
|
-
{
|
|
193994
|
-
"kind": "property",
|
|
193995
|
-
"name": "Keyboard",
|
|
193996
|
-
"type": {
|
|
193997
|
-
"kind": "string",
|
|
193998
|
-
"value": "keyboard"
|
|
193999
|
-
}
|
|
194000
|
-
},
|
|
194001
|
-
{
|
|
194002
|
-
"kind": "property",
|
|
194003
|
-
"name": "Mouse",
|
|
194004
|
-
"type": {
|
|
194005
|
-
"kind": "string",
|
|
194006
|
-
"value": "mouse"
|
|
194007
|
-
}
|
|
194008
|
-
},
|
|
194009
|
-
{
|
|
194010
|
-
"kind": "property",
|
|
194011
|
-
"name": "Pointer",
|
|
194012
|
-
"type": {
|
|
194013
|
-
"kind": "string",
|
|
194014
|
-
"value": "pointer"
|
|
194015
|
-
}
|
|
194016
|
-
},
|
|
194017
|
-
{
|
|
194018
|
-
"kind": "property",
|
|
194019
|
-
"name": "Touch",
|
|
194020
|
-
"type": {
|
|
194021
|
-
"kind": "string",
|
|
194022
|
-
"value": "touch"
|
|
194023
|
-
}
|
|
194024
|
-
}
|
|
194025
|
-
],
|
|
194026
|
-
"callSignatures": []
|
|
194027
|
-
}
|
|
194028
|
-
},
|
|
194029
|
-
{
|
|
194030
|
-
"name": "InputEventType",
|
|
194031
|
-
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/InputProvider.tsx",
|
|
194032
|
-
"description": "",
|
|
194033
|
-
"declarations": [
|
|
194034
|
-
{
|
|
194035
|
-
"name": "InputEventType",
|
|
194036
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/InputProvider.tsx"
|
|
194037
|
-
}
|
|
194038
|
-
],
|
|
194039
|
-
"tags": {},
|
|
194040
|
-
"type": {
|
|
194041
|
-
"kind": "object",
|
|
194042
|
-
"typeParameters": [],
|
|
194043
|
-
"properties": [
|
|
194044
|
-
{
|
|
194045
|
-
"kind": "property",
|
|
194046
|
-
"name": "KeyDown",
|
|
194047
|
-
"type": {
|
|
194048
|
-
"kind": "string",
|
|
194049
|
-
"value": "keydown"
|
|
194050
|
-
}
|
|
194051
|
-
},
|
|
194052
|
-
{
|
|
194053
|
-
"kind": "property",
|
|
194054
|
-
"name": "KeyUp",
|
|
194055
|
-
"type": {
|
|
194056
|
-
"kind": "string",
|
|
194057
|
-
"value": "keyup"
|
|
194058
|
-
}
|
|
194059
|
-
},
|
|
194060
|
-
{
|
|
194061
|
-
"kind": "property",
|
|
194062
|
-
"name": "MouseDown",
|
|
194063
|
-
"type": {
|
|
194064
|
-
"kind": "string",
|
|
194065
|
-
"value": "mousedown"
|
|
194066
|
-
}
|
|
194067
|
-
},
|
|
194068
|
-
{
|
|
194069
|
-
"kind": "property",
|
|
194070
|
-
"name": "MouseMove",
|
|
194071
|
-
"type": {
|
|
194072
|
-
"kind": "string",
|
|
194073
|
-
"value": "mousemove"
|
|
194074
|
-
}
|
|
194075
|
-
},
|
|
194076
|
-
{
|
|
194077
|
-
"kind": "property",
|
|
194078
|
-
"name": "Wheel",
|
|
194079
|
-
"type": {
|
|
194080
|
-
"kind": "string",
|
|
194081
|
-
"value": "wheel"
|
|
194082
|
-
}
|
|
194083
|
-
},
|
|
194084
|
-
{
|
|
194085
|
-
"kind": "property",
|
|
194086
|
-
"name": "MouseWheel",
|
|
194087
|
-
"type": {
|
|
194088
|
-
"kind": "string",
|
|
194089
|
-
"value": "mousewheel"
|
|
194090
|
-
}
|
|
194091
|
-
},
|
|
194092
|
-
{
|
|
194093
|
-
"kind": "property",
|
|
194094
|
-
"name": "PointerDown",
|
|
194095
|
-
"type": {
|
|
194096
|
-
"kind": "string",
|
|
194097
|
-
"value": "pointerdown"
|
|
194098
|
-
}
|
|
194099
|
-
},
|
|
194100
|
-
{
|
|
194101
|
-
"kind": "property",
|
|
194102
|
-
"name": "PointerMove",
|
|
194103
|
-
"type": {
|
|
194104
|
-
"kind": "string",
|
|
194105
|
-
"value": "pointermove"
|
|
194106
|
-
}
|
|
194107
|
-
},
|
|
194108
|
-
{
|
|
194109
|
-
"kind": "property",
|
|
194110
|
-
"name": "TouchStart",
|
|
194111
|
-
"type": {
|
|
194112
|
-
"kind": "string",
|
|
194113
|
-
"value": "touchstart"
|
|
194114
|
-
}
|
|
194115
|
-
}
|
|
194116
|
-
],
|
|
194117
|
-
"callSignatures": []
|
|
194118
|
-
}
|
|
194119
|
-
},
|
|
194120
|
-
{
|
|
194121
|
-
"name": "inputEventMap",
|
|
194122
|
-
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/InputProvider.tsx",
|
|
194123
|
-
"description": "",
|
|
194124
|
-
"declarations": [
|
|
194125
|
-
{
|
|
194126
|
-
"name": "inputEventMap",
|
|
194127
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/InputProvider.tsx"
|
|
194128
|
-
}
|
|
194129
|
-
],
|
|
194130
|
-
"tags": {},
|
|
194131
|
-
"type": {
|
|
194132
|
-
"kind": "object",
|
|
194133
|
-
"properties": [
|
|
194134
|
-
{
|
|
194135
|
-
"kind": "property",
|
|
194136
|
-
"name": "__computed",
|
|
194137
|
-
"defaultValue": {
|
|
194138
|
-
"kind": "property",
|
|
194139
|
-
"name": "Keyboard",
|
|
194140
|
-
"type": {
|
|
194141
|
-
"kind": "qualifiedName",
|
|
194142
|
-
"left": {
|
|
194143
|
-
"kind": "symbol",
|
|
194144
|
-
"name": "InputType",
|
|
194145
|
-
"value": "any"
|
|
194146
|
-
},
|
|
194147
|
-
"right": {
|
|
194148
|
-
"kind": "string",
|
|
194149
|
-
"value": "Keyboard"
|
|
194150
|
-
}
|
|
194151
|
-
}
|
|
194152
|
-
},
|
|
194153
|
-
"type": {
|
|
194154
|
-
"kind": "symbol",
|
|
194155
|
-
"name": "InputType",
|
|
194156
|
-
"value": "InputType"
|
|
194157
|
-
},
|
|
194158
|
-
"required": true,
|
|
194159
|
-
"description": "",
|
|
194160
|
-
"declarations": [
|
|
194161
|
-
{
|
|
194162
|
-
"name": "__computed",
|
|
194163
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/InputProvider.tsx"
|
|
194164
|
-
}
|
|
194165
|
-
],
|
|
194166
|
-
"tags": {}
|
|
194167
|
-
},
|
|
194168
|
-
{
|
|
194169
|
-
"kind": "property",
|
|
194170
|
-
"name": "__computed",
|
|
194171
|
-
"defaultValue": {
|
|
194172
|
-
"kind": "property",
|
|
194173
|
-
"name": "Keyboard",
|
|
194174
|
-
"type": {
|
|
194175
|
-
"kind": "qualifiedName",
|
|
194176
|
-
"left": {
|
|
194177
|
-
"kind": "symbol",
|
|
194178
|
-
"name": "InputType",
|
|
194179
|
-
"value": "any"
|
|
194180
|
-
},
|
|
194181
|
-
"right": {
|
|
194182
|
-
"kind": "string",
|
|
194183
|
-
"value": "Keyboard"
|
|
194184
|
-
}
|
|
194185
|
-
}
|
|
194186
|
-
},
|
|
194187
|
-
"type": {
|
|
194188
|
-
"kind": "symbol",
|
|
194189
|
-
"name": "InputType",
|
|
194190
|
-
"value": "InputType"
|
|
194191
|
-
},
|
|
194192
|
-
"required": true,
|
|
194193
|
-
"description": "",
|
|
194194
|
-
"declarations": [
|
|
194195
|
-
{
|
|
194196
|
-
"name": "__computed",
|
|
194197
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/InputProvider.tsx"
|
|
194198
|
-
}
|
|
194199
|
-
],
|
|
194200
|
-
"tags": {}
|
|
194201
|
-
},
|
|
194202
|
-
{
|
|
194203
|
-
"kind": "property",
|
|
194204
|
-
"name": "__computed",
|
|
194205
|
-
"defaultValue": {
|
|
194206
|
-
"kind": "property",
|
|
194207
|
-
"name": "Mouse",
|
|
194208
|
-
"type": {
|
|
194209
|
-
"kind": "qualifiedName",
|
|
194210
|
-
"left": {
|
|
194211
|
-
"kind": "symbol",
|
|
194212
|
-
"name": "InputType",
|
|
194213
|
-
"value": "any"
|
|
194214
|
-
},
|
|
194215
|
-
"right": {
|
|
194216
|
-
"kind": "string",
|
|
194217
|
-
"value": "Mouse"
|
|
194218
|
-
}
|
|
194219
|
-
}
|
|
194220
|
-
},
|
|
194221
|
-
"type": {
|
|
194222
|
-
"kind": "symbol",
|
|
194223
|
-
"name": "InputType",
|
|
194224
|
-
"value": "InputType"
|
|
194225
|
-
},
|
|
194226
|
-
"required": true,
|
|
194227
|
-
"description": "",
|
|
194228
|
-
"declarations": [
|
|
194229
|
-
{
|
|
194230
|
-
"name": "__computed",
|
|
194231
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/InputProvider.tsx"
|
|
194232
|
-
}
|
|
194233
|
-
],
|
|
194234
|
-
"tags": {}
|
|
194235
|
-
},
|
|
194236
|
-
{
|
|
194237
|
-
"kind": "property",
|
|
194238
|
-
"name": "__computed",
|
|
194239
|
-
"defaultValue": {
|
|
194240
|
-
"kind": "property",
|
|
194241
|
-
"name": "Mouse",
|
|
194242
|
-
"type": {
|
|
194243
|
-
"kind": "qualifiedName",
|
|
194244
|
-
"left": {
|
|
194245
|
-
"kind": "symbol",
|
|
194246
|
-
"name": "InputType",
|
|
194247
|
-
"value": "any"
|
|
194248
|
-
},
|
|
194249
|
-
"right": {
|
|
194250
|
-
"kind": "string",
|
|
194251
|
-
"value": "Mouse"
|
|
194252
|
-
}
|
|
194253
|
-
}
|
|
194254
|
-
},
|
|
194255
|
-
"type": {
|
|
194256
|
-
"kind": "symbol",
|
|
194257
|
-
"name": "InputType",
|
|
194258
|
-
"value": "InputType"
|
|
194259
|
-
},
|
|
194260
|
-
"required": true,
|
|
194261
|
-
"description": "",
|
|
194262
|
-
"declarations": [
|
|
194263
|
-
{
|
|
194264
|
-
"name": "__computed",
|
|
194265
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/InputProvider.tsx"
|
|
194266
|
-
}
|
|
194267
|
-
],
|
|
194268
|
-
"tags": {}
|
|
194269
|
-
},
|
|
194270
|
-
{
|
|
194271
|
-
"kind": "property",
|
|
194272
|
-
"name": "__computed",
|
|
194273
|
-
"defaultValue": {
|
|
194274
|
-
"kind": "property",
|
|
194275
|
-
"name": "Mouse",
|
|
194276
|
-
"type": {
|
|
194277
|
-
"kind": "qualifiedName",
|
|
194278
|
-
"left": {
|
|
194279
|
-
"kind": "symbol",
|
|
194280
|
-
"name": "InputType",
|
|
194281
|
-
"value": "any"
|
|
194282
|
-
},
|
|
194283
|
-
"right": {
|
|
194284
|
-
"kind": "string",
|
|
194285
|
-
"value": "Mouse"
|
|
194286
|
-
}
|
|
194287
|
-
}
|
|
194288
|
-
},
|
|
194289
|
-
"type": {
|
|
194290
|
-
"kind": "symbol",
|
|
194291
|
-
"name": "InputType",
|
|
194292
|
-
"value": "InputType"
|
|
194293
|
-
},
|
|
194294
|
-
"required": true,
|
|
194295
|
-
"description": "",
|
|
194296
|
-
"declarations": [
|
|
194297
|
-
{
|
|
194298
|
-
"name": "__computed",
|
|
194299
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/InputProvider.tsx"
|
|
194300
|
-
}
|
|
194301
|
-
],
|
|
194302
|
-
"tags": {}
|
|
194303
|
-
},
|
|
194304
|
-
{
|
|
194305
|
-
"kind": "property",
|
|
194306
|
-
"name": "__computed",
|
|
194307
|
-
"defaultValue": {
|
|
194308
|
-
"kind": "property",
|
|
194309
|
-
"name": "Mouse",
|
|
194310
|
-
"type": {
|
|
194311
|
-
"kind": "qualifiedName",
|
|
194312
|
-
"left": {
|
|
194313
|
-
"kind": "symbol",
|
|
194314
|
-
"name": "InputType",
|
|
194315
|
-
"value": "any"
|
|
194316
|
-
},
|
|
194317
|
-
"right": {
|
|
194318
|
-
"kind": "string",
|
|
194319
|
-
"value": "Mouse"
|
|
194320
|
-
}
|
|
194321
|
-
}
|
|
194322
|
-
},
|
|
194323
|
-
"type": {
|
|
194324
|
-
"kind": "symbol",
|
|
194325
|
-
"name": "InputType",
|
|
194326
|
-
"value": "InputType"
|
|
194327
|
-
},
|
|
194328
|
-
"required": true,
|
|
194329
|
-
"description": "",
|
|
194330
|
-
"declarations": [
|
|
194331
|
-
{
|
|
194332
|
-
"name": "__computed",
|
|
194333
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/InputProvider.tsx"
|
|
194334
|
-
}
|
|
194335
|
-
],
|
|
194336
|
-
"tags": {}
|
|
194337
|
-
},
|
|
194338
|
-
{
|
|
194339
|
-
"kind": "property",
|
|
194340
|
-
"name": "__computed",
|
|
194341
|
-
"defaultValue": {
|
|
194342
|
-
"kind": "property",
|
|
194343
|
-
"name": "Pointer",
|
|
194344
|
-
"type": {
|
|
194345
|
-
"kind": "qualifiedName",
|
|
194346
|
-
"left": {
|
|
194347
|
-
"kind": "symbol",
|
|
194348
|
-
"name": "InputType",
|
|
194349
|
-
"value": "any"
|
|
194350
|
-
},
|
|
194351
|
-
"right": {
|
|
194352
|
-
"kind": "string",
|
|
194353
|
-
"value": "Pointer"
|
|
194354
|
-
}
|
|
194355
|
-
}
|
|
194356
|
-
},
|
|
194357
|
-
"type": {
|
|
194358
|
-
"kind": "symbol",
|
|
194359
|
-
"name": "InputType",
|
|
194360
|
-
"value": "InputType"
|
|
194361
|
-
},
|
|
194362
|
-
"required": true,
|
|
194363
|
-
"description": "",
|
|
194364
|
-
"declarations": [
|
|
194365
|
-
{
|
|
194366
|
-
"name": "__computed",
|
|
194367
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/InputProvider.tsx"
|
|
194368
|
-
}
|
|
194369
|
-
],
|
|
194370
|
-
"tags": {}
|
|
194371
|
-
},
|
|
194372
|
-
{
|
|
194373
|
-
"kind": "property",
|
|
194374
|
-
"name": "__computed",
|
|
194375
|
-
"defaultValue": {
|
|
194376
|
-
"kind": "property",
|
|
194377
|
-
"name": "Pointer",
|
|
194378
|
-
"type": {
|
|
194379
|
-
"kind": "qualifiedName",
|
|
194380
|
-
"left": {
|
|
194381
|
-
"kind": "symbol",
|
|
194382
|
-
"name": "InputType",
|
|
194383
|
-
"value": "any"
|
|
194384
|
-
},
|
|
194385
|
-
"right": {
|
|
194386
|
-
"kind": "string",
|
|
194387
|
-
"value": "Pointer"
|
|
194388
|
-
}
|
|
194389
|
-
}
|
|
194390
|
-
},
|
|
194391
|
-
"type": {
|
|
194392
|
-
"kind": "symbol",
|
|
194393
|
-
"name": "InputType",
|
|
194394
|
-
"value": "InputType"
|
|
194395
|
-
},
|
|
194396
|
-
"required": true,
|
|
194397
|
-
"description": "",
|
|
194398
|
-
"declarations": [
|
|
194399
|
-
{
|
|
194400
|
-
"name": "__computed",
|
|
194401
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/InputProvider.tsx"
|
|
194402
|
-
}
|
|
194403
|
-
],
|
|
194404
|
-
"tags": {}
|
|
194405
|
-
},
|
|
194406
|
-
{
|
|
194407
|
-
"kind": "property",
|
|
194408
|
-
"name": "__computed",
|
|
194409
|
-
"defaultValue": {
|
|
194410
|
-
"kind": "property",
|
|
194411
|
-
"name": "Touch",
|
|
194412
|
-
"type": {
|
|
194413
|
-
"kind": "qualifiedName",
|
|
194414
|
-
"left": {
|
|
194415
|
-
"kind": "symbol",
|
|
194416
|
-
"name": "InputType",
|
|
194417
|
-
"value": "any"
|
|
194418
|
-
},
|
|
194419
|
-
"right": {
|
|
194420
|
-
"kind": "string",
|
|
194421
|
-
"value": "Touch"
|
|
194422
|
-
}
|
|
194423
|
-
}
|
|
194424
|
-
},
|
|
194425
|
-
"type": {
|
|
194426
|
-
"kind": "symbol",
|
|
194427
|
-
"name": "InputType",
|
|
194428
|
-
"value": "InputType"
|
|
194429
|
-
},
|
|
194430
|
-
"required": true,
|
|
194431
|
-
"description": "",
|
|
194432
|
-
"declarations": [
|
|
194433
|
-
{
|
|
194434
|
-
"name": "__computed",
|
|
194435
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/InputProvider.tsx"
|
|
194436
|
-
}
|
|
194437
|
-
],
|
|
194438
|
-
"tags": {}
|
|
194439
|
-
}
|
|
194440
|
-
]
|
|
194441
|
-
}
|
|
194442
|
-
},
|
|
194443
|
-
{
|
|
194444
|
-
"name": "InputProvider",
|
|
194445
|
-
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/InputProvider.tsx",
|
|
194446
|
-
"description": "This component takes heavy inspiration from what-input (https://github.com/ten1seven/what-input)",
|
|
194447
|
-
"declarations": [
|
|
194448
|
-
{
|
|
194449
|
-
"name": "InputProvider",
|
|
194450
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/InputProvider.tsx"
|
|
194451
|
-
}
|
|
194452
|
-
],
|
|
194453
|
-
"tags": {},
|
|
194454
|
-
"type": {
|
|
194455
|
-
"kind": "component",
|
|
194456
|
-
"props": [
|
|
194457
|
-
{
|
|
194458
|
-
"kind": "property",
|
|
194459
|
-
"name": "provideIntent",
|
|
194460
|
-
"required": false,
|
|
194461
|
-
"type": {
|
|
194462
|
-
"kind": "primitive",
|
|
194463
|
-
"value": "boolean"
|
|
194464
|
-
},
|
|
194465
|
-
"description": "",
|
|
194466
|
-
"declarations": [
|
|
194467
|
-
{
|
|
194468
|
-
"name": "provideIntent",
|
|
194469
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/InputProvider.tsx"
|
|
194470
|
-
}
|
|
194471
|
-
],
|
|
194472
|
-
"tags": {}
|
|
194473
|
-
},
|
|
194474
|
-
{
|
|
194475
|
-
"kind": "property",
|
|
194476
|
-
"name": "container",
|
|
194477
|
-
"required": false,
|
|
194478
|
-
"type": {
|
|
194479
|
-
"kind": "union",
|
|
194480
|
-
"value": [
|
|
194481
|
-
{
|
|
194482
|
-
"kind": "symbol",
|
|
194483
|
-
"name": "HTMLElement",
|
|
194484
|
-
"value": "HTMLElement"
|
|
194485
|
-
},
|
|
194486
|
-
{
|
|
194487
|
-
"kind": "symbol",
|
|
194488
|
-
"name": "React.RefObject",
|
|
194489
|
-
"typeParameters": [
|
|
194490
|
-
{
|
|
194491
|
-
"kind": "symbol",
|
|
194492
|
-
"name": "HTMLElement",
|
|
194493
|
-
"value": "HTMLElement"
|
|
194494
|
-
}
|
|
194495
|
-
],
|
|
194496
|
-
"value": "RefObject<T>"
|
|
194497
|
-
}
|
|
194498
|
-
]
|
|
194499
|
-
},
|
|
194500
|
-
"description": "",
|
|
194501
|
-
"declarations": [
|
|
194502
|
-
{
|
|
194503
|
-
"name": "container",
|
|
194504
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/InputProvider.tsx"
|
|
194505
|
-
}
|
|
194506
|
-
],
|
|
194507
|
-
"tags": {}
|
|
194508
|
-
}
|
|
194509
|
-
]
|
|
194510
|
-
}
|
|
194511
|
-
},
|
|
194512
193954
|
{
|
|
194513
193955
|
"name": "dubLogoPrimary",
|
|
194514
193956
|
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/common/lib/parts/_brand-assets.ts",
|
|
@@ -363542,327 +362984,19 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
363542
362984
|
}
|
|
363543
362985
|
},
|
|
363544
362986
|
{
|
|
363545
|
-
"name": "
|
|
362987
|
+
"name": "TabsMenuPopperProps",
|
|
363546
362988
|
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tabs/lib/TabsMenuPopper.tsx",
|
|
363547
362989
|
"description": "",
|
|
363548
362990
|
"declarations": [
|
|
363549
362991
|
{
|
|
363550
|
-
"name": "
|
|
362992
|
+
"name": "TabsMenuPopperProps",
|
|
363551
362993
|
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/tabs/lib/TabsMenuPopper.tsx"
|
|
363552
362994
|
}
|
|
363553
362995
|
],
|
|
363554
362996
|
"tags": {},
|
|
363555
362997
|
"type": {
|
|
363556
|
-
"kind": "
|
|
363557
|
-
"
|
|
363558
|
-
{
|
|
363559
|
-
"kind": "property",
|
|
363560
|
-
"name": "anchorElement",
|
|
363561
|
-
"required": false,
|
|
363562
|
-
"type": {
|
|
363563
|
-
"kind": "union",
|
|
363564
|
-
"value": [
|
|
363565
|
-
{
|
|
363566
|
-
"kind": "symbol",
|
|
363567
|
-
"name": "React.RefObject",
|
|
363568
|
-
"typeParameters": [
|
|
363569
|
-
{
|
|
363570
|
-
"kind": "external",
|
|
363571
|
-
"name": "Element",
|
|
363572
|
-
"url": "https://developer.mozilla.org/en-US/docs/Web/API/element"
|
|
363573
|
-
}
|
|
363574
|
-
],
|
|
363575
|
-
"value": "RefObject<T>"
|
|
363576
|
-
},
|
|
363577
|
-
{
|
|
363578
|
-
"kind": "external",
|
|
363579
|
-
"name": "Element",
|
|
363580
|
-
"url": "https://developer.mozilla.org/en-US/docs/Web/API/element"
|
|
363581
|
-
},
|
|
363582
|
-
{
|
|
363583
|
-
"kind": "primitive",
|
|
363584
|
-
"value": "null"
|
|
363585
|
-
}
|
|
363586
|
-
]
|
|
363587
|
-
},
|
|
363588
|
-
"description": "The reference element used to position the Popper. Popper content will try to follow the\n`anchorElement` if it moves and will reposition itself if there is no longer room in the\nwindow.",
|
|
363589
|
-
"declarations": [
|
|
363590
|
-
{
|
|
363591
|
-
"name": "anchorElement",
|
|
363592
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/Popper.tsx"
|
|
363593
|
-
}
|
|
363594
|
-
],
|
|
363595
|
-
"tags": {}
|
|
363596
|
-
},
|
|
363597
|
-
{
|
|
363598
|
-
"kind": "property",
|
|
363599
|
-
"name": "children",
|
|
363600
|
-
"required": true,
|
|
363601
|
-
"type": {
|
|
363602
|
-
"kind": "union",
|
|
363603
|
-
"value": [
|
|
363604
|
-
{
|
|
363605
|
-
"kind": "parenthesis",
|
|
363606
|
-
"value": {
|
|
363607
|
-
"kind": "function",
|
|
363608
|
-
"parameters": [
|
|
363609
|
-
{
|
|
363610
|
-
"kind": "parameter",
|
|
363611
|
-
"name": "props",
|
|
363612
|
-
"type": {
|
|
363613
|
-
"kind": "object",
|
|
363614
|
-
"properties": [
|
|
363615
|
-
{
|
|
363616
|
-
"kind": "property",
|
|
363617
|
-
"name": "placement",
|
|
363618
|
-
"required": true,
|
|
363619
|
-
"type": {
|
|
363620
|
-
"kind": "symbol",
|
|
363621
|
-
"name": "Placement",
|
|
363622
|
-
"value": "Placement"
|
|
363623
|
-
},
|
|
363624
|
-
"description": "",
|
|
363625
|
-
"declarations": [
|
|
363626
|
-
{
|
|
363627
|
-
"name": "placement",
|
|
363628
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/Popper.tsx"
|
|
363629
|
-
}
|
|
363630
|
-
],
|
|
363631
|
-
"tags": {}
|
|
363632
|
-
}
|
|
363633
|
-
]
|
|
363634
|
-
},
|
|
363635
|
-
"required": true,
|
|
363636
|
-
"rest": false,
|
|
363637
|
-
"description": "",
|
|
363638
|
-
"declarations": [
|
|
363639
|
-
{
|
|
363640
|
-
"name": "props",
|
|
363641
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/Popper.tsx"
|
|
363642
|
-
}
|
|
363643
|
-
],
|
|
363644
|
-
"tags": {}
|
|
363645
|
-
}
|
|
363646
|
-
],
|
|
363647
|
-
"members": [],
|
|
363648
|
-
"returnType": {
|
|
363649
|
-
"kind": "external",
|
|
363650
|
-
"name": "ReactNode",
|
|
363651
|
-
"url": "https://reactjs.org/docs/rendering-elements.html"
|
|
363652
|
-
}
|
|
363653
|
-
}
|
|
363654
|
-
},
|
|
363655
|
-
{
|
|
363656
|
-
"kind": "external",
|
|
363657
|
-
"name": "ReactNode",
|
|
363658
|
-
"url": "https://reactjs.org/docs/rendering-elements.html"
|
|
363659
|
-
}
|
|
363660
|
-
]
|
|
363661
|
-
},
|
|
363662
|
-
"description": "The content of the Popper. If a function is provided, it will be treated as a Render Prop and\npass the `placement` chosen by PopperJS. This `placement` value is useful if your popup needs\nto animate and that animation depends on the direction of the content in relation to the\n`anchorElement`.",
|
|
363663
|
-
"declarations": [
|
|
363664
|
-
{
|
|
363665
|
-
"name": "children",
|
|
363666
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/Popper.tsx"
|
|
363667
|
-
}
|
|
363668
|
-
],
|
|
363669
|
-
"tags": {}
|
|
363670
|
-
},
|
|
363671
|
-
{
|
|
363672
|
-
"kind": "property",
|
|
363673
|
-
"name": "getAnchorClientRect",
|
|
363674
|
-
"required": false,
|
|
363675
|
-
"type": {
|
|
363676
|
-
"kind": "function",
|
|
363677
|
-
"parameters": [],
|
|
363678
|
-
"members": [],
|
|
363679
|
-
"returnType": {
|
|
363680
|
-
"kind": "symbol",
|
|
363681
|
-
"name": "DOMRect",
|
|
363682
|
-
"value": "DOMRect"
|
|
363683
|
-
}
|
|
363684
|
-
},
|
|
363685
|
-
"description": "When provided, this optional callback will be used to determine positioning for the Popper element\ninstead of calling `getBoundingClientRect` on the `anchorElement` prop. Use this when you need\ncomplete control over positioning. When this prop is specified, it is safe to pass `null` into the\n`anchorElement` prop. If `null` is passed into the `anchorElement` prop, an `owner` will not be\nprovided for the `PopupStack`.",
|
|
363686
|
-
"declarations": [
|
|
363687
|
-
{
|
|
363688
|
-
"name": "getAnchorClientRect",
|
|
363689
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/Popper.tsx"
|
|
363690
|
-
}
|
|
363691
|
-
],
|
|
363692
|
-
"tags": {}
|
|
363693
|
-
},
|
|
363694
|
-
{
|
|
363695
|
-
"kind": "property",
|
|
363696
|
-
"name": "open",
|
|
363697
|
-
"required": false,
|
|
363698
|
-
"type": {
|
|
363699
|
-
"kind": "primitive",
|
|
363700
|
-
"value": "boolean"
|
|
363701
|
-
},
|
|
363702
|
-
"description": "Determines if `Popper` content should be rendered. The content only exists in the DOM when\n`open` is `true`",
|
|
363703
|
-
"declarations": [
|
|
363704
|
-
{
|
|
363705
|
-
"name": "open",
|
|
363706
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/Popper.tsx"
|
|
363707
|
-
}
|
|
363708
|
-
],
|
|
363709
|
-
"tags": {
|
|
363710
|
-
"default": "true"
|
|
363711
|
-
}
|
|
363712
|
-
},
|
|
363713
|
-
{
|
|
363714
|
-
"kind": "property",
|
|
363715
|
-
"name": "placement",
|
|
363716
|
-
"required": false,
|
|
363717
|
-
"type": {
|
|
363718
|
-
"kind": "symbol",
|
|
363719
|
-
"name": "Placement",
|
|
363720
|
-
"value": "Placement"
|
|
363721
|
-
},
|
|
363722
|
-
"description": "The placement of the `Popper` contents relative to the `anchorElement`. Accepts `auto`, `top`,\n`right`, `bottom`, or `left`. Each placement can also be modified using any of the following\nvariations: `-start` or `-end`.",
|
|
363723
|
-
"declarations": [
|
|
363724
|
-
{
|
|
363725
|
-
"name": "placement",
|
|
363726
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/Popper.tsx"
|
|
363727
|
-
}
|
|
363728
|
-
],
|
|
363729
|
-
"tags": {
|
|
363730
|
-
"default": "bottom"
|
|
363731
|
-
}
|
|
363732
|
-
},
|
|
363733
|
-
{
|
|
363734
|
-
"kind": "property",
|
|
363735
|
-
"name": "fallbackPlacements",
|
|
363736
|
-
"required": false,
|
|
363737
|
-
"type": {
|
|
363738
|
-
"kind": "array",
|
|
363739
|
-
"value": {
|
|
363740
|
-
"kind": "symbol",
|
|
363741
|
-
"name": "Placement",
|
|
363742
|
-
"value": "Placement"
|
|
363743
|
-
}
|
|
363744
|
-
},
|
|
363745
|
-
"description": "Define fallback placements by providing a list of {@link Placement} in array (in order of preference).\nThe default preference is following the order of `top`, `right`, `bottom`, and `left`. Once the initial\nand opposite placements are not available, the fallback placements will be in use. Use an empty array to\ndisable the fallback placements.",
|
|
363746
|
-
"declarations": [
|
|
363747
|
-
{
|
|
363748
|
-
"name": "fallbackPlacements",
|
|
363749
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/Popper.tsx"
|
|
363750
|
-
}
|
|
363751
|
-
],
|
|
363752
|
-
"tags": {}
|
|
363753
|
-
},
|
|
363754
|
-
{
|
|
363755
|
-
"kind": "property",
|
|
363756
|
-
"name": "onPlacementChange",
|
|
363757
|
-
"required": false,
|
|
363758
|
-
"type": {
|
|
363759
|
-
"kind": "function",
|
|
363760
|
-
"parameters": [
|
|
363761
|
-
{
|
|
363762
|
-
"kind": "parameter",
|
|
363763
|
-
"name": "placement",
|
|
363764
|
-
"type": {
|
|
363765
|
-
"kind": "symbol",
|
|
363766
|
-
"name": "Placement",
|
|
363767
|
-
"value": "Placement"
|
|
363768
|
-
},
|
|
363769
|
-
"required": true,
|
|
363770
|
-
"rest": false,
|
|
363771
|
-
"description": "",
|
|
363772
|
-
"declarations": [
|
|
363773
|
-
{
|
|
363774
|
-
"name": "placement",
|
|
363775
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/Popper.tsx"
|
|
363776
|
-
}
|
|
363777
|
-
],
|
|
363778
|
-
"tags": {}
|
|
363779
|
-
}
|
|
363780
|
-
],
|
|
363781
|
-
"members": [],
|
|
363782
|
-
"returnType": {
|
|
363783
|
-
"kind": "primitive",
|
|
363784
|
-
"value": "void"
|
|
363785
|
-
}
|
|
363786
|
-
},
|
|
363787
|
-
"description": "A callback function that will be called whenever PopperJS chooses a placement that is different\nfrom the provided `placement` preference. If a `placement` preference doesn't fit, PopperJS\nwill choose a new one and call this callback.",
|
|
363788
|
-
"declarations": [
|
|
363789
|
-
{
|
|
363790
|
-
"name": "onPlacementChange",
|
|
363791
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/Popper.tsx"
|
|
363792
|
-
}
|
|
363793
|
-
],
|
|
363794
|
-
"tags": {}
|
|
363795
|
-
},
|
|
363796
|
-
{
|
|
363797
|
-
"kind": "property",
|
|
363798
|
-
"name": "popperOptions",
|
|
363799
|
-
"required": false,
|
|
363800
|
-
"type": {
|
|
363801
|
-
"kind": "symbol",
|
|
363802
|
-
"name": "Partial",
|
|
363803
|
-
"typeParameters": [
|
|
363804
|
-
{
|
|
363805
|
-
"kind": "external",
|
|
363806
|
-
"name": "PopperOptions",
|
|
363807
|
-
"url": "https://popper.js.org/docs/v2/constructors/#options"
|
|
363808
|
-
}
|
|
363809
|
-
],
|
|
363810
|
-
"value": "Partial<T>"
|
|
363811
|
-
},
|
|
363812
|
-
"description": "The additional options passed to the Popper's `popper.js` instance.",
|
|
363813
|
-
"declarations": [
|
|
363814
|
-
{
|
|
363815
|
-
"name": "popperOptions",
|
|
363816
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/Popper.tsx"
|
|
363817
|
-
}
|
|
363818
|
-
],
|
|
363819
|
-
"tags": {}
|
|
363820
|
-
},
|
|
363821
|
-
{
|
|
363822
|
-
"kind": "property",
|
|
363823
|
-
"name": "portal",
|
|
363824
|
-
"required": false,
|
|
363825
|
-
"type": {
|
|
363826
|
-
"kind": "primitive",
|
|
363827
|
-
"value": "boolean"
|
|
363828
|
-
},
|
|
363829
|
-
"description": "If false, render the Popper within the\nDOM hierarchy of its parent. A non-portal Popper will constrained by the parent container\noverflows. If you set this to `false`, you may experience issues where you content gets cut off\nby scrollbars or `overflow: hidden`",
|
|
363830
|
-
"declarations": [
|
|
363831
|
-
{
|
|
363832
|
-
"name": "portal",
|
|
363833
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/Popper.tsx"
|
|
363834
|
-
}
|
|
363835
|
-
],
|
|
363836
|
-
"tags": {
|
|
363837
|
-
"default": "true"
|
|
363838
|
-
}
|
|
363839
|
-
},
|
|
363840
|
-
{
|
|
363841
|
-
"kind": "property",
|
|
363842
|
-
"name": "popperInstanceRef",
|
|
363843
|
-
"required": false,
|
|
363844
|
-
"type": {
|
|
363845
|
-
"kind": "external",
|
|
363846
|
-
"name": "Ref",
|
|
363847
|
-
"url": "https://reactjs.org/docs/refs-and-the-dom.html",
|
|
363848
|
-
"typeParameters": [
|
|
363849
|
-
{
|
|
363850
|
-
"kind": "symbol",
|
|
363851
|
-
"name": "Instance",
|
|
363852
|
-
"value": "Instance"
|
|
363853
|
-
}
|
|
363854
|
-
]
|
|
363855
|
-
},
|
|
363856
|
-
"description": "Reference to the PopperJS instance. Useful for making direct method calls on the popper\ninstance like `update`.",
|
|
363857
|
-
"declarations": [
|
|
363858
|
-
{
|
|
363859
|
-
"name": "popperInstanceRef",
|
|
363860
|
-
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/react/popup/lib/Popper.tsx"
|
|
363861
|
-
}
|
|
363862
|
-
],
|
|
363863
|
-
"tags": {}
|
|
363864
|
-
}
|
|
363865
|
-
]
|
|
362998
|
+
"kind": "alias",
|
|
362999
|
+
"name": "TabsMenuPopper"
|
|
363866
363000
|
}
|
|
363867
363001
|
},
|
|
363868
363002
|
{
|
|
@@ -418461,6 +417595,46 @@ export const docs = (typeof window !== 'undefined' && window.__docs) ||
|
|
|
418461
417595
|
}
|
|
418462
417596
|
}
|
|
418463
417597
|
},
|
|
417598
|
+
{
|
|
417599
|
+
"name": "maybeWrapCSSVariables",
|
|
417600
|
+
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/cs.ts",
|
|
417601
|
+
"description": "Wrap all unwrapped CSS Variables. For example, `{padding: '--foo'}` will be replaced with\n`{padding: 'var(--foo)'}`. It also works on variables in the middle of the property. Takes any\nstring and returns a string with CSS variables wrapped if necessary.\n\n```ts\nmaybeWrapCSSVariables('1rem'); // 1rem\nmaybeWrapCSSVariables('--foo'); // var(--foo)\nmaybeWrapCSSVariables('var(--foo)'); // var(--foo)\nmaybeWrapCSSVariables('calc(--foo)'); // calc(var(--foo))\n```",
|
|
417602
|
+
"declarations": [
|
|
417603
|
+
{
|
|
417604
|
+
"name": "maybeWrapCSSVariables",
|
|
417605
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/cs.ts"
|
|
417606
|
+
}
|
|
417607
|
+
],
|
|
417608
|
+
"tags": {},
|
|
417609
|
+
"type": {
|
|
417610
|
+
"kind": "function",
|
|
417611
|
+
"parameters": [
|
|
417612
|
+
{
|
|
417613
|
+
"kind": "parameter",
|
|
417614
|
+
"name": "input",
|
|
417615
|
+
"type": {
|
|
417616
|
+
"kind": "primitive",
|
|
417617
|
+
"value": "string"
|
|
417618
|
+
},
|
|
417619
|
+
"required": true,
|
|
417620
|
+
"rest": false,
|
|
417621
|
+
"description": "",
|
|
417622
|
+
"declarations": [
|
|
417623
|
+
{
|
|
417624
|
+
"name": "input",
|
|
417625
|
+
"filePath": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/cs.ts"
|
|
417626
|
+
}
|
|
417627
|
+
],
|
|
417628
|
+
"tags": {}
|
|
417629
|
+
}
|
|
417630
|
+
],
|
|
417631
|
+
"members": [],
|
|
417632
|
+
"returnType": {
|
|
417633
|
+
"kind": "primitive",
|
|
417634
|
+
"value": "string"
|
|
417635
|
+
}
|
|
417636
|
+
}
|
|
417637
|
+
},
|
|
418464
417638
|
{
|
|
418465
417639
|
"name": "wrapProperty",
|
|
418466
417640
|
"fileName": "/home/runner/work/canvas-kit/canvas-kit/modules/styling/lib/cs.ts",
|
|
@@ -18,11 +18,11 @@ export const packageJSONFile = `{
|
|
|
18
18
|
"@emotion/react": "11.11.4",
|
|
19
19
|
"@types/react": "18.2.60",
|
|
20
20
|
"@types/react-dom": "18.2.19",
|
|
21
|
-
"@workday/canvas-kit-labs-react": "13.2.
|
|
22
|
-
"@workday/canvas-kit-preview-react": "13.2.
|
|
23
|
-
"@workday/canvas-kit-react": "13.2.
|
|
24
|
-
"@workday/canvas-kit-react-fonts": "^13.2.
|
|
25
|
-
"@workday/canvas-kit-styling": "13.2.
|
|
21
|
+
"@workday/canvas-kit-labs-react": "13.2.24",
|
|
22
|
+
"@workday/canvas-kit-preview-react": "13.2.24",
|
|
23
|
+
"@workday/canvas-kit-react": "13.2.24",
|
|
24
|
+
"@workday/canvas-kit-react-fonts": "^13.2.24",
|
|
25
|
+
"@workday/canvas-kit-styling": "13.2.24",
|
|
26
26
|
"@workday/canvas-system-icons-web": "3.0.22",
|
|
27
27
|
"@workday/canvas-tokens-web": "2.0.0"
|
|
28
28
|
},
|
|
@@ -18,11 +18,11 @@ export const packageJSONFile = `{
|
|
|
18
18
|
"@emotion/react": "11.11.4",
|
|
19
19
|
"@types/react": "18.2.60",
|
|
20
20
|
"@types/react-dom": "18.2.19",
|
|
21
|
-
"@workday/canvas-kit-labs-react": "13.2.
|
|
22
|
-
"@workday/canvas-kit-preview-react": "13.2.
|
|
23
|
-
"@workday/canvas-kit-react": "13.2.
|
|
24
|
-
"@workday/canvas-kit-react-fonts": "^13.2.
|
|
25
|
-
"@workday/canvas-kit-styling": "13.2.
|
|
21
|
+
"@workday/canvas-kit-labs-react": "13.2.24",
|
|
22
|
+
"@workday/canvas-kit-preview-react": "13.2.24",
|
|
23
|
+
"@workday/canvas-kit-react": "13.2.24",
|
|
24
|
+
"@workday/canvas-kit-react-fonts": "^13.2.24",
|
|
25
|
+
"@workday/canvas-kit-styling": "13.2.24",
|
|
26
26
|
"@workday/canvas-system-icons-web": "3.0.22",
|
|
27
27
|
"@workday/canvas-tokens-web": "2.0.0"
|
|
28
28
|
},
|
|
@@ -9,6 +9,7 @@ any questions.
|
|
|
9
9
|
- [Codemod](#codemod)
|
|
10
10
|
- [Instructions](#instructions)
|
|
11
11
|
- [Theming](#theming)
|
|
12
|
+
- [Canvas Provider](#canvas-provider-)
|
|
12
13
|
- [Component Updates](#component-updates)
|
|
13
14
|
- [Avatar in Preview](#avatar-in-preview)
|
|
14
15
|
- [Branding Changes](#branding-changes)
|
|
@@ -30,8 +31,9 @@ any questions.
|
|
|
30
31
|
- [Tokens](#tokens)
|
|
31
32
|
- [Removals](#removals)
|
|
32
33
|
- [Deprecated Buttons](#deprecated-buttons)
|
|
34
|
+
- [Input Provider](#input-provider)
|
|
33
35
|
- [Menu (preview)](#menu-preview)
|
|
34
|
-
- [readyOnlyPillStencil and removeablePillStencil]
|
|
36
|
+
- [readyOnlyPillStencil and removeablePillStencil](readyOnlyPillStencil-and-removeablePillStencil)
|
|
35
37
|
- [Troubleshooting](#troubleshooting)
|
|
36
38
|
- [Glossary](#glossary)
|
|
37
39
|
- [Main](#main)
|
|
@@ -101,10 +103,64 @@ yarn remove @workday/canvas-kit-codemod
|
|
|
101
103
|
|
|
102
104
|
## Theming
|
|
103
105
|
|
|
104
|
-
|
|
106
|
+
### Canvas Provider 🚨
|
|
105
107
|
|
|
106
|
-
-
|
|
107
|
-
|
|
108
|
+
**PRs:** [#3407](https://github.com/Workday/canvas-kit/pull/3407), [#3394](https://github.com/Workday/canvas-kit/pull/3394)
|
|
109
|
+
|
|
110
|
+
- `CanvasThemePalette` and `CanvasTheme` type have been updated to include a `lighter` property.
|
|
111
|
+
- `CanvasProvider` `theme` prop has been updated to include a `lighter` color for each palette.
|
|
112
|
+
|
|
113
|
+
#### Breaking Changes
|
|
114
|
+
|
|
115
|
+
Canvas Provider has been updated to **remove** default branding colors to ensure proper cascading of our CSS variables. Instead of generating a palette and shifting the brightness and darkness with `chroma.js`, we use `oklch` to generate the palette colors.
|
|
116
|
+
|
|
117
|
+
**Before in v13**
|
|
118
|
+
In v13, the `useTheme` hook would call `createCanvasTheme` which generated a palette given a `main` color via `chroma.js`.
|
|
119
|
+
|
|
120
|
+
```tsx
|
|
121
|
+
<CanvasProvider theme={{canvas: {palette: {primary: {main: 'purple'}}}}}>
|
|
122
|
+
<App/>
|
|
123
|
+
</CanvasProvider>
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
**After in v14**
|
|
127
|
+
We use `oklch` to generate the palette colors. The color shifting will be different. If you want more control over the colors, we suggest providing the full palette object.
|
|
128
|
+
|
|
129
|
+
```tsx
|
|
130
|
+
<CanvasProvider theme={
|
|
131
|
+
{canvas: {
|
|
132
|
+
palette: {
|
|
133
|
+
primary: {
|
|
134
|
+
lightest: base.blue25,
|
|
135
|
+
light: base.blue200,
|
|
136
|
+
main: base.blue600,
|
|
137
|
+
dark: base.blue700,
|
|
138
|
+
darkest: base.blue800,
|
|
139
|
+
contrast: base.neutral0,
|
|
140
|
+
},
|
|
141
|
+
},
|
|
142
|
+
}}}>
|
|
143
|
+
<App/>
|
|
144
|
+
</CanvasProvider>
|
|
145
|
+
```
|
|
146
|
+
|
|
147
|
+
**Or**
|
|
148
|
+
|
|
149
|
+
```tsx
|
|
150
|
+
<CanvasProvider theme={{canvas: {palette: {primary: {main: cssVar(base.blue600)}}}}}>
|
|
151
|
+
<App/>
|
|
152
|
+
</CanvasProvider>
|
|
153
|
+
```
|
|
154
|
+
|
|
155
|
+
> **Note:** The way `chroma.js` and `oklch` generate colors **is different**. While we work on a better algorithm to determine hue, chroma and lightness and color shifting that best represents an accessible palette, **you may see color discrepancies**. If you want to continue using the old way of generating a color palette with `chroma.js`, you can use `createCanvasTheme`.
|
|
156
|
+
|
|
157
|
+
```tsx
|
|
158
|
+
<CanvasProvider theme={{canvas: createCanvasTheme({palette: {primary: {main: cssVar(base.blue600)}}})}}>
|
|
159
|
+
<App/>
|
|
160
|
+
</CanvasProvider>
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
The reason for this change is to ensure that the CSS variables properly cascade to all components. Before in v13, the `CanvasProvider` would add the brand tokens under a class name, creating a higher specificity.
|
|
108
164
|
|
|
109
165
|
## Component Updates
|
|
110
166
|
|
|
@@ -536,6 +592,28 @@ as a reminder of how far we've come and it part we're thankful for this change.
|
|
|
536
592
|
Al though unlikely, but not impossible, if you were using `DeprecatedButton` please use our flexible
|
|
537
593
|
and themable buttons like `PrimaryButton`, `ScondaryButton` or `TertiaryButton`.
|
|
538
594
|
|
|
595
|
+
### Input Provider
|
|
596
|
+
|
|
597
|
+
We've removed `InputProvider` from our codebase and the `CanvasProvider`. The intent of the provider was to check the users input and apply focus styles accordingly to our components. This was needed when we still supported IE11 to ensure we could be consistent on styling based on user input events. Since dropping support and moving to `:focus-visible`, we no longer need this provider.
|
|
598
|
+
We now allow browser heuristics to determine when an element should receive visual focus styles. For more information, please view the [MDN docs on `:focus-visible`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible).
|
|
599
|
+
|
|
600
|
+
If you are trying to apply focus styles to our components, we strongly avise to use `:focus-visible` pseudo selector.
|
|
601
|
+
|
|
602
|
+
```tsx
|
|
603
|
+
import {createStyles} from '@workday/canvas-kit-styling'
|
|
604
|
+
import {PrimaryButton} from '@workday/canvas-kit-react/button'
|
|
605
|
+
|
|
606
|
+
const buttonStyles = createStyles({
|
|
607
|
+
'&:focus-visible': {
|
|
608
|
+
outline: '2px solid red'
|
|
609
|
+
}
|
|
610
|
+
})
|
|
611
|
+
|
|
612
|
+
<PrimaryButton cs={buttonStyles}>
|
|
613
|
+
Click Me
|
|
614
|
+
</PrimaryButton>
|
|
615
|
+
```
|
|
616
|
+
|
|
539
617
|
### Menu (preview)
|
|
540
618
|
|
|
541
619
|
**PR:** [#3353](https://github.com/Workday/canvas-kit/pull/3353)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import {TextInput} from '@workday/canvas-kit-preview-react/text-input';
|
|
3
3
|
import {CanvasProvider, PartialEmotionCanvasTheme} from '@workday/canvas-kit-react/common';
|
|
4
|
-
import {system} from '@workday/canvas-tokens-web';
|
|
4
|
+
import {system, base} from '@workday/canvas-tokens-web';
|
|
5
5
|
import {cssVar} from '@workday/canvas-kit-styling';
|
|
6
6
|
|
|
7
7
|
export default () => {
|
|
@@ -15,11 +15,12 @@ export default () => {
|
|
|
15
15
|
canvas: {
|
|
16
16
|
palette: {
|
|
17
17
|
error: {
|
|
18
|
-
lightest: cssVar(
|
|
18
|
+
lightest: cssVar(base.purple100),
|
|
19
|
+
main: cssVar(base.purple600),
|
|
19
20
|
},
|
|
20
21
|
common: {
|
|
21
22
|
focusOutline: cssVar(system.color.static.green.default),
|
|
22
|
-
errorInner: cssVar(
|
|
23
|
+
errorInner: cssVar(base.purple600),
|
|
23
24
|
},
|
|
24
25
|
},
|
|
25
26
|
},
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "14.0.0-alpha.
|
|
3
|
+
"version": "14.0.0-alpha.1230-next.0",
|
|
4
4
|
"description": "Documentation components of Canvas Kit components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -45,10 +45,10 @@
|
|
|
45
45
|
"@emotion/styled": "^11.6.0",
|
|
46
46
|
"@stackblitz/sdk": "^1.11.0",
|
|
47
47
|
"@storybook/csf": "0.0.1",
|
|
48
|
-
"@workday/canvas-kit-labs-react": "^14.0.0-alpha.
|
|
49
|
-
"@workday/canvas-kit-preview-react": "^14.0.0-alpha.
|
|
50
|
-
"@workday/canvas-kit-react": "^14.0.0-alpha.
|
|
51
|
-
"@workday/canvas-kit-styling": "^14.0.0-alpha.
|
|
48
|
+
"@workday/canvas-kit-labs-react": "^14.0.0-alpha.1230-next.0",
|
|
49
|
+
"@workday/canvas-kit-preview-react": "^14.0.0-alpha.1230-next.0",
|
|
50
|
+
"@workday/canvas-kit-react": "^14.0.0-alpha.1230-next.0",
|
|
51
|
+
"@workday/canvas-kit-styling": "^14.0.0-alpha.1230-next.0",
|
|
52
52
|
"@workday/canvas-system-icons-web": "^3.0.35",
|
|
53
53
|
"@workday/canvas-tokens-web": "3.0.0-alpha.12",
|
|
54
54
|
"markdown-to-jsx": "^7.2.0",
|
|
@@ -61,5 +61,5 @@
|
|
|
61
61
|
"mkdirp": "^1.0.3",
|
|
62
62
|
"typescript": "5.0"
|
|
63
63
|
},
|
|
64
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "8080313203652737f30e578bb2ef8d4225948d6b"
|
|
65
65
|
}
|