@atlaskit/spotlight 0.7.1 → 0.7.2

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/spotlight
 
+## 0.7.2
+
+### Patch Changes
+
+- [`ccbe07df5c620`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ccbe07df5c620) -
+  Update documentation to include motion example.
+
 ## 0.7.1
 
 ### Patch Changes

package/constellation/index/examples.mdx

@@ -7,6 +7,7 @@ import SingleStepExample from '../../examples/constellation/single-step';
 import MultipleStepsExample from '../../examples/constellation/multiple-steps';
 import MediaExample from '../../examples/constellation/media';
 import ControlsExample from '../../examples/constellation/controls';
+import MotionExample from '../../examples/constellation/motion';
 
 ## Single step
 
@@ -20,16 +21,16 @@ To show/hide the `SpotlightCard`, simply use a `useState` to control the `isVisi
 `PopoverContent`. To position the `SpotlightCard`, use `PopoverProvider`, `PopoverTarget` and
 `PopoverContent` and set the `placement` prop.
 
-<Example Component={SingleStepExample} packageName="@atlaskit/spinner" />
+<Example Component={SingleStepExample} packageName="@atlaskit/spotlight" />
 
 ## Multi-step tour
 
-Multiple steps should be avoided if possible. If multiple steps are required, preference managing
-the tour with a `useState`. If `useState` is not feasible, then a React context may be used.
-However, these contexts will often need to be wrapping the entire `App` and therefore will cause the
-entire `App` to re-render every time a new spotlight step is shown, which is not performant.
+Multiple steps should be avoided if possible, but if they are required, manage the tour with a
+`useState`. If `useState` is not feasible, then a React context may be used. However, these contexts
+will often need to be wrapping the entire `App` and therefore will cause the entire `App` to
+re-render every time a new spotlight step is shown.
 
-<Example Component={MultipleStepsExample} packageName="@atlaskit/spinner" />
+<Example Component={MultipleStepsExample} packageName="@atlaskit/spotlight" />
 
 ## Placements
 
@@ -37,7 +38,7 @@ Spotlight placements are static. They do not change as the user scrolls, or if t
 overflows out of the viewport. Make sure to choose a placement that ensures the `SpotlightCard` is
 displayed in full.
 
-<Example Component={PlacementsExample} packageName="@atlaskit/spinner" />
+<Example Component={PlacementsExample} packageName="@atlaskit/spotlight" />
 
 ## Media
 
@@ -46,9 +47,16 @@ correct reflow on smaller viewports, media must be 295px width X 135px height.
 
 Media can be an image, gif, or video that helps communicate spotlight intent.
 
-<Example Component={MediaExample} packageName="@atlaskit/spinner" />
+<Example Component={MediaExample} packageName="@atlaskit/spotlight" />
 
 ## Controls
 
 `SpotlightDismissControl` is required for all `SpotlightCard` components. It **must** be the first
 focusable element on the `SpotlightCard` card to provide an accessible experience.
+
+## Motion
+
+`@atlaskit/spotlight` can be composed with `@atlaskit/motion` or other CSS animation packages to
+create smooth 'enter' or 'exit' transitions.
+
+<Example Component={MotionExample} packageName="@atlaskit/spotlight" />

package/dist/types/ui/popover-content/index.d.ts

@@ -24,19 +24,19 @@ interface BasePopoverContentProps {
      */
     shouldDismissOnClickOutside?: boolean;
     /**
-        * Spotlights can be dismissed by:
-        * - Clicking the `SpotlightDismissControl`
-        * - Clicking any DOM element outside the spotlight (if `shouldDismissOnClickOutside === true`)
-        * - Pressing the Escape key
-        *
-        * These events align to the React.MouseEvent<HTMLButtonElement, MouseEvent>, MouseEvent, and KeyboardEvent events respectively.
-        * Defaults to `true`.
+     * Spotlights can be dismissed by:
+     * - Clicking the `SpotlightDismissControl`
+     * - Clicking any DOM element outside the spotlight (if `shouldDismissOnClickOutside === true`)
+     * - Pressing the Escape key
+     *
+     * These events align to the React.MouseEvent<HTMLButtonElement, MouseEvent>, MouseEvent, and KeyboardEvent events respectively.
+     * Defaults to `true`.
      */
     dismiss: (event: DismissEvent) => void;
     /**
      * Invoked when the user clicks `SpotlightSecondaryAction`. If an `onClick` handler is provided to `SpotlightSecondaryAction`
      * then that takes precedence, and `back` will be ignored.
-    */
+     */
     back?: (event: BackEvent) => void;
     /**
      * The content to be rendered in `PopoverContent`. This is intended to be a `SpotlightCard`.

package/dist/types-ts4.5/ui/popover-content/index.d.ts

@@ -24,19 +24,19 @@ interface BasePopoverContentProps {
      */
     shouldDismissOnClickOutside?: boolean;
     /**
-        * Spotlights can be dismissed by:
-        * - Clicking the `SpotlightDismissControl`
-        * - Clicking any DOM element outside the spotlight (if `shouldDismissOnClickOutside === true`)
-        * - Pressing the Escape key
-        *
-        * These events align to the React.MouseEvent<HTMLButtonElement, MouseEvent>, MouseEvent, and KeyboardEvent events respectively.
-        * Defaults to `true`.
+     * Spotlights can be dismissed by:
+     * - Clicking the `SpotlightDismissControl`
+     * - Clicking any DOM element outside the spotlight (if `shouldDismissOnClickOutside === true`)
+     * - Pressing the Escape key
+     *
+     * These events align to the React.MouseEvent<HTMLButtonElement, MouseEvent>, MouseEvent, and KeyboardEvent events respectively.
+     * Defaults to `true`.
      */
     dismiss: (event: DismissEvent) => void;
     /**
      * Invoked when the user clicks `SpotlightSecondaryAction`. If an `onClick` handler is provided to `SpotlightSecondaryAction`
      * then that takes precedence, and `back` will be ignored.
-    */
+     */
     back?: (event: BackEvent) => void;
     /**
      * The content to be rendered in `PopoverContent`. This is intended to be a `SpotlightCard`.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/spotlight",
-	"version": "0.7.1",
+	"version": "0.7.2",
 	"description": "A spotlight introduces users to points of interest, from focused messages to multi-step tours.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -40,7 +40,7 @@
 		"@atlaskit/icon": "^28.5.0",
 		"@atlaskit/image": "^3.0.0",
 		"@atlaskit/popper": "^7.1.0",
-		"@atlaskit/primitives": "^16.0.0",
+		"@atlaskit/primitives": "^16.1.0",
 		"@atlaskit/tokens": "^7.0.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",