Components

Modal Split

Modal split is a focused-experience, introduced as an overlay to explain to customers concepts or actions within the product.

Basic usage

First, import the component.

import {ModalSplit} from '@pleo-io/telescope'

Then use it, like so:

API reference

Prop	Type	Default
`_dragX`	MotionValue<number>
`_dragY`	MotionValue<number>
`allowPinchZoom`	boolean
`animate`	enum
`aria-label`	string
`aria-labelledby`	string
`children`	enum
`custom`	any
`dangerouslyBypassFocusLock`	boolean
`dangerouslyBypassScrollLock`	boolean
`dangerouslySetZIndexValue`	number
`data-framer-appear-id`	string
`data-framer-portal-id`	string
`drag`	enum
`dragConstraints`	enum
`dragControls`	any
`dragDirectionLock`	boolean
`dragElastic`	enum
`dragListener`	boolean
`dragMomentum`	boolean
`dragPropagation`	boolean
`dragSnapToOrigin`	enum
`dragTransition`	InertiaOptions
`exit`	enum
`globalTapTarget`	boolean
`ignoreStrict`	boolean
`inherit`	boolean
`initial`	enum
`initialFocusRef`	React.RefObject<any>
`isOpen`	boolean
`layout`	enum
`layoutCrossfade`	boolean
`layoutDependency`	any
`layoutId`	string
`layoutRoot`	boolean
`layoutScroll`	boolean
`onAnimationComplete`	function
`onAnimationStart`	function
`onBeforeLayoutMeasure`	function
`onDirectionLock`	function
`onDismiss`	function
`onDrag`	function
`onDragEnd`	function
`onDragStart`	function
`onDragTransitionEnd`	function
`onHoverEnd`	function
`onHoverStart`	function
`onLayoutAnimationComplete`	function
`onLayoutAnimationStart`	function
`onLayoutMeasure`	function
`onMeasureDragConstraints`	function
`onPan`	function
`onPanEnd`	function
`onPanSessionStart`	function
`onPanStart`	function
`onTap`	function
`onTapCancel`	function
`onTapStart`	function
`onUpdate`	function
`onViewportEnter`	ViewportEventHandler
`onViewportLeave`	ViewportEventHandler
`propagate`	PropagateOptions
`ref`	any
`transformTemplate`	TransformTemplate
`transition`	enum
`values`	{ [key: string]: MotionValue<number> \| MotionValue<string>; }
`variants`	Variants
`viewport`	ViewportOptions
`whileDrag`	enum
`whileFocus`	enum
`whileHover`	enum
`whileInView`	enum
`whileTap`	enum

Information:

Direct children should be ModalSplit.Content and ModalSplit.IllustrationContainer only.

ModalSplit.Content

The container for the left hand side content of the modal.

Prop	Type	Default
`children`	enum

ModalSplit.Body

A body container that allows long content to scroll within the modal.

Prop	Type	Default
`children`	enum

Information:

Should contain all left hand side content of the modal except for the StepIndicator, Footer and Actions.

ModalSplit.Title

This component doesn't accept any custom props.

Information:

Should be placed within ModalSplit.Body to allow for correct padding and scrolling behaviour.

ModalSplit.Text

This component doesn't accept any custom props.

ModalSplit.Actions

This component doesn't accept any custom props.

Information:

Should contain only the ModalSplit.NextButton and/or ModalSplit.BackButton.

ModalSplit.BackButton

Prop	Type	Default
`as`	any
`destructive`	boolean
`disabled`	boolean
`download`	any
`forwardedAs`	any
`fullWidth`	boolean
`href`	string
`hrefLang`	string
`inherit`	boolean
`loading`	boolean
`loadingText`	string
`media`	string
`ping`	string
`referrerPolicy`	string
`rel`	string
`skeleton`	boolean	false
`target`	string
`to`	string
`tooltipProps`	Omit<TooltipProps, "children">

ModalSplit.NextButton

Prop	Type	Default
`as`	any
`destructive`	boolean
`disabled`	boolean
`download`	any
`forwardedAs`	any
`fullWidth`	boolean
`href`	string
`hrefLang`	string
`IconRight`	React.ComponentType
`inherit`	boolean
`loading`	boolean
`loadingText`	string
`media`	string
`ping`	string
`referrerPolicy`	string
`rel`	string
`skeleton`	boolean	false
`target`	string
`to`	string
`tooltipProps`	Omit<TooltipProps, "children">

ModalSplit.Footer

This component doesn't accept any custom props.

ModalSplit.IllustrationContainer

The container for the right hand side illustration for the modal.

This component doesn't accept any custom props.

ModalSplit.Illustration

The container for the Illustration.

This component doesn't accept any custom props.

ModalSplit.Photograph

The container for the photograph shown on the modal's right half.

This component doesn't accept any custom props.

ModalSplit.StepIndicator

Prop	Type	Default
`activeStep`*	string
`onClickStep`	function
`steps`*	ModalSplitStep[]

ModalSplit.Steps

Prop	Type	Default
`activeStepId`*	string

Information:

Should be placed inside of ModalSplit.Content and contain only ModalSplit.Steps as children.

ModalSplit.Step

Prop	Type	Default
`stepId`*	string

Information:

Should always be a direct child of a ModalSplit.Steps.

useModalSplitSteps

We expose a dedicated hook to manage the steps of the modal split.

const steps = [{stepId: 'step-1'}, {stepId: 'step-2'}]
const {activeStep, setActiveStep, nextStep, previousStep} = useModalSplitSteps({
    steps: steps,
    initialActiveStep: 'step-1',
})

Prop	Type	Default
`activeStep`	string
`setActiveStep`	function
`nextStep`	function
`previousStep`	function

Didn't find what you were looking for?

Let us know in #team-design-systems or make a request.

Edit this page

On this page