@atlaskit/ads-mcp 1.8.1 → 1.9.1
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 +31 -0
- package/dist/cjs/tools/get-all-components/components.codegen.js +2 -2
- package/dist/cjs/tools/get-all-icons/icons.js +2 -2
- package/dist/cjs/tools/get-atlaskit-components/atlaskit-components.codegen.js +2 -2
- package/dist/cjs/tools/get-atlaskit-hooks/atlaskit-hooks.codegen.js +123 -3
- package/dist/cjs/tools/get-atlaskit-utilities/atlaskit-utilities.codegen.js +488 -3
- package/dist/cjs/tools/migration-guides/migrations/onboarding-multi-step.js +2 -2
- package/dist/cjs/tools/migration-guides/migrations/onboarding-single-step.js +2 -2
- package/dist/cjs/tools/migration-guides/migrations/onboarding-with-motion.js +2 -2
- package/dist/es2019/tools/get-all-components/components.codegen.js +2 -2
- package/dist/es2019/tools/get-all-icons/icons.js +1 -1
- package/dist/es2019/tools/get-atlaskit-components/atlaskit-components.codegen.js +2 -2
- package/dist/es2019/tools/get-atlaskit-hooks/atlaskit-hooks.codegen.js +123 -3
- package/dist/es2019/tools/get-atlaskit-utilities/atlaskit-utilities.codegen.js +488 -3
- package/dist/es2019/tools/migration-guides/migrations/onboarding-multi-step.js +4 -2
- package/dist/es2019/tools/migration-guides/migrations/onboarding-single-step.js +3 -3
- package/dist/es2019/tools/migration-guides/migrations/onboarding-with-motion.js +2 -2
- package/dist/esm/tools/get-all-components/components.codegen.js +2 -2
- package/dist/esm/tools/get-all-icons/icons.js +1 -1
- package/dist/esm/tools/get-atlaskit-components/atlaskit-components.codegen.js +2 -2
- package/dist/esm/tools/get-atlaskit-hooks/atlaskit-hooks.codegen.js +123 -3
- package/dist/esm/tools/get-atlaskit-utilities/atlaskit-utilities.codegen.js +488 -3
- package/dist/esm/tools/migration-guides/migrations/onboarding-multi-step.js +2 -2
- package/dist/esm/tools/migration-guides/migrations/onboarding-single-step.js +2 -2
- package/dist/esm/tools/migration-guides/migrations/onboarding-with-motion.js +2 -2
- package/dist/types/tools/get-all-components/components.codegen.d.ts +1 -1
- package/dist/types/tools/get-atlaskit-components/atlaskit-components.codegen.d.ts +1 -1
- package/dist/types/tools/get-atlaskit-hooks/atlaskit-hooks.codegen.d.ts +1 -1
- package/dist/types/tools/get-atlaskit-utilities/atlaskit-utilities.codegen.d.ts +1 -1
- package/package.json +4 -4
|
@@ -9,7 +9,7 @@ exports.atlaskitUtilities = void 0;
|
|
|
9
9
|
*
|
|
10
10
|
* Structured content utilities from design-system *.docs.tsx files
|
|
11
11
|
*
|
|
12
|
-
* @codegen <<SignedSource::
|
|
12
|
+
* @codegen <<SignedSource::359ec42ca1d2584fe22747b346c596eb>>
|
|
13
13
|
* @codegenCommand yarn workspace @af/ads-ai-tooling codegen
|
|
14
14
|
*/
|
|
15
15
|
/* eslint-disable @repo/internal/react/boolean-prop-naming-convention -- not our types */
|
|
@@ -827,6 +827,15 @@ var atlaskitUtilities = exports.atlaskitUtilities = [{
|
|
|
827
827
|
package: '@atlassian/a2ui-renderer-next',
|
|
828
828
|
examples: [],
|
|
829
829
|
kind: 'constant'
|
|
830
|
+
}, {
|
|
831
|
+
name: 'CodeDiffAdapter',
|
|
832
|
+
description: 'The A2UI v0.9 component implementation registered for CodeDiff.',
|
|
833
|
+
status: 'early-access',
|
|
834
|
+
keywords: ['a2ui', 'renderer', 'adapter', 'v0.9'],
|
|
835
|
+
category: 'ai',
|
|
836
|
+
package: '@atlassian/a2ui-renderer-next',
|
|
837
|
+
examples: [],
|
|
838
|
+
kind: 'constant'
|
|
830
839
|
}, {
|
|
831
840
|
name: 'ColumnAdapter',
|
|
832
841
|
description: 'The A2UI v0.9 component implementation registered for Column.',
|
|
@@ -838,14 +847,14 @@ var atlaskitUtilities = exports.atlaskitUtilities = [{
|
|
|
838
847
|
kind: 'constant'
|
|
839
848
|
}, {
|
|
840
849
|
name: 'createADSCatalog',
|
|
841
|
-
description: 'Creates the Atlassian Design System catalog used to register A2UI v0.9 component implementations.',
|
|
850
|
+
description: 'Creates the Atlassian Design System catalog used to register A2UI v0.9 component implementations. Heavyweight adapters can be composed in explicitly.',
|
|
842
851
|
status: 'early-access',
|
|
843
852
|
keywords: ['a2ui', 'catalog', 'ads', 'v0.9'],
|
|
844
853
|
category: 'ai',
|
|
845
854
|
package: '@atlassian/a2ui-renderer-next',
|
|
846
855
|
examples: [],
|
|
847
856
|
kind: 'function',
|
|
848
|
-
signature: 'createADSCatalog(): Catalog<ReactComponentImplementation>'
|
|
857
|
+
signature: 'createADSCatalog(options?: { adapters?: ReactComponentImplementation[] }): Catalog<ReactComponentImplementation>'
|
|
849
858
|
}, {
|
|
850
859
|
name: 'createSurface',
|
|
851
860
|
description: 'Creates an A2UI v0.9 surface from component entries and a catalog configuration.',
|
|
@@ -1038,4 +1047,480 @@ var atlaskitUtilities = exports.atlaskitUtilities = [{
|
|
|
1038
1047
|
package: '@atlassian/logo-third-party',
|
|
1039
1048
|
examples: [],
|
|
1040
1049
|
kind: 'type'
|
|
1050
|
+
}, {
|
|
1051
|
+
name: 'AppFilterItemData',
|
|
1052
|
+
description: 'The consumer-owned data shape for one application filter option.',
|
|
1053
|
+
status: 'general-availability',
|
|
1054
|
+
keywords: ['rovo', 'platform-ui-components', 'AppFilterItemData'],
|
|
1055
|
+
category: 'api',
|
|
1056
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1057
|
+
examples: [],
|
|
1058
|
+
kind: 'type',
|
|
1059
|
+
definition: '{ id: string; name: string; icon: React.ReactNode; isSelected: boolean; isConnected: boolean; isNewlyEnabled?: boolean }'
|
|
1060
|
+
}, {
|
|
1061
|
+
name: 'APPROVAL_REQUIRED_FOR_FIRST_PUBLISH',
|
|
1062
|
+
description: 'The error token indicating that approval is required before first publish.',
|
|
1063
|
+
status: 'general-availability',
|
|
1064
|
+
usageGuidelines: ['Import APPROVAL_REQUIRED_FOR_FIRST_PUBLISH from its explicit package entrypoint and treat it as read-only.'],
|
|
1065
|
+
keywords: ['confluence', 'approval', 'publish', 'error'],
|
|
1066
|
+
category: 'confluence',
|
|
1067
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1068
|
+
examples: [],
|
|
1069
|
+
kind: 'constant',
|
|
1070
|
+
type: 'string'
|
|
1071
|
+
}, {
|
|
1072
|
+
name: 'AUTHORITY_FEEDBACK_ORIGIN_CHAT',
|
|
1073
|
+
description: 'The feedback origin value for the Rovo Chat experience.',
|
|
1074
|
+
status: 'general-availability',
|
|
1075
|
+
usageGuidelines: ['Import AUTHORITY_FEEDBACK_ORIGIN_CHAT from its explicit package entrypoint and treat it as read-only.'],
|
|
1076
|
+
keywords: ['rovo', 'authority', 'feedback', 'analytics'],
|
|
1077
|
+
category: 'analytics',
|
|
1078
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1079
|
+
examples: [],
|
|
1080
|
+
kind: 'constant',
|
|
1081
|
+
type: 'string'
|
|
1082
|
+
}, {
|
|
1083
|
+
name: 'AUTHORITY_FEEDBACK_ORIGIN_SAIN',
|
|
1084
|
+
description: 'The feedback origin value for the Search Answers in-product experience.',
|
|
1085
|
+
status: 'general-availability',
|
|
1086
|
+
usageGuidelines: ['Import AUTHORITY_FEEDBACK_ORIGIN_SAIN from its explicit package entrypoint and treat it as read-only.'],
|
|
1087
|
+
keywords: ['rovo', 'authority', 'feedback', 'analytics'],
|
|
1088
|
+
category: 'analytics',
|
|
1089
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1090
|
+
examples: [],
|
|
1091
|
+
kind: 'constant',
|
|
1092
|
+
type: 'string'
|
|
1093
|
+
}, {
|
|
1094
|
+
name: 'BrowseItem',
|
|
1095
|
+
description: 'The consumer-provided item shape rendered by the inline browse surface.',
|
|
1096
|
+
status: 'general-availability',
|
|
1097
|
+
keywords: ['rovo', 'platform-ui-components', 'BrowseItem'],
|
|
1098
|
+
category: 'api',
|
|
1099
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1100
|
+
examples: [],
|
|
1101
|
+
kind: 'type',
|
|
1102
|
+
definition: '{ id: string; name: string; description?: string; iconName?: string; iconColor?: string; product?: string; appIds?: string[]; roles?: string[] }'
|
|
1103
|
+
}, {
|
|
1104
|
+
name: 'buildAuthoritativeAnswerPanelShownEvent',
|
|
1105
|
+
description: 'Builds the analytics event payload emitted when an authoritative-answer panel is shown.',
|
|
1106
|
+
status: 'general-availability',
|
|
1107
|
+
usageGuidelines: ['Import buildAuthoritativeAnswerPanelShownEvent from its explicit package entrypoint.', 'Keep product-specific orchestration and side effects at the call site unless the function explicitly owns them.'],
|
|
1108
|
+
keywords: ['rovo', 'authority', 'analytics', 'event'],
|
|
1109
|
+
category: 'analytics',
|
|
1110
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1111
|
+
examples: [],
|
|
1112
|
+
kind: 'function',
|
|
1113
|
+
signature: '(params: AuthorityAttributes) => UIAnalyticsEventPayload'
|
|
1114
|
+
}, {
|
|
1115
|
+
name: 'ConfluenceContentType',
|
|
1116
|
+
description: 'A supported Confluence content type used by selector filters.',
|
|
1117
|
+
status: 'general-availability',
|
|
1118
|
+
keywords: ['rovo', 'platform-ui-components', 'ConfluenceContentType'],
|
|
1119
|
+
category: 'api',
|
|
1120
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1121
|
+
examples: [],
|
|
1122
|
+
kind: 'type',
|
|
1123
|
+
definition: "'page' | 'blogPost' | 'whiteboard' | 'database' | 'folder' | 'embed'"
|
|
1124
|
+
}, {
|
|
1125
|
+
name: 'ConfluencePageOption',
|
|
1126
|
+
description: 'The selectable option shape passed to the Confluence page selector.',
|
|
1127
|
+
status: 'general-availability',
|
|
1128
|
+
keywords: ['rovo', 'platform-ui-components', 'ConfluencePageOption'],
|
|
1129
|
+
category: 'api',
|
|
1130
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1131
|
+
examples: [],
|
|
1132
|
+
kind: 'type',
|
|
1133
|
+
definition: '{ label: string; value: string; type: ConfluenceContentType; subType?: string }'
|
|
1134
|
+
}, {
|
|
1135
|
+
name: 'CONTENT_TYPES',
|
|
1136
|
+
description: 'The supported Confluence content types used by page selectors.',
|
|
1137
|
+
status: 'general-availability',
|
|
1138
|
+
usageGuidelines: ['Import CONTENT_TYPES from its explicit package entrypoint and treat it as read-only.'],
|
|
1139
|
+
keywords: ['confluence', 'content-type', 'selector'],
|
|
1140
|
+
category: 'confluence',
|
|
1141
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1142
|
+
examples: [],
|
|
1143
|
+
kind: 'constant',
|
|
1144
|
+
type: 'Record<string, ConfluenceContentType>'
|
|
1145
|
+
}, {
|
|
1146
|
+
name: 'convertContentType',
|
|
1147
|
+
description: 'Converts a Confluence result content type into the selector content type used by the UI.',
|
|
1148
|
+
status: 'general-availability',
|
|
1149
|
+
usageGuidelines: ['Import convertContentType from its explicit package entrypoint.', 'Keep product-specific orchestration and side effects at the call site unless the function explicitly owns them.'],
|
|
1150
|
+
keywords: ['confluence', 'page', 'content-type'],
|
|
1151
|
+
category: 'confluence',
|
|
1152
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1153
|
+
examples: [],
|
|
1154
|
+
kind: 'function',
|
|
1155
|
+
signature: '(result: string) => ConfluenceContentType'
|
|
1156
|
+
}, {
|
|
1157
|
+
name: 'defaultIcon',
|
|
1158
|
+
description: 'Lazily loads the default skill icon module.',
|
|
1159
|
+
status: 'general-availability',
|
|
1160
|
+
usageGuidelines: ['Import defaultIcon from its explicit package entrypoint.', 'Keep product-specific orchestration and side effects at the call site unless the function explicitly owns them.'],
|
|
1161
|
+
keywords: ['rovo', 'skill', 'icon', 'lazy'],
|
|
1162
|
+
category: 'media',
|
|
1163
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1164
|
+
examples: [],
|
|
1165
|
+
kind: 'function',
|
|
1166
|
+
signature: '() => Promise<typeof import("@atlaskit/icon-lab/core/skill")>'
|
|
1167
|
+
}, {
|
|
1168
|
+
name: 'extractContentId',
|
|
1169
|
+
description: 'Extracts a Confluence content ID from an ARI.',
|
|
1170
|
+
status: 'general-availability',
|
|
1171
|
+
usageGuidelines: ['Import extractContentId from its explicit package entrypoint.', 'Keep product-specific orchestration and side effects at the call site unless the function explicitly owns them.'],
|
|
1172
|
+
keywords: ['confluence', 'page', 'ari', 'content-id'],
|
|
1173
|
+
category: 'confluence',
|
|
1174
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1175
|
+
examples: [],
|
|
1176
|
+
kind: 'function',
|
|
1177
|
+
signature: '(ari: string) => string'
|
|
1178
|
+
}, {
|
|
1179
|
+
name: 'FallbackSuccessCallback',
|
|
1180
|
+
description: 'Callback invoked after a successful fallback search.',
|
|
1181
|
+
status: 'general-availability',
|
|
1182
|
+
keywords: ['rovo', 'platform-ui-components', 'FallbackSuccessCallback'],
|
|
1183
|
+
category: 'api',
|
|
1184
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1185
|
+
examples: [],
|
|
1186
|
+
kind: 'type',
|
|
1187
|
+
definition: '(result: { fallbackResultCount: number }) => void'
|
|
1188
|
+
}, {
|
|
1189
|
+
name: 'FEEDBACK_ENTRYPOINT_ID_CHAT',
|
|
1190
|
+
description: 'The feedback entrypoint ID for the Rovo Chat experience.',
|
|
1191
|
+
status: 'general-availability',
|
|
1192
|
+
usageGuidelines: ['Import FEEDBACK_ENTRYPOINT_ID_CHAT from its explicit package entrypoint and treat it as read-only.'],
|
|
1193
|
+
keywords: ['rovo', 'authority', 'feedback', 'analytics'],
|
|
1194
|
+
category: 'analytics',
|
|
1195
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1196
|
+
examples: [],
|
|
1197
|
+
kind: 'constant',
|
|
1198
|
+
type: 'string'
|
|
1199
|
+
}, {
|
|
1200
|
+
name: 'FEEDBACK_ENTRYPOINT_ID_SAIN',
|
|
1201
|
+
description: 'The feedback entrypoint ID for the Search Answers in-product experience.',
|
|
1202
|
+
status: 'general-availability',
|
|
1203
|
+
usageGuidelines: ['Import FEEDBACK_ENTRYPOINT_ID_SAIN from its explicit package entrypoint and treat it as read-only.'],
|
|
1204
|
+
keywords: ['rovo', 'authority', 'feedback', 'analytics'],
|
|
1205
|
+
category: 'analytics',
|
|
1206
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1207
|
+
examples: [],
|
|
1208
|
+
kind: 'constant',
|
|
1209
|
+
type: 'string'
|
|
1210
|
+
}, {
|
|
1211
|
+
name: 'FetchRecommendedSpacesFn',
|
|
1212
|
+
description: 'The function shape used to fetch recommended Confluence spaces.',
|
|
1213
|
+
status: 'general-availability',
|
|
1214
|
+
keywords: ['rovo', 'platform-ui-components', 'FetchRecommendedSpacesFn'],
|
|
1215
|
+
category: 'api',
|
|
1216
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1217
|
+
examples: [],
|
|
1218
|
+
kind: 'type',
|
|
1219
|
+
definition: '(...args: unknown[]) => Promise<unknown>'
|
|
1220
|
+
}, {
|
|
1221
|
+
name: 'filterBrowseItems',
|
|
1222
|
+
description: 'Filters browse items by a case-insensitive search value.',
|
|
1223
|
+
status: 'general-availability',
|
|
1224
|
+
usageGuidelines: ['Import filterBrowseItems from its explicit package entrypoint.', 'Keep product-specific orchestration and side effects at the call site unless the function explicitly owns them.'],
|
|
1225
|
+
keywords: ['browse', 'search', 'filter'],
|
|
1226
|
+
category: 'search',
|
|
1227
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1228
|
+
examples: [],
|
|
1229
|
+
kind: 'function',
|
|
1230
|
+
signature: '(browseItems: BrowseItem[], searchValue: string) => BrowseItem[]'
|
|
1231
|
+
}, {
|
|
1232
|
+
name: 'getAuthorityAttributes',
|
|
1233
|
+
description: 'Builds the analytics attributes describing the authority source for an answer.',
|
|
1234
|
+
status: 'general-availability',
|
|
1235
|
+
usageGuidelines: ['Import getAuthorityAttributes from its explicit package entrypoint.', 'Keep product-specific orchestration and side effects at the call site unless the function explicitly owns them.'],
|
|
1236
|
+
keywords: ['rovo', 'authority', 'analytics'],
|
|
1237
|
+
category: 'analytics',
|
|
1238
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1239
|
+
examples: [],
|
|
1240
|
+
kind: 'function',
|
|
1241
|
+
signature: '(authority: AuthorityAttributes) => Record<string, string | undefined>'
|
|
1242
|
+
}, {
|
|
1243
|
+
name: 'getBorderColor',
|
|
1244
|
+
description: 'Returns the design-token border color for a skill color and inversion mode.',
|
|
1245
|
+
status: 'general-availability',
|
|
1246
|
+
usageGuidelines: ['Import getBorderColor from its explicit package entrypoint.', 'Keep product-specific orchestration and side effects at the call site unless the function explicitly owns them.'],
|
|
1247
|
+
keywords: ['rovo', 'skill', 'color', 'token'],
|
|
1248
|
+
category: 'styling',
|
|
1249
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1250
|
+
examples: [],
|
|
1251
|
+
kind: 'function',
|
|
1252
|
+
signature: '(color?: SkillColor, invertColors?: boolean) => CSSToken'
|
|
1253
|
+
}, {
|
|
1254
|
+
name: 'getIconColor',
|
|
1255
|
+
description: 'Returns the icon color for a skill color and inversion mode.',
|
|
1256
|
+
status: 'general-availability',
|
|
1257
|
+
usageGuidelines: ['Import getIconColor from its explicit package entrypoint.', 'Keep product-specific orchestration and side effects at the call site unless the function explicitly owns them.'],
|
|
1258
|
+
keywords: ['rovo', 'skill', 'color', 'icon'],
|
|
1259
|
+
category: 'styling',
|
|
1260
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1261
|
+
examples: [],
|
|
1262
|
+
kind: 'function',
|
|
1263
|
+
signature: '(color?: SkillColor, invertColors?: boolean) => IconColor'
|
|
1264
|
+
}, {
|
|
1265
|
+
name: 'getLogoForSourceType',
|
|
1266
|
+
description: 'Returns the logo component for a resolved source type.',
|
|
1267
|
+
status: 'general-availability',
|
|
1268
|
+
usageGuidelines: ['Import getLogoForSourceType from its explicit package entrypoint.', 'Keep product-specific orchestration and side effects at the call site unless the function explicitly owns them.'],
|
|
1269
|
+
keywords: ['rovo', 'source', 'logo'],
|
|
1270
|
+
category: 'media',
|
|
1271
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1272
|
+
examples: [],
|
|
1273
|
+
kind: 'function',
|
|
1274
|
+
signature: '(sourceType: LogoTypes) => React.ElementType<LogoProps>'
|
|
1275
|
+
}, {
|
|
1276
|
+
name: 'getPreviewItemIconConfig',
|
|
1277
|
+
description: 'Resolves the icon configuration for a preview item content type.',
|
|
1278
|
+
status: 'general-availability',
|
|
1279
|
+
usageGuidelines: ['Import getPreviewItemIconConfig from its explicit package entrypoint.', 'Keep product-specific orchestration and side effects at the call site unless the function explicitly owns them.'],
|
|
1280
|
+
keywords: ['preview', 'item', 'icon', 'content-type'],
|
|
1281
|
+
category: 'media',
|
|
1282
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1283
|
+
examples: [],
|
|
1284
|
+
kind: 'function',
|
|
1285
|
+
signature: '(contentType: string) => PreviewItemIconConfig | undefined'
|
|
1286
|
+
}, {
|
|
1287
|
+
name: 'getSourceType',
|
|
1288
|
+
description: 'Resolves the logo type for a source identifier.',
|
|
1289
|
+
status: 'general-availability',
|
|
1290
|
+
usageGuidelines: ['Import getSourceType from its explicit package entrypoint.', 'Keep product-specific orchestration and side effects at the call site unless the function explicitly owns them.'],
|
|
1291
|
+
keywords: ['rovo', 'source', 'logo'],
|
|
1292
|
+
category: 'media',
|
|
1293
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1294
|
+
examples: [],
|
|
1295
|
+
kind: 'function',
|
|
1296
|
+
signature: '(source: string) => LogoTypes'
|
|
1297
|
+
}, {
|
|
1298
|
+
name: 'getSpaceFilterContentType',
|
|
1299
|
+
description: 'Returns the content type used to filter recommended Confluence spaces.',
|
|
1300
|
+
status: 'general-availability',
|
|
1301
|
+
usageGuidelines: ['Import getSpaceFilterContentType from its explicit package entrypoint.', 'Keep product-specific orchestration and side effects at the call site unless the function explicitly owns them.'],
|
|
1302
|
+
keywords: ['confluence', 'space', 'filter', 'content-type'],
|
|
1303
|
+
category: 'confluence',
|
|
1304
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1305
|
+
examples: [],
|
|
1306
|
+
kind: 'function',
|
|
1307
|
+
signature: '(params: SpaceFilterParams) => ConfluenceContentType'
|
|
1308
|
+
}, {
|
|
1309
|
+
name: 'ListEntitiesFn',
|
|
1310
|
+
description: 'The function shape used to list Confluence entities.',
|
|
1311
|
+
status: 'general-availability',
|
|
1312
|
+
keywords: ['rovo', 'platform-ui-components', 'ListEntitiesFn'],
|
|
1313
|
+
category: 'api',
|
|
1314
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1315
|
+
examples: [],
|
|
1316
|
+
kind: 'type',
|
|
1317
|
+
definition: '(...args: unknown[]) => Promise<unknown>'
|
|
1318
|
+
}, {
|
|
1319
|
+
name: 'LoadingStatus',
|
|
1320
|
+
description: 'The supported loading status values.',
|
|
1321
|
+
status: 'general-availability',
|
|
1322
|
+
keywords: ['rovo', 'platform-ui-components', 'LoadingStatus'],
|
|
1323
|
+
category: 'api',
|
|
1324
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1325
|
+
examples: [],
|
|
1326
|
+
kind: 'type',
|
|
1327
|
+
definition: "'loading' | 'success' | 'error' | 'info' | 'warning' | 'discovery' | 'to-do'"
|
|
1328
|
+
}, {
|
|
1329
|
+
name: 'MAX_VISIBLE_LOGOS',
|
|
1330
|
+
description: 'The maximum number of source logos shown in a SourceLogoStack before overflow is collapsed.',
|
|
1331
|
+
status: 'general-availability',
|
|
1332
|
+
usageGuidelines: ['Import MAX_VISIBLE_LOGOS from its explicit package entrypoint and treat it as read-only.'],
|
|
1333
|
+
keywords: ['rovo', 'source', 'logo', 'stack'],
|
|
1334
|
+
category: 'media',
|
|
1335
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1336
|
+
examples: [],
|
|
1337
|
+
kind: 'constant',
|
|
1338
|
+
type: 'number'
|
|
1339
|
+
}, {
|
|
1340
|
+
name: 'MessageFeedbackType',
|
|
1341
|
+
description: 'The supported answer feedback values.',
|
|
1342
|
+
status: 'general-availability',
|
|
1343
|
+
keywords: ['rovo', 'platform-ui-components', 'MessageFeedbackType'],
|
|
1344
|
+
category: 'api',
|
|
1345
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1346
|
+
examples: [],
|
|
1347
|
+
kind: 'type',
|
|
1348
|
+
definition: "'like' | 'dislike'"
|
|
1349
|
+
}, {
|
|
1350
|
+
name: 'PreviewItemIconConfig',
|
|
1351
|
+
description: 'The icon, appearance, and accessible label configuration for a preview item.',
|
|
1352
|
+
status: 'general-availability',
|
|
1353
|
+
keywords: ['rovo', 'platform-ui-components', 'PreviewItemIconConfig'],
|
|
1354
|
+
category: 'api',
|
|
1355
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1356
|
+
examples: [],
|
|
1357
|
+
kind: 'type',
|
|
1358
|
+
definition: '{ icon: IconTileProps["icon"]; appearance: IconTileProps["appearance"]; boldAppearance: IconTileProps["appearance"]; altText: MessageDescriptor }'
|
|
1359
|
+
}, {
|
|
1360
|
+
name: 'ProfileTriggerParams',
|
|
1361
|
+
description: 'The context passed to a profile trigger renderer.',
|
|
1362
|
+
status: 'general-availability',
|
|
1363
|
+
keywords: ['rovo', 'platform-ui-components', 'ProfileTriggerParams'],
|
|
1364
|
+
category: 'api',
|
|
1365
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1366
|
+
examples: [],
|
|
1367
|
+
kind: 'type',
|
|
1368
|
+
definition: '{ userId: string; cloudId: string; children: ReactElement }'
|
|
1369
|
+
}, {
|
|
1370
|
+
name: 'ProfileTriggerRenderer',
|
|
1371
|
+
description: 'The injected renderer contract used to wrap profile triggers.',
|
|
1372
|
+
status: 'general-availability',
|
|
1373
|
+
keywords: ['rovo', 'platform-ui-components', 'ProfileTriggerRenderer'],
|
|
1374
|
+
category: 'api',
|
|
1375
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1376
|
+
examples: [],
|
|
1377
|
+
kind: 'type',
|
|
1378
|
+
definition: '(params: ProfileTriggerParams) => ReactElement'
|
|
1379
|
+
}, {
|
|
1380
|
+
name: 'RainbowProgressBarAppearance',
|
|
1381
|
+
description: 'The supported rainbow progress appearances.',
|
|
1382
|
+
status: 'general-availability',
|
|
1383
|
+
keywords: ['rovo', 'platform-ui-components', 'RainbowProgressBarAppearance'],
|
|
1384
|
+
category: 'api',
|
|
1385
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1386
|
+
examples: [],
|
|
1387
|
+
kind: 'type',
|
|
1388
|
+
definition: "'rainbow' | 'static-rainbow' | (string & {})"
|
|
1389
|
+
}, {
|
|
1390
|
+
name: 'RainbowProgressBarStatus',
|
|
1391
|
+
description: 'The supported rainbow progress states.',
|
|
1392
|
+
status: 'general-availability',
|
|
1393
|
+
keywords: ['rovo', 'platform-ui-components', 'RainbowProgressBarStatus'],
|
|
1394
|
+
category: 'api',
|
|
1395
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1396
|
+
examples: [],
|
|
1397
|
+
kind: 'type',
|
|
1398
|
+
definition: "'start' | 'planning' | 'running' | 'complete'"
|
|
1399
|
+
}, {
|
|
1400
|
+
name: 'ReasoningModeMenuItem',
|
|
1401
|
+
description: 'The data and callbacks for one reasoning-mode menu item.',
|
|
1402
|
+
status: 'general-availability',
|
|
1403
|
+
keywords: ['rovo', 'platform-ui-components', 'ReasoningModeMenuItem'],
|
|
1404
|
+
category: 'api',
|
|
1405
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1406
|
+
examples: [],
|
|
1407
|
+
kind: 'type',
|
|
1408
|
+
definition: '{ id: string; title: string; subtitle?: string; icon: React.ReactNode; isSelected: boolean; isDisabled?: boolean; lozengeLabel?: React.ReactNode; testId?: string; onSelect: () => void; wrapper?: React.ComponentType<{ children: React.ReactNode; isSelected: boolean }> }'
|
|
1409
|
+
}, {
|
|
1410
|
+
name: 'ROVO_GRADIENT_BACKGROUND',
|
|
1411
|
+
description: 'The shared CSS gradient value used by Rovo gradient surfaces.',
|
|
1412
|
+
status: 'general-availability',
|
|
1413
|
+
usageGuidelines: ['Import ROVO_GRADIENT_BACKGROUND from its explicit package entrypoint and treat it as read-only.'],
|
|
1414
|
+
keywords: ['rovo', 'gradient', 'css'],
|
|
1415
|
+
category: 'styling',
|
|
1416
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1417
|
+
examples: [],
|
|
1418
|
+
kind: 'constant',
|
|
1419
|
+
type: 'string'
|
|
1420
|
+
}, {
|
|
1421
|
+
name: 'RovoThinkingBarStatus',
|
|
1422
|
+
description: 'The supported thinking bar statuses.',
|
|
1423
|
+
status: 'general-availability',
|
|
1424
|
+
keywords: ['rovo', 'platform-ui-components', 'RovoThinkingBarStatus'],
|
|
1425
|
+
category: 'api',
|
|
1426
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1427
|
+
examples: [],
|
|
1428
|
+
kind: 'type',
|
|
1429
|
+
definition: "'analyzing' | 'editing'"
|
|
1430
|
+
}, {
|
|
1431
|
+
name: 'RovoThinkingMinimizationHandle',
|
|
1432
|
+
description: 'The imperative handle for minimizing or expanding the thinking UI.',
|
|
1433
|
+
status: 'general-availability',
|
|
1434
|
+
keywords: ['rovo', 'platform-ui-components', 'RovoThinkingMinimizationHandle'],
|
|
1435
|
+
category: 'api',
|
|
1436
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1437
|
+
examples: [],
|
|
1438
|
+
kind: 'type',
|
|
1439
|
+
definition: '{ minimize: () => void; expand: () => void }'
|
|
1440
|
+
}, {
|
|
1441
|
+
name: 'SKILL_COLOR_MAP',
|
|
1442
|
+
description: 'The mapping from skill colors to their design-token treatments.',
|
|
1443
|
+
status: 'general-availability',
|
|
1444
|
+
usageGuidelines: ['Import SKILL_COLOR_MAP from its explicit package entrypoint and treat it as read-only.'],
|
|
1445
|
+
keywords: ['rovo', 'skill', 'color', 'map'],
|
|
1446
|
+
category: 'styling',
|
|
1447
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1448
|
+
examples: [],
|
|
1449
|
+
kind: 'constant',
|
|
1450
|
+
type: 'SkillColorMap'
|
|
1451
|
+
}, {
|
|
1452
|
+
name: 'skillIcon',
|
|
1453
|
+
description: 'The mapping from skill icon names to lazy icon implementations.',
|
|
1454
|
+
status: 'general-availability',
|
|
1455
|
+
usageGuidelines: ['Import skillIcon from its explicit package entrypoint and treat it as read-only.'],
|
|
1456
|
+
keywords: ['rovo', 'skill', 'icon', 'map'],
|
|
1457
|
+
category: 'media',
|
|
1458
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1459
|
+
examples: [],
|
|
1460
|
+
kind: 'constant',
|
|
1461
|
+
type: 'Record<SkillIconName, React.ComponentType>'
|
|
1462
|
+
}, {
|
|
1463
|
+
name: 'skillIconMap',
|
|
1464
|
+
description: 'The resolved map of skill icon names to components.',
|
|
1465
|
+
status: 'general-availability',
|
|
1466
|
+
usageGuidelines: ['Import skillIconMap from its explicit package entrypoint and treat it as read-only.'],
|
|
1467
|
+
keywords: ['rovo', 'skill', 'icon', 'map'],
|
|
1468
|
+
category: 'media',
|
|
1469
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1470
|
+
examples: [],
|
|
1471
|
+
kind: 'constant',
|
|
1472
|
+
type: 'Record<SkillIconName, SkillIconComponent>'
|
|
1473
|
+
}, {
|
|
1474
|
+
name: 'SkillIconName',
|
|
1475
|
+
description: 'The supported names for lazily loaded skill icons.',
|
|
1476
|
+
status: 'general-availability',
|
|
1477
|
+
keywords: ['rovo', 'platform-ui-components', 'SkillIconName'],
|
|
1478
|
+
category: 'api',
|
|
1479
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1480
|
+
examples: [],
|
|
1481
|
+
kind: 'type',
|
|
1482
|
+
definition: 'keyof typeof skillIcon'
|
|
1483
|
+
}, {
|
|
1484
|
+
name: 'StoreMemoryUpdate',
|
|
1485
|
+
description: 'The event shape consumed by the memory update surface.',
|
|
1486
|
+
status: 'general-availability',
|
|
1487
|
+
keywords: ['rovo', 'platform-ui-components', 'StoreMemoryUpdate'],
|
|
1488
|
+
category: 'api',
|
|
1489
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1490
|
+
examples: [],
|
|
1491
|
+
kind: 'type',
|
|
1492
|
+
definition: "{ type: 'MEMORY_UPDATE'; content?: string }"
|
|
1493
|
+
}, {
|
|
1494
|
+
name: 'submitAuthorityFeedback',
|
|
1495
|
+
description: 'Submits feedback for an authoritative answer panel.',
|
|
1496
|
+
status: 'general-availability',
|
|
1497
|
+
usageGuidelines: ['Import submitAuthorityFeedback from its explicit package entrypoint.', 'Keep product-specific orchestration and side effects at the call site unless the function explicitly owns them.'],
|
|
1498
|
+
keywords: ['rovo', 'authority', 'feedback'],
|
|
1499
|
+
category: 'feedback',
|
|
1500
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1501
|
+
examples: [],
|
|
1502
|
+
kind: 'function',
|
|
1503
|
+
signature: '(params: SubmitAuthorityFeedbackParams) => Promise<void>'
|
|
1504
|
+
}, {
|
|
1505
|
+
name: 'supportsContentType',
|
|
1506
|
+
description: 'Checks whether a Confluence space supports a requested content type.',
|
|
1507
|
+
status: 'general-availability',
|
|
1508
|
+
usageGuidelines: ['Import supportsContentType from its explicit package entrypoint.', 'Keep product-specific orchestration and side effects at the call site unless the function explicitly owns them.'],
|
|
1509
|
+
keywords: ['confluence', 'space', 'content-type'],
|
|
1510
|
+
category: 'confluence',
|
|
1511
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1512
|
+
examples: [],
|
|
1513
|
+
kind: 'function',
|
|
1514
|
+
signature: '(space: ConfluenceSpaceOption, contentType: ConfluenceContentType) => boolean'
|
|
1515
|
+
}, {
|
|
1516
|
+
name: 'TRACE_INTERACTION_TYPES',
|
|
1517
|
+
description: 'The interaction types emitted by compact research step controls.',
|
|
1518
|
+
status: 'general-availability',
|
|
1519
|
+
usageGuidelines: ['Import TRACE_INTERACTION_TYPES from its explicit package entrypoint and treat it as read-only.'],
|
|
1520
|
+
keywords: ['rovo', 'research', 'trace', 'analytics'],
|
|
1521
|
+
category: 'analytics',
|
|
1522
|
+
package: '@atlassian/rovo-platform-ui-components',
|
|
1523
|
+
examples: [],
|
|
1524
|
+
kind: 'constant',
|
|
1525
|
+
type: 'Record<string, string>'
|
|
1041
1526
|
}];
|
|
@@ -14,8 +14,8 @@ var onboardingMultiStep = exports.onboardingMultiStep = {
|
|
|
14
14
|
examples: [{
|
|
15
15
|
title: 'Migrate multi step spotlight tour',
|
|
16
16
|
description: 'Replace the single SpotlightManager pattern with multiple PopoverProvider instances, one for each target in the tour',
|
|
17
|
-
before: "import React, { useState } from 'react';\nimport Button
|
|
18
|
-
after: "import React, { useState } from 'react';\nimport Button
|
|
17
|
+
before: "import React, { useState } from 'react';\nimport Button from '@atlaskit/button/default/button';\nimport IconButton from '@atlaskit/button/icon/button';\nimport CommentAddIcon from '@atlaskit/icon/core/comment-add';\nimport CopyIcon from '@atlaskit/icon/core/copy';\nimport {\n Spotlight,\n SpotlightManager,\n SpotlightTarget,\n SpotlightTransition,\n} from '@atlaskit/onboarding';\n\nconst OnboardingTour = () => {\n const [activeSpotlight, setActiveSpotlight] = useState<null | number>(null);\n const start = () => setActiveSpotlight(0);\n const next = () => setActiveSpotlight((activeSpotlight || 0) + 1);\n const back = () => setActiveSpotlight((activeSpotlight || 1) - 1);\n const end = () => setActiveSpotlight(null);\n\n const renderActiveSpotlight = () => {\n const spotlights = [\n <Spotlight\n actions={[\n { onClick: () => next(), text: 'Next' },\n { onClick: () => end(), text: 'Dismiss', appearance: 'subtle' },\n ]}\n heading=\"Add a comment\"\n target=\"comment\"\n key=\"comment\"\n >\n Quickly add a comment to the work item.\n </Spotlight>,\n <Spotlight\n actions={[\n { onClick: () => end(), text: 'Done' },\n { onClick: () => back(), text: 'Back', appearance: 'subtle' },\n ]}\n heading=\"Copy code\"\n target=\"copy\"\n key=\"copy\"\n >\n Click to copy the example code to your clipboard.\n </Spotlight>,\n ];\n\n if (activeSpotlight === null) {\n return null;\n }\n return spotlights[activeSpotlight];\n };\n\n return (\n <SpotlightManager>\n <SpotlightTarget name=\"comment\">\n <IconButton icon={CommentAddIcon} label=\"comment\" />\n </SpotlightTarget>\n <SpotlightTarget name=\"copy\">\n <IconButton icon={CopyIcon} label=\"Copy\" />\n </SpotlightTarget>\n <Button appearance=\"primary\" onClick={start}>\n Start tour\n </Button>\n <SpotlightTransition>{renderActiveSpotlight()}</SpotlightTransition>\n </SpotlightManager>\n );\n};",
|
|
18
|
+
after: "import React, { useState } from 'react';\nimport Button from '@atlaskit/button/default/button';\nimport IconButton from '@atlaskit/button/icon/button';\nimport CommentAddIcon from '@atlaskit/icon/core/comment-add';\nimport CopyIcon from '@atlaskit/icon/core/copy';\nimport { Text } from '@atlaskit/primitives/compiled';\nimport {\n PopoverContent,\n PopoverProvider,\n PopoverTarget,\n SpotlightActions,\n SpotlightBody,\n SpotlightCard,\n SpotlightControls,\n SpotlightDismissControl,\n SpotlightFooter,\n SpotlightHeader,\n SpotlightHeadline,\n SpotlightPrimaryAction,\n SpotlightSecondaryAction,\n SpotlightStepCount,\n} from '@atlaskit/spotlight';\n\nconst SpotlightTour = () => {\n const [currentStep, setCurrentStep] = useState<number>(0);\n\n const dismiss = () => setCurrentStep(0);\n const back = () => setCurrentStep(Math.max(currentStep - 1, 1));\n const next = () => setCurrentStep(Math.min(currentStep + 1, 2));\n const done = () => setCurrentStep(0);\n\n return (\n <>\n <PopoverProvider>\n <PopoverTarget>\n <IconButton icon={CommentAddIcon} label=\"comment\" />\n </PopoverTarget>\n <PopoverContent dismiss={dismiss} placement=\"bottom-start\" isVisible={currentStep === 1}>\n <SpotlightCard>\n <SpotlightHeader>\n <SpotlightHeadline>Add a comment</SpotlightHeadline>\n <SpotlightControls>\n <SpotlightDismissControl onClick={dismiss} />\n </SpotlightControls>\n </SpotlightHeader>\n <SpotlightBody>\n <Text>Quickly add a comment to the work item.</Text>\n </SpotlightBody>\n <SpotlightFooter>\n <SpotlightStepCount>1 of 2</SpotlightStepCount>\n <SpotlightActions>\n <SpotlightPrimaryAction onClick={next}>Next</SpotlightPrimaryAction>\n </SpotlightActions>\n </SpotlightFooter>\n </SpotlightCard>\n </PopoverContent>\n </PopoverProvider>\n\n <PopoverProvider>\n <PopoverTarget>\n <IconButton icon={CopyIcon} label=\"Copy\" />\n </PopoverTarget>\n <PopoverContent dismiss={dismiss} placement=\"bottom-start\" isVisible={currentStep === 2}>\n <SpotlightCard>\n <SpotlightHeader>\n <SpotlightHeadline>Copy code</SpotlightHeadline>\n <SpotlightControls>\n <SpotlightDismissControl onClick={dismiss} />\n </SpotlightControls>\n </SpotlightHeader>\n <SpotlightBody>\n <Text>Click to copy the example code to your clipboard.</Text>\n </SpotlightBody>\n <SpotlightFooter>\n <SpotlightStepCount>2 of 2</SpotlightStepCount>\n <SpotlightActions>\n <SpotlightSecondaryAction onClick={back}>Back</SpotlightSecondaryAction>\n <SpotlightPrimaryAction onClick={done}>Done</SpotlightPrimaryAction>\n </SpotlightActions>\n </SpotlightFooter>\n </SpotlightCard>\n </PopoverContent>\n </PopoverProvider>\n\n <Button appearance=\"primary\" onClick={() => setCurrentStep(1)}>\n Start tour\n </Button>\n </>\n );\n};",
|
|
19
19
|
explanation: "Key changes when migrating a multi-step spotlight tour:\n- SpotlightManager coordinated multiple spotlights in a tour. PopoverProvider manages internal state for a single spotlight.\n- Each target gets its own PopoverProvider > PopoverTarget > PopoverContent structure\n- The spotlight array pattern is replaced with individual SpotlightCard components per target\n- Control visibility with isVisible={currentStep === n} on each PopoverContent\n- Add SpotlightStepCount component in SpotlightFooter to show progress (e.g., \"1 of 3\")\n- Use SpotlightSecondaryAction for \"Back\" buttons instead of appearance: 'subtle' in the actions array\n- Use SpotlightPrimaryAction for \"Next\" and \"Done\" buttons\n- The renderActiveSpotlight pattern is no longer needed - visibility is controlled declaratively\n- Navigation functions use Math.max/Math.min to bound the step range safely\n- All other migration changes from single step spotlight migration guide apply."
|
|
20
20
|
}],
|
|
21
21
|
bestPractices: ['Use a numeric currentStep state where 0 = hidden, 1+ = active step number', 'Always include SpotlightStepCount in multi-step tours for user orientation', 'First step should only have "Next" action, middle steps have "Back" and "Next", last step has "Back" and "Done"', 'Use SpotlightSecondaryAction for back/dismiss actions and SpotlightPrimaryAction for next/done', 'Include SpotlightDismissControl with onClick={dismiss} so users can exit the tour at any point', 'Bound navigation functions with Math.max/Math.min to prevent invalid step values', 'Preference duplicating Spotlight code instead of trying to have a single `@atlaskit/spotlight` instance that conditionally renders content based on step.'],
|
|
@@ -14,8 +14,8 @@ var onboardingSingleStep = exports.onboardingSingleStep = {
|
|
|
14
14
|
examples: [{
|
|
15
15
|
title: 'Migrate single step spotlight',
|
|
16
16
|
description: 'Replace SpotlightTarget, and Spotlight with the new compositional @atlaskit/spotlight components',
|
|
17
|
-
before: "\n// file1.tsx\nimport React, { useState } from 'react';\nimport Button from '@atlaskit/button/
|
|
18
|
-
after: "\n// file2.tsx -- the Spotlight has been co-located to the targeted element.\nimport React, { useState } from 'react';\nimport Button from '@atlaskit/button/
|
|
17
|
+
before: "\n// file1.tsx\nimport React, { useState } from 'react';\nimport Button from '@atlaskit/button/default/button';\nimport { Spotlight } from '@atlaskit/onboarding';\n\nconst OnboardingSpotlight = () => {\n const [isSpotlightActive, setIsSpotlightActive] = useState(true);\n const start = () => setIsSpotlightActive(true);\n const end = () => setIsSpotlightActive(false);\n\n return (\n\t\t{isSpotlightActive && (\n\t\t\t<Spotlight\n\t\t\t\tdialogPlacement='bottom right'\n\t\t\t\tactions={[\n\t\t\t\t\t{\n\t\t\t\t\t\tonClick: end,\n\t\t\t\t\t\ttext: 'Got it',\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t\theading=\"Feature Heading\"\n\t\t\t\ttarget=\"my-target\"\n\t\t\t>\n\t\t\t\tThis is the spotlight body content describing the feature.\n\t\t\t</Spotlight>\n\t\t)}\n );\n};\n\n// file2.tsx\nimport React from 'react';\nimport Button from '@atlaskit/button/default/button';\nimport { Spotlight } from '@atlaskit/onboarding';\n\nconst SomeFeature = () => {\n\n return (\n\t\t<SpotlightTarget name=\"my-target\">\n\t\t\t<Button>Target Element</Button>\n\t\t</SpotlightTarget>\n );\n};\n",
|
|
18
|
+
after: "\n// file2.tsx -- the Spotlight has been co-located to the targeted element.\nimport React, { useState } from 'react';\nimport Button from '@atlaskit/button/default/button';\nimport { Text } from '@atlaskit/primitives/compiled';\nimport {\n PopoverContent,\n PopoverProvider,\n PopoverTarget,\n SpotlightActions,\n SpotlightBody,\n SpotlightCard,\n SpotlightControls,\n SpotlightDismissControl,\n SpotlightFooter,\n SpotlightHeader,\n SpotlightHeadline,\n SpotlightPrimaryAction,\n} from '@atlaskit/spotlight';\n\nconst Spotlight = () => {\n const [isVisible, setIsVisible] = useState(false);\n const dismiss = () => setIsVisible(false);\n const done = () => setIsVisible(false);\n\n return (\n <PopoverProvider>\n <PopoverTarget>\n <Button onClick={() => setIsVisible(true)}>Target Element</Button>\n </PopoverTarget>\n <PopoverContent dismiss={dismiss} placement=\"bottom-start\" isVisible={isVisible}>\n <SpotlightCard>\n <SpotlightHeader>\n <SpotlightHeadline>Feature Heading</SpotlightHeadline>\n <SpotlightControls>\n <SpotlightDismissControl />\n </SpotlightControls>\n </SpotlightHeader>\n <SpotlightBody>\n <Text>This is the spotlight body content describing the feature.</Text>\n </SpotlightBody>\n <SpotlightFooter>\n <SpotlightActions>\n <SpotlightPrimaryAction onClick={done}>Got it</SpotlightPrimaryAction>\n </SpotlightActions>\n </SpotlightFooter>\n </SpotlightCard>\n </PopoverContent>\n </PopoverProvider>\n );\n};",
|
|
19
19
|
explanation: "Key changes when migrating a single step spotlight:\n- Do not use this migration guide for JiraSpotlight. Use 'jira-spotlight' instead.\n- PopoverProvider maintains internal Spotlight state. SpotlightManager coordinated multiple @atlaskit/onboarding usages and is no longer needed.\n- Replace SpotlightTarget with PopoverTarget - wraps the element to highlight\n- Replace Spotlight with PopoverContent containing SpotlightCard - controls visibility and positioning\n- The 'heading' prop becomes SpotlightHeadline inside SpotlightHeader\n- The 'actions' array becomes SpotlightActions with SpotlightPrimaryAction (and optionally SpotlightSecondaryAction)\n- The children content moves into SpotlightBody wrapped with Text component\n- Add SpotlightDismissControl inside SpotlightControls for the close button\n- The 'target' and/or 'targetName' prop is replaced with PopoverTarget directly wrapping the target element\n- The 'dialogPlacement' prop becomes 'placement' on PopoverContent. Mapping: \"top right\" \u2192 \"top-start\", \"top center\" \u2192 \"top\", \"top left\" \u2192 \"top-end\", \"right bottom\" \u2192 \"right-start\", \"right middle\" \u2192 \"right-start | right-end\", \"right top\" \u2192 \"right-end\", \"bottom left\" \u2192 \"bottom-end\", \"bottom center\" \u2192 \"bottom\", \"bottom right\" \u2192 \"bottom-start\", \"left top\" \u2192 \"left-end\", \"left middle\" \u2192 \"left-start | left-end\", \"left bottom\" \u2192 \"left-start\"'"
|
|
20
20
|
}],
|
|
21
21
|
bestPractices: ['PopoverTarget should wrap exactly one child element that will be highlighted', 'Always include SpotlightDismissControl for accessibility - allows users to dismiss via close button', 'SpotlightPrimaryAction is required and wraps the main CTA button', 'Wrap body text content in the Text component from @atlaskit/primitives/compiled'],
|
|
@@ -14,8 +14,8 @@ var onboardingWithMotion = exports.onboardingWithMotion = {
|
|
|
14
14
|
examples: [{
|
|
15
15
|
title: 'Migrate spotlight with transition animation',
|
|
16
16
|
description: 'Replace SpotlightTransition with FadeIn from @atlaskit/motion wrapped around the SpotlightCard',
|
|
17
|
-
before: "import React, { useState } from 'react';\nimport Button from '@atlaskit/button/
|
|
18
|
-
after: "import React, { useState } from 'react';\nimport Button from '@atlaskit/button/
|
|
17
|
+
before: "import React, { useState } from 'react';\nimport Button from '@atlaskit/button/default/button';\nimport {\n Spotlight,\n SpotlightManager,\n SpotlightTarget,\n SpotlightTransition,\n} from '@atlaskit/onboarding';\n\nconst OnboardingSpotlightWithTransition = () => {\n const [isSpotlightActive, setIsSpotlightActive] = useState(false);\n const start = () => setIsSpotlightActive(true);\n const end = () => setIsSpotlightActive(false);\n\n return (\n <SpotlightManager>\n <SpotlightTarget name=\"my-target\">\n <Button>Target Element</Button>\n </SpotlightTarget>\n <div>\n <Button appearance=\"primary\" onClick={start}>\n Show spotlight\n </Button>\n </div>\n <SpotlightTransition>\n {isSpotlightActive && (\n <Spotlight\n actions={[\n {\n onClick: end,\n text: 'Got it',\n },\n ]}\n heading=\"Feature Heading\"\n target=\"my-target\"\n key=\"my-target\"\n >\n This is the spotlight body content describing the feature.\n </Spotlight>\n )}\n </SpotlightTransition>\n </SpotlightManager>\n );\n};",
|
|
18
|
+
after: "import React, { useState } from 'react';\nimport Button from '@atlaskit/button/default/button';\nimport { FadeIn } from '@atlaskit/motion';\nimport { Text } from '@atlaskit/primitives/compiled';\nimport {\n PopoverContent,\n PopoverProvider,\n PopoverTarget,\n SpotlightActions,\n SpotlightBody,\n SpotlightCard,\n SpotlightControls,\n SpotlightDismissControl,\n SpotlightFooter,\n SpotlightHeader,\n SpotlightHeadline,\n SpotlightPrimaryAction,\n} from '@atlaskit/spotlight';\n\nconst SpotlightWithMotion = () => {\n const [isVisible, setIsVisible] = useState(false);\n const dismiss = () => setIsVisible(false);\n const done = () => setIsVisible(false);\n\n return (\n <PopoverProvider>\n <PopoverTarget>\n <Button onClick={() => setIsVisible(true)}>Target Element</Button>\n </PopoverTarget>\n <PopoverContent done={done} dismiss={dismiss} placement=\"bottom-start\" isVisible={isVisible}>\n <FadeIn entranceDirection=\"left\">\n {(props) => (\n <div {...props}>\n <SpotlightCard>\n <SpotlightHeader>\n <SpotlightHeadline>Feature Heading</SpotlightHeadline>\n <SpotlightControls>\n <SpotlightDismissControl />\n </SpotlightControls>\n </SpotlightHeader>\n <SpotlightBody>\n <Text>This is the spotlight body content describing the feature.</Text>\n </SpotlightBody>\n <SpotlightFooter>\n <SpotlightActions>\n <SpotlightPrimaryAction onClick={done}>Got it</SpotlightPrimaryAction>\n </SpotlightActions>\n </SpotlightFooter>\n </SpotlightCard>\n </div>\n )}\n </FadeIn>\n </PopoverContent>\n </PopoverProvider>\n );\n};",
|
|
19
19
|
explanation: "Key changes when migrating a spotlight with transition animation:\n- Replace SpotlightTransition with FadeIn from @atlaskit/motion\n- Import FadeIn from '@atlaskit/motion' instead of SpotlightTransition from '@atlaskit/onboarding'\n- FadeIn uses a render props pattern - wrap content in {(props) => <div {...props}>...</div>}\n- The entranceDirection prop controls animation direction: 'left', 'right', 'top', or 'bottom'\n- All other migration changes from single step spotlight apply (PopoverProvider, compositional components, etc.)"
|
|
20
20
|
}],
|
|
21
21
|
bestPractices: ['Choose entranceDirection based on spotlight placement (e.g., "left" for right-placed spotlights)', 'Motion is optional - only add if the original onboarding spotlight used SpotlightTransition for entrance effects'],
|