An onboarding spotlight introduces new features to users through focused messages or multi-step tours.
yarn add @atlaskit/onboarding#117363
10a0f7f6c2027 -
This package's peerDependencies have been adjusted for react and/or react-dom to reflect the
status of only supporting React 18 going forward. No explicit breaking change to React support has
been made in this release, but this is to signify going forward, breaking changes for React 16 or
React 17 may come via non-major semver releases.
Please refer this community post for more details: https://community.developer.atlassian.com/t/rfc-78-dropping-support-for-react-16-and-rendering-in-a-react-18-concurrent-root-in-jira-and-confluence/87026
ff1c7111d8dd5 -
Update dependencies and remove unused internal exports.4660ec858a305 -
Update React from v16 to v1816990dd2ac6e5 -
Internal changes to typography styles. There may be some minor visual changes to align with
modernized typography styles.a7f4659856234 -
Adds optional render prop API to SpotlightTarget component. You can now use a function as the
children of SpotlightTarget and explicitly connect the targetRef to your component. This
provides fine-grained control over which element is cloned and avoids the need for a wrapping div
element.3f689d259d12e -
GA layering into spotlight30792384f2240 -
Removed feature flag to switch useElementBox to the 'polling' ResizeMethod. Now only props should
be used to control this.3ab7d7da348ab -
Adds side-effect config to support Compiled css extraction in third-party apps6d8bd88d4f892 -
[ux] Add default id to heading and reference it to spotlight dialog as accessible name if heading
exists.65b24f1c77e69 -
Make spread props more explicit and types more accurate throughout all components.960359d2e994c -
Updated logic for node-resolver-spotlight-target to remove extra span from document71f646cbd1ba6 -
[ux] Fixes issue where focus moved beyond spotlight container in screen reader mode. Additionally
spotlight dialog now supports props to add/reference label to it.fddbc0849871c -
DSP-21285 replacing platform-design-system-dsp-20687-transition-group with
platform_design_system_team_transition_group_r18f737df437eb7a -
Support close type in popup to not close all layers5d414827c3394 -
Removes usages of deprecated CustomThemeButton in favor of the new Button73d292c184200 -
[ux] Fix for bug DSP-21004. Update cloned content on mutation2d1da097bd763 -
DSP-20687 removing usage of findDOMNode in react-transition-group behind ff85b8f6cd01de0 -
Removes redundant usage of analytics-next from the spotlight dialog. No functional or behavioural
changes#127511
db30e29344013 -
Widening range of react and react-dom peer dependencies from ^16.8.0 || ^17.0.0 || ~18.2.0
to the wider range of ``^16.8.0 || ^17.0.0 || ^18.0.0` (where applicable).
This change has been done to enable usage of react@18.3 as well as to have a consistent peer
dependency range for react and react-dom for /platform packages.
8b8090800a35d -
Bump peer dependency for react-dom to include version 17 and 18.aa57c66a5b798 -
Migrating ipm-choreographer out of post-office and into platform. Fixing tests and lint checks for
ipm-choreographer, and adding a bugfix for Engagekit. Also, a minor change to @atlaskit/onboarding
to export the SpotlightProps interface.393f732d5423f -
[ux] Adding an optional prop to Spotlight, so it can used for scrollIntoView 'block' parameter.
This is to fix the unnecessary scroll of the non-portalled popup targets.61f6a496bcddf -
Added a possible fix (behind a feature flag) for a positioning bug with the Spotlight component.c733254a2dd6e -
Explicitly set jsxRuntime to classic via pragma comments in order to avoid issues where jsxRuntime
is implicitly set to automatic.abd5924f09fbd -
Internal change to manually set Heading colour to avoid potential context issues. This should
resolve issues where the Heading colour may have been incorrectly set.f12f3d4764e2 -
Reverts an attempted bug fix in 11.5.2 that re-added a theme provider to spotlight card to prevent
custom theme buttons inheriting other themese07d5ea81fc8 -
Update internal usage of typography heading255626d6dcd8 -
[ux] Remove zIndex for legacy browsers3fdc807b70fb -
Re-add custom theme wrapper to prevent buttons accidentally inheriting themes. To be removed when
component is updated to use new buttons.a0e6d0465080 -
[ux] Internal changes to typography + small visual change to background color.35fd5ed8e1d7 -
Upgrading internal dependency bind-event-listener to @^3.0.0e3dc0b4099fe -
[ux] Now the pulsing animations in both the standard Spotlight and the dedicated Pulse component
respect prefers-reduced-motion user preferences. If a user sets their system preferences to
reduce motion, instead of a pulsing animation we will show a static 'discovery' outline.3032fb024382 -
Associates the heading prop with the accessible label for the benefits modal.038e62a39d23 -
[ux] Ensure spotlight dialog always uses heading level 2. This will eventually become heading
level 1 once the dialog becomes a true modal.d69cb4f14309 -
[ux] Adds headingLevel to the SpotlightCard component. This will allow the usage of the correct
heading level depending on context.f12e489f23b0 -
Re-build and deploy packages to NPM to resolve React/Compiled not found error (HOT-106483).536478cdcf0b -
Tweaked ModalBody left and right padding to better align to the spacing scale.32032c9c1289 -
[ux] Fix spotlight padding and font style issues on tabs.524ec7b6505d -
Removed all remaining legacy theming logic from the Onboarding component.2d760e89b53 -
headingId is the id of heading in spotlightCard, which is used as the value of aria-labelledby
attribute of <div> element containing the modal dialog heading for screen reader recognising the
dialog77fd34690e9 - Add
missing dependencies to fix typechecking under local consumption35821e3b157 - Wrap
ReactElement in React.Fragment to fix typechecking under local consumption3c114ea4257 - Update
type definitions to conform to inherited changes from @types/react@16.14.15.36e3e86da5d -
SpotlightCard width prop now accepts either a number or the string '100%' and refactors how our
range of 160px – 600px works via css min-width and max-width instead of raw math.599bfe90ee3 - Internal
change to use shape tokens. There is no expected visual change.df6aac8c5a6 - When
providing an image path to SpotlightCard, there is no longer an additional space that appears
between the image and content padding.e7ea6832ad2 - Bans the
use of React.FC/React.FunctionComponent type in ADS components as part of the React 18 migration
work. The change is internal only and should not introduce any changes for the component
consumers.56507598609 - Skip
minor dependency bumpe3fa4437cf5 - [ux]
Updates focus appearance of components using buttons and custom buttons. These states now use an
offset outline which is consistent with other applications of focus in Atlassian components.261420360ec - Upgrades
component types to support React 18.18aeca8c199 - Internal
change to update token references. There is no expected behaviour or visual change.4ee60bafc6d -
ED-16603: Remove tooltips from VR tests and make them opt in. To opt-in, add allowedSideEffects
when loading the page.716af1d3387 - Bump
@atlaskit/heading from 1.0.0 to 1.0.1 to avoid resolving to poison dependency version9de88fa1e1e - Internal
changes to include spacing tokens in component implementations.e0015d4e201 - Updates
@emotion/core to @emotion/react; v10 to v11. There is no expected behavior change.05efb20bca8 - Fixes an
issue with the Spotlight target element height when this is determined by a parent element.7ca0e5a0c31 - Update
"subtle" action in Onboarding component to use correct tokens0e5102ee5ab - Update
"subtle-link" action in Onboarding component to use correct tokens994508770f7 - Bumps
the @atlaskit/heading dependency forward to a higher minimum version.0c0a8c64d54 - Removes
internal usage of the deprecated theme prop.a3241bd63a3 - Updates
jsdoc for all exported outputs of onboarding.8a5bdb3c844 -
Upgrading internal dependency (bind-event-listener) for improved internal typese4b612d1c48 - Internal
migration to bind-event-listener for safer DOM Event cleanup3124aa6ae24 - The
onboarding package now exports a ModalTransition component for use with the benefits modal. This
resolves an issue that can occur when using ModalTransition from a different version of
@atlaskit/modal-dialog than the one that Onboarding is bringing in.e7ad64befa5 - [ux]
Updated input tokens within @atlaskit/onboarding.ac9343c3ed4 - Replaces
usage of deprecated design tokens. No visual or functional changesdcd92130cc4 - Migrate
deleted background accent tokens to replacements62edf20ab1e - Migrates
all usage of brand tokens to either selected or information tokens. This change is purely for
semantic reasons, there are no visual or behavioural changes.bd38851d12f - [ux]
Fixed the missing Spotlight button border by updating the token usages.19d72473dfb - The
no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when
auto-fixing by correctly formatting token ids.19d72473dfb - The
no-unsafe-design-token-usage eslint rule now respects the new token naming conventions when
auto-fixing by correctly formatting token ids.9a5740d1ec3 - [ux] The
pulse prop now works correctly for <SpotlightPulse />. Previously, it was applying the pulse
to the SpotlightPulse target regardless of the pulse value. Now it checks the value of pulse
and applies the animation accordingly.3fced6aa641 - Bumped
react-focus-lock to version ^2.2.1.f460cc7c411 - Builds
for this package now pass through a tokens babel plugin, removing runtime invocations of the
tokens() function and improving bundle size.#14777
50081f13de7 -
Instrumented @atlaskit/onboarding with the new theming package, @atlaskit/tokens.
New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha). These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
d77725f926f - Replaced
usage of styled-components with @emotion/core.cf853e39278 - Internal
changes to remove @atlaskit/theme/math usage.115c009e2ef - Refactor
to use new modal dialog API.1b1cb960767 - The
headingAfterElement prop has been added to the spotlight component which can be used to add a
supplementary action.79c23df6340 - Use
injected package name and version for analytics instead of version.json.5f58283e1f - Export
types using Typescript's new "export type" syntax to satisfy Typescript's --isolatedModules
compiler option. This requires version 3.8 of Typescript, read more about how we handle Typescript
versions here: https://atlaskit.atlassian.com/get-started Also add typescript to
devDependencies to denote version that the package was built with.2ac834240e - Undo
analytics-next file restructure to allow external ts definitions to continue working#3885
6c525a8229 - Upgraded
to TypeScript 3.9.6 and tslib to 2.0.0
Since tslib is a dependency for all our packages we recommend that products also follow this tslib upgrade to prevent duplicates of tslib being bundled.
5d6c324306 - Expose
useSpotlight hook which returns #isTargetRendered function. We can use this function to check
whether target is rendered or not.db053b24d8 - Update all
the theme imports to be tree-shakable87f4720f27 - Officially
dropping IE11 support, from this version onwards there are no warranties of the package working in
IE11. For more information see:
https://community.developer.atlassian.com/t/atlaskit-to-drop-support-for-internet-explorer-11-from-1st-july-2020/395342c8d296246 - Adds
support for the subtle button appearance in the Spotlight dialog theme to align more closely
with ADG guidelines. Also visually re-orders action items so that the primary item in the actions
list appears on the right hand side, but still recieves focus first.54a9514fcf - Build and
supporting files will no longer be published to npm6faa22760b - Add
modalButtonTheme, spotlightButtonTheme,- Updated dependencies[patch]d150e2d7f6:
Change imports to comply with Atlassian conventions- Updated dependencies cf8577f5d6:
Updated dependencies 6b8e60827e:
Updated dependencies 449ef134b3:
Updated dependencies 9a534d6a74:
Updated dependencies 57c0487a02:
Updated dependencies fd41d77c29:
[patch]0389a42cc5:
Positioning fix for onboarding modals without css reset- Updated dependencies 603413f530:
Updated dependencies 168b5f90e5:
Updated dependencies f5b654c328:
Updated dependencies 0c270847cb:
Updated dependencies 109004a98e:
Updated dependencies b9903e773a:
Updated dependencies 89bf723567:
[patch]4d3749c9e6:
Upgraded react-scrolllock package- [patch]923c738553:
Fixes a rendering bug where a spotlight would not be updated- Updated dependencies 4d3749c9e6:
Updated dependencies dae900bf82:
Updated dependencies 8c9e4f1ec6:
[minor]aa70b257d3:
Introduce new prop experimental_shouldShowPrimaryButtonOnRight which positions the primary
button in a onboarding modal-dialog on the right (ADG approved).
[patch]b0d1348c83:
Change the type definition for interface to extend ButtonProps- [patch]62dc057049:
Allowing benefits modal buttons to stack vertically rather than overflow the modal when buttons contain lengthy text.- Updated dependencies 0603860c07:
[patch]6548261c9a:
Remove namespace imports from React, ReactDom, and PropTypes- Updated dependencies 6548261c9a:
[patch]24865cfaff:
Fixes Action onClick return type to void- Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
Updated dependencies 24865cfaff:
[patch]532f7c03fd:
Fixes spotlight taking a while to animate into view.- [patch]864f4891dc:
Fixes spotlight target not updating its position when resizing the viewport.- Updated dependencies 768bac6d81:
[patch]f86839ca4e:
@atlaskit/portal had an issue in IE11 and this is fixed in 3.1.2
[patch]35d2229b2a:
Adding missing license to packages and update to Copyright 2019 Atlassian Pty Ltd.
[patch]a2d0043716:
Updated version of analytics-next to fix potential incompatibilities with TS 3.6
[patch]2b158873d1:
Add linting rule to prevent unsafe usage of setTimeout within React components.
[major]a75dfaad67:
@atlaskit/onboarding has been converted to Typescript. Typescript consumers will now get static type safety. Flow types are no longer provided. No API or behavioural changes.
[patch]097b696613:
Components now depend on TS 3.6 internally, in order to fix an issue with TS resolving non-relative imports as relative imports
[patch]708028db86:
Change all the imports to theme in Core to use multi entry points
[patch]abee1a5f4f:
Bumping internal dependency (memoize-one) to latest version (5.1.0). memoize-one@5.1.0 has full typescript support so it is recommended that typescript consumers use it also.
[patch]678b2407a1:
Fix spotlight highlight issue when the offset parent has "fixed" position.
[patch]d905cbc0ac:
Spotlight target highlight is out of position if the the target element or any of its parent has a "fixed" position. Fix the issue by checking for fixed position before setting the position values for target highlight. Adding a condition to check if the component are referenced in tests running in CI. It reduces the noise and help reading the CI log.
[patch]9f8ab1084b:
Consume analytics-next ts type definitions as an ambient declaration.
[patch]b0ef06c685:
[patch]c3ab82ed42:
Updated dependencies 06c5cccf9d:
Updated dependencies dacfb81ca1:
[patch]21854842b5:
[major]7c17b35107:
[major]76299208e6:
As a breaking change, all @atlaskit packages will be dropping cjs distributions and will only
distribute esm. This means all distributed code will be transpiled, but will still contain
import and export declarations.
The major reason for doing this is to allow us to support multiple entry points in packages, e.g:
import colors from `@atlaskit/theme/colors`;
Previously this was sort of possible for consumers by doing something like:
import colors from `@atlaskit/theme/dist/esm/colors`;
This has a couple of issues. 1, it treats the file system as API making internal refactors harder, we have to worry about how consumers might be using things that aren't actually supposed to be used. 2. We are unable to do this internally in @atlaskit packages. This leads to lots of packages bundling all of theme, just to use a single color, especially in situations where tree shaking fails.
To support being able to use multiple entrypoints internally, we unfortunately cannot have multiple distributions as they would need to have very different imports from of their own internal dependencies.
ES Modules are widely supported by all modern bundlers and can be worked around in node environments.
We may choose to revisit this solution in the future if we find any unintended condequences, but we see this as a pretty sane path forward which should lead to some major bundle size decreases, saner API's and simpler package architecture.
Please reach out to #fabric-build (if in Atlassian) or create an issue in Design System Support (for external) if you have any questions or queries about this.
[minor]eb81a2de65:
[patch]d669123bbd:
Updated dependencies 27cacd44ab:
[patch]6855bec:
[patch]e59562a:
[patch]d13242d:
[patch]e151c1a:
As of component versions:
No component requires `LayerManager` to layer correctly.
You can safely remove this dependency and stop rendering `LayerManager` in your apps.
[patch]a637f5e:
[patch]b332c91:
[patch]9f91ea0:
[patch]4872a19:
Previously if you were using the actions prop like:
<Spotlight
actions={[
{
text: <FormattedMessage defaultMessage="Next" />,
},
{
text: <FormattedMessage defaultMessage="Skip" />,
},
]}
>
Look at this feature
</Spotlight>
React would complain about duplicate keys. Now you can pass in a key for the action like:
<Spotlight
actions={[
{
text: <FormattedMessage defaultMessage="Next" />,
key: 'next',
},
{
text: <FormattedMessage defaultMessage="Skip" />,
key: 'skip',
},
]}
>
Look at this feature
</Spotlight>
[patch][2482922](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/2482922" d):
[patch][0c7a57d](https://bitbucket.org/atlassian/atlaskit-mk-2/commits/0c7a57d" d):