@atlaskit/ads-mcp 1.9.0 → 1.10.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +14 -0
- package/dist/cjs/tools/get-all-components/components.codegen.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 +3 -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-atlaskit-components/atlaskit-components.codegen.js +2 -2
- package/dist/es2019/tools/get-atlaskit-hooks/atlaskit-hooks.codegen.js +3 -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-atlaskit-components/atlaskit-components.codegen.js +2 -2
- package/dist/esm/tools/get-atlaskit-hooks/atlaskit-hooks.codegen.js +3 -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/package.json +1 -1
|
@@ -9,7 +9,7 @@ exports.atlaskitHooks = void 0;
|
|
|
9
9
|
*
|
|
10
10
|
* Structured content hooks from design-system *.docs.tsx files
|
|
11
11
|
*
|
|
12
|
-
* @codegen <<SignedSource::
|
|
12
|
+
* @codegen <<SignedSource::eff635a23ccace1d4e4c6ef6efc21551>>
|
|
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 */
|
|
@@ -260,7 +260,7 @@ var atlaskitHooks = exports.atlaskitHooks = [{
|
|
|
260
260
|
keywords: ['smart-card', 'hooks', 'useSmartLinkActions', 'actions'],
|
|
261
261
|
category: 'linking',
|
|
262
262
|
package: '@atlaskit/smart-card',
|
|
263
|
-
examples: ["import React, { useCallback } from 'react';\nimport Button from '@atlaskit/button/
|
|
263
|
+
examples: ["import React, { useCallback } from 'react';\nimport Button from '@atlaskit/button/default/button';\nimport { SmartCardProvider } from '@atlaskit/link-provider';\nimport { ResolvedClient, ResolvedClientUrl } from '@atlaskit/link-test-helpers';\nimport { Box } from '@atlaskit/primitives/compiled';\nimport { Card } from '../../src';\nimport { CardAction } from '../../src/constants';\nimport { useSmartLinkActions } from '../../src/hooks';\nimport ExampleContainer from './example-container';\nconst PreviewButton = ({ url }: { url: string }) => {\n\tconst actions = useSmartLinkActions({ url, appearance: 'block' });\n\t// actions are returned in an array, find the preview action\n\tconst previewAction = actions.find((action) => action.id === 'preview-content');\n\tconst handleClick = useCallback(() => {\n\t\tif (previewAction) {\n\t\t\tpreviewAction.invoke();\n\t\t}\n\t}, [previewAction]);\n\tif (!previewAction) {\n\t\treturn null;\n\t}\n\treturn <Button onClick={handleClick}>{previewAction.text}</Button>;\n};\nconst UseSmartLinkActionsExample = (): React.JSX.Element => (\n\t<ExampleContainer>\n\t\t<SmartCardProvider client={new ResolvedClient()}>\n\t\t\t<Card\n\t\t\t\tappearance=\"block\"\n\t\t\t\turl={ResolvedClientUrl}\n\t\t\t\tactionOptions={{ hide: false, exclude: [CardAction.PreviewAction] }}\n\t\t\t/>\n\t\t\t<Box paddingBlockStart=\"space.200\">\n\t\t\t\t<PreviewButton url={ResolvedClientUrl} />\n\t\t\t</Box>\n\t\t</SmartCardProvider>\n\t</ExampleContainer>\n);\nexport default UseSmartLinkActionsExample;"]
|
|
264
264
|
}, {
|
|
265
265
|
name: 'useSmartLinkEvents',
|
|
266
266
|
description: 'Hook that returns a SmartLinkEvents object for dispatching analytics events for a given URL. Currently supports insertSmartLink.',
|
|
@@ -270,7 +270,7 @@ var atlaskitHooks = exports.atlaskitHooks = [{
|
|
|
270
270
|
keywords: ['smart-card', 'hooks', 'analytics', 'useSmartLinkEvents', 'events'],
|
|
271
271
|
category: 'linking',
|
|
272
272
|
package: '@atlaskit/smart-card',
|
|
273
|
-
examples: ["import
|
|
273
|
+
examples: ["import AnalyticsContext from '@atlaskit/analytics-next/AnalyticsContext';\nimport AnalyticsListener from '@atlaskit/analytics-next/AnalyticsListener';\nimport type UIAnalyticsEvent from '@atlaskit/analytics-next/UIAnalyticsEvent';\nimport Heading from '@atlaskit/heading/heading';\nimport { SmartCardProvider } from '@atlaskit/link-provider';\nimport { ResolvedClient, ResolvedClientUrl } from '@atlaskit/link-test-helpers';\nimport { Box, Text, xcss } from '@atlaskit/primitives';\nimport { Card } from '../../src';\nconst headingBoxStyles = xcss({\n\tmarginBottom: 'space.100',\n});\nconst stackBoxStyles = xcss({\n\tmarginTop: 'space.100',\n});\ntype ExampleComponentProps = {\n\tsetRecentEvents: React.Dispatch<React.SetStateAction<UIAnalyticsEvent[]>>;\n};\nconst ExampleComponent = ({ setRecentEvents }: ExampleComponentProps): JSX.Element => {\n\tconst handleOnClick = React.useCallback(\n\t\t(e: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>) => {\n\t\t\te.preventDefault();\n\t\t\treturn;\n\t\t},\n\t\t[],\n\t);\n\treturn (\n\t\t<AnalyticsListener\n\t\t\tonEvent={(event) => {\n\t\t\t\tsetRecentEvents((prevEvents) => [...prevEvents, event]);\n\t\t\t}}\n\t\t\tchannel=\"*\"\n\t\t>\n\t\t\t<AnalyticsContext\n\t\t\t\tdata={{\n\t\t\t\t\tsource: 'content',\n\t\t\t\t\tattributes: {\n\t\t\t\t\t\tdisplayCategory: 'link',\n\t\t\t\t\t\tdisplay: 'url',\n\t\t\t\t\t\tid: '123',\n\t\t\t\t\t},\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t<SmartCardProvider client={new ResolvedClient('dev')}>\n\t\t\t\t\t<Card\n\t\t\t\t\t\turl={ResolvedClientUrl}\n\t\t\t\t\t\tappearance=\"inline\"\n\t\t\t\t\t\tplatform=\"web\"\n\t\t\t\t\t\tshowHoverPreview={true}\n\t\t\t\t\t\tonClick={handleOnClick}\n\t\t\t\t\t/>\n\t\t\t\t</SmartCardProvider>\n\t\t\t</AnalyticsContext>\n\t\t</AnalyticsListener>\n\t);\n};\nexport default (): React.JSX.Element => {\n\tconst [recentEvents, setRecentEvents] = React.useState<UIAnalyticsEvent[]>([]);\n\tconst mostRecent10Events = React.useMemo(() => {\n\t\treturn Array.from({ length: 10 }, (_, i) => {\n\t\t\treturn recentEvents.at(recentEvents.length - i - 1);\n\t\t});\n\t}, [recentEvents]);\n\treturn (\n\t\t<Box>\n\t\t\t<Box xcss={headingBoxStyles}>\n\t\t\t\t<Heading size=\"medium\">Interact with the link below and see events being fired</Heading>\n\t\t\t</Box>\n\t\t\t<ExampleComponent setRecentEvents={setRecentEvents} />\n\t\t\t<Box xcss={stackBoxStyles}>\n\t\t\t\t<Heading size=\"small\">The 10 Most Recent Events Fired</Heading>\n\t\t\t\t<ol>\n\t\t\t\t\t{mostRecent10Events.map((event, index) => {\n\t\t\t\t\t\tif (event === undefined) {\n\t\t\t\t\t\t\treturn <li key={index}></li>;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tconst { action, actionSubject, eventType } = event.payload;\n\t\t\t\t\t\treturn (\n\t\t\t\t\t\t\t<li key={index}>\n\t\t\t\t\t\t\t\t<Text\n\t\t\t\t\t\t\t\t\tkey={index}\n\t\t\t\t\t\t\t\t>{`actionSubject: ${actionSubject}, action: ${action}, eventType: ${eventType}`}</Text>\n\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t);\n\t\t\t\t\t})}\n\t\t\t\t</ol>\n\t\t\t</Box>\n\t\t</Box>\n\t);\n};"]
|
|
274
274
|
}, {
|
|
275
275
|
name: 'useAllMessages',
|
|
276
276
|
description: 'Returns every non-dismissed message in a placement with a placement-bound wrapper. Use it when one surface renders messages from multiple templates.',
|
|
@@ -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'],
|