Onboarding (spotlight)

An onboarding spotlight introduces new features to users through focused messages or multi-step tours.

Deprecated

This package is deprecated. Use @atlaskit/spotlight.

Examples Code Usage Changelog

Installation

Package installation information
Install	`yarn add @atlaskit/onboarding`
Source	Bitbucket.org, (opens new window)
npm	@atlaskit/onboarding, (opens new window)
Bundle	unpkg.com, (opens new window)

Props

`actions`
Description	Buttons to render in the footer.
Type	`Action[]`

`actionsBeforeElement`
Description	An optional node to be rendered beside the footer actions.
Type	`string \| number \| boolean \| React.ReactElement<any, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal`

`children`
Description	The elements rendered in the modal.
Type	`string \| number \| boolean \| React.ReactElement<any, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal`

`dialogPlacement`
Description	Where the dialog should appear, relative to the contents of the children.
Type	`"top left" \| "top center" \| "top right" \| "right top" \| "right middle" \| "right bottom" \| "bottom left" \| "bottom center" \| "bottom right" \| "left top" \| "left middle" \| "left bottom"`

`dialogWidth`
Description	The width of the dialog in pixels. The minimum possible width is 160px and the maximum width is 600px.
Default	`400`
Type	`number`

`header`
Description	Optional element rendered above the body.
Type	`React.ComponentClass<any, any> \| React.FunctionComponent<any>`

`heading`
Description	Heading text rendered above the body.
Type	`string`

`headingAfterElement`
Description	An optional element rendered to the right of the heading.
Type	`string \| number \| boolean \| React.ReactElement<any, string \| React.JSXElementConstructor<any>> \| Iterable<React.ReactNode> \| React.ReactPortal`

`image`
Description	Path to the image.
Type	`string`

`label`
Description	Refers to an `aria-label` attribute. Sets an accessible name for the spotlight dialog wrapper to announce it to users of assistive technology. Usage of either this, or the `titleId` prop is strongly recommended to improve accessibility.
Type	`string`

`pulse`
Description	Whether or not to display a pulse animation around the spotlighted element.
Default	`true`
Type	`boolean`

`scrollPositionBlock`
Description	Used set the 'block' attribute on scrollIntoView, which determines the vertical alignment of the target node to the nearest scrollable ancestor.
Type	`"start" \| "center" \| "end" \| "nearest"`

`shouldWatchTarget`
Description	Whether the spotlight should check for changes to the spotlighted element or its position. This prop may negatively affect performance and should be used only if layout shifts are causing the spotlight to be positioned incorrectly.
Default	`false`
Type	`boolean`

`target`
Description	The name of the SpotlightTarget.
Type	`string`

`targetBgColor`
Description	The background color of the element being highlighted.
Type	`string`

`targetNode`
Description	The spotlight target node.
Type	`HTMLElement`

`targetOnClick`
Description	Function to fire when a person clicks on the cloned target.
Type	`(eventData: { event: React.MouseEvent<HTMLElement, MouseEvent>; target?: string; }) => void`

`targetRadius`
Description	The border radius of the element being highlighted.
Type	`string \| number`

`targetReplacement`
Description	Alternative element to render than the wrapped target.
Type	`React.ComponentClass<any, any> \| React.FunctionComponent<any>`

`testId`
Description	This prop is a unique string that appears as an attribute `data-testid` in the rendered HTML output serving as a hook for automated tests. Defaults to `"spotlight"`. As this component is composed of multiple components we use this `testId` as a prefix: `"${testId}--dialog"` to identify the spotlight dialog `"${testId}--target"` to identify the spotlight target clone
Default	`"spotlight"`
Type	`string`

`titleId`
Description	Refers to a value of an `aria-labelledby` attribute. References an element to define accessible name for the spotlight dialog. Usage of either this, or the `label` prop is strongly recommended to improve accessibility.
Type	`string`

Spotlight manager props

`blanketIsTinted`
Description	Boolean prop for toggling blanket transparency.
Type	`boolean`

`children`
Required
Description	Typically the app, or a section of the app.
Type	`string \| number \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`

`component`
Deprecated
Description	Component is deprecated and will be removed in the future.
Type	`"symbol" \| "object" \| "footer" \| ComponentType<any> \| "header" \| "image" \| "label" \| "center" \| "a" \| "abbr" \| "address" \| "area" \| "article" \| "aside" \| "audio" \| ... 163 more ... \| "view"`

`onBlanketClicked`
Description	Handler function to be called when the blanket is clicked.
Type	`() => void`

Was this page helpful?

We use this feedback to improve our documentation.