@atlaskit/spotlight 0.6.4 → 0.7.1

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/spotlight
 
+## 0.7.1
+
+### Patch Changes
+
+- [`991d1598db6d6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/991d1598db6d6) -
+  Documentation for upcoming beta release.
+
+## 0.7.0
+
+### Minor Changes
+
+- [`6e38d616cae8e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6e38d616cae8e) -
+  Allow back, next, done actions to be passed into PopoverContent. These actions will be used if no
+  onClick handler is passed to SpotlightSecondaryAction, SpotlightPrimaryAction. If onClick handlers
+  are provided to the specific components, then they will take preference over what is passed to
+  PopoverContent.
+
 ## 0.6.4
 
 ### Patch Changes

package/README.md

@@ -1,13 +1,8 @@
 # Spotlight
 
-Note: This package is in pre-alpha. It is not ready to be consumed and used.
-
-A spotlight introduces users to various points of interest across Atlassian through focused messages
-or multi-step tours.
+A spotlight introduces users to points of interest, from focused messages to multi-step tours.
 
 ## Usage
 
-`import { Spotlight } from '@atlaskit/spotlight';`
-
 Detailed docs and example usage can be found
 [here](https://atlaskit.atlassian.com/packages/design-system/spotlight).

package/constellation/index/examples.mdx

@@ -8,15 +8,13 @@ import MultipleStepsExample from '../../examples/constellation/multiple-steps';
 import MediaExample from '../../examples/constellation/media';
 import ControlsExample from '../../examples/constellation/controls';
 
-## Single Step
+## Single step
 
-Ideally, spotlights should only have a single step so as not to overwhelm users with too much
-information. Try and combine or eliminate tasks where possible. Dismiss functionality is required.
-Don't force users to participate.
+Always aim for a single step experience.
 
-By design `@atlaskit/spotlight` does not have a blanket, scroll-lock, focus-trap, or click-outside
-to dismiss functionality. This is to ensure the user is not hijacked into the spotlight experience,
-and can opt-in if they are interested.
+By design, `@atlaskit/spotlight` does not have a blanket, scroll-lock, or focus-trap functionality.
+This is to ensure the user is not hijacked into the spotlight experience, and can opt-in if they are
+interested.
 
 To show/hide the `SpotlightCard`, simply use a `useState` to control the `isVisible` prop on
 `PopoverContent`. To position the `SpotlightCard`, use `PopoverProvider`, `PopoverTarget` and
@@ -24,12 +22,12 @@ To show/hide the `SpotlightCard`, simply use a `useState` to control the `isVisi
 
 <Example Component={SingleStepExample} packageName="@atlaskit/spinner" />
 
-## Multiple Steps/Tour
+## Multi-step tour
 
-Multiple steps should be avoided if possible. Try and combine or eliminate steps where possible. If
-multiple steps are required, preference managing the tour with a `useState`. As a last resort 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.
+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.
 
 <Example Component={MultipleStepsExample} packageName="@atlaskit/spinner" />
 
@@ -43,10 +41,10 @@ displayed in full.
 
 ## Media
 
-Media is optional for a `SpotlightCard`. However if it is used it must be 295px width X 135px
-height. This is to ensure correct reflow on smaller viewports.
+Media is optional for a `SpotlightCard`and should only be used for more complex features. To ensure
+correct reflow on smaller viewports, media must be 295px width X 135px height.
 
-Media can be an image, video, animation, or any other visual aid to communicate spotlight intent.
+Media can be an image, gif, or video that helps communicate spotlight intent.
 
 <Example Component={MediaExample} packageName="@atlaskit/spinner" />
 

package/constellation/index/usage.mdx

@@ -1,127 +1,212 @@
-import { SingleStepSpotlightTable, MultiStepSpotlightTable } from '@af/design-system-docs-ui';
+import {
+	SpotlightTable,
+	SpotlightVisualGuidelines,
+	SpotlightCollectionBackgroundColors,
+} from '@af/design-system-docs-ui';
+import { Stack } from '@atlaskit/primitives/compiled';
+
+import tourUseDo from '../images/tour-use-do.png';
+import tourUseDont from '../images/tour-use-dont.png';
+import principlesDo from '../images/principles-of-use-do.png';
+import principlesDont from '../images/principles-of-use-dont.png';
 
 ## Usage
 
-A spotlight focuses attention on a specific part of the UI, such as a button or icon, to educate
-users about key features or workflows. Spotlights are most effective for onboarding new users,
-driving feature discovery, or highlighting important changes. Use them sparingly — if your UI needs
-frequent spotlights, consider simplifying the core experience instead.
+Use a spotlight to bring attention to a specific part of the UI, such as a button or icon, to
+educate users about key features or workflows.
 
-## Spotlight Scenarios
+Spotlights are most effective for onboarding new users, driving feature discovery, or highlighting
+important changes. Use them sparingly. If your UI needs frequent spotlights, consider simplifying
+the core experience instead.
 
-### Top use cases
+### Single-step spotlight
 
-- **Onboarding new users**: Guide first-time users to essential features and workflows.
-- **Feature discovery**: Help existing users learn about new or updated capabilities.
+The ideal spotlight experience is lightweight and a single-step. Always try to limit your experience
+to one spotlight to prevent information overload for the user.
 
-### Growth use cases
+![Example of a single-step spotlight with content about Jira tasks pointing at a task on a Jira board.](../images/single-step.png)
 
-- **Cross-flow, cross-join, co-use**: Use spotlights only when triggered by another message type
-  (e.g., a banner that asks for permission to “show me” before triggering a spotlight).
+### Multi-step tour
 
-### Unsupported use cases
+A tour is a series of spotlights that point to multiple areas of the UI. <br /> Ensure your tour:
 
-- **Transactional**: Never use spotlights for transactional messages.
+- has a maximum of three steps
+- is logically sequenced
+- is limited to one screen
+- includes a “Back” call-to-action (CTA) after the initial spotlight
+- displays a step count
 
-## Guiding Principles
+**In a tour, the initial spotlight references step count and clear next action**
 
-- **Use sparingly**: Spotlights are a Level 3 (Neutral Plus) attention component. Overuse can
-  distract and fatigue users.
-- **One at a time**: Only show one spotlight at a time.
-- **Dismissibility**: Always provide a dismiss option. Never force participation.
-- **Step count**: Prefer single-step spotlights. For tours, keep flows short (2–3 steps max).
-- **Orchestration**: Build spotlights with Post Office to avoid message collisions and enforce
-  fatigue rules (Atlassians Only).
-- **Media**: Use media (images or video) only when it enhances understanding. Exclude media if the
-  spotlight already focuses attention effectively.
+![Example of a first spotlight in multi-step tour with content about Loom pointing at a Loom video.](../images/multi-step-step-1.png)
 
-## Anatomy & Specifications
+**Advancing to the next step introduces a Back button**
 
-### Single Step Spotlight
+![Example of a second spotlight in multi-step tour with content about creating docs in Jira pointing at a Jira update.](../images/multi-step-step-2.png)
 
-<SingleStepSpotlightTable />
-<br />
+### Tour use
 
-### Multi Step Spotlight/Tour
+Tours should be used sparingly. Before designing a tour, assess if you can combine or eliminate
+steps to keep the experience as lightweight as possible, as seen below.
 
-<MultiStepSpotlightTable />
-<br />
+<DoDont
+	type="do"
+	image={{
+		url: tourUseDo,
+		alt: 'Example of a single-step spotlight with content that combines the example content of the multi-step tour next to it.',
+	}}
+>
+	Keep things lightweight. Aim for one step with active and concise messaging.
+</DoDont>
 
-## Visual Guidance
+<DoDont
+	type="dont"
+	image={{
+		url: tourUseDont,
+		alt: 'Example of a multi-step spotlight with content that that can be combined into a single step.',
+	}}
+>
+	Avoid tours unless the steps are crucial. Consolidate information first.
+</DoDont>
 
-- **Complexity**: Match the visual complexity to the feature’s learning curve. Use text-only for
-  simple features, a single illustration for moderate complexity, and a narrative/motion for complex
-  flows.
+### Triggered spotlights
 
-- **Brand color**: Use solid backgrounds to focus attention. Limit to three brand colors per
-  composition.
+Spotlights can activate UI if triggered by another component. Although they are a second step in an
+experience, they should not use a step count or “Back” CTA.
 
-- **Composition**: Highlight the focal point with size, color, and gesture lines. Use motion only if
-  it clarifies the feature.
+**In this example, a banner triggers a spotlight that opens a dropdown**
 
-## Behavior
+![Example of a single-step spotlight with content that combines the example content of the multi-step tour next to it.](../images/triggered-spotlight.png)
 
-- **Entry points**: Spotlights should be triggered contextually and never interrupt core workflows.
-  For cross-product or promotional spotlights, use a less obtrusive entrypoint (like a banner)
-  first.
+## Spotlight use cases
 
-- **Tours**: Sequence steps logically. Keep flows short and focused.
+### Onboarding
 
-## Best Practices
+Guide first-time users to essential features and workflows.
 
-- Use spotlights only when necessary to drive understanding or adoption.
-- Sequence multi-step spotlights logically; aim for 2–3 steps max.
-- Always allow users to dismiss or skip.
-- Avoid competing with other in-product messages.
-- Prefer embedded, contextual education over overlays.
+### Feature discovery
 
-## Accessibility
+Help existing users learn about new or updated capabilities.
+
+### Cross-flow, cross-join, and co-use
+
+Trigger a spotlight from another component to elaborate on the message. For example, a flag with a
+“Show me” CTA triggers a spotlight to demonstrate the feature in context. Triggered spotlights can
+also activate UI.
+
+## Principles of use
+
+<DoDont
+	type="do"
+	image={{
+		url: principlesDo,
+		alt: 'Example of spotlight with content that explains what Rovo is.',
+	}}
+>
+	Use spotlights to educate users or introduce them to something new.
+</DoDont>
 
-- The headline is used as the accessible name for the spotlight dialog.
-- Keep content concise and avoid motion that could be disruptive.
-- Ensure the carat and spotlight are not truncated by the browser bounds.
+<DoDont
+	type="dont"
+	image={{
+		url: principlesDont,
+		alt: 'Example of a spotlight with content that promotes purchasing collections to get Rovo.',
+	}}
+>
+	Use spotlights for upsells or other transactional messaging.
+</DoDont>
 
-### Focus Management
+## Anatomy and specifications
 
-#### Single step spotlights
+![Example spotlight with a diagram that points to the elements that exist within a spotlight.](../images/spotlight-anatomy.png)
 
-The spotlight should **not** grab focus. Allow users to tab onto the spotlight in normal tabbing
-order. By default the tabbable elements in spotlight will be ordered directly after the target
-element to give screen-reader/keyboard users context about what the spotlight is related to.
+<SpotlightTable />
 
-The first focusable element in the spotlight should **always** be the dismiss button at the top of
-the card. This will happen automatically even when a show-more button is visually ahead of it. So
-product engineers shouldn't need to do any additional work.
+## Visual guidelines
 
-#### Multi step spotlights
+### Media
 
-The first spotlight in a tour should **not** grab focus. Allow users to tab onto the spotlight in
-normal tabbing order.
+Media should only be used to make messaging clearer for more complex features. For simple
+experiences, stick to text to avoid distracting the user.
 
-The second (and subsequent step) spotlights **should** grab focus. This is because screen-reader
-users have no other method of knowing where the new spotlight steps are shown.
+The cognitive load necessary for comprehension should determine the level of complexity.
 
-Once the tour completes, focus should be returned to the target element for the first step. This
-allows screen-reader users to easily perform the actions just taught to them via the spotlight tour.
+<br />
+<SpotlightVisualGuidelines />
+<br />
+
+### Color application
+
+![Example spotlight with a diagram that points to the background color then outlines that it should be the right collection color.](../images/color-application.png)
 
-## Content Guidelines
+- Use solid color for the background color to drive focus to the main UI elements
+- Incorporate the collection color into background color to further strengthen the color association
+  to the collection (see colors below)
+- Start with the color designated for each collection, then evenly distribute other brand colors to
+  the UI elements
+- Limit the use to no more than three different colors in a single composition
+- Different shades can be used to create contrast and spatial depth in the UI illustrations, but
+  avoid using too many shades within one composition
 
-## Headline
+### Collection background colors
+
+<br />
+<SpotlightCollectionBackgroundColors />
+<br />
 
-- Required. Begin with an active verb where possible.
-- Brief and direct; communicate the main benefit.
-- Limit to one line and use sentence case.
+## Content guidelines
+
+A successful spotlight can be understood in just a few seconds. Spotlight content should be as
+concise as possible, easy to scan, and only communicate essential information.
+
+### Messaging guidelines
+
+- Prioritize the most relevant information and if more context is needed, find a way to provide a
+  path to further learning
+- Don’t talk about things the user cannot see at that time
+
+#### Headline
+
+- 27 characters max
+- Start with an active verb
+- Clearly communicate intent
+- Focus on benefits rather than announcements
+- Personalize with words such as, “your” where it is relevant
+
+#### Body copy
+
+- 75 characters max
+- Brief and direct
+- Elaborate value

+
+#### Primary CTA
+
+- 24 characters max for single-step
+- 15 characters max for tour
+- Provide an obvious next action
+  - If used for dismissal, use “Done”
+  - Let them know where they’re going next when navigating to another screen “Go to Jira”
+  - Be explicit when activating UI components “Chat with Rovo” opens the Rovo panel
+  - Use “Learn more” when navigating to more detailed information
+  - For tours: start with “Next” and conclude the flow with “Done”

+
+#### Secondary CTA
+
+- Reserved for “Back” navigation in tours
+
+## Accessibility
 
-## Body
+- The headline is used as the accessible name for the spotlight dialog
+- Keep content concise and avoid motion that could be disruptive
+- Ensure the arrow and spotlight are not truncated by the browser bounds
 
-- Required. Briefly elaborate on the intent.
-- Avoid repeating the headline verb.
-- Two lines max. Focus on benefits and relevance.
-- Reference only visible elements.
+### Focus management
 
-## CTA
+For a **single-step spotlight** or the **first in a multi-step tour**, tabbing begins after the
+targeted element so the user is aware of what the spotlight is referring to. It follows a normal
+tabbing order, automatically starting with the "X" dismissal on the top right, even if a "…" show
+more is included ahead of it.
 
-- Required. One clear next action.
-- Avoid plan or feature names in CTAs.
-- For tours: “Next”, “Back”, “Done”.
-- For features: 1–3 words; “Done” is acceptable if no clear next action.
+Unless the first spotlight is dismissed with the "X," in a **multi-step tour** the second and third
+spotlights grab focus to continue the messaging narrative then return to the targeted element once
+complete so the user can perform the intended action.

package/dist/cjs/controllers/context.js

@@ -61,6 +61,26 @@ var SpotlightContext = exports.SpotlightContext = /*#__PURE__*/(0, _react.create
     setDismiss: function setDismiss() {
       return undefined;
     }
+  },
+  primaryAction: {
+    action: {
+      current: function current() {
+        return undefined;
+      }
+    },
+    setAction: function setAction() {
+      return undefined;
+    }
+  },
+  secondaryAction: {
+    action: {
+      current: function current() {
+        return undefined;
+      }
+    },
+    setAction: function setAction() {
+      return undefined;
+    }
   }
 });
 
@@ -106,6 +126,18 @@ var SpotlightContextProvider = exports.SpotlightContextProvider = function Spotl
   var setDismiss = function setDismiss(dismissFn) {
     dismissRef.current = dismissFn;
   };
+  var secondaryActionRef = (0, _react.useRef)(function () {
+    return undefined;
+  });
+  var setSecondaryAction = function setSecondaryAction(actionFn) {
+    secondaryActionRef.current = actionFn;
+  };
+  var primaryActionRef = (0, _react.useRef)(function () {
+    return undefined;
+  });
+  var setPrimaryAction = function setPrimaryAction(actionFn) {
+    primaryActionRef.current = actionFn;
+  };
   return /*#__PURE__*/React.createElement(SpotlightContext.Provider, {
     value: {
       card: {
@@ -125,6 +157,14 @@ var SpotlightContextProvider = exports.SpotlightContextProvider = function Spotl
         setUpdate: setUpdate,
         dismiss: dismissRef,
         setDismiss: setDismiss
+      },
+      primaryAction: {
+        action: primaryActionRef,
+        setAction: setPrimaryAction
+      },
+      secondaryAction: {
+        action: secondaryActionRef,
+        setAction: setSecondaryAction
       }
     }
   }, children);

package/dist/cjs/ui/body/index.js

@@ -18,7 +18,7 @@ var styles = {
 /**
  * __SpotlightBody__
  *
- * `SpotlightBody` is required in a `Spotlight`. The content should be brief and direct to elaborate on the intent.
+ * `SpotlightBody` is required in a spotlight. The content should be brief and direct to elaborate on the intent.
  *
  */
 var SpotlightBody = exports.SpotlightBody = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {

package/dist/cjs/ui/popover-content/index.js

@@ -55,15 +55,24 @@ var popperPlacementMap = {
  *
  * A `PopoverContent` is the element that is shown as a popover.
  */
-var PopoverContent = exports.PopoverContent = function PopoverContent(_ref) {
-  var children = _ref.children,
-    placement = _ref.placement,
-    _ref$isVisible = _ref.isVisible,
-    isVisible = _ref$isVisible === void 0 ? true : _ref$isVisible,
-    _ref$shouldDismissOnC = _ref.shouldDismissOnClickOutside,
-    shouldDismissOnClickOutside = _ref$shouldDismissOnC === void 0 ? true : _ref$shouldDismissOnC,
-    dismiss = _ref.dismiss,
-    testId = _ref.testId;
+var PopoverContent = exports.PopoverContent = function PopoverContent(props) {
+  var children = props.children,
+    placement = props.placement,
+    _props$isVisible = props.isVisible,
+    isVisible = _props$isVisible === void 0 ? true : _props$isVisible,
+    _props$shouldDismissO = props.shouldDismissOnClickOutside,
+    shouldDismissOnClickOutside = _props$shouldDismissO === void 0 ? true : _props$shouldDismissO,
+    dismiss = props.dismiss,
+    back = props.back,
+    testId = props.testId;
+
+  /**
+   * A user should only be able to pass a `done` or a `next`. Not both.
+   * The type is set up as a discriminant union. So, we need a typeguard
+   * here to destructure it properly.
+   */
+  var done = 'done' in props ? props.done : undefined;
+  var next = 'next' in props ? props.next : undefined;
   var updateRef = (0, _react.useRef)(function () {
     return new Promise(function () {
       return undefined;
@@ -73,14 +82,34 @@ var PopoverContent = exports.PopoverContent = function PopoverContent(_ref) {
   var _useContext = (0, _react.useContext)(_context.SpotlightContext),
     heading = _useContext.heading,
     popoverContent = _useContext.popoverContent,
-    card = _useContext.card;
+    card = _useContext.card,
+    primaryAction = _useContext.primaryAction,
+    secondaryAction = _useContext.secondaryAction;
   var focusWithin = (0, _useFocusWithin.useFocusWithin)(popoverContent.ref);
   (0, _react.useEffect)(function () {
     popoverContent.setRef(ref);
   }, [ref, popoverContent]);
+  (0, _react.useEffect)(function () {
+    if (!done && !next) {
+      return;
+    }
+    if (done) {
+      primaryAction.setAction(done);
+      return;
+    } else if (next) {
+      primaryAction.setAction(next);
+      return;
+    }
+  }, [done, next, primaryAction]);
   (0, _react.useEffect)(function () {
     popoverContent.setDismiss(dismiss);
   }, [dismiss, popoverContent]);
+  (0, _react.useEffect)(function () {
+    if (!back) {
+      return;
+    }
+    secondaryAction.setAction(back);
+  }, [back, secondaryAction]);
   (0, _react.useEffect)(function () {
     card.setPlacement(placement);
   }, [placement, card]);
@@ -106,10 +135,10 @@ var PopoverContent = exports.PopoverContent = function PopoverContent(_ref) {
   return /*#__PURE__*/React.createElement(_popper.Popper, {
     offset: offset,
     placement: popperPlacementMap[placement]
-  }, function (_ref2) {
-    var localRef = _ref2.ref,
-      style = _ref2.style,
-      update = _ref2.update;
+  }, function (_ref) {
+    var localRef = _ref.ref,
+      style = _ref.style,
+      update = _ref.update;
     if (!isVisible) {
       return;
     }

package/dist/cjs/ui/primary-action/index.js

@@ -11,6 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _context = require("../../controllers/context");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
   root: "_2rko12b0 _1dqonqa1 _189ee4h9 _1h6dz9xs _syaz15cr _bfhkcdhy _irr31bsc _1di61b6k"
@@ -27,12 +28,17 @@ var SpotlightPrimaryAction = exports.SpotlightPrimaryAction = /*#__PURE__*/(0, _
     onClick = _ref.onClick,
     children = _ref.children,
     testId = _ref.testId;
+  var _useContext = (0, _react.useContext)(_context.SpotlightContext),
+    primaryAction = _useContext.primaryAction;
+  var done = function done(event) {
+    primaryAction.action.current(event);
+  };
   return /*#__PURE__*/React.createElement(_compiled.Pressable, {
     "aria-label": ariaLabel,
     ref: ref,
     testId: testId,
     xcss: styles.root,
-    onClick: onClick
+    onClick: onClick || done
   }, /*#__PURE__*/React.createElement(_compiled.Text, {
     as: "span"
   }, children));

package/dist/cjs/ui/secondary-action/index.js

@@ -11,6 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
 var React = _react;
 var _runtime = require("@compiled/react/runtime");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _context = require("../../controllers/context");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 var styles = {
   root: "_2rko12b0 _syaz15cr _bfhkcdhy _irr31bsc _1di61b6k"
@@ -18,7 +19,7 @@ var styles = {
 /**
  * __Spotlight secondary action__
  *
- * `SpotlightSecondaryAction` is not required for all `Spotlight` components. It should supplement the SpotlightPrimaryAction.
+ * `SpotlightSecondaryAction` is not required for all spotlight components. It should supplement the `SpotlightPrimaryAction`.
  * It is intended to be used to go back to the previous step in multi step spotlight tours, or other similar actions.
  *
  */
@@ -27,12 +28,17 @@ var SpotlightSecondaryAction = exports.SpotlightSecondaryAction = /*#__PURE__*/(
     onClick = _ref.onClick,
     children = _ref.children,
     testId = _ref.testId;
+  var _useContext = (0, _react.useContext)(_context.SpotlightContext),
+    secondaryAction = _useContext.secondaryAction;
+  var back = function back(event) {
+    secondaryAction.action.current(event);
+  };
   return /*#__PURE__*/React.createElement(_compiled.Pressable, {
     "aria-label": ariaLabel,
     ref: ref,
     testId: testId,
     xcss: styles.root,
-    onClick: onClick
+    onClick: onClick || back
   }, /*#__PURE__*/React.createElement(_compiled.Text, {
     as: "span"
   }, children));

package/dist/cjs/ui/show-more-control/index.js

@@ -20,7 +20,7 @@ var styles = {
 /**
  * __SpotlightShowMoreControl__
  *
- * SpotlightShowMoreControl allows the user to close the `Spotlight`.
+ * `SpotlightShowMoreControl` provides follow-up actions and customizations for the spotlight.
  *
  */
 var SpotlightShowMoreControl = exports.SpotlightShowMoreControl = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {