@atlaskit/ads-mcp 0.13.7 → 0.13.8
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 +7 -0
- package/dist/cjs/tools/get-tokens/token-structured-content.codegen.js +39 -44
- package/dist/cjs/tools/migration-guides/index.js +4 -2
- package/dist/cjs/tools/migration-guides/migrations/onboarding-to-spotlight.js +23 -17
- package/dist/cjs/tools/migration-guides/registry.js +1 -1
- package/dist/es2019/tools/get-tokens/token-structured-content.codegen.js +39 -44
- package/dist/es2019/tools/migration-guides/index.js +5 -3
- package/dist/es2019/tools/migration-guides/migrations/onboarding-to-spotlight.js +216 -116
- package/dist/es2019/tools/migration-guides/registry.js +1 -1
- package/dist/esm/tools/get-tokens/token-structured-content.codegen.js +39 -44
- package/dist/esm/tools/migration-guides/index.js +4 -2
- package/dist/esm/tools/migration-guides/migrations/onboarding-to-spotlight.js +23 -17
- package/dist/esm/tools/migration-guides/registry.js +1 -1
- package/dist/types/tools/get-tokens/token-structured-content.codegen.d.ts +1 -1
- package/dist/types/tools/i18n-conversion/index.d.ts +3 -1
- package/dist/types/tools/migration-guides/index.d.ts +4 -1
- package/dist/types/tools/migration-guides/registry.d.ts +1 -1
- package/dist/types-ts4.5/tools/get-tokens/token-structured-content.codegen.d.ts +1 -1
- package/dist/types-ts4.5/tools/migration-guides/index.d.ts +6 -2
- package/dist/types-ts4.5/tools/migration-guides/registry.d.ts +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,12 @@
|
|
|
1
1
|
# @atlaskit/ads-mcp
|
|
2
2
|
|
|
3
|
+
## 0.13.8
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`52fd42ed97a9d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/52fd42ed97a9d) -
|
|
8
|
+
Rework migration guidance for `@atlaskit/onboarding`.
|
|
9
|
+
|
|
3
10
|
## 0.13.7
|
|
4
11
|
|
|
5
12
|
### Patch Changes
|
|
@@ -9,7 +9,7 @@ exports.tokenStructuredContent = void 0;
|
|
|
9
9
|
*
|
|
10
10
|
* Structured content for tokens generated from token-metadata.
|
|
11
11
|
*
|
|
12
|
-
* @codegen <<SignedSource::
|
|
12
|
+
* @codegen <<SignedSource::203d487ec56456dcc11048a6c8cf7590>>
|
|
13
13
|
* @codegenCommand yarn build structured-docs
|
|
14
14
|
*/
|
|
15
15
|
|
|
@@ -2053,11 +2053,6 @@ var tokenStructuredContent = exports.tokenStructuredContent = [{
|
|
|
2053
2053
|
name: 'opacity.loading',
|
|
2054
2054
|
description: 'Apply to content that sits under a loading spinner.',
|
|
2055
2055
|
exampleValue: '0.2'
|
|
2056
|
-
}, {
|
|
2057
|
-
content: '# utility.UNSAFE.textTransformUppercase\n\nText transform uppercase token used for backwards compatibility between new and old theming solutions\n\nExample Value: `uppercase`\n',
|
|
2058
|
-
name: 'utility.UNSAFE.textTransformUppercase',
|
|
2059
|
-
description: 'Text transform uppercase token used for backwards compatibility between new and old theming solutions',
|
|
2060
|
-
exampleValue: 'uppercase'
|
|
2061
2056
|
}, {
|
|
2062
2057
|
content: '# utility.UNSAFE.transparent\n\nTransparent token used for backwards compatibility between new and old theming solutions\n\nExample Value: `transparent`\n',
|
|
2063
2058
|
name: 'utility.UNSAFE.transparent',
|
|
@@ -2184,80 +2179,80 @@ var tokenStructuredContent = exports.tokenStructuredContent = [{
|
|
|
2184
2179
|
description: 'Use to negate parent whitespace or overlap the largest pieces of UI.',
|
|
2185
2180
|
exampleValue: '-2rem'
|
|
2186
2181
|
}, {
|
|
2187
|
-
content: '# font.heading.xxlarge\n\nFor overlapping brand with app promotions, such as marketplace content. Migrate instances of H900 to Heading XXL.\n\nExample Value: `normal
|
|
2182
|
+
content: '# font.heading.xxlarge\n\nFor overlapping brand with app promotions, such as marketplace content. Migrate instances of H900 to Heading XXL.\n\nExample Value: `normal 653 2rem/2.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2188
2183
|
name: 'font.heading.xxlarge',
|
|
2189
2184
|
description: 'For overlapping brand with app promotions, such as marketplace content. Migrate instances of H900 to Heading XXL.',
|
|
2190
|
-
exampleValue: 'normal
|
|
2185
|
+
exampleValue: 'normal 653 2rem/2.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2191
2186
|
}, {
|
|
2192
|
-
content: '# font.heading.xlarge\n\nFor overlapping brand with app promotions, such as marketplace content. Migrate instances of H800 to Heading XL.\n\nExample Value: `normal
|
|
2187
|
+
content: '# font.heading.xlarge\n\nFor overlapping brand with app promotions, such as marketplace content. Migrate instances of H800 to Heading XL.\n\nExample Value: `normal 653 1.75rem/2rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2193
2188
|
name: 'font.heading.xlarge',
|
|
2194
2189
|
description: 'For overlapping brand with app promotions, such as marketplace content. Migrate instances of H800 to Heading XL.',
|
|
2195
|
-
exampleValue: 'normal
|
|
2190
|
+
exampleValue: 'normal 653 1.75rem/2rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2196
2191
|
}, {
|
|
2197
|
-
content: '# font.heading.large\n\nApp page titles, such as forms. Migrate instances of H700 to Heading L.\n\nExample Value: `normal
|
|
2192
|
+
content: '# font.heading.large\n\nApp page titles, such as forms. Migrate instances of H700 to Heading L.\n\nExample Value: `normal 653 1.5rem/1.75rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2198
2193
|
name: 'font.heading.large',
|
|
2199
2194
|
description: 'App page titles, such as forms. Migrate instances of H700 to Heading L.',
|
|
2200
|
-
exampleValue: 'normal
|
|
2195
|
+
exampleValue: 'normal 653 1.5rem/1.75rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2201
2196
|
}, {
|
|
2202
|
-
content: '# font.heading.medium\n\nHeaders in large components, such as modal dialogs. Migrate instances of H600 to Heading M.\n\nExample Value: `normal
|
|
2197
|
+
content: '# font.heading.medium\n\nHeaders in large components, such as modal dialogs. Migrate instances of H600 to Heading M.\n\nExample Value: `normal 653 1.25rem/1.5rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2203
2198
|
name: 'font.heading.medium',
|
|
2204
2199
|
description: 'Headers in large components, such as modal dialogs. Migrate instances of H600 to Heading M.',
|
|
2205
|
-
exampleValue: 'normal
|
|
2200
|
+
exampleValue: 'normal 653 1.25rem/1.5rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2206
2201
|
}, {
|
|
2207
|
-
content: '# font.heading.small\n\nFor headers in small components where space is limited. Migrate instances of H500 to Heading S.\n\nExample Value: `normal
|
|
2202
|
+
content: '# font.heading.small\n\nFor headers in small components where space is limited. Migrate instances of H500 to Heading S.\n\nExample Value: `normal 653 1rem/1.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2208
2203
|
name: 'font.heading.small',
|
|
2209
2204
|
description: 'For headers in small components where space is limited. Migrate instances of H500 to Heading S.',
|
|
2210
|
-
exampleValue: 'normal
|
|
2205
|
+
exampleValue: 'normal 653 1rem/1.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2211
2206
|
}, {
|
|
2212
|
-
content: '# font.heading.xsmall\n\nFor headers in small components where space is limited. Migrate instances of H400 to Heading XS.\n\nExample Value: `normal
|
|
2207
|
+
content: '# font.heading.xsmall\n\nFor headers in small components where space is limited. Migrate instances of H400 to Heading XS.\n\nExample Value: `normal 653 0.875rem/1.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2213
2208
|
name: 'font.heading.xsmall',
|
|
2214
2209
|
description: 'For headers in small components where space is limited. Migrate instances of H400 to Heading XS.',
|
|
2215
|
-
exampleValue: 'normal
|
|
2210
|
+
exampleValue: 'normal 653 0.875rem/1.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2216
2211
|
}, {
|
|
2217
|
-
content: '# font.heading.xxsmall\n\nFor headers in fine print or tight spaces. Use sparingly. Migrate instances of H100, H200 and H300 to Heading XXS.\n\nExample Value: `normal
|
|
2212
|
+
content: '# font.heading.xxsmall\n\nFor headers in fine print or tight spaces. Use sparingly. Migrate instances of H100, H200 and H300 to Heading XXS.\n\nExample Value: `normal 653 0.75rem/1rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2218
2213
|
name: 'font.heading.xxsmall',
|
|
2219
2214
|
description: 'For headers in fine print or tight spaces. Use sparingly. Migrate instances of H100, H200 and H300 to Heading XXS.',
|
|
2220
|
-
exampleValue: 'normal
|
|
2215
|
+
exampleValue: 'normal 653 0.75rem/1rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2221
2216
|
}, {
|
|
2222
|
-
content: '# font.body.large\n\nFor long-form text, such as in blogs.\n\nExample Value: `normal 400 1rem/1.5rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2217
|
+
content: '# font.body.large\n\nFor long-form text, such as in blogs.\n\nExample Value: `normal 400 1rem/1.5rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2223
2218
|
name: 'font.body.large',
|
|
2224
2219
|
description: 'For long-form text, such as in blogs.',
|
|
2225
|
-
exampleValue: 'normal 400 1rem/1.5rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2220
|
+
exampleValue: 'normal 400 1rem/1.5rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2226
2221
|
}, {
|
|
2227
|
-
content: '# font.body\n\nUse in short descriptions or labels. The default size for text in components. Migrate instances of Paragraph Default and UI Text to Body M.\n\nExample Value: `normal 400 0.875rem/1.25rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2222
|
+
content: '# font.body\n\nUse in short descriptions or labels. The default size for text in components. Migrate instances of Paragraph Default and UI Text to Body M.\n\nExample Value: `normal 400 0.875rem/1.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2228
2223
|
name: 'font.body',
|
|
2229
2224
|
description: 'Use in short descriptions or labels. The default size for text in components. Migrate instances of Paragraph Default and UI Text to Body M.',
|
|
2230
|
-
exampleValue: 'normal 400 0.875rem/1.25rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2225
|
+
exampleValue: 'normal 400 0.875rem/1.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2231
2226
|
}, {
|
|
2232
|
-
content: '# font.body.small\n\nUse in secondary level content such as fine print or semantic messaging. Use sparingly. Migrate instances of Small text to Body S.\n\nExample Value: `normal 400 0.
|
|
2227
|
+
content: '# font.body.small\n\nUse in secondary level content such as fine print or semantic messaging. Use sparingly. Migrate instances of Small text to Body S.\n\nExample Value: `normal 400 0.75rem/1rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2233
2228
|
name: 'font.body.small',
|
|
2234
2229
|
description: 'Use in secondary level content such as fine print or semantic messaging. Use sparingly. Migrate instances of Small text to Body S.',
|
|
2235
|
-
exampleValue: 'normal 400 0.
|
|
2230
|
+
exampleValue: 'normal 400 0.75rem/1rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2236
2231
|
}, {
|
|
2237
|
-
content: '# font.body.UNSAFE_small\n\nUNSAFE - Do not use. Temporary 12px fontsize token. Will be deprecated and replaced with stable small token\n\nExample Value: `normal 400 0.75rem/1rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2232
|
+
content: '# font.body.UNSAFE_small\n\nUNSAFE - Do not use. Temporary 12px fontsize token. Will be deprecated and replaced with stable small token\n\nExample Value: `normal 400 0.75rem/1rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2238
2233
|
name: 'font.body.UNSAFE_small',
|
|
2239
2234
|
description: 'UNSAFE - Do not use. Temporary 12px fontsize token. Will be deprecated and replaced with stable small token',
|
|
2240
|
-
exampleValue: 'normal 400 0.75rem/1rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2235
|
+
exampleValue: 'normal 400 0.75rem/1rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2241
2236
|
}, {
|
|
2242
|
-
content: '# font.metric.large\n\nUse to emphasize a number within a large donut.\n\nExample Value: `normal 653 1.75rem/2rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2237
|
+
content: '# font.metric.large\n\nUse to emphasize a number within a large donut.\n\nExample Value: `normal 653 1.75rem/2rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2243
2238
|
name: 'font.metric.large',
|
|
2244
2239
|
description: 'Use to emphasize a number within a large donut.',
|
|
2245
|
-
exampleValue: 'normal 653 1.75rem/2rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2240
|
+
exampleValue: 'normal 653 1.75rem/2rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2246
2241
|
}, {
|
|
2247
|
-
content: '# font.metric.medium\n\nUse to emphasize a number within a medium donut.\n\nExample Value: `normal 653 1.5rem/1.75rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2242
|
+
content: '# font.metric.medium\n\nUse to emphasize a number within a medium donut.\n\nExample Value: `normal 653 1.5rem/1.75rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2248
2243
|
name: 'font.metric.medium',
|
|
2249
2244
|
description: 'Use to emphasize a number within a medium donut.',
|
|
2250
|
-
exampleValue: 'normal 653 1.5rem/1.75rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2245
|
+
exampleValue: 'normal 653 1.5rem/1.75rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2251
2246
|
}, {
|
|
2252
|
-
content: '# font.metric.small\n\nUse to emphasize a number and words in single-value tiles, or small donuts.\n\nExample Value: `normal 653 1rem/1.25rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2247
|
+
content: '# font.metric.small\n\nUse to emphasize a number and words in single-value tiles, or small donuts.\n\nExample Value: `normal 653 1rem/1.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2253
2248
|
name: 'font.metric.small',
|
|
2254
2249
|
description: 'Use to emphasize a number and words in single-value tiles, or small donuts.',
|
|
2255
|
-
exampleValue: 'normal 653 1rem/1.25rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2250
|
+
exampleValue: 'normal 653 1rem/1.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2256
2251
|
}, {
|
|
2257
|
-
content: '# font.code\n\nFor representing code only, either inline or in code blocks.\n\nExample Value: `normal 400 0.875em/1 ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace`\n',
|
|
2252
|
+
content: '# font.code\n\nFor representing code only, either inline or in code blocks.\n\nExample Value: `normal 400 0.875em/1 "Atlassian Mono", ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace`\n',
|
|
2258
2253
|
name: 'font.code',
|
|
2259
2254
|
description: 'For representing code only, either inline or in code blocks.',
|
|
2260
|
-
exampleValue: 'normal 400 0.875em/1 ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace'
|
|
2255
|
+
exampleValue: 'normal 400 0.875em/1 "Atlassian Mono", ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace'
|
|
2261
2256
|
}, {
|
|
2262
2257
|
content: '# font.weight.regular\n\nDefault font weight for body text styles.\n\nExample Value: `400`\n',
|
|
2263
2258
|
name: 'font.weight.regular',
|
|
@@ -2274,25 +2269,25 @@ var tokenStructuredContent = exports.tokenStructuredContent = [{
|
|
|
2274
2269
|
description: 'Use with caution as fallback fonts do not support this font weight and will default to bold weight.',
|
|
2275
2270
|
exampleValue: '600'
|
|
2276
2271
|
}, {
|
|
2277
|
-
content: '# font.weight.bold\n\nUse sparingly for emphasising text, such as in a lozenge.\n\nExample Value: `
|
|
2272
|
+
content: '# font.weight.bold\n\nUse sparingly for emphasising text, such as in a lozenge.\n\nExample Value: `653`\n',
|
|
2278
2273
|
name: 'font.weight.bold',
|
|
2279
2274
|
description: 'Use sparingly for emphasising text, such as in a lozenge.',
|
|
2280
|
-
exampleValue: '
|
|
2275
|
+
exampleValue: '653'
|
|
2281
2276
|
}, {
|
|
2282
|
-
content: '# font.family.heading\n\nFor our default UI heading text.\n\nExample Value: `ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2277
|
+
content: '# font.family.heading\n\nFor our default UI heading text.\n\nExample Value: `"Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2283
2278
|
name: 'font.family.heading',
|
|
2284
2279
|
description: 'For our default UI heading text.',
|
|
2285
|
-
exampleValue: 'ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2280
|
+
exampleValue: '"Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2286
2281
|
}, {
|
|
2287
|
-
content: '# font.family.body\n\nFor our default UI body text.\n\nExample Value: `ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2282
|
+
content: '# font.family.body\n\nFor our default UI body text.\n\nExample Value: `"Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2288
2283
|
name: 'font.family.body',
|
|
2289
2284
|
description: 'For our default UI body text.',
|
|
2290
|
-
exampleValue: 'ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2285
|
+
exampleValue: '"Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2291
2286
|
}, {
|
|
2292
|
-
content: '# font.family.code\n\nFor representing code only.\n\nExample Value: `ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace`\n',
|
|
2287
|
+
content: '# font.family.code\n\nFor representing code only.\n\nExample Value: `"Atlassian Mono", ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace`\n',
|
|
2293
2288
|
name: 'font.family.code',
|
|
2294
2289
|
description: 'For representing code only.',
|
|
2295
|
-
exampleValue: 'ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace'
|
|
2290
|
+
exampleValue: '"Atlassian Mono", ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace'
|
|
2296
2291
|
}, {
|
|
2297
2292
|
content: '# font.family.brand.heading\n\nFor our brand heading text. Uses Charlie Display.\n\nExample Value: `"Charlie Display", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2298
2293
|
name: 'font.family.brand.heading',
|
|
@@ -12,12 +12,14 @@ var _helpers = require("../../helpers");
|
|
|
12
12
|
var _registry = require("./registry");
|
|
13
13
|
// Build the enum dynamically from the registry
|
|
14
14
|
var migrationIds = (0, _registry.getAvailableMigrationIds)();
|
|
15
|
+
var migrationDescriptions = (0, _registry.getAvailableMigrationsDescription)();
|
|
15
16
|
var migrationGuidesInputSchema = exports.migrationGuidesInputSchema = _zod.z.object({
|
|
16
|
-
migration: _zod.z.enum(migrationIds).describe("The specific migration to perform.\n")
|
|
17
|
+
migration: _zod.z.enum(migrationIds).describe("The specific migration to perform.\n"),
|
|
18
|
+
description: _zod.z.enum(migrationDescriptions).describe("Description of the migration type.\n")
|
|
17
19
|
});
|
|
18
20
|
var listMigrationGuidesTool = exports.listMigrationGuidesTool = {
|
|
19
21
|
name: 'ads_migration_guides',
|
|
20
|
-
description: "
|
|
22
|
+
description: "Migration guides for Atlassian Design System components.\n\n\tAvailable migrations:\n".concat((0, _registry.getAvailableMigrationsDescription)()),
|
|
21
23
|
annotations: {
|
|
22
24
|
title: 'ADS Migration Guides',
|
|
23
25
|
readOnlyHint: true,
|
|
@@ -6,39 +6,45 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.onboardingWithMotion = exports.onboardingSingleStep = exports.onboardingMultiStep = exports.onboardingJiraSpotlight = void 0;
|
|
7
7
|
var additionalResources = 'Visit https://hello.atlassian.net/wiki/spaces/DST/pages/6069774593 or https://atlassian.design/components/spotlight for more context';
|
|
8
8
|
var onboardingSingleStep = exports.onboardingSingleStep = {
|
|
9
|
-
id: '
|
|
9
|
+
id: 'single-step',
|
|
10
10
|
title: 'Single Step Spotlight Migration',
|
|
11
|
-
description: '
|
|
11
|
+
description: 'Use when code ONLY has `Spotlight` from `@atlaskit/onboarding` (no JiraSpotlight)',
|
|
12
12
|
fromPackage: '@atlaskit/onboarding',
|
|
13
13
|
toPackage: '@atlaskit/spotlight',
|
|
14
14
|
examples: [{
|
|
15
15
|
title: 'Migrate single step spotlight',
|
|
16
|
-
description: 'Replace
|
|
17
|
-
before: "
|
|
18
|
-
after: "
|
|
19
|
-
explanation: "Key changes when migrating a single step spotlight:\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
|
|
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/new';\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/new';\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/new';\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
|
+
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'],
|
|
22
22
|
additionalResources: additionalResources
|
|
23
23
|
};
|
|
24
24
|
var onboardingJiraSpotlight = exports.onboardingJiraSpotlight = {
|
|
25
|
-
id: '
|
|
25
|
+
id: 'jira-spotlight',
|
|
26
26
|
title: 'JiraSpotlight Migration',
|
|
27
|
-
description: '
|
|
27
|
+
description: 'Use when code contains `JiraSpotlight` import from `@atlassian/jira-spotlight`',
|
|
28
28
|
fromPackage: '@atlassian/jira-spotlight',
|
|
29
29
|
toPackage: '@atlaskit/spotlight',
|
|
30
30
|
examples: [{
|
|
31
|
-
title: '
|
|
32
|
-
description: '
|
|
33
|
-
before: "\nimport { JiraSpotlight } from '@atlassian/jira-spotlight/src/ui/jira-spotlight.tsx';\
|
|
34
|
-
after: "\
|
|
35
|
-
explanation: "Key changes when migrating a
|
|
31
|
+
title: 'Internal <JiraSpotlight /> migration',
|
|
32
|
+
description: 'Internal migrations are possible for JiraSpotlight usages which only pass simple/textual content to JiraSpotlight children',
|
|
33
|
+
before: "\n// file1.tsx\nimport { JiraSpotlight } from '@atlassian/jira-spotlight/src/ui/jira-spotlight.tsx';\n\nexport const OnboardingSpotlightWrapper = () => {\n\tconst spotlightId = 'some-unique-identifier'\n\tconst { dark, light } = spotlightImageUrls[spotlightId];\n\tconst imageUrl = colorMode === 'dark' ? dark : light;\n\n\treturn (\n\t\t<JiraSpotlight\n\t\t\timage={imageUrl}\n\t\t\tactions={[\n\t\t\t\t{\n\t\t\t\t\tonClick,\n\t\t\t\t\ttext: formatMessage(dismiss),\n\t\t\t\t},\n\t\t\t]}\n\t\t\theading={formatMessage(heading)}\n\t\t\ttarget={spotlightId}\n\t\t\tkey={spotlightId}\n\t\t\ttargetRadius={3}\n\t\t\ttargetBgColor={token('elevation.surface')}\n\t\t\tmessageId={spotlightId}\n\t\t\tmessageType=\"transactional\"\n\t\t\tdialogWidth={275}\n\t\t>\n\t\t\t{formatMessage(body)}\n\t\t</JiraSpotlight>\n\t);\n}\n\n// file2.tsx\nimport { SpotlightTarget } from '@atlaskit/onboarding';\n\nconst spotlightId = 'some-unique-identifier'\n\nexport const SomeFeature = () => {\n\treturn (\n\t\t<SpotlightTarget name={spotlightId}>\n\t\t\t// Target code\n\t\t</SpotlightTarget>\n\t);\n}\n",
|
|
34
|
+
after: "\n// file1.tsx\nimport { JiraSpotlight } from '@atlassian/jira-spotlight/src/ui/jira-spotlight.tsx';\n\nexport const OnboardingSpotlightWrapper = () => {\n\tconst spotlightId = 'some-unique-identifier'\n\tconst { dark, light } = spotlightImageUrls[spotlightId];\n\tconst imageUrl = colorMode === 'dark' ? dark : light;\n\n\treturn (\n\t\t<JiraSpotlight\n\t\t\tisMigrated // isMigrated prop passed\n\t\t\timage={imageUrl}\n\t\t\tactions={[\n\t\t\t\t{\n\t\t\t\t\tonClick,\n\t\t\t\t\ttext: formatMessage(dismiss),\n\t\t\t\t},\n\t\t\t]}\n\t\t\theading={formatMessage(heading)}\n\t\t\ttarget={spotlightId}\n\t\t\tkey={spotlightId}\n\t\t\ttargetRadius={3}\n\t\t\ttargetBgColor={token('elevation.surface')}\n\t\t\tmessageId={spotlightId}\n\t\t\tmessageType=\"transactional\"\n\t\t\tdialogWidth={275}\n\t\t>\n\t\t\t{formatMessage(body)}\n\t\t</JiraSpotlight>\n\t);\n}\n\n// file2.tsx\n// Updated SpotlightTarget import statement\nimport { SpotlightTarget } from '@atlassian/jira-spotlight/src/ui/SpotlightTarget.tsx';\n\nexport const SomeFeature = () => {\n\tconst spotlightId = 'some-unique-identifier'\n\n\treturn (\n\t\t<SpotlightTarget name={spotlightId}>\n\t\t\t// Target code\n\t\t</SpotlightTarget>\n\t);\n}\n\t\t\t",
|
|
35
|
+
explanation: "Key changes when migrating a JiraSpotlight:\n- A JiraSpotlight and a SpotlightTarget are part of the same usage if they share a spotlightId value - Referenced in JiraSpotlight.target and SpotlightTarget.name props\n- Pass isMigrated={true} to JiraSpotlight.\n- Update SpotlightTarget import statment from '@atlaskit/onboarding' to '@atlassian/jira-spotlight/src/ui/SpotlightTarget.tsx';\n- These changes allow switching the internal implementation to '@atlaskit/spotlight' via a feature flag.\n- This internal migration is only possible for usages that don't rely too heavily on the 'children' prop, as complex values, like heading, images, etc passed to 'children' are difficult to parse.\n"
|
|
36
|
+
}, {
|
|
37
|
+
title: 'Complex <JiraSpotlight /> migration',
|
|
38
|
+
description: 'Complex migrations are necessary for JiraSpotlight usages that make heavy use of the `children` prop to achieve customisation instead of relying on the `heading`, `body`, `image`, and/or `actions` props.',
|
|
39
|
+
before: "\n// file1.tsx\nimport { JiraSpotlight } from '@atlassian/jira-spotlight/src/ui/jira-spotlight.tsx';\n\nexport const OnboardingSpotlightWrapper = () => {\n\tconst spotlightId = 'some-unique-identifier'\n\tconst { dark, light } = spotlightImageUrls[spotlightId];\n\tconst imageUrl = colorMode === 'dark' ? dark : light;\n\n\treturn (\n\t\t<JiraSpotlight\n\t\t\ttarget={spotlightId}\n\t\t\ttargetRadius={3}\n\t\t\tdialogPlacement=''\n\t\t\ttargetBgColor={token('elevation.surface')}\n\t\t\tmessageId={spotlightId}\n\t\t\tmessageType=\"transactional\"\n\t\t\tdialogWidth={275}\n\t\t>\n\t\t\t<CustomSpotlightInner>\n\t\t\t\t{imageUrl}\n\t\t\t\t{formatMessage(heading)}\n\t\t\t\t{formatMessage(body)}\n\t\t\t\t<CustomSpotlightAction>\n\t\t\t\t\t{formatMessage(dismiss)}\n\t\t\t\t</CustomSpotlightAction>\n\t\t\t</CustomSpotlightInner>\n\t\t</JiraSpotlight>\n\t);\n}\n\n// file2.tsx\nimport { SpotlightTarget } from '@atlaskit/onboarding';\n\nconst spotlightId = 'some-unique-identifier'\n\nexport const SomeFeature = () => {\n\treturn (\n\t\t<SpotlightTarget name={spotlightId}>\n\t\t\t// Target code\n\t\t</SpotlightTarget>\n\t);\n}\n",
|
|
40
|
+
after: "\n// file2.tsx - Spotlight code has been co-located to the targeted element\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';\nimport Image from '@atlaskit/image';\nimport { ChoreographedComponent } from '@atlassian/jira-spotlight/src/ui/ChoreographedComponent.tsx';\n\nexport const SomeFeature = () => {\n\tconst { dark, light } = spotlightImageUrls[spotlightId];\n\n\tconst [isSpotlightVisible, actions] = useListViewOnboarding({\n\t\tprojectId: String(projectData.id),\n\t\tid: spotlightId,\n\t});\n\n\treturn (\n\t\t<PopoverProvider>\n\t\t\t<PopoverTarget>{renderTrigger(isSpotlightVisible)}</PopoverTarget>\n\t\t\t<ChoreographedComponent messageId={spotlightId} messageType=\"transactional\">\n\t\t\t\t<PopoverContent isVisible={isSpotlightVisible} placement=\"bottom-start\" dismiss={onClick}>\n\t\t\t\t\t<SpotlightCard>\n\t\t\t\t\t\t<SpotlightHeader>\n\t\t\t\t\t\t\t<SpotlightHeadline>{formatMessage(heading)}</SpotlightHeadline>\n\t\t\t\t\t\t\t<SpotlightControls>\n\t\t\t\t\t\t\t\t<SpotlightDismissControl />\n\t\t\t\t\t\t\t</SpotlightControls>\n\t\t\t\t\t\t</SpotlightHeader>\n\t\t\t\t\t\t<SpotlightMedia>\n\t\t\t\t\t\t\t<Image src={light} srcDark={dark} alt=\"\" />\n\t\t\t\t\t\t</SpotlightMedia>\n\t\t\t\t\t\t<SpotlightBody>\n\t\t\t\t\t\t\t<Text>{formatMessage(body)}</Text>\n\t\t\t\t\t\t</SpotlightBody>\n\t\t\t\t\t\t<SpotlightFooter>\n\t\t\t\t\t\t\t<SpotlightActions>\n\t\t\t\t\t\t\t\t<SpotlightPrimaryAction onClick={onClick}>\n\t\t\t\t\t\t\t\t\t{formatMessage(dismiss)}\n\t\t\t\t\t\t\t\t</SpotlightPrimaryAction>\n\t\t\t\t\t\t\t</SpotlightActions>\n\t\t\t\t\t\t</SpotlightFooter>\n\t\t\t\t\t</SpotlightCard>\n\t\t\t\t</PopoverContent>\n\t\t\t</ChoreographedComponent>\n\t\t</PopoverProvider>\n\t);\n};",
|
|
41
|
+
explanation: "Key changes when migrating a single step spotlight:\n- Replace JiraSpotlight with ChoreographedComponent from '@atlassian/jira-spotlight'.\n- PopoverProvider maintains internal Spotlight state.\n- Replace SpotlightTarget with PopoverTarget - wraps the element to highlight\n- Replace Spotlight with PopoverContent containing SpotlightCard - controls visibility and positioning\n- 'heading' becomes SpotlightHeadline inside SpotlightHeader\n- 'actions' becomes SpotlightActions with SpotlightPrimaryAction (and optionally SpotlightSecondaryAction)\n- 'body' 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- '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\"'"
|
|
36
42
|
}],
|
|
37
|
-
bestPractices: [
|
|
43
|
+
bestPractices: [],
|
|
38
44
|
additionalResources: additionalResources
|
|
39
45
|
};
|
|
40
46
|
var onboardingMultiStep = exports.onboardingMultiStep = {
|
|
41
|
-
id: '
|
|
47
|
+
id: 'multi-step',
|
|
42
48
|
title: 'Multi Step Spotlight Tour Migration',
|
|
43
49
|
description: 'Migrate a multi-step spotlight tour from @atlaskit/onboarding to @atlaskit/spotlight',
|
|
44
50
|
fromPackage: '@atlaskit/onboarding',
|
|
@@ -48,13 +54,13 @@ var onboardingMultiStep = exports.onboardingMultiStep = {
|
|
|
48
54
|
description: 'Replace the single SpotlightManager pattern with multiple PopoverProvider instances, one for each target in the tour',
|
|
49
55
|
before: "import React, { useState } from 'react';\nimport Button, { IconButton } from '@atlaskit/button/new';\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};",
|
|
50
56
|
after: "import React, { useState } from 'react';\nimport Button, { IconButton } from '@atlaskit/button/new';\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};",
|
|
51
|
-
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
|
|
57
|
+
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."
|
|
52
58
|
}],
|
|
53
59
|
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.'],
|
|
54
60
|
additionalResources: additionalResources
|
|
55
61
|
};
|
|
56
62
|
var onboardingWithMotion = exports.onboardingWithMotion = {
|
|
57
|
-
id: '
|
|
63
|
+
id: 'motion',
|
|
58
64
|
title: 'Single Step Spotlight with Motion Migration',
|
|
59
65
|
description: 'Migrate a single step spotlight with entrance animation from @atlaskit/onboarding to @atlaskit/spotlight using @atlaskit/motion',
|
|
60
66
|
fromPackage: '@atlaskit/onboarding',
|
|
@@ -32,5 +32,5 @@ var getAvailableMigrationIds = exports.getAvailableMigrationIds = function getAv
|
|
|
32
32
|
var getAvailableMigrationsDescription = exports.getAvailableMigrationsDescription = function getAvailableMigrationsDescription() {
|
|
33
33
|
return Object.values(migrationRegistry).map(function (m) {
|
|
34
34
|
return "- \"".concat(m.id, "\": ").concat(m.description);
|
|
35
|
-
})
|
|
35
|
+
});
|
|
36
36
|
};
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Structured content for tokens generated from token-metadata.
|
|
5
5
|
*
|
|
6
|
-
* @codegen <<SignedSource::
|
|
6
|
+
* @codegen <<SignedSource::203d487ec56456dcc11048a6c8cf7590>>
|
|
7
7
|
* @codegenCommand yarn build structured-docs
|
|
8
8
|
*/
|
|
9
9
|
|
|
@@ -2047,11 +2047,6 @@ export const tokenStructuredContent = [{
|
|
|
2047
2047
|
name: 'opacity.loading',
|
|
2048
2048
|
description: 'Apply to content that sits under a loading spinner.',
|
|
2049
2049
|
exampleValue: '0.2'
|
|
2050
|
-
}, {
|
|
2051
|
-
content: '# utility.UNSAFE.textTransformUppercase\n\nText transform uppercase token used for backwards compatibility between new and old theming solutions\n\nExample Value: `uppercase`\n',
|
|
2052
|
-
name: 'utility.UNSAFE.textTransformUppercase',
|
|
2053
|
-
description: 'Text transform uppercase token used for backwards compatibility between new and old theming solutions',
|
|
2054
|
-
exampleValue: 'uppercase'
|
|
2055
2050
|
}, {
|
|
2056
2051
|
content: '# utility.UNSAFE.transparent\n\nTransparent token used for backwards compatibility between new and old theming solutions\n\nExample Value: `transparent`\n',
|
|
2057
2052
|
name: 'utility.UNSAFE.transparent',
|
|
@@ -2178,80 +2173,80 @@ export const tokenStructuredContent = [{
|
|
|
2178
2173
|
description: 'Use to negate parent whitespace or overlap the largest pieces of UI.',
|
|
2179
2174
|
exampleValue: '-2rem'
|
|
2180
2175
|
}, {
|
|
2181
|
-
content: '# font.heading.xxlarge\n\nFor overlapping brand with app promotions, such as marketplace content. Migrate instances of H900 to Heading XXL.\n\nExample Value: `normal
|
|
2176
|
+
content: '# font.heading.xxlarge\n\nFor overlapping brand with app promotions, such as marketplace content. Migrate instances of H900 to Heading XXL.\n\nExample Value: `normal 653 2rem/2.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2182
2177
|
name: 'font.heading.xxlarge',
|
|
2183
2178
|
description: 'For overlapping brand with app promotions, such as marketplace content. Migrate instances of H900 to Heading XXL.',
|
|
2184
|
-
exampleValue: 'normal
|
|
2179
|
+
exampleValue: 'normal 653 2rem/2.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2185
2180
|
}, {
|
|
2186
|
-
content: '# font.heading.xlarge\n\nFor overlapping brand with app promotions, such as marketplace content. Migrate instances of H800 to Heading XL.\n\nExample Value: `normal
|
|
2181
|
+
content: '# font.heading.xlarge\n\nFor overlapping brand with app promotions, such as marketplace content. Migrate instances of H800 to Heading XL.\n\nExample Value: `normal 653 1.75rem/2rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2187
2182
|
name: 'font.heading.xlarge',
|
|
2188
2183
|
description: 'For overlapping brand with app promotions, such as marketplace content. Migrate instances of H800 to Heading XL.',
|
|
2189
|
-
exampleValue: 'normal
|
|
2184
|
+
exampleValue: 'normal 653 1.75rem/2rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2190
2185
|
}, {
|
|
2191
|
-
content: '# font.heading.large\n\nApp page titles, such as forms. Migrate instances of H700 to Heading L.\n\nExample Value: `normal
|
|
2186
|
+
content: '# font.heading.large\n\nApp page titles, such as forms. Migrate instances of H700 to Heading L.\n\nExample Value: `normal 653 1.5rem/1.75rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2192
2187
|
name: 'font.heading.large',
|
|
2193
2188
|
description: 'App page titles, such as forms. Migrate instances of H700 to Heading L.',
|
|
2194
|
-
exampleValue: 'normal
|
|
2189
|
+
exampleValue: 'normal 653 1.5rem/1.75rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2195
2190
|
}, {
|
|
2196
|
-
content: '# font.heading.medium\n\nHeaders in large components, such as modal dialogs. Migrate instances of H600 to Heading M.\n\nExample Value: `normal
|
|
2191
|
+
content: '# font.heading.medium\n\nHeaders in large components, such as modal dialogs. Migrate instances of H600 to Heading M.\n\nExample Value: `normal 653 1.25rem/1.5rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2197
2192
|
name: 'font.heading.medium',
|
|
2198
2193
|
description: 'Headers in large components, such as modal dialogs. Migrate instances of H600 to Heading M.',
|
|
2199
|
-
exampleValue: 'normal
|
|
2194
|
+
exampleValue: 'normal 653 1.25rem/1.5rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2200
2195
|
}, {
|
|
2201
|
-
content: '# font.heading.small\n\nFor headers in small components where space is limited. Migrate instances of H500 to Heading S.\n\nExample Value: `normal
|
|
2196
|
+
content: '# font.heading.small\n\nFor headers in small components where space is limited. Migrate instances of H500 to Heading S.\n\nExample Value: `normal 653 1rem/1.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2202
2197
|
name: 'font.heading.small',
|
|
2203
2198
|
description: 'For headers in small components where space is limited. Migrate instances of H500 to Heading S.',
|
|
2204
|
-
exampleValue: 'normal
|
|
2199
|
+
exampleValue: 'normal 653 1rem/1.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2205
2200
|
}, {
|
|
2206
|
-
content: '# font.heading.xsmall\n\nFor headers in small components where space is limited. Migrate instances of H400 to Heading XS.\n\nExample Value: `normal
|
|
2201
|
+
content: '# font.heading.xsmall\n\nFor headers in small components where space is limited. Migrate instances of H400 to Heading XS.\n\nExample Value: `normal 653 0.875rem/1.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2207
2202
|
name: 'font.heading.xsmall',
|
|
2208
2203
|
description: 'For headers in small components where space is limited. Migrate instances of H400 to Heading XS.',
|
|
2209
|
-
exampleValue: 'normal
|
|
2204
|
+
exampleValue: 'normal 653 0.875rem/1.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2210
2205
|
}, {
|
|
2211
|
-
content: '# font.heading.xxsmall\n\nFor headers in fine print or tight spaces. Use sparingly. Migrate instances of H100, H200 and H300 to Heading XXS.\n\nExample Value: `normal
|
|
2206
|
+
content: '# font.heading.xxsmall\n\nFor headers in fine print or tight spaces. Use sparingly. Migrate instances of H100, H200 and H300 to Heading XXS.\n\nExample Value: `normal 653 0.75rem/1rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2212
2207
|
name: 'font.heading.xxsmall',
|
|
2213
2208
|
description: 'For headers in fine print or tight spaces. Use sparingly. Migrate instances of H100, H200 and H300 to Heading XXS.',
|
|
2214
|
-
exampleValue: 'normal
|
|
2209
|
+
exampleValue: 'normal 653 0.75rem/1rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2215
2210
|
}, {
|
|
2216
|
-
content: '# font.body.large\n\nFor long-form text, such as in blogs.\n\nExample Value: `normal 400 1rem/1.5rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2211
|
+
content: '# font.body.large\n\nFor long-form text, such as in blogs.\n\nExample Value: `normal 400 1rem/1.5rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2217
2212
|
name: 'font.body.large',
|
|
2218
2213
|
description: 'For long-form text, such as in blogs.',
|
|
2219
|
-
exampleValue: 'normal 400 1rem/1.5rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2214
|
+
exampleValue: 'normal 400 1rem/1.5rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2220
2215
|
}, {
|
|
2221
|
-
content: '# font.body\n\nUse in short descriptions or labels. The default size for text in components. Migrate instances of Paragraph Default and UI Text to Body M.\n\nExample Value: `normal 400 0.875rem/1.25rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2216
|
+
content: '# font.body\n\nUse in short descriptions or labels. The default size for text in components. Migrate instances of Paragraph Default and UI Text to Body M.\n\nExample Value: `normal 400 0.875rem/1.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2222
2217
|
name: 'font.body',
|
|
2223
2218
|
description: 'Use in short descriptions or labels. The default size for text in components. Migrate instances of Paragraph Default and UI Text to Body M.',
|
|
2224
|
-
exampleValue: 'normal 400 0.875rem/1.25rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2219
|
+
exampleValue: 'normal 400 0.875rem/1.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2225
2220
|
}, {
|
|
2226
|
-
content: '# font.body.small\n\nUse in secondary level content such as fine print or semantic messaging. Use sparingly. Migrate instances of Small text to Body S.\n\nExample Value: `normal 400 0.
|
|
2221
|
+
content: '# font.body.small\n\nUse in secondary level content such as fine print or semantic messaging. Use sparingly. Migrate instances of Small text to Body S.\n\nExample Value: `normal 400 0.75rem/1rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2227
2222
|
name: 'font.body.small',
|
|
2228
2223
|
description: 'Use in secondary level content such as fine print or semantic messaging. Use sparingly. Migrate instances of Small text to Body S.',
|
|
2229
|
-
exampleValue: 'normal 400 0.
|
|
2224
|
+
exampleValue: 'normal 400 0.75rem/1rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2230
2225
|
}, {
|
|
2231
|
-
content: '# font.body.UNSAFE_small\n\nUNSAFE - Do not use. Temporary 12px fontsize token. Will be deprecated and replaced with stable small token\n\nExample Value: `normal 400 0.75rem/1rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2226
|
+
content: '# font.body.UNSAFE_small\n\nUNSAFE - Do not use. Temporary 12px fontsize token. Will be deprecated and replaced with stable small token\n\nExample Value: `normal 400 0.75rem/1rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2232
2227
|
name: 'font.body.UNSAFE_small',
|
|
2233
2228
|
description: 'UNSAFE - Do not use. Temporary 12px fontsize token. Will be deprecated and replaced with stable small token',
|
|
2234
|
-
exampleValue: 'normal 400 0.75rem/1rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2229
|
+
exampleValue: 'normal 400 0.75rem/1rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2235
2230
|
}, {
|
|
2236
|
-
content: '# font.metric.large\n\nUse to emphasize a number within a large donut.\n\nExample Value: `normal 653 1.75rem/2rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2231
|
+
content: '# font.metric.large\n\nUse to emphasize a number within a large donut.\n\nExample Value: `normal 653 1.75rem/2rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2237
2232
|
name: 'font.metric.large',
|
|
2238
2233
|
description: 'Use to emphasize a number within a large donut.',
|
|
2239
|
-
exampleValue: 'normal 653 1.75rem/2rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2234
|
+
exampleValue: 'normal 653 1.75rem/2rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2240
2235
|
}, {
|
|
2241
|
-
content: '# font.metric.medium\n\nUse to emphasize a number within a medium donut.\n\nExample Value: `normal 653 1.5rem/1.75rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2236
|
+
content: '# font.metric.medium\n\nUse to emphasize a number within a medium donut.\n\nExample Value: `normal 653 1.5rem/1.75rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2242
2237
|
name: 'font.metric.medium',
|
|
2243
2238
|
description: 'Use to emphasize a number within a medium donut.',
|
|
2244
|
-
exampleValue: 'normal 653 1.5rem/1.75rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2239
|
+
exampleValue: 'normal 653 1.5rem/1.75rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2245
2240
|
}, {
|
|
2246
|
-
content: '# font.metric.small\n\nUse to emphasize a number and words in single-value tiles, or small donuts.\n\nExample Value: `normal 653 1rem/1.25rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2241
|
+
content: '# font.metric.small\n\nUse to emphasize a number and words in single-value tiles, or small donuts.\n\nExample Value: `normal 653 1rem/1.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2247
2242
|
name: 'font.metric.small',
|
|
2248
2243
|
description: 'Use to emphasize a number and words in single-value tiles, or small donuts.',
|
|
2249
|
-
exampleValue: 'normal 653 1rem/1.25rem ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2244
|
+
exampleValue: 'normal 653 1rem/1.25rem "Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2250
2245
|
}, {
|
|
2251
|
-
content: '# font.code\n\nFor representing code only, either inline or in code blocks.\n\nExample Value: `normal 400 0.875em/1 ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace`\n',
|
|
2246
|
+
content: '# font.code\n\nFor representing code only, either inline or in code blocks.\n\nExample Value: `normal 400 0.875em/1 "Atlassian Mono", ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace`\n',
|
|
2252
2247
|
name: 'font.code',
|
|
2253
2248
|
description: 'For representing code only, either inline or in code blocks.',
|
|
2254
|
-
exampleValue: 'normal 400 0.875em/1 ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace'
|
|
2249
|
+
exampleValue: 'normal 400 0.875em/1 "Atlassian Mono", ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace'
|
|
2255
2250
|
}, {
|
|
2256
2251
|
content: '# font.weight.regular\n\nDefault font weight for body text styles.\n\nExample Value: `400`\n',
|
|
2257
2252
|
name: 'font.weight.regular',
|
|
@@ -2268,25 +2263,25 @@ export const tokenStructuredContent = [{
|
|
|
2268
2263
|
description: 'Use with caution as fallback fonts do not support this font weight and will default to bold weight.',
|
|
2269
2264
|
exampleValue: '600'
|
|
2270
2265
|
}, {
|
|
2271
|
-
content: '# font.weight.bold\n\nUse sparingly for emphasising text, such as in a lozenge.\n\nExample Value: `
|
|
2266
|
+
content: '# font.weight.bold\n\nUse sparingly for emphasising text, such as in a lozenge.\n\nExample Value: `653`\n',
|
|
2272
2267
|
name: 'font.weight.bold',
|
|
2273
2268
|
description: 'Use sparingly for emphasising text, such as in a lozenge.',
|
|
2274
|
-
exampleValue: '
|
|
2269
|
+
exampleValue: '653'
|
|
2275
2270
|
}, {
|
|
2276
|
-
content: '# font.family.heading\n\nFor our default UI heading text.\n\nExample Value: `ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2271
|
+
content: '# font.family.heading\n\nFor our default UI heading text.\n\nExample Value: `"Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2277
2272
|
name: 'font.family.heading',
|
|
2278
2273
|
description: 'For our default UI heading text.',
|
|
2279
|
-
exampleValue: 'ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2274
|
+
exampleValue: '"Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2280
2275
|
}, {
|
|
2281
|
-
content: '# font.family.body\n\nFor our default UI body text.\n\nExample Value: `ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2276
|
+
content: '# font.family.body\n\nFor our default UI body text.\n\nExample Value: `"Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2282
2277
|
name: 'font.family.body',
|
|
2283
2278
|
description: 'For our default UI body text.',
|
|
2284
|
-
exampleValue: 'ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2279
|
+
exampleValue: '"Atlassian Sans", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif'
|
|
2285
2280
|
}, {
|
|
2286
|
-
content: '# font.family.code\n\nFor representing code only.\n\nExample Value: `ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace`\n',
|
|
2281
|
+
content: '# font.family.code\n\nFor representing code only.\n\nExample Value: `"Atlassian Mono", ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace`\n',
|
|
2287
2282
|
name: 'font.family.code',
|
|
2288
2283
|
description: 'For representing code only.',
|
|
2289
|
-
exampleValue: 'ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace'
|
|
2284
|
+
exampleValue: '"Atlassian Mono", ui-monospace, Menlo, "Segoe UI Mono", "Ubuntu Mono", monospace'
|
|
2290
2285
|
}, {
|
|
2291
2286
|
content: '# font.family.brand.heading\n\nFor our brand heading text. Uses Charlie Display.\n\nExample Value: `"Charlie Display", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Ubuntu, "Helvetica Neue", sans-serif`\n',
|
|
2292
2287
|
name: 'font.family.brand.heading',
|
|
@@ -4,14 +4,16 @@ import { getAvailableMigrationIds, getAvailableMigrationsDescription, migrationR
|
|
|
4
4
|
|
|
5
5
|
// Build the enum dynamically from the registry
|
|
6
6
|
const migrationIds = getAvailableMigrationIds();
|
|
7
|
+
const migrationDescriptions = getAvailableMigrationsDescription();
|
|
7
8
|
export const migrationGuidesInputSchema = z.object({
|
|
8
|
-
migration: z.enum(migrationIds).describe(`The specific migration to perform.\n`)
|
|
9
|
+
migration: z.enum(migrationIds).describe(`The specific migration to perform.\n`),
|
|
10
|
+
description: z.enum(migrationDescriptions).describe(`Description of the migration type.\n`)
|
|
9
11
|
});
|
|
10
12
|
export const listMigrationGuidesTool = {
|
|
11
13
|
name: 'ads_migration_guides',
|
|
12
|
-
description: `
|
|
14
|
+
description: `Migration guides for Atlassian Design System components.
|
|
13
15
|
|
|
14
|
-
Available migrations:\n${getAvailableMigrationsDescription()}`,
|
|
16
|
+
Available migrations:\n${getAvailableMigrationsDescription()}`,
|
|
15
17
|
annotations: {
|
|
16
18
|
title: 'ADS Migration Guides',
|
|
17
19
|
readOnlyHint: true,
|