Fullscreen takeover

Fullscreen takeovers provide a focused, full-page experience that purposefully interrupt the user flow.

Overview

Resources

Install

yarn add @camp/fullscreen-takeover

Upgrading to Next Gen

• 🚫 No more anchor: Because the new fullscreen takeover is truly fullscreen, the implementation is a much more standard portal experience.
• 🧹 Simpler appearance: The new fullscreen takeover no longer has the inset appearance, making it more lightweight.

New implementation

Previously, fullscreen takeover was rooted inside an anchor component. You no longer need the anchor, and the fullscreen takeover opens in a highly z-indexed portal, much like a fullscreen modal would.

import { Button } from '@camp/button';
import { Text } from '@camp/text';
import { Space } from '@camp/tokens';
import {
  FullscreenTakeover,
  FullscreenTakeoverHeader,
  FullscreenTakeoverFooter,
  FullscreenTakeoverBody,
  FullscreenTakeoverTitle,
} from '@camp/fullscreen-takeover';
 
export default function () {
  const [takeoverIsOpen, setTakeoverIsOpen] = useState(args.isVisible);
 
  useEffect(() => {
    setTakeoverIsOpen(args.isVisible);
  }, [args.isVisible]);
 
  function handleDismiss() {
    setTakeoverIsOpen(false);
  }
 
  return (
    <div style={{ height: '100vh', width: '100%' }}>
      <FullscreenTakeover
        {...args}
        onDismiss={handleDismiss}
        isVisible={takeoverIsOpen}
        rootId="root"
      >
        <FullscreenTakeoverHeader>
          <FullscreenTakeoverTitle>Fullscreen Takeover!</FullscreenTakeoverTitle>
        </FullscreenTakeoverHeader>
        <FullscreenTakeoverBody>
          <div style={{ height: '100vh', position: 'relative' }}>
            <Text type="body">Hello Takeover</Text>
            <div style={{ position: 'absolute', bottom: 0 }}>
              <Text type="body">Bye-Bye Takeover</Text>
            </div>
          </div>
        </FullscreenTakeoverBody>
        <FullscreenTakeoverFooter>
          <Button
            appearance="secondary"
            children="Cancel"
            onClick={handleDismiss}
            style={{ marginRight: Space['3'] }}
          />
          <Button children="Ship it" onClick={handleDismiss} />
        </FullscreenTakeoverFooter>
      </FullscreenTakeover>
      <div style={{ height: '100%', flexGrow: 1, position: 'relative' }} id="root">
        <Button
          appearance="text"
          style={{
            position: 'absolute',
            left: '50%',
            top: '50%',
            transform: 'translate(-50%, -50%)',
          }}
          onClick={() => setTakeoverIsOpen(!takeoverIsOpen)}
        >
          Open Takeover!
        </Button>
      </div>
    </div>
  );
}

Migration steps

1. Update import path: Replace the old fullscreen-takeover imports with @camp/fullscreen-takeover.
2. Remove any anchor references: Nothing like <FullscreenTakeover.Anchor /> is needed anymore.
3. Remove inset background references: insetBackground is no longer a prop on the body component.

Variations

Visible

You can set the fullscreen takeover to be visible on load like so:

import { FullscreenTakeover } from '@camp/fullscreen-takeover';
 
...
<FullscreenTakeover isVisible />
...

No animation

You can set it to not animate by setting the noAnimation prop:

import { FullscreenTakeover } from '@camp/fullscreen-takeover';
 
...
<FullscreenTakeover noAnimation />
...

Custom Z-Index

The Fullscreen Takeover is z-indexed very high by default (10000000000). You can override this using the zIndex prop.

import { FullscreenTakeover } from '@camp/fullscreen-takeover';
 
...
<FullscreenTakeover zIndex={9999999999} />
...

Usage

Best practices

• Use a fullscreen takeover when the user needs to focus exclusively on a single task without distractions. This is ideal for complex workflows, multiple step tasks, or reviewing content that requires a lot of screen space. For things like multi-step processes, the immersive experience of stripping away extra UI elements improves focus and minimizes distractions and encourages completion.
• Fullscreen takeovers can be used across multiple areas of the platform (e.g., explore page, campaign flow, with automations). They are not tied to a specific location or URL.

Considerations

• User flow: Ensure clear exit points (e.g., “Close,” “Save,” or “Go Back”)
• Accessibility: A fullscreen view can be overwhelming; provide keyboard controls, clear labels and clear navigation
• Performance: Optimize loading times to avoid user frustration. If a lot of loading is necessary, consider a dedicated page where the user experience is more predictable.

Fullscreen takeover vs. dedicated page

Unless there are compelling reasons—such as focused complex steps, the need for immersion, or the ability to start from any point within the platform—consider using a new page instead.

The decision between a dedicated page (with a URL) and a fullscreen takeover depends on the context, user needs, and the nature of the task. Below are the key benefits of each approach, along with considerations to help you determine which option is more appropriate.

When to choose a dedicated page

Permanence and Shareability

• URL: A dedicated page has a unique URL, allowing users to bookmark, share, or revisit the page later. This is particularly useful for workflows that users may need to return to frequently.
• Example: A dashboard view, a report or a campaign page that users can bookmark, revisit and make edits to.

Navigation Context

• Navigation: A dedicated page retains the main navigation, providing users with a sense of context and allowing them to switch between platform pages easily.
• Example: Users can navigate to other sections of the platform without losing their place in the current workflow.

Performance and Scalability

• Predictable Loading: Dedicated pages often have predictable loading times and performance characteristics, making them easier to optimize for large-scale use.
• Example: A reporting dashboard, expectation of loading is more familiar than in a bespoke display.

Content guidelines

Fullscreen takeover headers should be clearly and consisely written, in sentence case and with no punctuation at the end. Avoid unneccessary or ambiguous words, but include articles like “a” and “the,” as they provide clarity especially in translating.

Accessibility

Keyboard support

• From the trigger that launches the fullscreen takeover, use space or enter to open
• tab will first focus on the drawer dismiss (close) in the header before following the tab order in the body, followed by the fullscreen takeover footer actions
• space or enter can also be used to select an option from the fullscreen takeover footer

Similar components

Modal

A modal window creates a mode that disables the main window but keeps it visible with the modal window as a child window in front of it.

Drawer

A panel that slides in from the edge of the screen to display options or information.